God Export Tokens — Design skill for Claude Code
Export the current design system as DTCG tokens, CSS variables, Tailwind v4 theme and DESIGN.md.
How to install God Export Tokens
Installs to ~/.claude/skills/cumabozkurt-god-of-design-god-export-tokens/SKILL.md
mkdir -p ~/.claude/skills/cumabozkurt-god-of-design-god-export-tokens && curl -fsSL https://raw.githubusercontent.com/cumabozkurt/god-of-design/HEAD/commands/god-export-tokens.md -o ~/.claude/skills/cumabozkurt-god-of-design-god-export-tokens/SKILL.md Restart Claude Code, or start a new session, for it to be picked up.
What God Export Tokens does
description: Export the current design system as DTCG tokens, CSS variables, Tailwind v4 theme and DESIGN.md argument-hint: '[path to existing styles or brand description]'
Use `god-tokens` to extract or define the design system from: $ARGUMENTS
Output four artefacts: `tokens.json` (W3C DTCG format), `tokens.css` (custom properties, light and dark), a Tailwind v4 `@theme` block, and a `DESIGN.md` based on the template. Verify every text/background pair with WCAG contrast and list the ra
Alternatives in Design
- Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
- Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
- Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Sync Figma Tokens
Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictiona
Token
Design token creation and updates. Use when adding, modifying, or checking Dialtone design tokens (--dt- CSS v
Extract Design Tokens
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and
Themes
Work with the theme system (ThemeProvider, theme switching, CSS variables)
Wp Theme JSON
Generate a complete, valid theme.json (schema v3) from a design system, CSS custom properties, or design token
Frontendtailwind
Autonomous Tailwind + shadcn/ui visual refinement on a feature branch — audits current Tailwind/shadcn usage,
Related Agents
Fec Design Token Mapper
Use this subagent to map styles and variables in Figma, Sketch, MasterGo, Pixso, Mokou, or Mockup to existing
Figma Implementer
Turn a Figma design file into a build-ready specification — design variables mapped to Tailwind tokens, per-se
Tailwind Patterns
Use proactively whenever the user writes or modifies Tailwind CSS — including utility classes, theme configura