跳转到使用指南
Figma Generate Design作者 OpenAI

Figma Generate Design Skill.

创建可编辑且与其设计系统保持关联的 Figma 设计稿。

  • Figma
  • UI 设计
  • 设计系统
来源审查 · Figma Generate DesignSKILL.md
任务 Figma 产出 • 由组件实例构成的新建或更新后的 Figma 设计稿 • 绑定变量的颜色、间距和圆角,以及可复用样式 • 对照来源进行区块级和完整设计稿视觉检查 开始之前 需要已连接的 Figma MCP、目标文件访问权限、已发布的设计系统,以及用于画布操作的配套 figma-use 技能。
编辑摘要 · 来源审查于 2026-10-07 · 非生成示例

01 功能说明

使用现有设计系统资产组装 Figma 设计稿

使用现有库中的组件和变量构建 Figma 设计稿,并在组装过程中检查每个区块。

基于来源的工作流并非执行基准测试

工作方式

Figma Generate Design 采用从代码到设计的方向:交付成果是 Figma 内的设计稿,而非应用程序代码。它会先查找现有组件实例、库变量以及文本或效果样式,然后再组装页面。来源文档倾向于复用现有资产,而不是使用硬编码值绘制外观相似的方框。

它采用渐进式组装策略。先创建外层框架,然后在其中逐个构建并检查各区块。对照源代码检查组件的文本属性和默认变体,同时通过区块截图发现文字被裁切和占位内容残留等问题,因为这些问题在缩小的整页视图中可能不易察觉。结果应是可编辑的设计系统实例,而不只是应用程序的截图。

预期交付成果

  • 由组件实例构成的新建或更新后的 Figma 设计稿
  • 绑定变量的颜色、间距和圆角,以及可复用样式
  • 对照来源进行区块级和完整设计稿视觉检查
查看示例任务说明

从任务说明到审查

  1. 01
    梳理源界面

    阅读其区块、组件和默认属性值。确定目标 Figma 文件以及现有系统规范。

  2. 02
    查找并复用资产

    检查现有设计稿,并在已关联的库中搜索组件、变量和样式。本地变量结果为空,并不能证明远程令牌不存在。

  3. 03
    构建并验证区块

    先创建外层框架,再逐个组装区块,并在继续之前检查文本、变体和布局。

02 适用场景

适用场景

需要已连接的 Figma MCP、目标文件访问权限、已发布的设计系统,以及用于画布操作的配套 figma-use 技能。

适合的任务

  • 从代码交接到 Figma适用于需要为现有应用界面创建可编辑、且与组件库关联的 Figma 设计稿的场景。
  • 更新现有设计稿适合有针对性地更改内容或变体,无需重新构建整个 Figma 页面。

需要确认的限制

  • 需要设计系统访问权限文档所述工作流假定可以访问已发布的组件或团队库,并且存在可用的 Figma MCP 连接。
  • 并非从 Figma 到代码根据设计生成应用程序实现明确不属于此技能的主要方向。

请准备这些输入

  • 目标 Figma 文件提供需要在其中创建或更新设计稿的文件或页面。
  • 界面来源提供应用程序代码,或按区块编写且包含真实文本的具体任务说明。
  • 库上下文明确应复用其组件和令牌的现有设计稿或已发布的库。

03 关键决策

关键决策

  1. 可以查找远程令牌

    来源文档区分本地变量和已关联库中的变量,从而避免创建不必要的重复令牌系统。

  2. 区块级检查

    与只查看整个页面的单张缩略图相比,逐个检查区块更容易发现变体错误和文字裁切。

04 示例任务

尝试聚焦的任务说明

以下示例任务说明尚未经过测试。使用前请检查该技能的配置。

检查配置

在使用此工作流时,请同时备妥 figma-use 及其 API 参考资料。这些 Beta 材料受 Figma 开发者条款约束。仅安装该技能并不会连接 Figma 文件或授予其访问权限。

上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md

需要已连接的 Figma MCP、目标文件访问权限、已发布的设计系统,以及用于画布操作的配套 figma-use 技能。

从一项交付成果开始

运行该技能前,请调整这份任务说明中的范围、来源材料和约束。

示例任务说明
使用 figma-generate-design 在指定的 Figma 文件中重建我们的账户设置设计稿。复用其中已发布的组件和变量,检查代码中的默认属性,并保留实际标签。先构建外层框架,再逐个构建区块。展示各区块的截图,并修正被裁切的文字或占位内容,然后才能将设计稿视为完成。

检查结果

根据这些可观察的标准检查实际输出。

  • 控件是已关联的组件实例,而不是手动绘制的替代元素。
  • 文本和变体与所提供的设计稿一致,包括默认属性。
  • 区块截图中没有标签裁切、元素重叠或占位内容残留。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面介绍下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
OpenAI
许可证
Figma 条款
已审查的快照
2026-10-07 · 49f948faa925
编辑来源摘要
使用现有库中的组件和变量构建 Figma 设计稿,并在组装过程中检查每个区块。

由 OpenDesign 根据链接的来源原创撰写。仓库星标数只是带有日期的受欢迎程度信号,并不代表技能使用情况或质量评分。

06 开始前的问题

开始前的问题

输出是截图吗?

主要工作流会创建可编辑的 Figma 节点和实例。捕获的网页可以用作参考,但并非预期的最终设计稿结构。

如果找不到本地变量怎么办?

来源文档指出还应检查已关联的库。本地变量 API 不会返回远程发布的变量。

能否只更新设计稿的一部分?

可以。它可以找到现有区块并更改其文本、变体或布局,同时保留不受影响的区域。

OpenDesign

为下一轮设计迭代留出空间。

将任务说明、来源材料和设计工作集中保存在本地工作区中。将该技能加入工作流之前,请检查其自身的配置要求。

上游源文件
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-design/SKILL.md