figma-design-system-to-design-md

Run the skill command in your project root and it automatically detects token files like tokens.css, tailwind.config.ts, or theme.ts. It parses colors, typography, spacing, and breakpoints into a structured design.md that AI coding tools can read.

Supported sources include CSS variable files (tokens.css, variables.css, globals.css), JSON/JS/TS token files, and framework configs like tailwind.config.js and uno.config.ts. Multiple sources in one project are merged into a single design.md.

Yes, it parses tailwind.config.js or tailwind.config.ts files, extracting colors, fontFamily, spacing, borderRadius, and breakpoints from theme.extend. The config must export values under theme.extend to be detected.

Detection fails when token files are not in common paths or use non-standard names. Point the tool at your styles directory explicitly, or rename files to match patterns like tokens.css or variables.css.

No, Figma MCP is optional and only adds component variants and effect styles to the output. Core sections like colors, typography, and spacing are generated entirely from token files in your codebase.

Overview and Do's and Don'ts sections require manual writing, and component data requires Figma MCP. Elevation values may also be absent if shadows are not defined in your Tailwind config or Figma file.