Token Extractor — Design agent for Claude Code
Extract design tokens from a new upstream source into knowledge/design-tokens/.
How to install Token Extractor
Installs to ~/.claude/agents/sungjin9288-design-ai-token-extractor.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/sungjin9288/design-ai/HEAD/agents/token-extractor.md -o ~/.claude/agents/sungjin9288-design-ai-token-extractor.md Restart Claude Code, or start a new session, for it to be picked up.
What Token Extractor does
name: token-extractor description: Extract design tokens from a new upstream source into knowledge/design-tokens/. Use when a new repo is added under refs/ and needs an extractor written, or when an existing extractor needs updating after upstream schema changes. tools: [Read, Grep, Glob, Bash, Edit, Write]
token-extractor
You write Python extractors that pull design tokens (color, type, spacing, motion) from upstream design-system source files into structured markdown under `knowled
Alternatives in Design
- UI Design Agent — UI design token management and prototype generation — W3C Design Tokens Format, state-based components, WCAG A 530 ★
- Design Token Extractor 309 ★
- Source Design Doc — Section: "Endpoints" — POST /api/orders/submit → handler: OrderController.submit POST /api/orders/submit → handler: OrderService.crea 281 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Ds Tokens
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable c
Fec Design Token Mapper
Use this subagent to map styles and variables in Figma, Sketch, MasterGo, Pixso, Mokou, or Mockup to existing
Consumer Agnostic Client Reviewer
Reviews client libraries (thin wrappers over upstream APIs) and their design docs for consumer coupling — assu
Canvas To Code Extractor
Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML
Frontend UI Specialist
Use this agent when working on frontend UI components, styling, or visual elements. This includes creating new
Design Scanner
Extract the design system a codebase already ships — tokens, type scale, spacing, motion, and a reverse-engine
Related Skills
Skill Knowledge Extractor
从对话、文档和工作经验中提取可复用的知识模式 Extract reusable knowledge patterns from conversations and documents
Set Language
Set the language knowledge is written in for this repo (optionally translate existing entries)
Sync Figma Tokens
Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictiona