Extracts a Figma design system into a structured design.md file, turning design tokens into markdown that AI coding assistants such as Claude Code can use. Useful for teams that want their design tokens documented for AI-assisted development.
Claude Code
$ npx -y skills add albertzhangz10/figma-design-system-to-design-md --agent claude-code
Codex
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a codex
Cursor
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a cursor
Gemini CLI
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a gemini-cli
GitHub Copilot
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a github-copilot
OpenCode
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a opencode
Windsurf
$ npx skills add albertzhangz10/figma-design-system-to-design-md -a windsurf
π¨π³ δΈζ | πΊπΈ English
Stop manually documenting your design system. Convert Figma to design.md and let AI coding tools (Cursor, Claude Code, Copilot) understand your design system.
Try it on the web β no setup required
A Claude Code skill plugin that converts Figma design tokens into a structured design.md β extracting CSS variables, Tailwind config, and theme files, optionally enriched via Figma MCP. Non-technical users (designers, PMs) can use the web version directly β just paste a Figma URL and get your design.md.
Design systems live in Figma and code, but the documentation lives nowhere β or worse, in an outdated wiki page. Every time tokens change, the docs fall behind. Developers guess at color roles, spacing scales, and typography levels.
One command. One document. Always in sync with your actual token files.
/figma-design-system-to-design-md
| Section | Source | Auto |
|---|---|---|
| Colors β base palette + semantic roles (text, surface, border, icon) | Token files | β |
| Typography β font families, size scale, weight, line-height | Token files | β |
| Spacing β spacing scale with token names and values | Token files | β |
| Border Radius β radius scale | Token files | β |
| Border Width β width scale | Token files | β |
| Elevation β shadow definitions | Tailwind / Figma MCP | β |
| Responsive β minimum width, fluid vs breakpoint approach | Config files | β |
| Components β variants, sizing, states | Figma MCP | πΆ Optional |
| Overview β design intent and personality | β | βοΈ Manual |
| Do's and Don'ts β judgment rules | β | βοΈ Manual |
Step 1 Detect token sources (tokens.css, theme.ts, tailwind.config.js, etc.)
Step 2 Parse and classify all tokens into categories
Step 3 (Optional) Pull additional data from Figma MCP
Step 4 Generate structured design.md
Step 5 Confirm with user before saving
The skill automatically searches for:
| Type | Patterns |
|---|---|
| CSS tokens | **/tokens.css, **/variables.css, **/theme.css |
| JSON/JS tokens | **/tokens.json, **/tokens.ts, **/theme.ts |
| Style config | tailwind.config.*, **/globals.css |
Works with any stack:
| Framework | Styling | Tokens |
|---|---|---|
| React / Next.js | Tailwind, styled-components, CSS Modules | CSS variables, JS objects |
| Vue / Nuxt | Tailwind, Vuetify, UnoCSS | CSS variables, JSON |
| Svelte | Tailwind, vanilla CSS | CSS variables |
| Any | Any | Any format with parseable tokens |
# Via marketplace
claude plugin install figma-design-system-to-design-md
# Via GitHub
claude /plugin install https://github.com/albertzhangz10/figma-design-system-to-design-md
/figma-design-system-to-design-md # generates ./design.md
/figma-design-system-to-design-md ./docs/design.md # custom output path
claude --plugin-dir /path/to/figma-design-system-to-design-md
| Requirement | Required | Notes |
|---|---|---|
| Claude Code | β | Latest version recommended |
| Token files in project | β | CSS variables, Tailwind config, theme files, etc. |
| Figma MCP Server | πΆ | Optional β enables component extraction and effect styles |
MIT License - see the LICENSE file for details.
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
Built by Albert Zhang.
Inspired by Google Stitch design.md β the design.md format and structure are based on their work.
Stars on GitHub
Fetches up-to-date documentation and code examples for libraries, frameworks, SDKs, CLI tools and cloud services, so an AI agent can answer API questions and generate code against current references.
@upstashGives Claude Code skills and agents for writing React documentation on react.dev, covering MDX components, voice and style rules, blog post structure, and interactive Sandpack code examples.
@reactjsAn agent skill that turns complex terminal output into styled HTML pages you actually want to read. Ask your agent to explain a system architecture, review a diff, or compare requirements against a plan.
@nicobailonA WYSIWYG markdown editor so you can edit markdown files like a Google Doc or Notion page, with a desktop app and web UI for navigation, search, and wiki-style linking. It also ships skills for working in codebase wiki, personal CRM, and knowledge base projects.
@inkeepExtracts a Figma design system into a structured design.md file, turning design tokens into markdown that AI coding assistants such as Claude Code can use. Useful for teams that want their design tokens documented for AI-assisted development. Install it with the command on its page. It includes figma-design-system-to-design-md. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it