用途：该技能用于 Figma 驱动的实现流程，借助 Figma MCP 服务器获取设计上下文、截图、变量和素材，并将 Figma 节点翻译为生产代码。
主要能力：可调用 get_design_context 获取指定节点的结构化表示；若响应过大或被截断，先用 get_metadata 获取高层节点图，再重新获取所需节点；调用 get_screenshot 获取待实现节点变体的视觉参考；下载所需素材并开始实现；支持通过 assets 端点提供图片和 SVG 素材。
必要用法：固定流程为先运行 get_design_context，再运行 get_screenshot，两者齐备后才下载素材并开始实现；将输出（通常为 React + Tailwind）转换为项目自身的约定、样式和框架；优先复用项目的颜色令牌、组件和排版；完成后与 Figma 进行 1:1 外观和行为校验。服务器基于链接工作：复制 Figma 画板/图层链接并在请求实现帮助时提供给 MCP 客户端；客户端无法浏览该 URL，但会从链接中提取节点 ID，需确保链接指向确切的节点或变体。
实现规则：将 Figma MCP 输出视为设计和行为的表示，而非最终代码风格；在适用时将 Tailwind 工具类替换为项目偏好的工具类或设计系统令牌；复用现有组件而非重复实现；一致使用项目的颜色系统、排版比例和间距令牌；尊重仓库已有的路由、状态管理和数据获取模式；力求与 Figma 设计达到 1:1 视觉一致，冲突时优先设计系统令牌并最小化调整间距或尺寸；最终 UI 需对照 Figma 截图校验外观和行为。
素材处理：若 Figma MCP 服务器为图片或 SVG 返回 localhost 来源，直接使用该来源；不要导入或添加新的图标包，素材应来自 Figma 载荷；若已提供 localhost 来源，不要使用或创建占位符。
适用场景：将 Figma 设计稿实现为项目代码，尤其适合设计驱动的界面开发。
限制与参考：设置、验证、故障排查及基于链接的使用提醒见 references/figma-mcp-config.md；工具目录及用于选择框架/组件和获取元数据的提示模式见 references/figma-tools-and-prompts.md。其他平台支持、收费与价格信息暂未提供。