build-design-system

build-design-system turns the UI an app already ships into a design system: semantic tokens, one canonical component per family, component docs, checks that fail on drift, and one pilot flow moved onto it and compared against before screenshots.

Use when someone wants a design system built from the UI an app already ships, or one phase of it, such as "extract tokens from the app", "add states to our Button", "replace the hardcoded colors with tokens" or "start a design system". Moving screens onto an existing system's components is migrate-design-system. A vague whole-app ask goes to design-system-boss.

1. Frame: writes down the complaint in your words, the first visible change that answers it, and the pilot flow.
2. Inventory and baselines: lists every surface and state, counts raw values such as #fff, text-gray-500 and p-[13px], and screenshots every surface at 390 and 1280 wide before the first edit, with every write the app sends blocked.
3. Tokens: clusters raw values by role and names them by purpose, using token-mapping until every value maps to a role, a merge or a listed exception.
4. Components: builds the most-used family end to end first and documents each with component-docs.
5. Checks: copies check-system.mjs into the repo. A rule counts only once it has been seen failing on a planted violation.
6. Pilot: moves the pilot flow with a codemod, captures it again and diffs it against the baseline. An unexplained difference is a defect.
7. Readiness: five audits that must hold before any migration fans out.
8. Handoff: reruns the counts and reports what the system covers in numbers.

The system, a CI check that exits 0 on a clean clone, the pilot flow on the system, and a report where every number names the command that produced it. It offers the migration with its size and does not start it.

• Invent a color, font, shadow, gradient or motion value the app does not already have, unless you chose a design source.
• Edit a baseline to make a diff pass.
• Call its own work verified.

build-design-system installs with the other five design.how skills, for Claude Code, Cursor, Codex and any agent that reads Agent Skills. The install command and the .zip are on Skills, free after an email signup.

• design-system-boss: Say what is wrong with your UI in plain words; it picks a playbook and runs the other design.how skills in order.
• migrate-design-system: Moves every screen of an app onto an existing design system with many agents, each screen checked against its before screenshot.
• token-mapping: Reports how the hardcoded colors and sizes in your code map onto your design tokens, by purpose. It never edits.
• ui-review: Reviews a screen, flow or running build, accessibility included, and ranks what is broken with evidence.
• component-docs: Writes one component's documentation from its code and two real uses, with rules next to the examples.