AI UI 生成器
一款本地化部署的「需求文字转UI页面」工具。输入功能需求描述，AI自动生成完整HTML页面代码，并实时预览渲染效果。支持打包为exe文件分享使用。
功能清单
| |
|---|
| |
| |
| |
| |
| 生成后可手动修改代码，修改后预览同步更新（CodeMirror） |
| |
| |
| |
| |
| |
| |
| exe同目录config.json配置API Key，界面内可修改 |
技术架构
后端：Flask（Python）
前端：原生HTML + CSS + JavaScript
代码编辑器：CodeMirror 5（CDN引入）
AI调用：纯HTTP接口（requests库），兼容OpenAI格式
数据库：SQLite（历史记录 + 模板存储）
打包：PyInstaller → 单exe文件
支持的AI平台
| | |
|---|
| https://dashscope.aliyuncs.com/compatible-mode/v1 | qwen-turbo、qwen-plus、qwen-max |
| https://api.moonshot.cn/v1 | moonshot-v1-8k、moonshot-v1-32k、moonshot-v1-128k |
| https://open.bigmodel.cn/api/paas/v4 | glm-4-flash、glm-4、glm-3-turbo |
所有平台均兼容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) │ │
│ │ │ │
│ [生成][导出] │ [应用到预览] │ [刷新预览] │
│ [清空] │ │ │
└───────────────┴─────────────────────┴───────────────────────┘
交互流程
- 双击exe启动（或运行
python app.py）→ 自动打开浏览器 - 选择模型（默认qwen-plus）→ 点击「生成」
- 右侧iframe流式渲染页面，中间代码编辑器同步显示代码
快速使用
开发模式
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
分享时附带说明：
预设模板
支持自定义添加新模板。
配置文件说明
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，可离线使用
通过网盘分享的文件：AI仿Figma生成器.exe
链接: https://pan.baidu.com/s/1qxi1w0Ywjj9kXJWBI8kLfQ? 复制这段内容后打开百度网盘手机App，操作更方便哦
