Adityaraj0421

Design Token Extractor — Design agent for Claude Code

Design community

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

Terminal
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 desi

Alternatives 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 Repository