Design Token Extractor — Design agent for Claude Code
name: design-token-extractor description: Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files.
How to install Design Token Extractor
Installs to ~/.claude/agents/adityaraj0421-naksha-studio-design-token-extractor.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/Adityaraj0421/naksha-studio/HEAD/agents/design-token-extractor.md -o ~/.claude/agents/adityaraj0421-naksha-studio-design-token-extractor.md Restart Claude Code, or start a new session, for it to be picked up.
What Design Token Extractor does
name: design-token-extractor description: | Use this agent to extract design tokens from CSS, SCSS, JavaScript, or Tailwind config files. Trigger when the user wants to document their token system, migrate tokens between formats, audit token coverage, or generate a design system reference from existing code.
Context: User wants to document their CSS custom properties as a design system user: "Extract all design tokens from our CSS files" assistant: "I'll use the desiAlternatives in Design
- Codemod Runner — Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css 79.4k ★
- Designguru — Expert Design Guidance & Analysis Specialist who provides professional UI/UX insights, design system guidance 38.1k ★
- Refactor Clean — You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and 31.9k ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Token Extractor
Extract design tokens from a new upstream source into knowledge/design-tokens/. Use when a new repo is added u
Ds Extractor
Extrai um design system agêntico completo de um website ao vivo, lendo a página renderizada e os computed styl
Canvas To Code Extractor
Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML
Design Pattern Extractor
Extracts design patterns from projects and URLs for the Design Department
Design Surface Extractor
Phase 1a sub-agent. Walks every HTML in design-files/, runs scripts/extractors/extract-design-surfaces.js, and
Visual Extractor
Discovery agent for image-only inputs (screenshots, exported PNG/PDF pages). Produces the same research set as
Related Skills
Design Md Extractor Skill
Claude Code skill that extracts a brand foundation from a website URL, brand guide, or guided Q&A, then scaffo
Studio
Launch the local design Studio — a live token editor over the latest extraction. Edit, preview a wall of real
Design Handoff
Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ