What problem does it solve? Starting a new UI feature without a shared design system leads to inconsistent colors, ad-hoc components, and rework. This Skill structures the design phase so wireframes and component specs are produced from a single semantic token source before any code is written. ## Core Features & Use Cases - Design system bootstrap: Reads or creates docs/design-system/MASTER.md and tokens.json with ten standard sections covering colors, typography, spacing, and accessibility. - Stack-native theme sync: Maps semantic tokens to one code target such as CSS custom properties, Flutter ThemeData, Unity ScriptableObject, or JSON, and records SHA-256 hashes in tokens.lock.json. - Gated design workflow: Spawns a ui-designer role to produce wireframes and component specs, then pauses for user approval before handing off to frontend implementation. - Use Case: You want to add a settings page to a Flutter app. Run the design workflow to load the brand tokens, generate wireframes and component specs, approve them, and hand off to implementation with a consistent theme. ## Quick Start Ask the agent to run the design workflow for your feature, for example: start the design workflow for a new dashboard settings page.
