Skills2026年5月13日·1 分钟阅读

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.

Agent 就绪

这个资产可以被 Agent 直接读取和安装

TokRepo 同时提供通用 CLI 命令、安装契约、metadata JSON、按适配器生成的安装计划和原始内容链接,方便 Agent 判断适配度、风险和下一步动作。

Native · 98/100策略:允许
Agent 入口
任意 MCP/CLI Agent
类型
Skill
安装
Single
信任
信任等级:Established
入口
Asset
通用 CLI 安装命令
npx tokrepo install 1dc5c57f-0978-54c8-b3ae-7a9d48f86d8b
介绍

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.mdSKILL.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: https://github.com/bergside/design-md-figma > License: MIT > GitHub stars: 82 · forks: 15

讨论

登录后参与讨论。
还没有评论,来写第一条吧。

相关资产