skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

figma-design-md-generator

Generate DESIGN.md and SKILL.md from Figma design tokens and component families.

3|Updated May 16, 2026
Search Tags:#markdown#design system#figma#design tokens#documentation generation#component variants#ai-ready guidelines
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill figma-design-md-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-design-md-generator
Source: https://github.com/Aradotso/design-skills/tree/main/skills/figma-design-md-generator
Command: npx skills add https://github.com/Aradotso/design-skills --skill figma-design-md-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of manually documenting a Figma design system by automatically extracting tokens and component structure into editable markdown that AI tools can follow.

Core Features & Use Cases

  • Design token extraction: Converts Figma local styles and variables into structured token data for colors, typography, spacing, radius, effects, grids, and component families.
  • Auto-generate documentation: Produces both a human-editable DESIGN.md and an AI-optimized SKILL.md blueprint from the same source file.
  • Use case: When you have an active Figma file for a product UI, you can generate consistent implementation guidelines and prompt-ready rules so developers and agents build components that match the design system.

Quick Start

Use the figma-design-md-generator skill to generate DESIGN.md and SKILL.md from your current Figma file.

Frequently Asked Questions about figma-design-md-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma design tokens to markdown documentation?▼

Generating AI-ready guidelines from Figma involves extracting local styles, variables, and component families into structured markdown. It produces a human-editable DESIGN.md and an agent instruction SKILL.md to preserve token fidelity and implementation rules for AI tools.

Can I generate a SKILL.md file from my Figma component variants?▼

Yes, you can generate a SKILL.md file from Figma component variants. The generator extracts component families and token-driven primitives, creating an AI-optimized agent instruction blueprint that preserves token fidelity and implementation rules for developers.

How do I extract Figma variables and local styles for a design system?▼

Extract Figma variables and local styles by applying a token extraction process to your active Figma file. This captures colors, typography, spacing, radius, effects, and grids, converting them into structured token data for consistent UI implementation.

What is the best way to document Figma design systems for AI implementation?▼

The best way to document Figma design systems for AI implementation is generating both a human-editable DESIGN.md and an AI-optimized SKILL.md. This ensures developers and AI agents receive consistent prompt-ready rules and token-driven guidelines.

Does Figma design token generation work without external dependencies?▼

Figma design token generation works without external dependencies, directly reading your active Figma file. It converts extracted Figma primitives into TypeUI DESIGN.md compatible sections to ensure consistent component variants and token fidelity.

Related Skills

Explore More Design & Creative Skills→
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
AradotsoAradotso
3

awesome-design-skills-registry

Pull curated DESIGN.md and SKILL.md design system artifacts into projects.

Official
Basic
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
AradotsoAradotso
3

figma-design-md-plugin

Convert Figma design styles and variable collections into DESIGN.md and SKILL.md documentation.

Official
Intermediate