用途:从 Figma 设计稿直接实现 UI 组件或界面,借助 Figma MCP 提取设计规格并以像素级保真度还原。
主要能力:通过 mcp__figma__get_design_context 获取设计上下文(fileKey、nodeId),通过 mcp__figma__get_screenshot 获取截图用于比对;提取颜色、渐变、字体(字体、字号、字重、行高)、间距(内边距、外边距、间隙)、阴影、边框、圆角及组件结构。流程包括提取设计意图、理解代码库上下文、按现有设计令牌实现、截图比对并迭代修正差异,并处理响应式状态与更新进度日志。
使用方式:先检查是否存在 mcp__figma__* 工具并完成认证,否则停止并提示安装或配置访问令牌。命令示例:/arc:figma https://figma.com/design/xxx/yyy?node-id=123-456 ,或在已共享文件时使用 /arc:figma "the header component"。需加载设计规则与参考文件,包括 ${CLAUDE_PLUGIN_ROOT}/rules/interface/design.md、colors.md、spacing.md、typography.md、layout.md 等,并按 ${CLAUDE_PLUGIN_ROOT}/agents/design/figma-implement.md 执行。
适用场景:已有 Figma 设计稿需要实现为前端 UI 时。若需从零设计可用 /arc:design,多步骤计划实现可用 /arc:implement。
限制:缺少 Figma MCP 工具或认证失败时必须停止,不得猜测设计规格。资料未提供具体收费、价格、平台、效果等信息。