Figma 代码组件连接器
将 Figma 组件映射到代码实现，保持设计与代码关联。
流程限定为建议获取与映射创建，并要求用户确认后才执行写入，且说明了权限、已映射组件和失败原因；但未明确数据流、敏感数据处理、依赖安全、撤销或恢复机制，许可证未知，因此扣分。
步骤、参数格式、常见错误和脚本行为基本一致，异常情况有可读反馈；但仅有静态材料，没有执行证据、测试套件或关键路径复现，因此按静态上限保守扣分。
触发语句、前置条件、适用边界和不适用场景较明确；但依赖 Figma MCP、Figma 组织或企业计划及可访问的海外服务，未说明中文支持或中国大陆网络可达性，因此扣分。
文档结构清楚，包含前置条件、分步流程、示例、检查清单和常见问题；但仓库 README 标明已弃用，许可证、版本、变更记录、维护责任和更新路径不完整，因此扣分。
能够覆盖从组件发现、代码匹配、用户确认到批量映射和结果汇总的核心任务，预期输出直接可用；但没有实际结果或第三方执行证据，且映射质量仍依赖人工判断，因此扣分。
技能文件、配置、参考清单和脚本均可审计，参数约束较具体；但没有提交测试、CI 覆盖或独立复现材料，外部文档链接也未在本次证据中核验，因此扣分。
- 核心功能依赖 Figma MCP、已发布团队组件及 Organization/Enterprise 计划；应先确认账号权限、服务可达性和组件发布状态。
- 映射创建会产生外部状态变更；虽然流程要求用户确认，但未提供明确的撤销或备份步骤，建议在创建前记录现有映射并准备人工回滚。
- 仓库 README 标明已弃用，安装或采用前应确认该技能仍由维护方更新且许可证可获得。
它能做什么 & 适用场景
该技能用于通过 Figma Code Connect，将 Figma 设计组件与代码组件建立映射。它读取选定 Figma 节点的信息，识别尚未连接的已发布组件，并扫描代码库寻找匹配实现。确认匹配后，它批量创建映射，帮助设计师和开发者在设计与代码之间导航。使用它需要可访问的 Figma MCP、包含 node-id 的 Figma URL（或 Figma Desktop 中已选节点），以及代码库访问权限。
调用 get_code_connect_suggestions 获取选区中的未映射组件、组件属性和缩略图；扫描代码库中的组件文件，比较名称、层级、属性和默认值；向用户展示候选匹配并等待选择；随后调用 send_code_connect_mappings 创建获选映射，并报告成功或失败的具体结果。
- 设计系统维护者希望把已发布的 Figma Button、Card 或 Input 组件连接到对应的 React 组件。
- 前端开发者在一个 Figma 组件框架中批量查找未映射组件，并选择部分组件建立 Code Connect 映射。
- 团队拥有多个相似代码组件，需要根据属性接口和结构让用户确认最合适的实现。
- 组件尚未发布、缺少 Figma URL 的 node-id 或权限不足时，团队需要定位 Code Connect 失败原因。
优缺点一览
- 覆盖从组件发现、代码库匹配到批量创建映射的完整流程。
- 比较组件名称、属性、层级和默认值，而不只依赖文件名。
- 明确处理未发布组件、重复映射、权限不足和找不到代码匹配等情况。
- 依赖 Figma MCP、已发布到团队库的组件，以及 Organization 或 Enterprise 计划。
- 要求 Figma URL 包含 node-id，除非使用 Figma Desktop 的当前选区。
- 必须由用户确认匹配后才创建映射；技能不会自动替用户决定有歧义的候选。
- 提示材料未提供测试套件、具体框架兼容性验证或单独许可证文件内容。
如何安装
该技能位于 openai/skills 的 skills/.curated/figma-code-connect-components/。README 说明可在 Codex 中运行 $skill-installer figma-code-connect-components 安装，安装后重启 Codex。该仓库已被标记为弃用，当前插件示例应参考 OpenAI Plugins repository；本提示未提供更具体的安装目标路径或许可证文件内容。
如何使用
先连接并确保可访问 Figma MCP。向技能提供类似 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的 Figma URL，或在 Figma Desktop 中选择节点。技能会把 URL 中的 1-2 转换为工具所需的 1:2，获取建议并扫描代码库；确认候选匹配后，再创建选定映射。示例触发语句：Connect this component to code: <Figma URL>。
对比同类
与 figma-use 不同，本技能用于 Code Connect 映射，不用于通过 Plugin API 写入 Figma 画布；完整页面生成应使用 figma-generate-design，依据 Figma 实现产品代码应使用 figma-implement-design。