# design-md-figma — Generate DESIGN.md from Figma Styles

> design-md-figma is a Figma plugin that extracts local styles and generates editable DESIGN.md/SKILL.md so agents build UIs consistently.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
git clone https://github.com/bergside/design-md-figma.git
cd design-md-figma
npm install
npm run build
# Figma Desktop: Plugins -> Development -> Import plugin from manifest.json
```

## Intro

design-md-figma is a Figma plugin that extracts local styles and generates editable DESIGN.md/SKILL.md so agents build UIs consistently.

**Best for:** Teams using AI coding tools who want design-system consistency from Figma

**Works with:** Figma Desktop, Node.js, TypeUI DESIGN.md format, Claude Code/Codex/Stitch

**Setup time:** 8-20 minutes

### Key facts (verified)

- GitHub: 82 stars · 15 forks · pushed 2026-04-27.
- License: MIT · owner avatar + repo URL verified via GitHub API.
- README-verified entrypoint: `npm install ````.

## Main

- Use it to export a stable design contract: generate `DESIGN.md` for tokens (colors/typography/spacing) and `SKILL.md` for agent constraints.

- Run it on the same Figma file your team actually designs in so extracted variables/styles match reality, not a theoretical system.

- Treat the generated markdown as versioned artifacts: commit them to your repo so agents and humans share the same source of truth.

### Source-backed notes

- README says the plugin extracts local styles/variables from the active Figma file and generates editable `DESIGN.md` and `SKILL.md` outputs.
- README’s getting started flow builds the plugin with `npm install` + `npm run build`, then imports `manifest.json` in Figma Desktop.
- README lists supported actions including auto-extract, toggling views, refresh, and downloading outputs.

### FAQ

- **Is it a published Figma Community plugin?**: README documents a local dev install via manifest import; follow upstream for distribution status.
- **What should I commit to git?**: Commit the generated DESIGN.md/SKILL.md so UI changes can be reviewed like code.
- **Does it replace a design system?**: No — it exports the system signals; you still need your Figma library and review process.

## Source & Thanks

> Source: https://github.com/bergside/design-md-figma
> License: MIT
> GitHub stars: 82 · forks: 15

---

<!-- ZH -->

## Quick Use

```bash
git clone https://github.com/bergside/design-md-figma.git
cd design-md-figma
npm install
npm run build
# Figma Desktop: Plugins -> Development -> Import plugin from manifest.json
```

## Intro

design-md-figma 是 Figma 插件：抽取当前文件的颜色/字体/间距等样式与变量，生成可编辑的 `DESIGN.md`/`SKILL.md`，让 agent 按同一设计系统写 UI。

**Best for:** 想把 Figma 里的设计系统约束传给 AI 编码工具、保持一致性的团队

**Works with:** Figma Desktop；Node.js；TypeUI DESIGN.md 格式；Claude Code/Codex/Stitch 等工具

**Setup time:** 8-20 minutes

### Key facts (verified)

- GitHub：82 stars · 15 forks；最近更新 2026-04-27。
- 许可证：MIT；作者头像与仓库链接均已通过 GitHub API 复核。
- README 中核对过的入口命令：`npm install ````。

## Main

- 把它当作“设计契约导出器”：`DESIGN.md` 给 token（颜色/字体/间距等），`SKILL.md` 给 agent 约束与写作/可访问性规则。

- 尽量在团队真实使用的 Figma 文件里跑，让提取到的变量与样式反映实际系统，而不是理想化模板。

- 把生成的 markdown 当作可版本化资产：提交进仓库，让 agent 与人类共享同一份真源。

### Source-backed notes

- README 说明插件会从当前 Figma 文件抽取本地样式/变量，并生成可编辑的 `DESIGN.md` 与 `SKILL.md`。
- README 的上手流程是 `npm install` + `npm run build`，再在 Figma Desktop 通过 manifest.json 导入插件。
- README 列出动作：自动抽取、生成 DESIGN.md/SKILL.md、切换视图、刷新与下载输出。

### FAQ

- **它是 Figma Community 插件吗？**：README 描述的是通过 manifest 本地导入；是否上架以项目后续发布为准。
- **生成物要不要进 git？**：建议提交生成的 DESIGN.md/SKILL.md，这样 UI 约束可以像代码一样评审与追踪。
- **能替代设计系统吗？**：不能。它只是把系统信号导出成文本契约；设计库与评审流程仍然需要保留。

## Source & Thanks

> Source: https://github.com/bergside/design-md-figma
> License: MIT
> GitHub stars: 82 · forks: 15


---
Source: https://tokrepo.com/en/workflows/design-md-figma-generate-design-md-from-figma-styles
Author: Skill Factory