让 AI 画 UI 不再「好看但没用」——draw-ui 把设计稿直接变代码

你有没有这种感觉——让 AI 生成了一个超好看的界面图，但一到「转成代码」就全毁了？配色漂移、比例失调、图标糊成一团……

最近发现一个开源 Skill，叫 draw-ui，专门解决这个痛点。它的工作流很直接：

1. 用自然语言描述你要的页面（支持中英文）
2. AI 调用 GPT Image 2 生成高质量 UI 稿
3. 自动重建为干净的 HTML/CSS，图标、logo、背景分层处理

核心亮点

多图一致性锁定——如果你有多张页面要保持风格统一（比如侧边栏、导航不变），传一张「干净边框图」作为参考，AI 会锁定 chrome 部分，只重新设计内容区。这招在做 App 设计系统时巨实用。

两种 Prompt 写作方式——

• 类比法（Analogy）：「像读一首热门歌曲背后的乐谱，Notion 的宁静感加音乐制作人的笔记风格」→ 创意质量最高
• 清单法（Inventory）：「页面包含用户名、30天趋势图、活跃活动列表」→ 准确性最强

图标处理有章法——深色图标用纯白底图生成再扣背景；彩色插画用绿幕或透明输出；图标精灵图要做成 4×4 纯白网格，机器可直接切割。这些细节直接决定 HTML 还原度。

适合谁用

做 AI 产品、原型设计、前端开发的设计师和工程师。装起来超简单：

npx skills add oil-oil/draw-ui

然后跟你的 Agent 说「帮我设计一个 Dashboard 页面」就行。

GitHub 上 146⭐，MIT 协议，戳这里自取。

GitHub: https://github.com/oil-oil/draw-ui