What problem does it solve? After a Design Brief is finished, teams still need to manually translate Product-Spec.md and Design-Brief.md into full design files, which is slow and error-prone. This Skill automates that translation by driving a design tool MCP (Pencil or Figma) to produce every page, state variant, component, and design variable defined in the documents. ## Core Features & Use Cases - Full page coverage: Extracts the page list from the Spec's UI layouts, feature requirements, and user flows so every UI-bearing feature gets a design page. - State variants and reusable components: Builds shared components first, then covers default, empty, loading, error, and active states for each page. - Design variables from the Brief: Applies colors, typography, spacing, and corner-radius systems directly into the design tool. - Use Case: After finishing a Design Brief for a new app, run this Skill to generate the complete Figma or Pencil design set, then hand off to the dev-planner step. ## Quick Start Ask the AI to read Product-Spec.md and Design-Brief.md and generate the full set of design deliverables using the connected design tool MCP.
