Ds Tokens — Design agent for Claude Code
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable collections into the project's tokens.json, then build the token package.
How to install Ds Tokens
Installs to ~/.claude/agents/whosz-ds-agent-ds-tokens.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/whosz/ds-agent/HEAD/agents/ds-tokens.md -o ~/.claude/agents/whosz-ds-agent-ds-tokens.md Restart Claude Code, or start a new session, for it to be picked up.
What Ds Tokens does
name: ds-tokens description: Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable collections into the project's tokens.json, then build the token package. Trigger on "extract tokens from Figma", "refresh design tokens", or as the second step after ds-inventory. Do NOT use for component code — that's ds-component-builder. tools: mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_figma_skill, Read, Write, Bash(npm run build*) mod
Alternatives in Design
- 1code — Best UI for Claude Code with local and remote agent execution 5.3k ★
- Canvas Designer — Use this agent for UI/UX design and implementation — production-grade interfaces with intentional aesthetic 523 ★
- React Figma UI Engineer 501 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Figma Interpreter
Use this agent to analyze Figma designs and extract technical specifications for development. This agent parse
Omd Designer Review
Visual + brand consistency reviewer. Audits HTML/MD/JSX against the brand DESIGN.md across typography, color b
Ds Component Builder
Use to build or fix 1-5 components from the project's Figma file into the UI package. Trigger on "build from F
Local Review
Starts the local dev server, opens the browser, takes a screenshot, and waits for human approval before the ch
Design Scanner
Extract the design system a codebase already ships — tokens, type scale, spacing, motion, and a reverse-engine
Site Cloner
Extract a complete design specification from a live website URL — design tokens, typography, class-annotated s
Related Skills
Figma Theme Sync
Pull Figma variable collections (colors, spacing, fonts, radius) and diff against auxi/src/theme/theme.ts to s
Extract Design Tokens
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and
Style Guide
Generate comprehensive design system documentation including colors, typography, spacing, components, and usag