figma-generate-design

figma-generate-design 技能概览

figma-generate-design 的作用

figma-generate-design 技能可以把真实的屏幕、页面或多区块布局转成 Figma，而且会尽量复用现有设计系统，而不是用通用形状重新拼一套 UI。它最适合的场景是：你希望 Figma 结果足够贴近代码或产品页面，便于继续编辑、检查细节，并且和应用的 tokens 保持一致。

适合谁使用

如果你要把 Web 应用、落地页、仪表盘或产品视图迁到 Figma，而且需要的是设计对齐而不是粗略线框图，就适合用 figma-generate-design 技能。对于 UI 设计师、产品团队，以及需要根据代码或详细说明更新现有 Figma 屏幕的 agent 来说，这个技能都很合适。

它为什么不一样

它的核心优势在于流程更规范：先从已发布的设计系统里发现组件、变量和样式，再按区块把整张屏幕组装出来。这样能减少偏差，避免硬编码的颜色和间距，也让最终结果比一次性 prompt 更容易维护。尤其是在 figma-generate-design for UI Design 这类场景里，如果源应用已经有可复用的 tokens 和组件，这种方式会特别有价值。

如何使用 figma-generate-design 技能

正确安装并加载

进行 figma-generate-design install 时，要先把技能从精选 skills 包里添加进去，并确保工作流可以访问 Figma MCP server。任何 use_figma 调用之前，还要先加载 figma-use，因为这个技能依赖它在颜色处理、字体加载和脚本行为上的底层规则。如果跳过这个配对，输出质量和执行稳定性通常都会下降。

给技能一份“屏幕级”需求说明

最好的 figma-generate-design usage，起点是一段明确指向单个完整屏幕或页面的 prompt，里面要写清来源上下文和目标结果。好的输入会描述 route、布局区块、受众，以及已知的设计系统约束。

示例 brief：
Use figma-generate-design to recreate the pricing page from our React app in Figma. Keep the hero, comparison table, testimonials, and CTA sections. Use existing components and tokens from the design system, and match spacing and hierarchy as closely as possible.

尽量避免像“把这个做得更好看一点”这种模糊请求，除非你同时提供了精确屏幕、截图或源文件。

先看这些文件

先从 SKILL.md 入手，查看必需的工作流，然后检查 agents/openai.yaml，确认默认 prompt 和工具依赖。LICENSE.TXT 也很重要，因为这些 Figma skills 受 Figma Developer Terms 约束。如果你要把这个 skill 改造后放进另一个 repo，再看看 assets/ 里的品牌标识，以及 maintainers.yml 里的归属信息。

按区块逐步处理

实用的 figma-generate-design 指南是把屏幕拆成几段来做：先识别结构，再找到匹配的设计系统组件，接着导入组件，最后按顺序组合页面。这样通常比一次性渲染整个界面更稳，尤其适合有导航、内容卡片、表单或重复模块的页面。如果设计系统不完整，要尽早明确这一点，并决定是做近似还是直接停止。

figma-generate-design 技能常见问题

这个技能只适合整页设计吗？

大体上是。figma-generate-design 技能主要优化的是完整屏幕、视图和多区块页面的构建或更新。对于很小的单点修改，它通常不是最优选择，除非这些修改依赖设计系统，或者会影响整个布局。

一定要有现成的设计系统吗？

如果设计系统已经存在，而且在 Figma 里可访问，你会获得最大的价值。没有可复用的组件、变量和样式时，这个技能可发现的内容就少得多，最后可能会退回到更手工的组装方式。如果你的 UI 变化很大、很定制，或者还处于未完成状态，直接用普通的 prompt 驱动 Figma 生成，反而可能更简单。

它和普通 prompt 有什么区别？

普通 prompt 可以描述布局，但 figma-generate-design 的目标是强制执行可复用的设计系统工作流。这样更有利于保持一致性、后续编辑和跨页面对齐。它强调的不是创意发挥，而是把源 UI 稳定地转换成 Figma。

对新手友好吗？

可以，只要你能把屏幕描述清楚，而且手头有源设计或代码。你不需要懂 Figma 的内部机制，但你需要明确范围，并提供足够的上下文来完成组件匹配。新手最常见的问题，是直接要求“整个产品区域”却不指定具体屏幕。

如何改进 figma-generate-design 技能

把目标说得足够精确

最有效的提升方式，是把准确的屏幕、route 和用途都写出来。要明确哪些内容包含在内，哪些不包含在内。比如，“重建 checkout confirmation page，包含 header、order summary 和 upsell card，但不包括 modal states”，比“做一下 checkout”更能帮助技能划定边界。

提供能减少猜测的源材料

如果你提供截图、URL、组件名称或代码引用，figma-generate-design 的效果会更好。若你有像 primary/600 这样的 token 名称、间距刻度，或者已知的 Figma 组件集，也一起提供出来。这能帮助技能避免凭空近似，并让结果继续贴合系统。

通过调整结构来修问题，而不是先改视觉细节

如果第一版不对，先改 section 顺序、组件映射或层级，再考虑视觉润色。最常见的失败模式是结构错位：内容对了，但放进了错误的容器。一个更有效的跟进方式是：“保持同样的组件，但把 hero、card grid 和 footer 按源页面顺序对齐。”

注意常见的不匹配场景

当应用根本没有设计系统、页面主要是定制插画，或者你只需要一个快速概念草图时，这个技能往往不太合适。如果你无法访问底层 Figma 资产，或者缺少定义 UI tokens 的 repo 上下文，它的效果也会变弱。在这些情况下，最好换成更轻量的 prompt，或者先补充更多源上下文，再重试 figma-generate-design usage 工作流。