oil-oil/draw-ui

Última atividade de origem registrada: 4 de outubro de 2026 às 14:54

Catálogo do SkillsMP atualizado: 29 de outubro de 2026 às 18:30

skills coletadas: 1

Estrelas no GitHub: 499
Forks no GitHub: 75

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/oil-oil/draw-ui.

README do repositório

Arquivo de origem do README: README.md

Ler o README original

Expandir README completo

<img src="./assets/readme/readme-hero.png" width="100%" alt="draw-ui：先把页面想清楚，再把设计画出来。"> <img src="./assets/readme/readme-section-what.svg" width="100%" alt="02 draw-ui 是什么"> `draw-ui` 是一个给 Agent 使用的 UI 设计 Skill。它默认追求简洁、现代、有自身风格的界面，先确定视觉方向与业务主次，再生成便于实现的 UI 设计稿；也可以把已有截图或生成图还原成 HTML/CSS、现有前端项目或微信小程序。设计稿与已验证的可运行页面会明确区分。上面的三张页面都来自 `draw-ui` 的真实生成流程：一张信息密集的分析后台、一张温暖的建筑研究工作台，以及一个手机订餐页面。页面类型和风格可以不同，但开始方式是一样的——先理解页面要解决什么，再决定怎么画。示例用于展示视觉方向，是否适合实际产品还要检查组件一致性、信息密度、素材边界和响应式。 | 我们提供 | draw-ui 负责 | 最后得到 | | --- | --- | --- | | 页面目标、真实内容、现有截图和不能改动的区域 | 梳理需求、选择参考图策略、组织提示词并生成设计 | 一张或一组 UI 设计稿 | | 已确认的设计稿或产品截图 | 拆分代码与图片素材，构建页面并反复对照 | 可运行的 HTML 页面、项目内界面或微信小程序页面 | 默认使用 Agent 当前内置的图片生成能力；指定模型、服务或生成 Skill 时沿用用户选择。固定保存路径通过生成后复制解决。没有可用能力时会说明限制，只有用户选择脚本服务才使用仓库适配器。 <img src="./assets/readme/readme-section-brief.svg" width="100%" alt="03 开始前，先把页面讲清楚"> 如果我们只说“设计一个 Dashboard”，模型只能自己猜业务，最后很可能画得漂亮，却不是我们需要的页面。开始之前，`draw-ui` 会先确认三件事： 1. 这是哪个页面，最核心的功能是什么？ 2. 有没有现有 App 截图或设计稿可以参考？ 3. 截图里有没有不能改动的区域，例如侧边栏或顶部导航？信息已经足够清楚时会直接开始，不会为了流程重复提问。默认先确定视觉构思，再组织内容和组件。页面可以保留特殊裁切、大小对比和适度重叠，同时说明实现与适配方式；不会把所有业务都套进相同卡片模板。官网和落地页默认生成从导航到页脚的完整纵向长页，保持桌面布局宽度。工具不能直接输出清晰长图时，按区块分段生成，再检查并组装为一张完整预览。只有明确要求首屏时才只做首屏。生成图片不代表交互和响应式已经实现。交付包含设计稿、简短实现说明和待验证项；正式还原时优先组件与可编辑文字，只有摄影、插画等视觉内容使用独立素材。 <img src="./assets/readme/readme-section-reference.svg" width="100%" alt="04 参考图决定模型会模仿什么"> 参考图帮助表达字体、比例、留白和组件细节，也可能带入无关布局。因此先说明要借鉴的设计关系、要保留的区域和需重组的业务内容。需要视觉对齐时核验模型与接口的图片输入能力，不把文字转述当作已经传图。 | 现在有什么 | 怎么做 | 会得到什么 | | --- | --- | --- | | 没有截图，只想探索 | 不传参考图 | 模型可以自由决定整套界面 | | 想保留导航或侧边栏 | 明确固定范围，必要时使用内容区中性的参考副本 | 外框保持一致，内容区仍有设计空间 | | 借鉴优秀设计风格 | 输入参考图，提取字体、比例、色面与细节关系 | 按当前业务重组的新设计 | | 需要精准还原 | 使用完整截图，并明确固定区域 | 尽量保持原页面的内容与样式 | 多张页面或交互状态共享一张检查过的基础图，并记录哪些布局不变、哪些数据和控件需要变化。支持多宫格流程总览与逐张延展；同时检查风格一致性和状态正确性，不把图片序列称为可运行原型。模型编辑对比使用同一基准和提示词，并标明基础图来源。 <img src="./assets/readme/readme-section-rebuild.svg" width="100%" alt="05 怎么把设计稿还原成 HTML 或微信小程序"> 还原设计稿不是把整张截图铺成网页背景。`draw-ui` 会把页面拆成代码和图片素材两部分： | 用代码完成 | 保留或重新生成图片素材 | | --- | --- | | 页面布局、卡片、文字、按钮、表格、筛选器、普通线性图标 | Logo、品牌符号、复杂插画、照片、3D 或玻璃质感、难以用 CSS 准确还原的视觉效果 | 先检查原始素材和干净裁图，只有缺失或质量不合格时才重绘。颜色、间距和比例通过区域测量记录，实现后以同一基线采集真实页面，比较元素框与局部截图，再检查视觉与操作；差异分数不会被称为“还原度百分比”。已有 React、Vue、TypeScript 等项目时沿用其架构；独立页面交付 HTML/CSS，小程序直接使用 WXML/WXSS 与 TS/JS。小程序使用对应开发工具验证，浏览器原型不算小程序验收。 <img src="./assets/readme/readme-section-start.svg" width="100%" alt="06 怎么使用"> **方式一 · 直接交给 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)，了解参数、凭据与实际尺寸限制。脚本是可选适配器，页面测量与校准不依赖生图服务。 <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> <a href="https://github.com/oil-oil/oil-ui">想让 AI 做出更好的 UI 设计？试试 oil-ui →</a> 先探索几种风格，再并排挑选，按实际画面打磨。 <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> ## 许可证 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 目录外。

Carregando o README do repositório…

Skills neste repositório

classificação pendente

skill

ocupação

descrição

atualizado

draw-ui

sem classificação

设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。

Idioma do texto original: chinês

2026-10-04

Mostrando 1 de 1 skills coletadas.