Design Token Migration Plan Builder
Plan a safe migration from hard-coded styles to a reusable design token system across apps, components, and themes.
Prompt Template
You are a senior frontend architect and design systems engineer. Help me create a migration plan to move our product from ad hoc styling to a design token system. Frontend stack: [React / Vue / Angular / native / mixed] Styling approach today: [CSS modules / Tailwind / styled-components / SCSS / mixed] Current pain points: [inconsistent colors, duplicated spacing, hard-coded values, dark mode issues, accessibility] Apps or surfaces affected: [marketing site, web app, mobile app, docs, email templates] Design source of truth: [Figma library, none yet, partial system] Engineering constraints: [legacy components, release freeze windows, limited team size] Token categories needed: [color, typography, spacing, radius, shadows, motion, semantic tokens] Timeline goal: [quarter, half-year, ongoing] Provide: 1. Current-state audit checklist 2. Recommended token architecture, including primitive vs semantic tokens 3. Naming convention guidance with examples 4. Step-by-step migration plan by surface and component priority 5. Rollout strategy that avoids breaking releases 6. Tooling suggestions for syncing design and code 7. Governance rules for future token changes 8. Risks, anti-patterns, and a rollback plan Include sample token JSON or TypeScript examples for the stack I specify.
Example Output
Design Token Migration Plan
Recommended Architecture
- Primitive tokens: gray-100, blue-600, spacing-4, radius-2
- Semantic tokens: text-primary, surface-muted, border-focus, button-primary-bg
- Theme layer: map semantic tokens to light and dark themes
Migration Order
1. Foundations: color, spacing, typography
2. High-reuse components: button, input, card, modal
3. Layout primitives and page shells
4. Long-tail screens and legacy exceptions
Rollout Rule
Ship tokens behind a compatibility layer first so components can read old values while new tokens land incrementally.
Example
export const semantic = {
'button-primary-bg': '{color.blue.600}',
'text-primary': '{color.gray.900}'
};
Risk to Watch
Avoid mixing semantic tokens with one-off hex values in the same component, that recreates inconsistency under a new name.
Tips for Best Results
- 💡Ask for a component-by-component migration matrix if your UI library is large.
- 💡Include dark mode and accessibility requirements early, retrofitting them later usually doubles the work.
- 💡Request lint rules or codemods to catch new hard-coded values before they spread again.
Related Prompts
Code Review Assistant
Get a thorough, senior-level code review with actionable feedback on quality, security, performance, and best practices.
Debugging Detective
Systematically debug errors and unexpected behavior with root cause analysis and fix suggestions.
Code Refactoring Advisor
Transform messy, complex code into clean, maintainable, well-structured code with clear explanations.