A guide for AI agents building design systems
An open-source skill for planning, building and reviewing a design system.
Open source · full-build validation pending
My role. Authored the skill and reference guides.
Workflow
- Discovery through verification
- 6 stages
- Base system, then page templates
- 2 previews
Give the agent a process
The playbook covers discovery, tokens, components, delivery and governance. It loads relevant references when needed. Its intended audience builds B2B, B2C and internal products at 10,000+ user scale.
ShiftCart is an example grocery system built with it. Its foundations page is generated from the token files, so the colour ramps and type roles shown there are the tokens themselves.
Review before implementation
The first HTML preview covers the base system and component inventory. The second covers page templates. Both precede React implementation.
In the ShiftCart example the inventory is generated from a manifest, and the build fails if a listed component has no markup in the preview. Each page template carries notes explaining the decisions it makes.
The intended deliverables include tokens, components, automated checks, Storybook and reusable agent guidance.
Keep the validation limits visible
Discovery has been tested several times. A complete build has not yet validated the full workflow; token compilation and Storybook remain areas to test.