Figma 设计系统秒变 AI 指令：design-md-figma 让你的设计规范100%落地

做设计最崩溃的时刻是什么？辛辛苦苦在 Figma 里调好了一套设计系统，结果丢给 AI 开发时，它输出的界面满屏紫蓝渐变、Inter 字体——那股熟悉的”AI廉价感”扑面而来。

问题不在 AI，而在于设计师和 AI 之间缺少一套共同语言。

design-md-figma 就是来解决这个问题的。这是一个 Figma 插件，运行后能从当前文件里自动提取所有设计 tokens——颜色、字体、间距、圆角、阴影、网格系统、组件家族——然后生成两份可编辑的 markdown 文件：

• DESIGN.md：设计指南，供人类阅读理解设计意图
• SKILL.md：AI 可直接使用的技能文件，让 Claude Code / Codex / Cursor 等工具严格按照你的设计系统来构建界面

生成的 SKILL.md 包含了完整的规则体系：

• Mission：设计系统目标定义
• Brand：品牌上下文、受众、产品定位
• Style Foundations：视觉 tokens 和设计基础
• Accessibility：WCAG 2.2 AA 无障碍要求
• Rules: Do / Don’t：必须做和禁止做的清单
• Quality Gates：可测试的质量门禁

简单说，就是把 Figma 里的设计规范”翻译”成 AI 能理解并遵守的指令集。设计师在 Figma 里做完一套组件库，点一下插件，丢给 AI，输出的界面从色彩到圆角到间距都跟你设计的一模一样。

支持 Google Stitch、Claude Code、Codex、Cursor 等主流 AI 编码工具，基于开源的 TypeUI DESIGN.md 格式，社区里已经有 67 套预置设计系统可以直接用。

⭐ 136 Stars · MIT 开源协议 · Figma 插件形式

安装方式：在 Figma Desktop 导入 `manifest.json`，或在 typeui.sh/design-skills 查看社区预置设计技能。

https://github.com/bergside/design-md-figma

GitHub: https://github.com/bergside/design-md-figma