draw-ui

draw-ui 是一个给 Agent 使用的 UI 设计 Skill。它默认追求简洁、现代、有自身风格的界面，先确定视觉方向与业务主次，再生成便于实现的 UI 设计稿；也可以把已有截图或生成图还原成 HTML/CSS、现有前端项目或微信小程序。设计稿与已验证的可运行页面会明确区分。

上面的三张页面都来自 draw-ui 的真实生成流程：一张信息密集的分析后台、一张温暖的建筑研究工作台，以及一个手机订餐页面。页面类型和风格可以不同，但开始方式是一样的——先理解页面要解决什么，再决定怎么画。示例用于展示视觉方向，是否适合实际产品还要检查组件一致性、信息密度、素材边界和响应式。

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

默认使用 Agent 当前内置的图片生成能力；指定模型、服务或生成 Skill 时沿用用户选择。固定保存路径通过生成后复制解决。没有可用能力时会说明限制，只有用户选择脚本服务才使用仓库适配器。

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

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

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

默认先确定视觉构思，再组织内容和组件。页面可以保留特殊裁切、大小对比和适度重叠，同时说明实现与适配方式；不会把所有业务都套进相同卡片模板。

官网和落地页默认生成从导航到页脚的完整纵向长页，保持桌面布局宽度。工具不能直接输出清晰长图时，按区块分段生成，再检查并组装为一张完整预览。只有明确要求首屏时才只做首屏。

生成图片不代表交互和响应式已经实现。交付包含设计稿、简短实现说明和待验证项；正式还原时优先组件与可编辑文字，只有摄影、插画等视觉内容使用独立素材。

参考图帮助表达字体、比例、留白和组件细节，也可能带入无关布局。因此先说明要借鉴的设计关系、要保留的区域和需重组的业务内容。需要视觉对齐时核验模型与接口的图片输入能力，不把文字转述当作已经传图。

现在有什么	怎么做	会得到什么
没有截图，只想探索	不传参考图	模型可以自由决定整套界面
想保留导航或侧边栏	明确固定范围，必要时使用内容区中性的参考副本	外框保持一致，内容区仍有设计空间
借鉴优秀设计风格	输入参考图，提取字体、比例、色面与细节关系	按当前业务重组的新设计
需要精准还原	使用完整截图，并明确固定区域	尽量保持原页面的内容与样式

多张页面或交互状态共享一张检查过的基础图，并记录哪些布局不变、哪些数据和控件需要变化。支持多宫格流程总览与逐张延展；同时检查风格一致性和状态正确性，不把图片序列称为可运行原型。模型编辑对比使用同一基准和提示词，并标明基础图来源。

还原设计稿不是把整张截图铺成网页背景。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

脚本测试覆盖请求封装、输出保护、分段组装、素材透明度、区域测量与采集验收，不证明生图审美质量或全部模型兼容性。缺少模型、尺寸或参考图能力时，按实际服务返回排查；接口或脚本限制不直接等于模型不支持。

API Key 配置页面

首次使用外部服务时，可以在本机配置页亲自填写 Key；已有配置会复用，密钥存入系统凭据库。只为实际使用的外部服务配置；纯本地处理不需要 Key。页面需要 Node.js 22.18+ 与可用的系统凭据服务，业务运行仍使用原依赖。

安装、状态检查、打开页面和带凭据运行的完整入口见配置说明。页面保存与业务读取已经接通；不把 Key 发进聊天，也不自动迁移旧文件。

维护方式

执行路径在 SKILL.md，校准顺序在 calibration.md，字段与命令在 reference-measurement.md，素材处理在 reference-assets.md。修改规则时更新其归属文档，其他页面只保留入口和平台差异；交付前检查引用、命令示例与相关测试。运行案例和评审记录保存在 Skill 目录外。