DESIGN.md generator for Figma plugin
A TypeUI Figma plugin that reads a file's styles and generates DESIGN.md and SKILL.md for Claude Code, Codex and Cursor
- 156 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The Figma plugin runs its own code in Figma Desktop and reads styles and variables of the open file
- Saves the generated DESIGN.md and SKILL.md to disk
Install
- Works in
Manual install
npm install
npm run buildBuild from source. Then in Figma Desktop: Plugins, Development, Import plugin from manifest and pick manifest.json.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The Figma plugin runs its own code in Figma Desktop and reads styles and variables of the open file
- Saves the generated DESIGN.md and SKILL.md to disk
This is third-party code. Review the repository files before installing.
What it does
The plugin reads local styles and variables from the open Figma file: colors, typography, spacing, radii, effects, grids and component families. From them it builds a DESIGN.md with all tokens and a SKILL.md with agent rules: style foundations, WCAG 2.2 AA accessibility, dos and don'ts, component state requirements and quality gates. Both files can be edited in the plugin window and downloaded. The format follows the open TypeUI DESIGN.md spec.
Who it is for. For designers and frontend developers who want the agent to build UI within a Figma design system.
Good fit when
- You need to hand the agent tokens and design system rules from Figma
- The agent builds UI that drifts from the designs in colors and fonts
- You need a starter DESIGN.md for a new project
Not a fit when
- The Figma file has no local styles or variables
- Tokens are already exported from code or a separate package
Example request
Build the pricing page following the rules in DESIGN.md and SKILL.md at the project rootLimitations
Runs in Figma Desktop; loading from source requires Node.js and a build. Output quality depends on how well the file's styles are organized. The generated SKILL.md should be reviewed and edited by hand.
How to disable. Remove the plugin from your Figma plugins. Delete generated files from the project manually.
FAQ
How does DESIGN.md differ from SKILL.md?
DESIGN.md lists tokens from the file, while SKILL.md turns them into rules and a workflow for the agent.
Discussion
No questions or reviews yet.
Related
PluginsA plugin and npx CLI that scaffold DESIGN.md from the official google-labs-code/design.md templates
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
DESIGN.md by Google Labs
DESIGN.md
The DESIGN.md format for agents and a CLI: lint contrast and references, diff versions, export tokens to Tailwind and DTCG
Figma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
Awesome Claude Design
awesome-claude-design
A collection of ready DESIGN.md files that Claude Design expands into an interface scaffold: colors, type, components. Take as inspiration
README in short
The README explains the plugin's purpose and shows loading it in Figma Desktop: install dependencies, build and import manifest.json. Tables describe the available actions and the sections of both generated files. The plugin is also published in the Figma Community; MIT licensed.