figma-design-system-to-design-md

Skill by ara.so — Design Skills collection.

A Claude Code skill plugin that automatically converts Figma design tokens into a structured design.md file. It extracts CSS variables, Tailwind config, theme files, and optionally pulls data from Figma MCP to create comprehensive design system documentation that AI coding tools can understand.

What It Does

The Problem: Design systems live in Figma and code, but documentation is outdated or nonexistent. Developers guess at color roles, spacing scales, and typography.

The Solution: One command generates a complete design.md that stays in sync with your actual token files.

The tool:

• Detects token sources automatically (CSS variables, Tailwind config, theme files)
• Parses and classifies tokens into categories (colors, typography, spacing, etc.)
• Optionally enriches data via Figma MCP
• Generates structured design.md with semantic roles
• Works framework-agnostic (React, Vue, Svelte, etc.)