产品推荐 2026-07-28

draw-ui:免费的UI 设计生成与还原工具(源码)

draw-ui 是一个 AI 驱动的 UI 设计 Skill,能将页面需求转换为设计稿或截图还原为可运行代码。

开源软件跨平台工具

产品简介

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

draw-ui 主界面

核心功能

  • 根据文本需求生成完整 UI 设计稿
  • 将截图或设计稿还原为 HTML/CSS 页面
  • 支持微信小程序页面生成
  • 智能提示词优化和参考图策略
  • 自动拆分代码和图片素材进行还原

快速开始

  1. 安装 draw-ui:执行命令 npx skills add oil-oil/draw-ui 或通过 Agent 安装
  2. 输入需求:描述页面目标或提供设计截图
  3. 获取输出:接收生成的设计稿或可运行的 HTML/CSS 代码

界面预览

与其他方案对比

对比项draw-ui同类方案
设计生成方式AI 驱动,支持需求理解和提示词优化,设计更准确传统设计工具手动绘制,或简单 AI 生成缺乏上下文
代码还原流程自动化拆分素材并构建可运行页面,高效还原手动切图和编码,容易出错且耗时

适合谁用

  • 需要快速生成 UI 设计的前端开发者
  • 希望将截图转换为代码的 UI 设计师
  • 开发微信小程序或网页应用的工程师

下载与版本

当前最新版本为 main,发布于 。支持 Windows、macOS、Linux。

⚠️ 注意:本项目仅提供源代码下载,不包含可直接运行的安装包(exe/dmg/apk 等。下载后需要自行编译构建才能使用,适合有一定开发经验的用户。如果你不熟悉编译流程,建议寻找同类开箱即用的替代方案。

注意事项

  • 本工具仅供学习和研究使用,请遵守相关法律法规。
  • 请尊重内容创作者版权,勿将下载内容用于商业或非法传播。
  • 项目源码地址:https://github.com/oil-oil/draw-ui