Design Md Figma — AI skill for Claude Code

DESIGN.md generator for Figma - TypeUI

This Figma plugin extracts local styles and system signals from the current file and generates editable `DESIGN.md` and `SKILL.md` outputs that you can use with tools such as Google Stitch, Claude Code, Codex, and others to build interfaces with a consistent design-system blueprint. The generated files are based on the open-source [TypeUI DESIGN.md](https://www.typeui.sh/design-md) format.

Getting started

Load the plugin in Figma Desktop:

1. Install dependencies:

   npm install

2. Build the plugin:

   npm run build

3. In Figma Desktop:

   • Open Plugins -> Development -> Import plugin from manifest...
   • Select manifest.json from this project
   • Run Design MD Skill Generator

Curated design skills

Check out curated design systems at [typeui.sh/design-skills](https://www.typeui.sh/design-skills).

Available actions

Action	Description
Auto-extract	Reads local styles and variables from the active Figma file (colors, typography, spacing, radius, effects, grids, component families).
Generate DESIGN.md	Produces editable design-guideline markdown from extracted file signals.
Generate SKILL.md	Produces editable agent-ready markdown from extracted file signals.
Toggle view	Switches between DESIGN.md and SKILL.md in a single editor panel.
Refresh	Re-runs extraction for the current Figma file state.
Download	Saves generated output as DESIGN.md or SKILL.md.

Generated file structure

The plugin generates two markdown files with consistent structure.

`DESIGN.md`

Section	What it does
Source	Captures file/page origin and extraction timestamp.
Variable Collections	Lists local Figma variable collections used for tokens.