Design System

Takes screenshots, mockups, Figma URLs, or live site references and generates two files in lockstep: a design.md with YAML tokens in Google's open format (for the agent to implement from) and a self-contained design.html that renders every token and component live in the browser (for humans). It walks through a structured interview,what colors map to primary vs. accent, what the spacing scale should be, how rounded corners should feel,then writes both artifacts so they never drift. The approach is opinionated: if your references conflict or feel thin, it will say so and ask you to pick a direction. Useful when you need to move from visual inspiration to a token spec an agent can actually build against without guessing.

Install to Claude Code

npx -y skills add buildgreatproducts/builder-os --skill design-system --agent claude-code