用途：把 Figma 设计稿翻译成用户仓库中的生产级代码，保证与设计稿 1:1 的视觉一致性。仅当交付物是代码时使用；若需在 Figma 内创建/编辑/删除节点，应改用 figma-use；若需从代码或描述生成整页 Figma 屏幕，应改用 figma-generate-design；仅需 Code Connect 映射时用 figma-code-connect-components；编写可复用智能体规则时用 figma-create-design-system-rules。
前提：Figma MCP 服务器已连接可访问；用户提供形如 https://figma.com/design/:fileKey/:fileName?node-id=1-2 的链接，或使用 figma-desktop MCP 时在桌面应用中直接选中节点；项目最好已有设计系统或组件库。
主要能力与流程：按顺序执行，不跳步。步骤 0 配置 Figma MCP，本地通过 Figma 桌面应用运行，配置为 {"mcp": {"Figma Desktop": {"type": "remote", "url": "http://127.0.0.1:3845/mcp"}}}；VS Code 扩展在 Kilo Settings > Agent Behaviour > MCP Servers 中编辑全局或项目 MCP；CLI 写入 kilo.json（全局 ~/.config/kilo/kilo.json，项目 ./kilo.json 或 ./.kilo/kilo.json，项目级优先），重启 Kilo 后继续。步骤 1 获取节点 ID：从 URL 解析 fileKey 与 nodeId，或使用桌面应用当前选中节点（仅 figma-desktop）。步骤 2 调用 get_design_context(fileKey=":fileKey", nodeId="1-2") 获取布局、字体、颜色与设计令牌、组件结构、间距；响应过大时先用 get_metadata 获取节点图，再逐个获取子节点。步骤 3 用 get_screenshot 获取视觉基准。步骤 4 下载资源，若返回 localhost 源则直接使用，不引入新图标包、不使用占位符。步骤 5 将输出（通常为 React + Tailwind）翻译为项目框架、样式与约定，复用既有组件与令牌。步骤 6 达成 1:1 视觉一致，避免硬编码，遵循 WCAG。步骤 7 对照截图校验布局、字体、颜色、交互状态、响应式与资源。
限制：需 Figma MCP 可用；远程服务器需链接，选择式提示仅限 figma-desktop；设计令牌与 Figma 冲突时优先项目令牌并微调间距尺寸；偏离设计需在注释中说明原因。