figma

Figma 技能通过 Figma MCP 服务器作为设计意图与程序实现之间的桥梁，直接从设计文件中提取精确的元数据、视觉资源与结构上下文。此技能专为需要将高保真 UI/UX 设计转化为功能性、生产级前端组件的开发人员与工程师所设计。通过自动化提取设计标记、布局属性与视觉资源，确保了视觉高度一致性，同时严格遵守项目特定的编码标准与内部设计系统。对于人工像素对齐容易出错或耗时的复杂前端任务而言，这是一个不可或缺的工具。

• 自动获取特定 Figma 框架、组或图层 ID 的设计上下文与节点层级。

• 生成截图以进行视觉验证及实现前后的行为参照。

• 直接从 Figma 负载中提取并提供图像或 SVG 资源，确保版本对齐。

• 将 Figma 设计标记、排版与间距映射到项目现有的 CSS/Tailwind 公用程序类与组件库中。

• 强制执行整个代码库中 React 与 Tailwind 结构的一致性实现。

• 与支持 MCP 的代理工具（如 Claude Code、Cursor 或 Cline）无缝集成，实现具备上下文感知的编码工作会话。

• 此技能需要正确配置 Figma MCP 服务器，并设置相关的环境变量与验证凭证。

• 务必优先使用项目特定的设计系统标记，而非从 Figma 提取的原始 Tailwind 数值，以防止设计偏离。

• 遵循推荐的三步骤工作流程：首先获取设计上下文，接着截取视觉截图，最后执行实现阶段以确保准确性。

• 使用基于链接的提示方式，提供特定的 Figma 节点 URL，以确保代理工具锁定正确的组件变体。

• 若特定任务需要针对独立组件进行像素级精确实现，请确保将此技能与团队既定的设计转代码指南结合使用。

• 避免手动建立资源占位符；请务必依赖 Figma MCP 服务器的资源端点，以维护单一真理来源。