C✳CODEZ.WIN
🌐 简体中文

Skill 多语言阅读指南

figma-generate-design用途、用法与原始来源

当任务涉及将应用程序页面、视图或多部分布局转换为 Figma 时，请将此技能与 Figma 使用结合使用。触发器包括：“写入 Figma”、“从代码创建 Figma”、“将页面推送到 Figma”、“将此转换为 Figma”。app/page并在 Figma 中构建”、“创建屏幕”、“在 Figma 中构建落地页”、“更新 Figma 屏幕以匹配代码”。当用户想要根据代码或描述在 Figma 中构建或更新完整的页面、屏幕或视图时，这是首选的工作流程技能。它通过 search_design_system 发现设计系统组件、变量和样式，导入它们，并使用设计系统标记（而非硬编码值）逐节增量地组装屏幕。

原文采集时间:

来源仓库
openai/skills
SKILL.md
skills/.curated/figma-generate-design/SKILL.md
仓库 Star
28,420
仓库最近更新
2026/10/29
能力分类
设计
最近采集时间

许可：未标明

原始 SKILL.md

流程片段用于帮助阅读上游说明。本页没有执行第三方 Skill，不属于实测评测。

下面的用途和操作片段来自上游文档，由本站整理并翻译，和另行标注的 Codez 编辑分析分开展示。

这个 Skill 能做什么

当任务涉及将应用程序页面、视图或多部分布局转换为 Figma 时，请将此技能与 Figma 使用结合使用。触发器包括：“写入 Figma”、“从代码创建 Figma”、“将页面推送到 Figma”、“将此转换为 Figma”。app/page并在 Figma 中构建”、“创建屏幕”、“在 Figma 中构建落地页”、“更新 Figma 屏幕以匹配代码”。当用户想要根据代码或描述在 Figma 中构建或更新完整的页面、屏幕或视图时，这是首选的工作流程技能。它通过 search_design_system 发现设计系统组件、变量和样式，导入它们，并使用设计系统标记（而非硬编码值）逐节增量地组装屏幕。

如何使用：上游操作流程

使用 generate_figma_design 的并行工作流（仅限 Web 应用）

当从可在浏览器中渲染的 Web 应用构建屏幕时，并行运行两种方法可获得最佳效果：首先使用此技能的工作流程（use_figma + 设计系统组件）构建屏幕，然后运行generate_figma_design截取正在运行的 Web 应用程序的像素级完美屏幕截图。两项操作完成后：更新 use_figma 输出，使其与从中截取的像素级完美布局相匹配。generate_figma_design截图。截图提供了精确的间距、尺寸和视觉效果，而 use_figma 输出则包含了与设计系统关联的正确组件实例。

原文片段 · L30 ↗

所需工作流程

请按以下步骤操作，不要跳过任何步骤。

原文片段 · L44 ↗

步1了解屏幕

在开始使用 Figma 之前，请先了解你要构建的内容：如果是从代码构建，请阅读相关的源文件，了解页面结构、各个部分以及使用的组件。确定屏幕的主要部分（例如，页眉、首页横幅、内容面板、价格表、常见问题解答折叠面板、页脚）。对于每个部分，列出涉及的 UI 组件（按钮、输入框、卡片、导航栏、折叠面板等）。

原文片段 · L48 ↗
原文片段 · js ↗
const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

环境与依赖

先决条件

必须连接 Figma MCP 服务器。目标 Figma 文件必须具有已发布的包含组件的设计系统（或可访问团队库）。

原文片段 · L21 ↗

限制与结果检查

本次未从该文件选出独立的限制片段，不代表适用于所有输入或环境。请阅读完整原文，并自行验证实际结果。

开始使用前

  1. 先核对支持的 Agent 宿主和仓库安装说明。保留完整 Skill 目录及其引用的脚本、资源和文档，只复制 SKILL.md 可能漏掉依赖。
  2. 向 Agent 提供实际输入、期望输出和验收标准。调用方式与可用工具取决于宿主环境，本站不假定存在通用的安装命令。
  3. 先在临时项目或输入副本上试用。涉及修改文件、远程服务或计费资源的操作，应逐项核对后再授权。
  4. 按照原文检查项和自己的需求验证输出。成功触发或仓库 Star 较高，都不能证明结果正确。

Skill 文件与目录格式规范 ↗

继续阅读原始文档

翻译与介绍范围

本页从固定版本的上游 SKILL.md 整理用途与操作片段，译文使用辅助翻译。它不是完整手册，也不代表经过兼容性实测；使用前请核对原文及其引用文件。

介绍依据下方列出的固定版本；当前仓库动态和目录采集时间单独展示。

固定版本来源
阅读原文 ↗
原文采集时间
来源提交版本
49f948faa9258a0c61caceaf225e179651397431
原文 SHA-256
45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9
返回完整 Skill 目录