kim-ui2code

Kim截图转代码命令（四阶段三引擎）

公众号：老金带你玩AI | 微信：xun900207 | 备注AI加入AI交流群

你现在要协调3个AI工具，将UI设计稿/截图转换为可运行的前端代码：$ARGUMENTS

核心流程：Gemini(看图) → Claude(分析) → Codex(生成) → Gemini(审查)

⚠️ 文件写入规则（必须遵守）

Claude Code的Write工具要求：写入文件前必须先读取它。对于新文件：

# 创建新文件的标准流程：
1. 用 Bash 创建目录和空文件：mkdir -p 目录 && echo "" > 文件路径
2. 用 Read 读取该文件
3. 用 Write 写入实际内容

执行流程

阶段0.1：健康检查

参考 .claude/skills/kim-orchestrator/prompts/health-check.md 执行MCP健康检查。

本命令必须同时使用Gemini和Codex：

1. 检测 mcp__gemini__gemini （图像识别必需）
2. 检测 mcp__codex__codex （代码生成必需）

根据检测结果：

• ✅ 全部可用 → 继续执行完整流程
• ❌ Gemini不可用 → 无法执行（核心能力缺失，无法看图）
• ⚠️ Codex不可用 → 询问是否用Claude降级生成（质量可能下降）

阶段0.2：初始化工作目录

mkdir -p .kim-orchestrator/ui2code && echo "" > .kim-orchestrator/ui2code/phase1_vision.json && echo "" > .kim-orchestrator/ui2code/phase2_spec.json && echo "" > .kim-orchestrator/ui2code/phase3_code.md && echo "" > .kim-orchestrator/ui2code/phase4_review.md && echo "" > .kim-orchestrator/ui2code/result.md

然后读取这些文件：

• Read .kim-orchestrator/ui2code/phase1_vision.json
• Read .kim-orchestrator/ui2code/phase2_spec.json
• Read .kim-orchestrator/ui2code/phase3_code.md
• Read .kim-orchestrator/ui2code/phase4_review.md
• Read .kim-orchestrator/ui2code/result.md

阶段0.3：获取截图

根据用户输入类型处理：

情况1：本地文件路径

如果 $ARGUMENTS 是本地文件路径（如 ./design.png, C:\screenshots\ui.jpg）
→ 使用 Read 工具读取图片文件
→ 将图片内容传递给Gemini

情况2：URL链接

如果 $ARGUMENTS 是URL（如 https://example.com/design.png）
→ 直接将URL传递给Gemini

情况3：用户未提供

→ 询问用户提供截图路径或URL
→ 或者让用户直接粘贴图片到对话中

---

阶段1：视觉分析（Gemini）

调用 mcp__gemini__gemini 分析截图：

Prompt模板：

请仔细分析这张UI设计截图，提取以下信息：

## 1. 整体布局
- 页面类型（登录页/列表页/详情页/表单页/Dashboard等）
- 整体布局结构（顶部导航+侧边栏+主内容区等）
- 响应式设计要求（移动端/PC端/自适应）

## 2. 组件清单
列出所有可识别的UI组件：
- 按钮（样式、状态、位置）
- 输入框（类型、placeholder、验证）
- 卡片/列表项
- 导航栏/菜单
- 图标/图片
- 表格/数据展示
- 弹窗/模态框
- 其他组件

## 3. 样式信息
- 主色调和配色方案
- 字体大小层级
- 间距规律
- 圆角/阴影等视觉效果

## 4. 交互暗示
- 可点击元素
- 悬停效果暗示
- 表单验证提示
- 状态切换

请以结构化JSON格式输出分析结果。

将Gemini的响应保存到 .kim-orchestrator/ui2code/phase1_vision.json