## 一、摘要
用 Vibe Coding 生成页面时最大的痛点是"不知道怎么告诉 AI 我想要什么"。我用 TRAE SOLO 构建了一个纯前端单文件 HTML 工具——**UI 设计参考工具箱**，涵盖 24 种设计风格图鉴、30+ 组件词典、8 种布局模式、Design System 生成器、AI 截图分析五大模块。不懂设计也能快速产出专业的 Design System，直接喂给 AI 让页面质量质的飞跃。
## 二、背景
我是个最近沉迷于Vibe Coding的纯小白，日常使用 AI 编程工具（Trae / Cursor 等）构建 Web 应用。技术层面 AI 已经不错了，但我发现一个严重的问题：**AI 生成的页面总是不好看、不规范**。根本原因不是 AI 不行，而是****我缺乏 UI 设计知识，无法给 AI 足够精确的约束****：
- 不知道 UI 有哪些风格（极简？扁平？新拟态？玻璃态？）
- 不知道页面上的组件叫什么名字（那个圆角的框叫 Card？那个下拉的叫 Select？）
- 不知道怎么描述配色、间距、圆角、阴影这些设计参数
- 看到喜欢的设计，却无法用准确的语言描述给 AI
我需要一个工具帮我系统学习 UI 设计知识，同时能快速生成 Design System 文档。于是我用 TRAE SOLO 从零搭建了这个工具。
## 三、实践过程
### 第一步：任务拆解
我把需求拆成 5 个独立模块，按优先级排序：
| 优先级 | 模块 | 目的 |
|--------|------|------|
| P0 | 设计风格图鉴 | 让用户认识不同 UI 风格 |
| P0 | 组件词典 | 让用户学会组件的名称和用途 |
| P0 | Design System 生成器 | 让用户能快速产出 DS 文档 |
| P1 | AI 截图分析 | 让用户能从参考网站提取 DS |
| P2 | 布局风格 | 补充布局层面的知识 |
### 第二步：逐模块实现
**模块一：设计风格图鉴（24 种）**
我让 SOLO 先调研主流 UI 设计风格，然后逐个用 CSS 内联样式渲染示例组件。每个风格包含：名称、英文名、分类标签、风格描述、关键词、参考产品、实时渲染的 preview。
最终覆盖 5 大分类、24 种风格：极简主义（极简、瑞士风）、现代科技（扁平、玻璃态、新拟态、暗黑、Material、磨砂玻璃）、温暖柔和（复古、柔和、杂志、有机、装饰艺术、侘寂）、大胆个性（粗野、渐变、赛博朋克、蒙德里安、孟菲斯、包豪斯、蒸汽波、Y2K）、企业专业（SaaS、Bento 网格）。
**模块二：组件词典（30+）**
按 5 大类别组织：导航（Navbar、Sidebar、Breadcrumb、Tabs、Dropdown、Pagination）、表单输入（Text Input、Search、Select、Radio、Checkbox、Switch、Date Picker、File Upload）、数据展示（Table、Card、Tag、Progress、Avatar、Stat Card、Timeline）、反馈提示（Modal、Toast、Alert、Tooltip、Loading）、布局容器（Header、Footer、Accordion、Stepper、Empty State）。
每个组件都有中英文名称、用途说明和 CSS 渲染的样式示例。
**模块三：布局风格（8 种）**
F 型、Z 型、分屏、全宽 Hero、仪表盘、瀑布流、居中卡片、杂志布局——每种都用 CSS 渲染缩略示意图，标注适用场景和参考产品。
**模块四：Design System 生成器**
这是核心模块。我设计了两个快捷入口：
- **
风格选择器**：下拉选择 24 种风格 → 自动填充默认的配色、字体、间距、圆角、阴影、布局参数 → 用户不满意再逐个手调
- **
配色预设**：12 种经典配色方案（莫兰迪、马卡龙、大地色、海洋蓝、森林绿、暗黑模式、高级灰、樱花粉、赛博朋克、日落暖阳、薰衣草）→ 一键应用 → 还能手动微调
右侧实时生成结构化的 Design System Markdown 文档，一键复制。
**模块五：AI 截图分析**
支持两种模式：
- **AI 直接分析**：填入阿里云百炼 API Key，上传截图，调用 `qwen-vl-max-latest` 模型自动分析，输出结构化 Design System，还能一键导入到 DS 模板
- **手动分析**：复制预设的分析 Prompt，发给任何 AI 对话工具
### 技术细节
- 纯前端单文件 HTML，零依赖，双击即可打开
- 所有风格和组件示例用 CSS 内联样式实时渲染，无需图片
- 调用 阿里云百炼API实现截图分析
- AI 分析结果智能解析，自动填充颜色值、字体参数到 DS 模板
## 四、效果与总结
### 提效效果
| 环节 | 之前 | 现在 |
|------|------|------|
| 了解 UI 风格 | 到处搜索，碎片化信息 | 一个工具浏览 24 种风格 |
| 查找组件名称 | 不知道叫什么，无法描述 | 组件词典直接查看 |
| 生成 Design System | 从零手写，不知道写什么 | 选风格 + 选配色 → 自动生成 |
| 分析参考网站 | 手动拆解，容易遗漏 | AI 自动分析 → 一键导入 |
### 核心收获
**Design System 就是"菜谱约束"**——它告诉 AI 用什么颜色、什么字体、间距多大、按钮长什么样。有了它，AI 生成的页面质量会有质的飞跃。
**你不需要学设计理论**，只需要：
1. 看看哪种风格好看 → 选它
2. 看看哪种配色舒服 → 用它
3. 截图你喜欢的设计 → AI 帮你分析
4. 复制生成的 Design System → 喂给 AI
