用途：该技能面向 Figma 驱动的实现流程，借助 Figma MCP 服务器从 Figma 获取设计上下文、截图、变量和资源，并将 Figma 节点翻译为生产代码。
主要能力：可获取指定节点的结构化设计表示、节点变体的视觉截图、高层节点映射，以及图片和 SVG 资源；支持基于链接的调用方式，从 Figma 框架或图层链接中提取节点 ID。
必要用法：必须按顺序执行——先运行 get_design_context 获取目标节点的结构化表示；若响应过大或被截断，先运行 get_metadata 获取高层节点映射，再用 get_design_context 重新获取所需节点；随后运行 get_screenshot 获取视觉参考；在同时获得设计上下文与截图后，才下载所需资源并开始实现。实现时把输出（通常为 React + Tailwind）视为设计与行为的表示而非最终代码风格，替换为项目偏好的工具类与设计系统令牌，复用现有组件、颜色系统、字体层级与间距令牌，并遵循仓库已有的路由、状态管理和数据获取模式。完成后需对照 Figma 截图验证外观与行为的一致性。
资源处理：Figma MCP 服务器提供资源端点，可提供图片和 SVG；若返回 localhost 来源，应直接使用该来源，不要导入或新增图标包，也不要在已有 localhost 来源时使用或创建占位符。
适用场景：需要按 Figma 设计稿实现界面、保持与设计 1:1 视觉一致的前端开发工作。
限制：服务器基于链接工作，客户端无法浏览 URL，只能从链接中提取节点 ID，因此链接必须指向确切的节点或变体；设置、验证与故障排查细节见 references/figma-mcp-config.md，工具目录与提示模式见 references/figma-tools-and-prompts.md。