draw-ui 是一个给 Agent 使用的 UI 设计 Skill。它默认追求简洁、现代、有自身风格的界面，先确定视觉方向与业务主次，再生成便于实现的 UI 设计稿；也可以把已有截图或生成图还原成 HTML/CSS、现有前端项目或微信小程序。设计稿与已验证的可运行页面会明确区分。
上面的三张页面都来自 draw-ui 的真实生成流程：一张信息密集的分析后台、一张温暖的建筑研究工作台，以及一个手机订餐页面。页面类型和风格可以不同，但开始方式是一样的——先理解页面要解决什么，再决定怎么画。示例用于展示视觉方向，是否适合实际产品还要检查组件一致性、信息密度、素材边界和响应式。
| 我们提供 | draw-ui 负责 | 最后得到 |
|---|---|---|
| 页面目标、真实内容、现有截图和不能改动的区域 | 梳理需求、选择参考图策略、组织提示词并生成设计 | 一张或一组 UI 设计稿 |
| 已确认的设计稿或产品截图 | 拆分代码与图片素材，构建页面并反复对照 | 可运行的 HTML 页面、项目内界面或微信小程序页面 |
默认使用 Agent 当前内置的图片生成能力；指定模型、服务或生成 Skill 时沿用用户选择。固定保存路径通过生成后复制解决。没有可用能力时会说明限制，只有用户选择脚本服务才使用仓库适配器。
如果我们只说“设计一个 Dashboard”，模型只能自己猜业务，最后很可能画得漂亮，却不是我们需要的页面。开始之前，draw-ui 会先确认三件事：
- 这是哪个页面，最核心的功能是什么？
- 有没有现有 App 截图或设计稿可以参考？
- 截图里有没有不能改动的区域，例如侧边栏或顶部导航？
信息已经足够清楚时会直接开始，不会为了流程重复提问。
默认先确定视觉构思，再组织内容和组件。页面可以保留特殊裁切、大小对比和适度重叠，同时说明实现与适配方式；不会把所有业务都套进相同卡片模板。
官网和落地页默认生成从导航到页脚的完整纵向长页，保持桌面布局宽度。工具不能直接输出清晰长图时，按区块分段生成，再检查并组装为一张完整预览。只有明确要求首屏时才只做首屏。
生成图片不代表交互和响应式已经实现。交付包含设计稿、简短实现说明和待验证项；正式还原时优先组件与可编辑文字，只有摄影、插画等视觉内容使用独立素材。
参考图帮助表达字体、比例、留白和组件细节，也可能带入无关布局。因此先说明要借鉴的设计关系、要保留的区域和需重组的业务内容。需要视觉对齐时核验模型与接口的图片输入能力，不把文字转述当作已经传图。
| 现在有什么 | 怎么做 | 会得到什么 |
|---|---|---|
| 没有截图，只想探索 | 不传参考图 | 模型可以自由决定整套界面 |
| 想保留导航或侧边栏 | 明确固定范围，必要时使用内容区中性的参考副本 | 外框保持一致，内容区仍有设计空间 |
| 借鉴优秀设计风格 | 输入参考图，提取字体、比例、色面与细节关系 | 按当前业务重组的新设计 |
| 需要精准还原 | 使用完整截图，并明确固定区域 | 尽量保持原页面的内容与样式 |
多张页面或交互状态共享一张检查过的基础图，并记录哪些布局不变、哪些数据和控件需要变化。支持多宫格流程总览与逐张延展；同时检查风格一致性和状态正确性，不把图片序列称为可运行原型。模型编辑对比使用同一基准和提示词，并标明基础图来源。
还原设计稿不是把整张截图铺成网页背景。draw-ui 会把页面拆成代码和图片素材两部分：
| 用代码完成 | 保留或重新生成图片素材 |
|---|---|
| 页面布局、卡片、文字、按钮、表格、筛选器、普通线性图标 | Logo、品牌符号、复杂插画、照片、3D 或玻璃质感、难以用 CSS 准确还原的视觉效果 |
先检查原始素材和干净裁图，只有缺失或质量不合格时才重绘。颜色、间距和比例通过区域测量记录，实现后以同一基线采集真实页面，比较元素框与局部截图，再检查视觉与操作；差异分数不会被称为“还原度百分比”。
已有 React、Vue、TypeScript 等项目时沿用其架构；独立页面交付 HTML/CSS，小程序直接使用 WXML/WXSS 与 TS/JS。小程序使用对应开发工具验证，浏览器原型不算小程序验收。
方式一 · 直接交给 Agent
请安装这个 Skill：https://github.com/oil-oil/draw-ui
方式二 · 执行命令
npx skills add oil-oil/draw-ui安装完成后，可以直接描述页面：
[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。
也可以提供截图，让它还原：
[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。
需要脚本服务时，参阅 生成工具与接口，了解参数、凭据与实际尺寸限制。脚本是可选适配器，页面测量与校准不依赖生图服务。
MIT
默认服务于产品界面与网站页面，不承担普通海报、插画或故事板任务。明确要求纯视觉探索时可以放宽实现约束。设计稿不能替代真实代码的交互、响应式和可访问性验证。
设计流程不依赖特定宿主；可选脚本适配ZenMux和OpenAI Responses API，命令参数保留既有名称。实际模型、尺寸与参考图支持由服务决定，不能宣称所有宿主和模型都已验证。浏览器自动化只在当前任务允许时执行。提示词和参考图会发送给选定服务，凭据由既有配置读取，不进入设计稿或交付说明。
- 设计流程需要宿主能读取文件、生成并查看图片；不要求子 Agent。没有浏览器时可以交付设计稿，网页交互与响应式保持待验证。
- 本地脚本需要 Python 3.10+；ZenMux 适配器需要
google-genai和 Pillow，测量、图片处理、组装与截图校验需要 Pillow。Bash 入口会在独立虚拟环境安装缺失的 Python 依赖，使用前应确认当前任务允许；不安装系统软件。 - macOS 已运行脚本测试；Windows 提供 PowerShell 入口，Windows 与 Linux 尚未完成实机验证。在线生图需要网络和服务额度，离线只能整理方案、处理已有图片或运行本地测试。
npx skills add是可选安装入口，需要 Node.js/npm；它不是设计流程的运行依赖。
在仓库目录运行（macOS/Linux 用 python3，Windows 可用 py -3）：
python3 -m unittest discover -s tests -p 'test_*.py'
bash tests/test_ask_draw.sh脚本测试覆盖请求封装、输出保护、分段组装、素材透明度、区域测量与采集验收，不证明生图审美质量或全部模型兼容性。缺少模型、尺寸或参考图能力时，按实际服务返回排查；接口或脚本限制不直接等于模型不支持。
首次使用外部服务时，可以在本机配置页亲自填写 Key；已有配置会复用，密钥存入系统凭据库。只为实际使用的外部服务配置；纯本地处理不需要 Key。页面需要 Node.js 22.18+ 与可用的系统凭据服务，业务运行仍使用原依赖。
安装、状态检查、打开页面和带凭据运行的完整入口见配置说明。页面保存与业务读取已经接通；不把 Key 发进聊天，也不自动迁移旧文件。
执行路径在 SKILL.md，校准顺序在 calibration.md，字段与命令在 reference-measurement.md，素材处理在 reference-assets.md。修改规则时更新其归属文档，其他页面只保留入口和平台差异；交付前检查引用、命令示例与相关测试。运行案例和评审记录保存在 Skill 目录外。