我用 Trae Work 生成全栈电商项目脚手架

TraeWork 专区
1

一、我是谁，我卡在哪

  • 角色：创业团队全栈开发（兼运维、兼测试）
  • 任务：周五前交付电商 MVP Demo（商品列表 + 详情 + 购物车）
  • 技术栈：Next.js + Prisma + SQLite + Tailwind CSS
  • 卡点：项目初始化耗时过长，重复性劳动占据大量精力

具体痛点清单：

  1. 手动执行脚手架工具及后续配置，约 30 分钟
  2. 手动安装 ORM、状态管理等依赖并初始化配置，约 20 分钟
  3. 手动编写数据库模型定义文件，约 15 分钟
  4. 手动编写种子脚本插入示例数据，约 15 分钟
  5. 手动编写后端接口查询逻辑，约 20 分钟
  6. 手动编写前端页面及样式，约 40 分钟
  7. 调试环境问题、依赖冲突，约 30 分钟

总计耗时：约 2.5 小时，而这还只是搭了个空壳，核心业务逻辑一行没写。

二、我用 Trae Work 怎么解决的

操作步骤：

  1. 打开 Trae Work，新建项目文件夹
  2. 切换到智能体/Builder 模式
  3. 输入一句话指令（见下方 Prompt）
  4. 等待 AI 自主执行文件创建与终端命令
  5. 验证项目并启动

核心指令（Prompt）—— 直接复制到 Trae Work 对话框：

请在当前目录下，从零初始化一个基于 Next.js 的电商项目脚手架。

具体要求：

  1. 初始化项目并安装 Prisma、Tailwind CSS、Zustand 等依赖。
  2. 配置 Prisma 使用 SQLite 数据库，并定义 Product（包含名称、描述、价格、图片链接）和 CartItem 模型。
  3. 生成 Client 并编写种子脚本，插入 5 条示例商品数据。
  4. 创建商品列表接口。
  5. 创建首页，使用 Tailwind 样式展示商品列表（响应式网格布局），每个卡片加“加入购物车”按钮（先不实现具体逻辑，留空即可）。
  6. 完成后，请帮我运行数据库迁移、生成 client，并执行种子脚本。最后告诉我如何启动项目。

Trae Work 执行的动作：

  1. 分析需求，拆解技术栈和依赖关系
  2. 创建配置文件并填入所有指定依赖
  3. 创建环境配置、样式配置等基础文件
  4. 定义数据库模型，生成数据库 Schema
  5. 编写种子脚本，准备示例数据
  6. 编写后端接口逻辑
  7. 编写前端页面及交互按钮
  8. 终端执行依赖安装
  9. 终端执行数据库迁移命令，生成 ORM Client
  10. 终端执行种子脚本，写入示例数据到数据库

三、提效前后对比

  • 总耗时：约 2.5 小时 → 约 5 分钟（提升约 30 倍）
  • 操作步骤：15+ 步手动操作 → 1 步输入指令
  • 文件创建数：手动创建 8-10 个文件 → AI 自动创建
  • 终端命令执行：手动执行 6-8 条命令 → AI 自动执行
  • 出错排查：依赖冲突、配置错误需手动排查 → AI 自动处理并修复
  • 示例数据：手动编写或用 Mock 工具 → AI 自动生成并插入
  • 可修改性：改技术栈需推倒重来 → 修改指令即可增量调整
  • 精力消耗：搬砖为主，精力耗尽 → 专注业务设计

四、成果展示

生成的项目结构

  • app 目录：包含后端接口文件与前端页面文件
  • prisma 目录：包含数据库模型定义与种子数据脚本
  • 根目录：包含依赖配置、环境配置、样式配置等基础文件

运行结果

  1. 执行启动命令
  2. 访问本地端口
  3. 页面展示 5 个示例商品的网格列表
  4. 每个商品包含图片、名称、价格、加入购物车按钮
  5. 前后端打通，数据从数据库实时读取

五、实践经验总结

:white_check_mark: 做对的 3 件事

  1. 指令足够具体：明确了技术栈、依赖包、模型字段、文件路径，AI 执行偏差小
  2. 让 AI 执行终端命令：授权 Trae Work 执行依赖安装和数据库迁移命令，省去手动操作
  3. 分步验证：每完成一步先看文件结构，确认无误再继续

:warning: 避坑的 3 个教训

  1. 首次指令别贪多：复杂项目建议分 2-3 次指令完成，避免 AI 上下文丢失
  2. Review 生成内容：AI 生成的逻辑能跑，但安全性和规范性需人工检查
  3. 配置团队规则：在项目根目录定义团队编码规范，让 AI 生成的代码自动遵守

:pushpin: 进阶 3 个建议

  1. 保存 Prompt 模板：把验证过的指令存成模板，下次新项目直接复用
  2. 善用增量修改：需求变更时，不要让 AI 推倒重来，而是指令“在现有基础上增加 XX 模块”
  3. 结合知识库：将团队的最佳实践文档放在项目目录中，让 Trae Work 基于团队规范生成内容

六、分享你的实操对话

完整可复制的 Prompt

请在当前目录下，从零初始化一个基于 Next.js 的电商项目脚手架。

具体要求：

  1. 初始化项目并安装 Prisma、Tailwind CSS、Zustand 等依赖。
  2. 配置 Prisma 使用 SQLite 数据库，并定义 Product（包含名称、描述、价格、图片链接）和 CartItem 模型。
  3. 生成 Client 并编写种子脚本，插入 5 条示例商品数据。
  4. 创建商品列表接口。
  5. 创建首页，使用 Tailwind 样式展示商品列表（响应式网格布局），每个卡片加“加入购物车”按钮（先不实现具体逻辑，留空即可）。
  6. 完成后，请帮我运行数据库迁移、生成 client，并执行种子脚本。最后告诉我如何启动项目。

使用建议

  • 首次使用：直接复制上方 Prompt 粘贴到 Trae Work 中执行
  • 二次复用：修改技术栈、模型字段、功能模块即可适配其他项目
  • 团队共享：将此 Prompt 存入团队 Wiki，统一项目初始化标准