What it does
Turns an approved design into a consistent, typed component. Measures design-system coverage per screen, matches raw layer values against your design tokens by exact equality, generates the Vue 3 or React component with its story and snapshot test, extracts a component's real public interface, reconciles it against the design's properties, and designs the API contract and client SDK stubs the component calls. Provided-data: it reads the values in your tool call and nothing else.
Example prompts
- Here is my per-screen component inventory - which screens are drifting away from the design system, and which one-offs recur most?
- These are the node's layers and our token file. Which values have no token, and what would the Vue component look like?
- Generate the React component, its story and its snapshot test from these layers and tokens.
