Figma Design System To Design.md

Extracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

par albertzhangz10 · albertzhangz10/figma-design-system-to-design-md

Testé · Fonctionne ★ 9.2/10

Figma Design System To Design.md — Extracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

Ce que fait

Scans a project for token files (tokens.css, tailwind.config.js, theme.ts, etc.), optionally enriches with Figma MCP data, and writes a design.md covering colors, typography, spacing, radius, elevation and responsive rules — marking anything it can't find as TODO rather than inventing it. Triggers on 'generate design.md', 'extract design system', or 'design tokens to markdown'.

Rapport de test

Ran it against a real tokens.css + tailwind.config.js fixture: it correctly flagged the missing typography scale and elevation data as TODO instead of inventing values, and preserved the source's 'netural' token-name typo per its own rule, versus a baseline dump that tabled the same tokens with no such discipline.

Testé le: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/albertzhangz10/figma-design-system-to-design-md
cd figma-design-system-to-design-md
mkdir -p ~/.claude/skills
cp -r skills/figma-design-system-to-design-md ~/.claude/skills/figma-design-system-to-design-md

Commandes et exemples de prompts

/figma-design-system-to-design-mdExtracts CSS/Tailwind/Figma design tokens into a structured design.md that AI coding tools can reference.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

Extract our design tokens into a design.md for the AI tools
Pull colors and spacing from tailwind.config into one doc
Document our design system so Claude stops inventing styles

Rapport complet →