产品简介
draw-ui 是面向开发者的 AI UI 设计工具,能根据需求生成设计稿或将截图还原为 HTML/CSS 和微信小程序页面。解决设计不准确和代码还原繁琐的问题,适合需要快速原型设计和代码实现的工程师和设计师。

核心功能
- 根据文本需求生成完整 UI 设计稿
- 将截图或设计稿还原为 HTML/CSS 页面
- 支持微信小程序页面生成
- 智能提示词优化和参考图策略
- 自动拆分代码和图片素材进行还原
快速开始
- 安装 draw-ui:执行命令 npx skills add oil-oil/draw-ui 或通过 Agent 安装
- 输入需求:描述页面目标或提供设计截图
- 获取输出:接收生成的设计稿或可运行的 HTML/CSS 代码
界面预览
与其他方案对比
| 对比项 | draw-ui | 同类方案 |
|---|---|---|
| 设计生成方式 | AI 驱动,支持需求理解和提示词优化,设计更准确 | 传统设计工具手动绘制,或简单 AI 生成缺乏上下文 |
| 代码还原流程 | 自动化拆分素材并构建可运行页面,高效还原 | 手动切图和编码,容易出错且耗时 |
适合谁用
- 需要快速生成 UI 设计的前端开发者
- 希望将截图转换为代码的 UI 设计师
- 开发微信小程序或网页应用的工程师
下载与版本
当前最新版本为 main,发布于 。支持 Windows、macOS、Linux。
⚠️ 注意:本项目仅提供源代码下载,不包含可直接运行的安装包(exe/dmg/apk 等。下载后需要自行编译构建才能使用,适合有一定开发经验的用户。如果你不熟悉编译流程,建议寻找同类开箱即用的替代方案。
注意事项
- 本工具仅供学习和研究使用,请遵守相关法律法规。
- 请尊重内容创作者版权,勿将下载内容用于商业或非法传播。
- 项目源码地址:https://github.com/oil-oil/draw-ui