What is required to run a design spec?

It requires an active Brand Dossier for the target business unit and a feature context (usually a fact-find document) to ensure brand alignment.

Does this skill write application code?

No, this skill is restricted to design and specification. It creates the blueprint for UI tasks, which are then implemented by specialized build skills.

How does it handle different brand themes?

It uses a business registry to resolve the target app to a specific theme package, loading the corresponding assets, recipes, and tokens automatically.

Does it support accessibility standards?

Yes, it includes WCAG AA compliance checks, defining focus orders, ARIA roles, contrast requirements, and touch target sizes in every spec.

Frontend Design Specification Architect

Name: Frontend Design Specification Architect
Author: PeterCowling

byPeterCowling

0•

Design Tools

Translates feature requirements into concrete frontend design specifications mapped to design systems, theme tokens, and brand identity.

The lp-design-spec skill bridges the gap between initial discovery and technical implementation by generating detailed design specifications. It analyzes your codebase, theme tokens, and brand identity dossiers to produce a comprehensive map of components, semantic tokens, and layout decisions. By grounding every UI choice in established brand language and design profiles, it ensures visual consistency across applications while providing developers with high-confidence implementation paths that adhere to accessibility and responsive design standards.

Key Features

01UI auditing for existing components to identify pattern violations or accessibility gaps

02Integration with Brand Identity Dossiers to enforce consistent visual language

03Brand bootstrapping mode for onboarding new business units into the design system

04Contextual layout generation using mobile-first CSS patterns and spacing tokens

050 GitHub stars

06Automated mapping of features to semantic theme tokens and design system components

Use Cases

01Specifying the UI architecture for a new page or complex feature before coding starts

02Resolving low-confidence UI tasks by defining clear design decisions and token bindings

03Performing a visual refresh or rebrand across multiple themed applications

Key Features

01UI auditing for existing components to identify pattern violations or accessibility gaps

02Integration with Brand Identity Dossiers to enforce consistent visual language

03Brand bootstrapping mode for onboarding new business units into the design system

04Contextual layout generation using mobile-first CSS patterns and spacing tokens

050 GitHub stars

06Automated mapping of features to semantic theme tokens and design system components

Use Cases

01Specifying the UI architecture for a new page or complex feature before coding starts

02Resolving low-confidence UI tasks by defining clear design decisions and token bindings

03Performing a visual refresh or rebrand across multiple themed applications