README.md

July 26, 2026 · View on GitHub

draw-ui：先把页面想清楚，再把设计画出来。

02 draw-ui 是什么

draw-ui 是一个给 Agent 使用的 UI 设计 Skill。它可以把一段页面需求变成完整的 UI 设计稿，也可以把已有截图或生成图还原成可以运行的 HTML/CSS 或微信小程序页面。

上面的三张页面都来自 draw-ui 的真实生成流程：一张信息密集的分析后台、一张温暖的建筑研究工作台，以及一个手机订餐页面。页面类型和风格可以不同，但开始方式是一样的——先理解页面要解决什么，再决定怎么画。

我们提供	draw-ui 负责	最后得到
页面目标、真实内容、现有截图和不能改动的区域	梳理需求、选择参考图策略、组织提示词并生成设计	一张或一组 UI 设计稿
已确认的设计稿或产品截图	拆分代码与图片素材，构建页面并反复对照	可以运行的 HTML/CSS 页面或微信小程序页面

默认优先使用 Agent 当前内置的图片生成能力。只有环境里没有内置工具、明确需要 ZenMux，或需要脚本固定本地输出路径时，才会使用仓库里的生成脚本。

03 开始前，先把页面讲清楚

如果我们只说“设计一个 Dashboard”，模型只能自己猜业务，最后很可能画得漂亮，却不是我们需要的页面。开始之前，draw-ui 会先确认三件事：

这是哪个页面，最核心的功能是什么？
有没有现有 App 截图或设计稿可以参考？
截图里有没有不能改动的区域，例如侧边栏或顶部导航？

信息已经足够清楚时会直接开始，不会为了流程重复提问。

提示词主要有两种写法：

写法	怎么写	更适合
类比法	说明这个工具像什么，例如“像乐谱一样解码一条热门视频”	需要新鲜设计方向、希望模型发挥的时候
清单法	列出页面里真实存在的信息，例如用户名、30 天趋势、Campaign 状态和触达数	业务信息必须准确、页面需要稳定落地的时候

几条简单规则会明显影响结果：使用真实示例数据，不写 placeholder；颜色使用 HEX；不要把像素、列数和间距写得太死；提示词尽量控制在 800 字以内。

04 参考图决定模型会模仿什么

参考图里出现的内容，模型都会倾向于模仿，包括我们原本不想让它照搬的部分。因此参考图不是越完整越好，而是要根据目的来选。

现在有什么	怎么做	会得到什么
没有截图，只想探索	不传参考图	模型可以自由决定整套界面
想保留导航或侧边栏	使用纯净边框图：保留固定区域，把内容区清空	外框保持一致，内容区仍有设计空间
需要整体风格准确对齐	使用完整截图，并明确哪些区域不能改	风格最接近原页面，但内容布局也更容易被模仿

如果要生成多张视觉一致的页面，会先确认第一张，再把它作为下一张的参考，逐张完成。这样比同时生成多张更容易保持导航、字体和组件一致。

05 怎么把设计稿还原成 HTML 或微信小程序

还原设计稿不是把整张截图铺成网页背景。draw-ui 会把页面拆成代码和图片素材两部分：

用代码完成	保留或重新生成图片素材
页面布局、卡片、文字、按钮、表格、筛选器、普通线性图标	Logo、品牌符号、复杂插画、照片、3D 或玻璃质感、难以用 CSS 准确还原的视觉效果

设计稿或截图
  → 判断页面结构
  → 整理需要单独生成的素材
  → 按目标环境构建 HTML/CSS 或小程序页面
  → 在对应工具中截图
  → 与原图对照并修正

Logo、小号深色图标和大幅彩色插画不会混在同一张素材板里。不同素材使用不同的生成与抠图方式，避免白边、绿边和模糊文字进入最终页面。

还原时按目标环境选择流程：

HTML/CSS：先阅读 references/html-reconstruction.md，用浏览器固定参考图的 viewport 截图，再做像素对比；TypeScript、React、Vue 等现有项目优先阅读 references/software-reconstruction.md 并沿用项目架构。
微信小程序：不要先生成 HTML 再机械转换，直接用 WXML/WXSS 与 TS/JS 实现布局、交互和数据；复杂插画、Logo、纹理等放进 ${miniprogramRoot}/assets/。若 miniprogramRoot 是 miniprogram/，文件应放在 miniprogram/assets/，WXML 的 src 按该根目录引用，例如：
```
<image class="hero" src="/assets/illustrations/hero.png" mode="aspectFit" />
<image class="banner" src="/assets/illustrations/banner.png" mode="widthFix" />
```
在微信开发者工具中固定同一设备预设、页面 viewport 宽高和 DPR；截图对比只取页面可视区，排除系统状态栏、胶囊按钮和开发者工具栏。需要自动化时，可用 miniprogram-automator 连接开发者工具后截图，再做 pixel diff 与人工 side-by-side 检查。

06 怎么使用

方式一 · 执行命令

npx skills add oil-oil/draw-ui

方式二 · 直接交给 Agent

请安装这个 Skill：https://github.com/oil-oil/draw-ui

安装完成后，可以直接描述页面：

[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。

也可以提供截图，让它还原：

[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。

脚本调用与比例选项

没有内置图片工具，或者需要固定本地输出路径时，可以使用：

# 不使用参考图
scripts/ask_draw.sh --type wide --name "dashboard" --prompt "..."

# 使用参考图
scripts/ask_draw.sh \
  --frame /path/to/reference.png \
  --type wide \
  --name "dashboard" \
  --prompt "..."

`--type`	比例	适合
`wide`	16:9	桌面应用和网站页面
`classic`	4:3	Dashboard 和信息密集界面
`square`	1:1	卡片、弹窗和局部组件
`portrait`	3:4	手机页面

脚本使用 ZenMux。API Key 可以放在 ZENMUX_API_KEY、项目的 .env.local，或 ~/.config/see/api_key。

也可以显式使用 OpenAI Responses API。该路径不会读取 Codex 的本地登录凭据，需要设置 OPENAI_IMAGE_API_KEY 或 OPENAI_API_KEY。提示词和参考图会发送到所选 API；脚本默认设置 store: false，不创建可继续的服务端会话状态：

# Windows PowerShell：完整复刻参考界面
scripts\ask_draw.ps1 `
  --provider codex `
  --mode replicate `
  --frame C:\path\to\reference.png `
  --type wide `
  --name "dashboard-replica" `
  --prompt "Recreate this UI screen as closely as possible."

# macOS / Linux：保留应用外框，只生成内容区
scripts/ask_draw.sh \
  --provider codex \
  --mode frame-lock \
  --frame /path/to/sidebar-reference.png \
  --type wide \
  --name "dashboard" \
  --prompt "Design the dashboard content area while preserving the app chrome."

如果目标仓库是 TypeScript、React、Next.js、Vue、Svelte、Electron 或 Tauri 项目，先阅读 references/software-reconstruction.md。默认在现有应用架构里复刻 UI；只有明确需要一次性原型时才退回独立 HTML。

License

MIT