UI design & mockup skill for Claude Code & Codex, from screenshot to code. 帮你出 UI 设计稿并还原成页面。

draw-ui – 代理专用的 AI 辅助 UI 设计技能

它是什么

draw-ui 是一个技能（插件），让 AI 代理能将产品页面的文字描述或现有截图转换为完整的 UI 设计，并可选择转换为可执行的 HTML/CSS（或微信小程序）。该技能处理整个工作流程：

此技能旨在由具备图像生成能力的 LLM 代理（例如 ChatGPT 风格的机器人）调用。它不取代前端框架；它仅产生开发者可以放入现有 React/Vue/TS 项目或作为静态页面使用的设计产物。

有两个进入点：

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

安装技能后，可以提示代理：

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

或者，若要还原现有 UI：

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

只有在信息不明确时，该技能才会询问三个厘清问题（页面目的、参考截图、不可变区域）。

npx skills add oil-oil/draw-ui   # 注册技能

之后即可从终端机或与底层 LLM 服务对话的脚本中调用该技能。

输入	draw-ui 的功能	输出
仅文字描述	从零开始生成全页视觉概念，决定布局、配色方案、组件层级。	一张或多张设计模型图 + 简短的实现指南。
截图 + 不可变区域	提取固定部分（例如导航栏），在保留这些区域的同时重新设计其余部分。	更新后的模型图 + 重复使用未变更区块的 HTML/CSS（或小程序）。
参考风格图片	在为新业务案例重新排列内容的同时，复制参考图片的字体选择、间距、视觉语言。	风格对齐的模型图 + 反映参考视觉语法的代码。
现有前端项目	使用项目的技术栈（React, Vue, TS 等）来发出符合生成设计的组件。	可放入项目的组件文件。

该技能区分设计产物（图片）与可执行产物（HTML/CSS, WXML/WXSS）。它从不声称产生完全响应式或无障碍的实现——这些方面必须由开发者验证。

依赖项 – Python 3.10+，Pillow 用于图像处理，可选 google-genai 用于 ZenMux 适配器。Node 22.18+ 仅在 npx skills add 包装器中需要。
支持平台 – macOS（已测试）、Windows（PowerShell 进入点，未完全验证）、Linux（通过 Bash）。核心逻辑与操作系统无关；仅脚本包装器不同。
模型整合 – 默认使用主机代理的内建图像生成模型。您可以透过技能配置覆盖模型/服务（参见 references/generation.md）。
工作流程 –
1. 提示编排 – 技能构建一个包含厘清后的需求和任何参考图片的提示。
2. 图像生成 – 调用选定的图像模型来产生 UI 模型图（单一长页或分段区块）。
3. 测量与提取 – 使用 Pillow 测量组件边界框，提取干净的素材，并记录颜色/间距值。
4. 代码合成 – 根据测量的布局组装 HTML/CSS（或 WXML/WXSS），为需要手动建立的素材插入占位符。
测试 – 单元测试 (python -m unittest discover) 和 shell 测试 (bash tests/test_ask_draw.sh) 涵盖请求封装、输出清理、区块组装、素材透明度和区域测量。
API 密钥处理 – 当使用外部图像服务时，本地配置 UI 会将密钥储存在系统凭证存储库中；密钥绝不会发送给 LLM。

MIT – 您可以自由使用、修改和重新分发此技能。

简而言之： draw-ui 是一个 AI 驱动、对代理友好的插件，能将页面描述或截图转换为视觉设计和入门级 HTML/CSS（或小程序）实现，处理风格参考、不可变区域和素材提取，同时将最终编码和 QA 留给开发者。