技能介绍

问题：设计稿与代码之间的断层

Figma 是绝大多数团队的设计事实标准，但一旦进入实现阶段，设计稿和代码之间就会出现断层。设计师在画布上完成布局、间距和组件变体，工程师则需要回到 IDE 里凭肉眼和标注还原。人工对照不仅容易漏掉 1px 的对齐偏差，也难以在组件状态、自动布局和多端适配之间保持一致。更现实的问题是，编码代理（如 Cursor 或 Claude Code）虽然擅长生成代码，却无法直接感知 Figma 画布上的上下文——它们不知道当前选中的是哪个图层，也不知道某个节点背后的约束条件。

机制：通过 MCP 把 Figma 接入代理

这个技能解决的就是上述断层。它依赖 Talk to Figma 插件和本地 WebSocket 服务，把 Figma 暴露为一组 MCP 工具，让编码代理可以直接读取和修改设计数据。核心能力包括：

读取当前选择：通过 read_my_design 获取当前选中节点的详细属性，不需要额外传参，适合让代理快速理解设计师当前关注的部分。
查询指定节点：get_node_info 针对单个节点返回完整信息，get_nodes_info 支持通过节点 ID 数组批量获取多个节点的详情。
修改与批量操作：代理可以基于返回的结构创建新节点、添加标注，或对已有设计进行批量更新，而不必逐个手动点击。

边界与注意点

这条链路依赖几项前置条件：本地需要运行 Bun，客户端必须支持 MCP（如 Cursor），Figma 桌面端或 Web 端需要安装 Talk to Figma 插件，并且 WebSocket 服务器要保持在线。另一个需要留意的地方是批量编辑的风险：当代理一次性修改大量节点时，一旦结构或命名不匹配，后续节点可能无法正确解析。建议在执行批量操作前先用只读工具检查返回的节点信息，确认 ID 和层级关系后再做修改。此外，插件版本的更新可能影响工具参数，使用时应以上游文档为准。