Figma 设计系统页面构建器
用现有设计系统组件把代码或描述转换成可维护的 Figma 页面。
文档明确限定使用场景、要求先加载 figma-use、要求传递 skillNames，并说明失败脚本应具原子性；但 use_figma 会对外部 Figma 文件执行创建、更新和删除操作，未系统说明数据流、敏感数据处理、用户确认边界、撤销方案或权限最小化。Figma MCP 依赖和官方来源可识别，因此保留中等分数，但因外部副作用、恢复机制有限且许可证未知而扣分。
工作流步骤、设计系统发现策略、分段构建、截图校验和错误恢复均有较具体说明；但静态材料没有可执行测试或 CI 证据，依赖 figma-use 及 Figma MCP 的可用性，且变量检查示例在普通 forEach 回调中使用 await，存在明显的代码可运行性问题。因此仅给出静态上限内的有限分数。
触发语句、适用范围、非适用场景、前置条件和 Web 应用的特殊流程都写得清楚；但依赖已发布设计系统、目标 Figma 文件和 Figma MCP，缺少中文输入/输出支持说明，也没有证明中国大陆网络环境下核心服务可达，因此对环境适配性扣分。
SKILL.md 具有较好的分层结构，包含边界、前置条件、步骤、参考文档、最佳实践和错误恢复；agents/openai.yaml 提供显示信息及 MCP 依赖，maintainers.yml 提供维护标识。但许可证未知，缺少明确版本、变更记录、维护责任人和更新路径，且关键规则依赖外部 figma-use 文档。
技能目标明确，理论上可将代码或描述转换为使用设计系统组件的 Figma 页面，并通过截图进行视觉校验；但静态审查没有代表性产出、执行记录或第三方验证，实际结果取决于组件、变量、样式和 Figma MCP 是否存在，仍可能需要较多人工修正，因此按静态上限保守评分。
源文件本身提供了详细流程、代码模式和错误处理约定，部分关键主张可审计；但没有技能专属测试套件、CI 覆盖、提交产出或独立复现证据，外部 figma-use 和 MCP 行为也未在本材料中交叉验证，因此证据强度较低。
- 执行前应明确确认目标 Figma 文件、将要修改的范围以及是否允许删除临时 generate_figma_design 输出。
- 应修正或验证包含 await 的 forEach 示例，并补充失败后的节点状态检查、可逆更新策略和清理方案。
- 核心功能依赖 Figma MCP、目标文件和已发布设计系统；应预先验证服务可达性、权限和组件库完整性。
- 许可证、版本、变更记录和维护责任尚未在所给材料中明确。
它能做什么 & 适用场景
该技能用于根据代码或描述，在 Figma 中创建或更新完整页面、屏幕或视图。它会先识别页面结构，再发现并复用设计系统中的组件、变量和样式。页面按区块逐步构建，并通过截图检查文本裁切、重叠、占位文本和错误变体。它依赖已连接的 Figma MCP 服务器，以及需要先加载的 figma-use 技能。
读取相关源代码或页面描述，识别页面主要区块和所用 UI 组件；通过 search_design_system 或现有页面发现组件、变量和文本及效果样式；通过 use_figma 创建页面包装框架、导入设计系统资源并按区块创建组件实例；使用组件属性覆盖文本；通过 get_screenshot 检查各区块和完整页面；更新已有页面时使用 get_metadata 定位结构，并替换、修改或删除相关节点。
- 前端开发者希望把已有网页页面转换为使用正式设计系统组件的 Figma 页面。
- 设计师需要更新一个已有 Figma 屏幕，使其匹配最新代码页面。
- 产品团队需要根据页面描述在 Figma 中搭建落地页、定价页或内容页。
- 设计系统团队希望新页面继续绑定组件、颜色、间距、圆角和样式令牌。
优缺点一览
- 优先复用设计系统组件、变量和样式，减少硬编码颜色和间距。
- 支持创建新页面，也支持更新已有 Figma 屏幕。
- 按区块构建并截图验证，明确覆盖常见布局和文本问题。
- 组件实例保持与源组件的关联，便于后续更新。
- 必须连接 Figma MCP 服务器。
- 目标文件需要已发布的设计系统或可访问的团队组件库。
- 使用者需要提供目标 Figma 文件信息以及源代码或页面描述。
- 资料没有提供测试套件、平台验证结果或该单项技能的 LICENSE.txt 内容。
如何安装
在 Codex 中使用 $skill-installer figma-generate-design 安装 curated 技能，安装后重启 Codex。SKILL.md 要求同时加载 figma-use，但提供的资料没有说明单独安装该技能的具体命令。
如何使用
确保已连接 Figma MCP 服务器，并提供 Figma 文件 URL 或 file key、目标文件上下文，以及页面源代码或描述。可使用触发语句：build this landing page in Figma、create in Figma from code 或 update the Figma screen to match code。使用前还必须加载 figma-use；技能会按区块构建页面并在每个区块后进行截图验证。