Build a Design System From Scratch
Tokens first, then the components that spend them. In this order, nothing gets built twice.
The steps
Your agent works through these in order, and won't break a step it already finished.
Semantic Color Tokens
Name colours by the job they do, so changing a theme is one edit rather than a sweep.
Typography Scale
Replace ad-hoc font sizes with a small set of named type steps.
Spacing Scale
Reduce the app's spacing to a small set of steps that repeat across every surface.
Radius Scale
Fix the app's corner radii to a few steps that agree with one another.
Shadow Scale
Replace ad hoc shadows with a small set tied to what each surface actually is.
Border System
Give borders defined jobs so structure, focus, and selection never look the same.
Motion Token System
Give the app one shared vocabulary of durations and easing curves instead of ad hoc numbers.
Icon System
Draw every icon from one set, at one set of sizes, with one rule for accessible naming.
Component Inventory
Keep a searchable record of every component, its variants, its owner, and where it is used.
How to use this collection
One link, several features, one coherent document. Your agent inspects your app once — not once per feature — then implements the set in order, checking after each step that it hasn't broken the last.
Pro users build their own from any features in the library, including their own customized versions.
Go Pro — $28/month