admin
237a09a5b0
一、问题（本轮实测）
`draw-ui` 与 `oil-motion` 目录里**各自带一个内嵌 `.git`** ⇒ 上一次提交把它们记成了 **gitlink（子模块指针）**
⇒ 仓库里只存了一个不属于任何远端的 commit id，**别人克隆下来这两份是空的** ✗（`git status` 显示 ` m draw-ui` / ` m oil-motion` ＝ 子模块内容有改动）。
二、处置（可回退）
· 把两处的 `.git` **挪走**（⛔ 不是删除）⇒ `归档/内嵌git-20261008/{draw-ui,oil-motion}.git`；
· `git rm --cached` 掉那两个 gitlink，再 `git add` 两个目录 ⇒ **按正常文件入库**（内容才真的进仓库）。
三、副作用（如实记）
挪走 `.git` 后，这两个技能**不能再原地 `git pull` 取上游更新**（要更新得重新拉一份覆盖）；
如需恢复其本地仓库，把 `归档/内嵌git-20261008/` 里的 `.git` 挪回原处即可。
143 lines
9.5 KiB
Markdown
143 lines
9.5 KiB
Markdown
<p align="center">
|
||
<img src="./assets/readme/readme-hero.png" width="100%" alt="draw-ui：先把页面想清楚，再把设计画出来。">
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="./assets/readme/readme-section-what.svg" width="100%" alt="02 draw-ui 是什么">
|
||
</p>
|
||
|
||
`draw-ui` 是一个给 Agent 使用的 UI 设计 Skill。它默认追求简洁、现代、有自身风格的界面，先确定视觉方向与业务主次，再生成便于实现的 UI 设计稿；也可以把已有截图或生成图还原成 HTML/CSS、现有前端项目或微信小程序。设计稿与已验证的可运行页面会明确区分。
|
||
|
||
上面的三张页面都来自 `draw-ui` 的真实生成流程：一张信息密集的分析后台、一张温暖的建筑研究工作台，以及一个手机订餐页面。页面类型和风格可以不同，但开始方式是一样的——先理解页面要解决什么，再决定怎么画。示例用于展示视觉方向，是否适合实际产品还要检查组件一致性、信息密度、素材边界和响应式。
|
||
|
||
| 我们提供 | draw-ui 负责 | 最后得到 |
|
||
| --- | --- | --- |
|
||
| 页面目标、真实内容、现有截图和不能改动的区域 | 梳理需求、选择参考图策略、组织提示词并生成设计 | 一张或一组 UI 设计稿 |
|
||
| 已确认的设计稿或产品截图 | 拆分代码与图片素材，构建页面并反复对照 | 可运行的 HTML 页面、项目内界面或微信小程序页面 |
|
||
|
||
默认使用 Agent 当前内置的图片生成能力；指定模型、服务或生成 Skill 时沿用用户选择。固定保存路径通过生成后复制解决。没有可用能力时会说明限制，只有用户选择脚本服务才使用仓库适配器。
|
||
|
||
<p align="center">
|
||
<img src="./assets/readme/readme-section-brief.svg" width="100%" alt="03 开始前，先把页面讲清楚">
|
||
</p>
|
||
|
||
如果我们只说“设计一个 Dashboard”，模型只能自己猜业务，最后很可能画得漂亮，却不是我们需要的页面。开始之前，`draw-ui` 会先确认三件事：
|
||
|
||
1. 这是哪个页面，最核心的功能是什么？
|
||
2. 有没有现有 App 截图或设计稿可以参考？
|
||
3. 截图里有没有不能改动的区域，例如侧边栏或顶部导航？
|
||
|
||
信息已经足够清楚时会直接开始，不会为了流程重复提问。
|
||
|
||
默认先确定视觉构思，再组织内容和组件。页面可以保留特殊裁切、大小对比和适度重叠，同时说明实现与适配方式；不会把所有业务都套进相同卡片模板。
|
||
|
||
官网和落地页默认生成从导航到页脚的完整纵向长页，保持桌面布局宽度。工具不能直接输出清晰长图时，按区块分段生成，再检查并组装为一张完整预览。只有明确要求首屏时才只做首屏。
|
||
|
||
生成图片不代表交互和响应式已经实现。交付包含设计稿、简短实现说明和待验证项；正式还原时优先组件与可编辑文字，只有摄影、插画等视觉内容使用独立素材。
|
||
|
||
<p align="center">
|
||
<img src="./assets/readme/readme-section-reference.svg" width="100%" alt="04 参考图决定模型会模仿什么">
|
||
</p>
|
||
|
||
参考图帮助表达字体、比例、留白和组件细节，也可能带入无关布局。因此先说明要借鉴的设计关系、要保留的区域和需重组的业务内容。需要视觉对齐时核验模型与接口的图片输入能力，不把文字转述当作已经传图。
|
||
|
||
| 现在有什么 | 怎么做 | 会得到什么 |
|
||
| --- | --- | --- |
|
||
| 没有截图，只想探索 | 不传参考图 | 模型可以自由决定整套界面 |
|
||
| 想保留导航或侧边栏 | 明确固定范围，必要时使用内容区中性的参考副本 | 外框保持一致，内容区仍有设计空间 |
|
||
| 借鉴优秀设计风格 | 输入参考图，提取字体、比例、色面与细节关系 | 按当前业务重组的新设计 |
|
||
| 需要精准还原 | 使用完整截图，并明确固定区域 | 尽量保持原页面的内容与样式 |
|
||
|
||
多张页面或交互状态共享一张检查过的基础图，并记录哪些布局不变、哪些数据和控件需要变化。支持多宫格流程总览与逐张延展；同时检查风格一致性和状态正确性，不把图片序列称为可运行原型。模型编辑对比使用同一基准和提示词，并标明基础图来源。
|
||
|
||
|
||
<p align="center">
|
||
<img src="./assets/readme/readme-section-rebuild.svg" width="100%" alt="05 怎么把设计稿还原成 HTML 或微信小程序">
|
||
</p>
|
||
|
||
还原设计稿不是把整张截图铺成网页背景。`draw-ui` 会把页面拆成代码和图片素材两部分：
|
||
|
||
| 用代码完成 | 保留或重新生成图片素材 |
|
||
| --- | --- |
|
||
| 页面布局、卡片、文字、按钮、表格、筛选器、普通线性图标 | Logo、品牌符号、复杂插画、照片、3D 或玻璃质感、难以用 CSS 准确还原的视觉效果 |
|
||
|
||
先检查原始素材和干净裁图，只有缺失或质量不合格时才重绘。颜色、间距和比例通过区域测量记录，实现后以同一基线采集真实页面，比较元素框与局部截图，再检查视觉与操作；差异分数不会被称为“还原度百分比”。
|
||
|
||
已有 React、Vue、TypeScript 等项目时沿用其架构；独立页面交付 HTML/CSS，小程序直接使用 WXML/WXSS 与 TS/JS。小程序使用对应开发工具验证，浏览器原型不算小程序验收。
|
||
|
||
<p align="center">
|
||
<img src="./assets/readme/readme-section-start.svg" width="100%" alt="06 怎么使用">
|
||
</p>
|
||
|
||
**方式一 · 直接交给 Agent**
|
||
|
||
```text
|
||
请安装这个 Skill：https://github.com/oil-oil/draw-ui
|
||
```
|
||
|
||
**方式二 · 执行命令**
|
||
|
||
```bash
|
||
npx skills add oil-oil/draw-ui
|
||
```
|
||
|
||
安装完成后，可以直接描述页面：
|
||
|
||
```text
|
||
[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。
|
||
```
|
||
|
||
也可以提供截图，让它还原：
|
||
|
||
```text
|
||
[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。
|
||
```
|
||
|
||
需要脚本服务时，参阅 [生成工具与接口](references/generation.md)，了解参数、凭据与实际尺寸限制。脚本是可选适配器，页面测量与校准不依赖生图服务。
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/oil-oil/oil-ui"><img src="https://raw.githubusercontent.com/oil-oil/oil-ui/main/assets/readme/hero.webp" width="600" alt="oil-ui：把 AI 的 UI 设计能力推到极限"></a>
|
||
<br>
|
||
<strong><a href="https://github.com/oil-oil/oil-ui">想让 AI 做出更好的 UI 设计？试试 oil-ui →</a></strong><br>先探索几种风格，再并排挑选，按实际画面打磨。
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/oil-oil/beautify-github-readme"><img src="./assets/readme/made-with-beautify.svg" width="300" alt="README made with beautify-github-readme"></a>
|
||
</p>
|
||
|
||
## 许可证
|
||
|
||
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`）：
|
||
|
||
```bash
|
||
python3 -m unittest discover -s tests -p 'test_*.py'
|
||
bash tests/test_ask_draw.sh
|
||
```
|
||
|
||
脚本测试覆盖请求封装、输出保护、分段组装、素材透明度、区域测量与采集验收，不证明生图审美质量或全部模型兼容性。缺少模型、尺寸或参考图能力时，按实际服务返回排查；接口或脚本限制不直接等于模型不支持。
|
||
|
||
## API Key 配置页面
|
||
|
||
首次使用外部服务时，可以在本机配置页亲自填写 Key；已有配置会复用，密钥存入系统凭据库。只为实际使用的外部服务配置；纯本地处理不需要 Key。页面需要 Node.js 22.18+ 与可用的系统凭据服务，业务运行仍使用原依赖。
|
||
|
||
安装、状态检查、打开页面和带凭据运行的完整入口见[配置说明](references/api-key-setup.md)。页面保存与业务读取已经接通；不把 Key 发进聊天，也不自动迁移旧文件。
|
||
|
||
## 维护方式
|
||
|
||
执行路径在 `SKILL.md`，校准顺序在 `calibration.md`，字段与命令在 `reference-measurement.md`，素材处理在 `reference-assets.md`。修改规则时更新其归属文档，其他页面只保留入口和平台差异；交付前检查引用、命令示例与相关测试。运行案例和评审记录保存在 Skill 目录外。
|