Project Builder — Trae 技能创作大赛参赛作品
一键从想法到原型：需求文档 → 流程图 → 设计参考 → HTML 可交互原型，全流程自动化生成。
技能简介
Project Builder 是一个面向产品经理、设计师和开发者的全流程项目构建技能。它能够根据用户的一句话描述，自动生成完整的项目交付物：
| 交付物 | 说明 |
|---|---|
 需求文档 |
结构化的功能需求、用户故事、非功能需求 |
 流程图 |
Mermaid 语法的系统架构图、业务流程图 |
 设计参考图 |
AI 生成的 UI 设计参考，所见即所得 |
 HTML 原型 |
可运行的 6 页交互原型，含完整假数据 |
 页面映射表 |
60+ 条跳转规则、参数规范、埋点规范 |
核心亮点
-
9 步引导式工作流：每一步都有确认环节，确保方向正确 -
5 种设计风格可选：现代电商风、简约扁平风、暗黑高端风、清新自然风、社交活力风
-
AI 生成设计参考图：生成前先看图确认，不满意可调整 -
开箱即用的原型：纯 HTML/CSS/JS，无需任何依赖，浏览器直接打开
-
丰富的假数据：12+ 商品、10+ 评论、5+ 优惠券，页面内容饱满真实
使用场景
场景一：产品经理快速出原型
“我要做一个生鲜电商小程序”
30 秒确认需求和风格 → 2 分钟生成完整原型，包含首页、分类、商品详情、购物车、个人中心等 6 个页面，每个页面都有真实的假数据和可用的交互。
场景二：创业者向投资人演示
“帮我做一个家居装修平台的 Demo”
一键生成需求文档 + 流程图 + 高保真设计参考图 + 可交互原型。从需求到 Demo 全套交付物，直接用于路演展示。
场景三：设计师快速探索方案
“用简约扁平风做一个任务管理工具”
选择设计风格后，技能会先生成设计参考图供确认，确认后再生成完整原型。设计师可以在已有基础上快速迭代，而不必从零开始。
场景四：开发者理解需求
“帮我梳理这个社交 App 的业务流程”
自动生成 7 张 Mermaid 流程图：系统架构、注册登录、核心业务流程、页面跳转关系，帮助开发团队快速对齐需求理解。
场景五：学生完成课程作业
“我要交一个电商系统的课程设计”
自动生成需求文档（含用户故事和非功能需求）、流程图、页面跳转映射表、可运行原型，满足课程设计的完整交付要求。
创作过程
V1-V3：从零到一
最初的想法很简单——能不能用一句话生成一个完整的项目原型？
V1 版本只能生成简单的 HTML 页面，没有假数据，没有交互。V2 加入了需求文档和流程图生成。V3 引入了模板化生成，开始有了项目结构的概念。
V4-V5：功能完善与美观提升
用户反馈"只有首页实现了，其他页面是空的"。于是 V4 重写了生成脚本，确保每个页面都有完整的功能和假数据。V5 专注于视觉优化，引入了 CSS 变量系统和现代设计规范。
V6-V7：完成度与步骤确认
用户说"页面完成率不高，有些功能没体现"。V6 对所有页面进行了全面完善，确保每个按钮、每个交互都有对应的功能实现。V7 开始引入步骤确认机制，在生成前让用户选择设计风格，避免方向错误导致的返工。
V8-V9：设计参考与最终打磨
用户反馈"样式更丑了"。这促使我们重新思考设计方法：
-
引入 Frontend Design 原则：参考专业前端设计指南，避免 AI 默认的"千篇一律"风格
-
新增设计参考图生成：使用 AI 图片生成，在编码前先让用户看到设计效果
-
5 种设计风格配置：每种风格都有完整的 CSS 变量、配色方案、参考 APP
-
9 步引导式工作流：需求确认 → 风格选择 → 设计参考 → 文档生成 → 原型生成
关键技术决策
| 决策 | 原因 |
|---|---|
| 纯 HTML/CSS/JS | 无需构建工具，浏览器直接打开，降低使用门槛 |
| CSS 变量系统 | 一键切换主题，风格配置化 |
| AI 生成设计参考图 | 比文字描述更直观，减少沟通成本 |
| 步骤确认机制 | 每步确认方向，避免大规模返工 |
| 丰富假数据 | 页面内容饱满，更接近真实产品 |
效果展示
演示项目：家居装修小程序
使用 Project Builder 生成的完整家居装修小程序原型。
配置：社交活力风 + 清新绿色主题（#34c759）
页面预览
| 页面 | 功能亮点 |
|---|---|
| 首页 | 搜索栏 + Banner 轮播 + 8 大分类入口 + 热门案例瀑布流 + 推荐设计师 |
| 案例列表 | 7 种风格标签筛选 + 排序 + 瀑布流展示 + 点赞收藏 |
| 案例详情 | 5 张图片轮播 + 设计师信息卡 + 材料清单 + 用户评论区 |
| 建材商城 | 8 大建材分类 + 促销 Banner + 商品列表 + 加购功能 |
| 施工管理 | 8 阶段进度时间线 + 工地动态 + 预算跟踪 + 待办事项 |
| 个人中心 | 渐变用户信息区 + 数据统计 + 7 项功能菜单 |
设计参考图（AI 生成）
技能在生成原型前，会先根据用户选择的风格生成设计参考图：
| 参考图 | 说明 |
|---|---|
| 首页布局参考：搜索、Banner、分类、案例推荐 | |
|---|---|
| undefined | :— |
| 案例详情参考：图片轮播、设计师信息、评论区 | |
|---|---|
| undefined | :— |
| 施工管理参考：进度时间线、工地动态、预算跟踪 |
|---|
文档交付物
| 文件 | 内容概要 |
|---|---|
| 需求文档 | 60+ 条功能需求（4 大模块）、18 条用户故事、29 条非功能需求 |
| 流程图 | 7 张 Mermaid 流程图（架构、注册、浏览、预约、购买、施工、跳转关系） |
完整项目结构
home-decor-app/
├── 📄 需求文档.md # 60+ 条功能需求
├── 📊 流程图.md # 7 张 Mermaid 流程图
├── 📁 assets/ # AI 生成的设计参考图
│ ├── design-reference-homepage.jpg
│ ├── design-reference-case-detail.jpg
│ └── design-reference-construction.jpg
└── 📁 html/ # 可交互原型（浏览器直接打开）
├── index.html # 首页
├── cases.html # 案例列表
├── case-detail.html # 案例详情
├── mall.html # 建材商城
├── construction.html # 施工管理
├── user.html # 个人中心
├── styles.css # 社交活力风 + 清新绿色主题
├── data.js # 丰富假数据
└── app.js # 交互脚本
技能价值
对产品经理
-
从想法到可演示原型的时间从天级缩短到分钟级
-
需求文档自动生成，格式规范，内容完整
-
设计参考图让沟通更高效
对设计师
-
5 种设计风格开箱即用，快速探索方案
-
AI 生成参考图，激发设计灵感
-
CSS 变量系统，一键切换主题
对开发者
-
流程图和页面映射表帮助理解业务逻辑
-
纯 HTML/CSS/JS 原型，可直接作为前端开发参考
-
代码结构清晰，易于二次开发
对创业者/学生
-
一句话生成完整项目 Demo
-
满足课程设计、路演展示的交付要求
-
零门槛使用，无需设计或编码经验
技术栈
| 技术 | 用途 |
|---|---|
| HTML5 | 页面结构 |
| CSS3 + CSS Variables | 样式系统，主题可配置 |
| JavaScript | 交互逻辑（轮播、筛选、弹窗） |
| Mermaid | 流程图语法 |
| AI Image Generation | 设计参考图生成 |
| AskUserQuestion | 步骤确认交互 |
Skill 链接
- GitHub仓库：点我
总结
Project Builder 将需求分析、UI 设计、前端开发三道工序合并为一个自动化流程。它不是一个简单的代码生成器，而是一个引导式的项目构建助手——通过步骤确认确保方向正确，通过设计参考图确保视觉满意，通过丰富假数据确保原型真实可用。
一句话概括：从想法到原型，只需一句话。