figma-generate-design

figma-generate-design 技能概览

figma-generate-design 的作用

figma-generate-design 技能可以帮助你把真实的应用界面、页面、modal、drawer、sidebar 或其他组合视图，直接转成 Figma，并尽量复用现有设计系统，而不是手工重画一遍。它最适合 Design Implementation 场景，也就是目标明确指向代码、tokens 和已发布组件的一致还原。

适合谁使用

如果你需要把一段已编码的 UI、产品规格，或一个粗略布局，转换成与现有系统一致的 Figma 页面，就适合使用 figma-generate-design skill。它更适合设计师、PM，以及基于可直接落地的源材料工作的 agent，而不是一次性的插画创作或自由探索式视觉实验。

它为什么不同

这个技能的优化重点，是从 Code Connect 及相关 Figma 来源中发现组件、variables、styles 和 library assets，然后按区块逐步组装页面。相比通用提示词，在目标已经被既有设计系统约束住的情况下，figma-generate-design 更稳定、更可靠。

如何使用 figma-generate-design 技能

安装并确认技能可用

按你所用环境中的 figma-generate-design install 流程完成安装，然后在开始制作前确认技能已经可用。大多数工作流里，实际的下一步通常是先打开 SKILL.md，这样你能先理解这个技能要求的执行顺序和边界。

先读对文件

对于 figma-generate-design usage，先看 SKILL.md，再检查 README.md、AGENTS.md、metadata.json，以及本地副本中可能存在的 rules/、resources/、references/ 或 scripts/ 文件夹。这个技能的 repo 很精简，所以 SKILL.md 通常是最主要的事实来源。

把模糊需求变成可执行提示词

这个技能在你给出明确目标、事实来源和范围边界时效果最好。弱提示词会说：“把这个 landing page 做成 Figma。” 更强的提示词则会说：“用 figma-generate-design 根据提供的代码在 Figma 中重建这个产品定价页，保留现有设计系统组件，并优先处理桌面端布局。” 你对页面类型、源材料和保真目标说得越具体，模型就越少猜测空间。

按区块逐步组装

这种工作流的设计目标，是逐步搭建一个组合视图，而不是一次性即兴生成整套设计。先搭 frame 结构，再映射主要区块，然后插入最接近的系统组件和 tokens，最后才处理间距、变体或文字层级等局部调整。正是这个顺序，让 figma-generate-design guide 在生产环境里更有价值。

figma-generate-design 技能 FAQ

figma-generate-design 只适用于整页吗？

不是。这个技能同样适用于 modal、dialog、drawer、panel、sidebar，以及其他多区块视图。关键要求是，输出应该基于设计系统积木来组装，而不是手绘式的基础图形随意拼出来。

什么时候不该用它？

如果你想要的是概念性提案、全新的视觉方向，或者一个简单的一次性插画，就不要优先考虑 figma-generate-design。如果根本没有可复用的设计系统，那么一个普通的 Figma 提示词可能比结构化的 implementation 流程更快。

需要会写代码吗？

不需要，但你需要有足够上下文，能准确描述源界面。只要你能指出页面、组件或 implementation 来源，并说明哪些内容必须保留、哪些可以适配，初学者也可以使用这个技能。

它比普通提示词更好吗？

在 Design Implementation 场景下，是的。普通提示词也许能生成一个看起来还不错的 mockup，但 figma-generate-design 会优先寻找正确的组件、styles 和 variables，通常能提升一致性，并减少后续清理工作。

如何改进 figma-generate-design 技能

给技能更好的源材料

最能提升质量的，是更清晰的输入：目标路由或页面名称、要对照的代码组件或页面、预期 viewport，以及任何必须匹配的 UI 状态。如果你能提供准确的 variant、token 来源或截图参考，输出通常需要更少修改。

明确哪些内容必须一致

要直接说明优先级到底是 layout fidelity、component fidelity、spacing 还是 text hierarchy。比如：“桌面端 shell 和区块顺序要完全一致，但 hero 图像可以简化”就比“做得像一点”有用得多。这样能帮助 figma-generate-design 选对取舍，而不是过度贴合错误细节。

留意常见失败模式

最常见的问题，是提示词太粗，导致系统从模糊描述里过度泛化，错过真正的设计系统组件。另一个常见问题，是请求一个跨多个模式的界面，却没有说明哪些部分应复用、哪些可以改造。如果第一次结果不对，就要围绕区块结构、组件名称和已知约束收紧提示词。

通过修正事实来源来迭代

第一轮先用来找出结构性错误，然后在下一轮提示词里加入精确修正：缺少 sidebar、卡片 variant 错了、间距 scale 不对，或 token 不匹配。figma-generate-design guide 最有效的用法，是让每次迭代都缩小源实现和 Figma 输出之间的差距，而不是把整页重新讲一遍。