figma-design-md-generator
Figma DESIGN.md Generator (TypeUI)
Skill by ara.so — Design Skills collection.
Overview
The bergside/design-md-figma plugin extracts local styles, variables, and component families from Figma files and generates structured DESIGN.md and SKILL.md files. These outputs follow the TypeUI DESIGN.md format and enable AI coding tools (Claude Code, Cursor, Codex) to build interfaces with consistent design-system blueprints.
Key capabilities:
- Auto-extract colors, typography, spacing, radius, effects, grids
- Parse Figma variable collections and local styles
- Generate editable DESIGN.md (human-readable guidelines)
- Generate SKILL.md (agent-ready instructions)
- Download outputs for project integration
Installation
As a Figma Plugin (Development)
More from aradotso/design-skills
open-design-ai-prototyping
Local-first AI design tool that turns coding agents into design engines with 31 skills, 129 design systems, and multi-format export
69design-md-format
Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.
67open-codesign-ai-design
Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models
66claude-design-system-hooks
AI-powered design-to-code engine that generates production-ready UI components from natural language using Claude API
63claude-design-ui-framework
AI UI/UX framework for building Claude-powered apps with React, Tailwind, screenshot-to-code, and Artifacts-style components
62keychron-hardware-design
Access and work with Keychron keyboard and mouse industrial design files (STEP, DXF, DWG, PDF) for 135+ models to create compatible accessories, remixes, and modifications.
60