Use Autohand Code with design system skill guidance to extract tokens, component variants, and migration notes from existing UI.
Standardize UI color, spacing, type, and components
Design systems Build and change Implementation Code
autohand -p "Create design system tokens and component variants from the existing UI patterns"
Shared tokens, component variant guidance, and a migration plan for inconsistent UI.
Create design system tokens with Autohand Code is a design-engineering workflow that extracts shared tokens, component variants, spacing rules, typography, and migration notes from an existing UI. ### At a glance | Question | Answer | | --- | --- | | Best for | inconsistent UI colors, duplicated component styling, ad hoc Tailwind classes, and teams preparing a component library | | Primary inputs | Existing design files, components, or CSS tokens; Brand constraints, dark mode requirements, and accessibility targets; Component variants and screens with the most inconsistency | | Autohand Code returns | Shared tokens, component variant guidance, and a migration plan for inconsistent UI. | | Avoid when | the product has no stable visual direction or only one isolated component needs styling | ### How Autohand Code handles this workflow 1. Audits existing colors, spacing, type, radius, and component states. 2. Proposes tokens and variants that match current product direction. 3. Updates a small representative surface before broad migration. 4. Documents migration order and places where design decisions are still needed. ### Best inputs - Existing design files, components, or CSS tokens - Brand constraints, dark mode requirements, and accessibility targets - Component variants and screens with the most inconsistency ### Strong prompt autohand -p "Create design system tokens and component variants from the existing UI patterns" ### Autohand Code CLI options - Use `/skills use tailwind-design-system` for token and component-system patterns. - Run `autohand -p "Create design system tokens and component variants from the existing UI patterns"` with target components. - Use browser verification after token changes to check light, dark, mobile, and desktop states. ### Review before accepting Review tokens, variant naming, representative component changes, accessibility checks, and migration notes. ### Source and validation signals Autohand AI maintains this workflow as first-party product guidance for Autohand Code. Use the [Autohand CLI Playbook](https://github.com/autohandai/code-cli/blob/main/docs/AUTOHAND_PLAYBOOK.md), [CLI reference](/docs/working-with-autohand-code/cli-reference.html), and [configuration reference](https://github.com/autohandai/code-cli/blob/main/docs/config-reference.md) when choosing between interactive mode, command mode, auto-mode, feature-enabled /goal, /settings, skills, MCP, and permission settings. The related resources below link to product docs and tutorials for the workflow, and the final answer should name repository-specific files, commands, outputs, or docs that a reviewer can verify. ### Frequently asked questions ### What is Create design system tokens with Autohand Code? Create design system tokens with Autohand Code is a design-engineering workflow that extracts shared tokens, component variants, spacing rules, typography, and migration notes from an existing UI. ### When should a team use Create design system tokens? Use it when UI consistency should become a reusable system instead of repeated one-off styling. ### What evidence should reviewers check for Create design system tokens? Review tokens, variant naming, representative component changes, accessibility checks, and migration notes.
Skill Skilled: Tailwind Design System Use token and component-system guidance. https://skilled.autohand.ai/skill/tailwind-design-system Guide Frontend UI Skill Apply UI conventions with Autohand Code. /docs/guides/skills/frontend-ui.html Guide Agent Skills Load the right design skill for the project. /docs/working-with-autohand-code/agent-skills.html