Steps
Inventory and specs sit together. Implementation is the build, not a prompt. Docs and rollout close it.
Audit
What already repeats, what conflicts, what to keep. Screenshots. Prioritize the mess.
Tokens
Color, type, space with semantic names. Start from what you have.
Components
Foundations first (button, input). Spec every state, including disabled and error. Build in design and code; that part is the team, not a prompt.
- Visual design
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
uicomponentsspecification - Visual design
Component Prioritization Matrix
Identify, inventory, and prioritize which design system components to build first based on usage, impact, and dependencies.
design-systemcomponent-libraryprioritization
Docs and rollout
How to use it, when not to, and how old screens adopt it without a big-bang rewrite.
- Visual design
Design System Documentation
Create comprehensive documentation for design system components including usage guidelines, code examples, and best practices.
design-systemdocumentationcomponent-library - Visual design
Design System Rollout Strategy
Plan how to roll out a design system to teams including migration, training, adoption, and support strategies.
design-systemrolloutadoption
Frequently asked questions
Where does accessibility fit?
In the component spec. Run an accessibility audit if the existing product is already a barrier. Do not wait for the new library to save you.
We only need a Figma library. Skip the rest?
Then you do not need this workflow. A rename of components without tokens, states, and a rollout is a file, not a system.
How long does this take?
Months. Ship foundations first: color, type, button, input. Do not announce a system the day you invent the first token.