Claude Code export-css for design system custom properties
Extract color, type, spacing, shadow, and radius values from code into CSS custom properties with separate dark mode overrides.
中文Install in Claude Code
Use Claude Code with the existing design tokens and their dark theme overrides. The skill needs access to the project code.
- Review `.claude/skills/export-css/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/export-css/` in your project and save the reviewed file as `.claude/skills/export-css/SKILL.md`.
- Start Claude Code from that project's root, then select `/export-css` in the slash menu.
Example task
Fixture token-18 contains {surface: '#FFFFFF', darkSurface: '#111827', spacing: '8px'} in the theme configuration. The page already uses these values.What to check
Map {surface: '#FFFFFF', spacing: '8px'} to color and spacing properties in :root. Put the dark surface value #111827 in its own @media override.
Original SKILL.md on GitHub · Updated
Frequently asked question
Should I choose new colors during export?
Extract values from the current implementation to preserve the design system. Return separate theme overrides so their sources can be checked.