---
name: draw-ui
description: >
  Generate UI design mockups and help reconstruct generated UI screenshots into HTML/CSS or WeChat Mini Program WXML/WXSS. Prefer built-in image generation when available; use ZenMux + GPT Image 2 for scripted local outputs, or the optional Codex/OpenAI-compatible provider in Codex environments.
  TRIGGER when the user says "生成图片", "画图", "设计 UI", "UI 设计", "出图", "create an image", "design a screen",
  "landing page", "设计稿还原", "截图还原 HTML", "把图片复刻成网页", "微信小程序复刻", "小程序高保真", or when another skill needs image generation.
---

# Draw UI Skill

Prefer the built-in image generation tool when it is available in the current agent/runtime. It is usually simpler, avoids provider drift, and produced landing page mockups at the same quality level as ZenMux in our comparison.

Use `scripts/ask_draw.sh` only when built-in image generation is unavailable, when the user explicitly asks to use ZenMux, or when you need scripted local output paths. The script uses ZenMux by default. Default model: `openai/gpt-image-2`.

In Codex environments, `scripts/ask_draw.sh --provider codex` or `scripts\ask_draw.ps1 --provider codex` can call an OpenAI-compatible Responses API using `OPENAI_IMAGE_API_KEY` or `OPENAI_API_KEY`. The script does not reuse Codex login credentials. Use `--mode replicate` for whole-screen replication, `--mode frame-lock` for preserving app chrome, and `--mode asset-redraw` for local crop-to-clean-asset workflows.

When the user wants to reconstruct a screenshot or generated mockup into a real app, especially TypeScript, React, Next.js, Vue, Svelte, Electron, Tauri, or an existing frontend repo, read `references/software-reconstruction.md` first. Treat static HTML as a fallback only when no app stack is available or the user explicitly asks for standalone HTML.

---

## Onboarding：开始前先问用户这些问题

如果用户只是泛泛地说“设计一个页面”，先用下面的问题引导用户，收集到足够信息再动手。用户已经给出明确页面、风格或参考图时，可以直接执行，不要为了流程感反复追问。

### 必问（缺少任何一项都会影响质量）

> **1. 你想设计哪个页面？这个页面的核心功能是什么？**
> 不能只靠页面名称猜功能——业务理解错了，AI 会画出完全错误的东西。

> **2. 你有现有的 App 截图或设计稿可以上传吗？**
> 有截图 → 可以保持导航/侧边栏的视觉一致性。没有也可以生成，但每次结果会有差异。

> **3. 如果有截图，里面有没有你不希望 AI 改动的区域（比如侧边栏、顶部导航）？**
> 这决定了用哪种参考图策略（见下方）。

### 选问（根据情况）

> **你偏向什么风格？** 比如：分析型工具、温暖品牌感、极简、游戏感……
> **需要生成多张保持一致的屏幕吗？**

---

## 根据用户回答，选择参考图策略

**核心原则：参考图里有什么内容，AI 就会倾向于模仿什么——包括你不想让它模仿的部分。**

| 用户情况 | 策略 |
|---------|------|
| 没有截图，纯创意探索 | 不传参考图，完全自由生成 |
| 有截图，但只想锁定导航/侧边栏 ⭐ | 让用户提供或制作**纯净边框图**（把内容区涂成纯色），只传边框 |
| 有截图，需要整体风格精准对齐 | 传完整截图，但告知用户内容区创意会受影响 |

**纯净边框图怎么做**：截一张 App 刚打开时内容区为空白的截图，或用任意工具把内容区覆盖为纯色。

如果需要生成多张一致的屏幕：**必须串行执行**（一张完成后再开始下一张），不能并行。

---

## 设计稿还原为 HTML / 小程序的素材策略

当用户想把生成图、截图或设计稿还原成 HTML/CSS，或直接还原成微信小程序 WXML/WXSS 时，先读取 `references/html-reconstruction.md`。核心原则：页面结构优先代码化；logo、品牌符号、复杂插画、3D/玻璃质感、半透明渐变等难复刻视觉元素要素材化。裁图只作为图生图参考和定位依据，最终放进页面的复杂资产要用图生图重绘，再裁边、抠图和清理边缘。

微信小程序场景不要先生成 HTML 再机械转换。优先直接落到 WXML/WXSS 与 TS/JS：布局、卡片、按钮、文本和常规图标用小程序代码实现；复杂插画、空状态、hero 装饰和品牌视觉单独生成为 PNG/WebP/SVG 资产，放入 `${miniprogramRoot}/assets/`。若 `miniprogramRoot` 为 `miniprogram/`，实际目录就是 `miniprogram/assets/`，WXML 资源路径从该根目录写起，例如分别使用合法的 `mode="aspectFit"` 或 `mode="widthFix"`。验收时在微信开发者工具固定设备预设、页面 viewport 宽高和 DPR；截图只取页面可视区，排除系统状态栏、胶囊按钮和工具栏，再用 `miniprogram-automator`（如需自动化）截图、pixel diff 与人工 side-by-side 检查。

透明素材策略：厂商 logo、深色 wordmark、小号深色图标优先生成大尺寸纯白底素材，再用保守白底转 alpha；复杂彩色插画、hero 装饰、产品图优先绿幕或真实透明输出。不要把小 logo 和大插画塞进同一张素材板。

---

## 构建提示词

### 两种经过验证有效的写法

**类比法（创意效果最好）**
说"这个工具像什么"，让 AI 借用那个参照物的设计语言，而不是描述布局。

```
像乐谱一样解码爆款视频——Think Notion's calm focus meets a music producer's session notes.
```

**清单法（最稳定，适合需要准确落地的页面）**
列出页面上有哪些信息，不说怎么排，让 AI 自己决定布局。

```
页面包含：用户名和头像、近30天数据趋势图、活跃 Campaign 列表（名称/状态/触达数）、快捷操作入口。
```

### 质量规则

- **不写排版规格**（像素、列数、padding）— 描述越具体，AI 越像在执行指令而不是做设计，结果反而更差
- **给真实示例数据**，不用 placeholder — `"2.3M views, 180K saves"` 比 `"显示播放量"` 效果好十倍
- **颜色用 HEX**，不用 HSL — `#f9f5f0` 比 `hsl(28 25% 97%)` 对模型更准确
- 如果传了参考图，在 prompt 开头明确说明哪些区域需要保持不变
- **Prompt 控制在 800 字以内** — 超长会导致 server disconnect

---

## 执行命令

优先级：

1. 有内置生图工具时，优先直接使用内置生图工具。
2. 用户明确要求 ZenMux，或需要脚本化批量生成、本地固定输出路径时，再使用 `scripts/ask_draw.sh`。
3. 内置工具和 ZenMux 质量接近时，选择内置工具，减少额外 provider 依赖。

```bash
# 无参考图
scripts/ask_draw.sh --type wide --name "screen-name" --prompt "..."

# 传参考图（--frame 自动作为第一个参考）
scripts/ask_draw.sh \
  --frame /path/to/reference.png \
  --type wide \
  --name "screen-name" \
  --prompt "..."
```

**多张屏幕**：必须串行执行（一张完成再开下一张），不能并行。偶发 disconnect 属正常，重试即可。

---

## Options

| Flag | 说明 | 默认 |
|------|------|------|
| `--type` | `wide`(16:9) / `square`(1:1) / `portrait`(3:4) / `classic`(4:3) | `wide` |
| `--prompt` | 提示词 | 必填 |
| `--frame` | 参考图路径 | — |
| `--ref` | 额外参考图（可重复）| — |
| `--name` | 输出文件名 | auto |
| `-o` | 自定义输出路径 | `~/.local/share/draw/outputs/YYYY-MM-DD/` |

成功输出：`output_path=<path>`

API Key 查找顺序：`ZENMUX_API_KEY` 环境变量 → `.env.local`（当前目录往上找）→ `~/.config/see/api_key`