Extract your design tokens from code (colors, spacing, type, radius) with deterministic clustering and hardcoded-value drift detection, and keep DESIGN.md in sync.
Plugin tokens from marketplace designagent in sherizan/designagent. Commands read from the repo's manifest — 28 days ago.
token-namerRename heuristic/auto-generated color tokens (e.g. accent-4, color-1) to semantic, role-based names in DESIGN.md — done by Claude Code itself, no API key needed. Use right after `designagent init` or whenever DESIGN.md has non-semantic color names.
token-syncPull design tokens from the canvas (Figma / Pencil / OpenPencil) into DESIGN.md and record the diff. Use when the canvas changed and DESIGN.md needs to catch up.
tokensExtract the design tokens already in a codebase — colors (clustered), spacing scale, type scale, radius — and find drift (hardcoded values that should be tokens). Use when the user asks about design tokens, "what are my colors / spacing scale", auditing hardcoded values, tokenizing a codebase, or ke
/tokens:tokensExtract design tokens (colors, spacing, type, radius) + drift from this codebase, and optionally sync DESIGN.md.
AI design review for Claude Code: connects PRD, research, Figma, and analytics to review design intent (not pixels) and surface gaps before handoff or launch. Reads and annotates Figma through the DesignAgent bridge. Run /new, /review, /annotate.
1 skill · 3 commands · 6 agents · 1 MCP server
Claude Code's live two-way bridge to Figma: read, build, and edit the canvas in real time, then build production UI from a design-system-faithful DESIGN.md.
3 skills · 1 MCP server · hooks
DESIGN.md: scaffold and sync your design system, then lint the code against its own rules (borders vs shadows, off-grid spacing, extra typefaces, over-cap weights).
1 skill · 2 commands
Does the build match the design? Screenshots your running UI, diffs it against the Figma frame / DESIGN.md, and reports layout, spacing, color, and type drift by severity.
1 skill · 1 command · 1 MCP server
VOICE.md: proofread copy against a house voice and strip the AI tells (em dashes, hype, filler), keeping commands, ids, and code literally unchanged.
1 skill · 2 commands
Generate self-contained, brand-aware background effects (animated WebGL shader, dot-grid, or ASCII art) recolored from your DESIGN.md, with reduced-motion and fallbacks baked in.
1 skill · 1 command
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
19 skills
Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification
1 command · 6 agents
Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.
7 skills
tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.
1 skill
Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
1 skill · 4 agents · hooks
Build, preview, and test UI components with Storybook.
7 skills
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.