What problem does it solve? Turning visual designs into implementation-ready component specs is error-prone: frontend and backend drift apart, styling values get hardcoded, and design system names get replaced with generic terms. This Skill converts wireframes and mockups into a single styled DSL file that hi-fi design, API contract, and UI engineering phases all read from, keeping every downstream artifact consistent. ## Core Features & Use Cases - Two-phase generation: First extract a layout-only component hierarchy from wireframes, then merge it with the project's theme tokens to produce a fully styled DSL. - Design system enforcement: Every component name comes from the design system's vocabulary table and every color is a semantic theme token; raw palette steps and hex literals are rejected, and missing components are logged in component-gaps.md instead of invented. - Platform-neutral output: The emitted YAML describes structure, semantics, and styling intent without framework syntax, so one file can be translated into both web and mobile implementations. - Use Case: After the ux-designer produces wireframes in Phase 2, run this role to generate design-artifacts/styled-dsl.yaml, which Phase 2.25 hi-fi screens, the Phase 2.5 API contract, and the ui-engineer in Phase 3 all consume as the source of truth. ## Quick Start Ask the agent to convert the approved wireframes into design-artifacts/styled-dsl.yaml using the project's design system and theme tokens.
