AI UI 生成器

一款本地化部署的「需求文字转UI页面」工具。输入功能需求描述，AI自动生成完整HTML页面代码，并实时预览渲染效果。支持打包为exe文件分享使用。

功能清单

技术架构

后端：Flask（Python）
前端：原生HTML + CSS + JavaScript
代码编辑器：CodeMirror 5（CDN引入）
AI调用：纯HTTP接口（requests库），兼容OpenAI格式
数据库：SQLite（历史记录 + 模板存储）
打包：PyInstaller → 单exe文件

支持的AI平台

所有平台均兼容OpenAI Chat Completions格式，统一使用requests.post调用，支持流式输出。

项目结构

ai-ui-generator/
├── app.py                 # Flask后端主程序
│                           - 配置管理（读写config.json）
│                           - AI接口调用（SSE流式）
│                           - 历史记录CRUD（SQLite）
│                           - 模板管理CRUD（SQLite）
│                           - 启动时自动打开浏览器
├── static/
│   ├── index.html         # 前端主页面（三栏布局）
│   ├── style.css          # 样式文件（含三种主题）
│   └── app.js             # 前端交互逻辑
├── requirements.txt       # Python依赖
├── build.bat              # 打包exe脚本
└── README.md              # 本文件

运行后自动生成：

├── config.json            # 平台配置文件（API Key等）
└── history.db             # SQLite数据库（历史记录+模板）

页面布局

┌─────────────────────────────────────────────────────────────┐
│ 顶部：平台选择 | 模型选择 | 模板选择 | 历史记录 | 模板管理   │
│       平台配置 | 主题切换                                     │
├───────────────┬─────────────────────┬───────────────────────┤
│  需求描述区    │    代码编辑器        │    实时预览iframe      │
│  (文本输入框)  │    (CodeMirror)      │                       │
│               │                     │                       │
│  [生成][导出]  │    [应用到预览]      │    [刷新预览]          │
│  [清空]       │                     │                       │
└───────────────┴─────────────────────┴───────────────────────┘

交互流程

1. 双击exe启动（或运行 python app.py）→ 自动打开浏览器
2. 首次使用点击「平台配置」填入API Key
3. 左侧选择Prompt模板（可选）→ 输入需求文字
4. 选择模型（默认qwen-plus）→ 点击「生成」
5. 右侧iframe流式渲染页面，中间代码编辑器同步显示代码
6. 可手动改代码 → 点击「应用到预览」实时更新
7. 满意后点「导出」下载HTML文件
8. 不满意修改需求再次生成，历史记录自动保存

快速使用

开发模式

cd ai-ui-generator
pip install flask requests
python app.py

浏览器自动打开 http://127.0.0.1:5000

打包为exe

cd ai-ui-generator
pip install pyinstaller
build.bat

产出文件：dist/AI-UI-Generator.exe

分享时附带说明：

• 双击exe即可运行，无需安装Python
• 首次使用在「平台配置」中填入API Key
• config.json会自动生成在exe同目录

预设模板

支持自定义添加新模板。

配置文件说明

config.json 结构：

{
"default_provider": "dashscope",
"theme": "light",
"providers": {
"dashscope": {
"name": "阿里百炼",
"api_key": "sk-xxxx",
"base_url": "https://dashscope.aliyuncs.com/compatible-mode/v1",
"models": ["qwen-plus", "qwen-turbo", "qwen-max"],
"default_model": "qwen-plus"
    },
"kimi": {
"name": "Kimi",
"api_key": "",
"base_url": "https://api.moonshot.cn/v1",
"models": ["moonshot-v1-8k", "moonshot-v1-32k", "moonshot-v1-128k"],
"default_model": "moonshot-v1-8k"
    },
"glm": {
"name": "智谱GLM",
"api_key": "",
"base_url": "https://open.bigmodel.cn/api/paas/v4",
"models": ["glm-4-flash", "glm-4", "glm-3-turbo"],
"default_model": "glm-4-flash"
    }
  }
}

依赖

flask==3.0.0
requests==2.31.0
pyinstaller==6.3.0（仅打包时需要）

注意事项

• API Key请妥善保管，不要外传exe时附带填写了Key的config.json
• 生成的HTML为纯静态页面，不引用外部CDN，可离线使用
• 历史记录存储在本地SQLite，不上传任何数据
• 流式输出依赖AI平台支持SSE格式返回

通过网盘分享的文件：AI仿Figma生成器.exe

链接: https://pan.baidu.com/s/1qxi1w0Ywjj9kXJWBI8kLfQ? 复制这段内容后打开百度网盘手机App，操作更方便哦