figma-to-design-audit
Design Token Drift Audit
You are auditing this project's codebase to find violations of the design system. Your job is to detect hardcoded values that should use design tokens, find unused tokens, and report components that bypass the design system.
Pre-flight Check
- Check that
.claude/design-tokens/design-tokens.jsonexists. If it doesn't, tell the user to run/figma-to-design-initfirst and stop. - Read
.claude/design-tokens/design-tokens.jsonfully into context.
Audit 1: Hardcoded Values That Should Be Tokens
Scan all React/Next.js source files (.tsx, .jsx, .ts, .js) and style files (.css, .scss, .module.css, .module.scss) for hardcoded values that exist in the design tokens or should be using them.
Colors
- Search for raw hex colors (
#[0-9a-fA-F]{3,8}),rgb(,rgba(,hsl(,hsla(in component files and style files.
More from codestate-cs/figma-to-design
figma-to-design-init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, detects API call patterns, and generates design token files under .claude/design-tokens/. Run this once per project before using /figma-to-design-build.
16figma-to-design-build
Build production-ready Next.js/React code from a Figma design. Pulls design context and screenshots from Figma, generates code using your project's tokens and conventions, then visually verifies and iterates using Playwright screenshots until the result matches the design. Requires /figma-to-design-init to have been run first.
16design-system-aware
Enforces design token usage, component reusability, SOLID, DRY principles, and API call conventions when writing or editing React/Next.js frontend code. Activates when any .tsx or .jsx file inside src/ or app/ is being created or modified, AND .claude/design-tokens/design-tokens.json exists.
15init
Initialize the design-to-code workflow. Scans your codebase for styling patterns, extracts design tokens, discovers reusable components, and generates a design-tokens.json file. Run this once per project before using /figma-to-design-build.
1build
Build production-ready Next.js/React code from a Figma design. Pulls design context and screenshots from Figma, generates code using your project's tokens and conventions, then visually verifies and iterates using Playwright screenshots until the result matches the design. Requires /figma-to-design-init to have been run first.
1