29 · 入门实战：从零到上线

用 Trae 的三个模式完整走通一个真实项目：从项目构思、AI 对话、脚手架生成、功能迭代到部署上线。

导读

你已经了解了 Trae 的 Chat、Builder、SOLO 三个模式各自的能力。但理论归理论，真正上手时很多人还是会卡住：什么时候用 Builder？什么时候切 SOLO？.trae/rules 到底怎么写才不踩坑？部署到 Vercel 又需要哪些步骤？

这篇文章用一个真实的 Mini 项目——一个极简的「灵感收集箱」（IdeaBox）——带你从头到尾走一遍。你会看到每个阶段用什么模式、做什么操作、预期得到什么结果。文章末尾还有一张模式切换决策表和一个心智模型，帮你内化这套工作流。

读完本文，你将能够独立用 Trae 从零构建一个可部署的 Web 应用。

01 · 项目概览：我们要做什么

在开始之前，先明确目标。我们将在本文中构建一个叫 IdeaBox 的小工具：

这个项目足够小，能在一次阅读中走通全流程；又足够完整，能覆盖 Trae 三种模式的核心用法。

心智模型：把 Trae 想象成一个「三层工作室」

• Chat（一层）：你和首席架构师坐在白板前讨论想法。
• Builder（二层）：首席架构师叫来一个工程团队，按你的需求搭出毛坯房。
• SOLO（三层）：你走进毛坯房，身边跟着一个 AI 结对编程伙伴，你一回头它就帮你把墙刷了。

02 · 创建项目并配置 Trae

2.1 新建 Next.js 项目

打开终端，在 Trae 的内置终端中执行：

npx create-next-app@latest ideabox --typescript --tailwind --app --src-dir
cd ideabox

预期输出：

✔ Would you like to use ESLint? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to customize the default import alias? … No
Success! Created ideabox at ...

2.2 在 Trae 中打开项目

在 Trae 的欢迎界面点击 Open Folder，选择 ideabox 目录。之后你会看到 Trae 的左侧面板出现三个模式切换按钮：Chat、Builder、SOLO。

如果没有看到这三个按钮，请确认 Trae 版本是否为 v1.5 及以上。

2.3 配置 Trae 项目规则

.trae/rules 是 Trae 的「项目大脑」。它告诉 AI 你的技术栈偏好、代码风格、目录结构约定。强烈建议在项目一开始就创建它。

在项目根目录下创建 .trae/rules 文件：

# IdeaBox 项目规则
 
## 技术约束
- 使用 Next.js 14 App Router
- 使用 Tailwind CSS v3 进行样式管理
- 使用 TypeScript，禁止 any 类型
- 所有组件使用 "use client" 或 "use server" 显式声明
 
## 目录结构
src/
  app/        # App Router 路由
  components/ # 可复用 UI 组件
  lib/        # 工具函数与 hooks
  types/      # TypeScript 类型定义
 
## 代码风格
- 组件使用箭头函数 + const 声明
- Props 接口定义在组件文件顶部，前缀 I
- 文件命名：kebab-case

为什么要写 rules？没有 rules 时，AI 可能在同一个项目中混用 Pages Router 和 App Router、用 any 满天飞、或者把组件逻辑全塞在一个文件里。rules 就是你的「架构护栏」。

03 · 阶段一：Chat 模式 —— 讨论与规划

3.1 打开 Chat

点击左侧面板的 Chat 按钮，输入框上方会出现模型选择。选择 Claude Sonnet（或你偏好的模型）。

3.2 需求讨论

在 Chat 中输入：

我要用 Next.js 14 App Router 做一个灵感收集工具叫 IdeaBox，功能是记录灵感、按标签分类、支持关键词搜索、数据存在 localStorage。帮我梳理一下页面结构、组件拆分和数据流。

预期回复会包含：

• 页面结构：

  • / —— 首页，展示所有灵感列表 + 搜索框
  • /idea/new —— 新增灵感
  • /idea/[id] —— 灵感详情 / 编辑

• 组件拆分：

  • IdeaCard —— 灵感卡片（标题、预览、标签）
  • IdeaForm —— 新增/编辑表单
  • TagBar —— 标签筛选栏
  • SearchBar —— 搜索输入框

• 数据流：

  • src/lib/storage.ts 封装 localStorage 读写
  • src/hooks/useIdeas.ts 提供 CRUD + 搜索逻辑

3.3 确认架构

这是 Chat 模式最关键的一步：不急着写代码，先确认方向。你可以追问：

数据模型你建议怎么定义？能给我一个 TypeScript interface 吗？

AI 会给出类似下面这样的类型定义：

// src/types/idea.ts
 
export interface IIdea {
  id: string;
  title: string;
  description: string;
  tags: string[];
  createdAt: number;
  updatedAt: number;
}

确认无误后，就可以进入下一阶段了。

Chat 阶段检查清单

• 页面路由结构已确定
• 组件树已梳理
• 数据流方案已确认
• TypeScript 类型已定义
• 技术决策已记录（以备写入 rules）

04 · 阶段二：Builder 模式 —— 脚手架生成

4.1 切换到 Builder

点击左侧面板的 Builder。你会注意到输入框的风格变了——Builder 的提示更偏向「生成指令」，而不是对话。

4.2 编写 Builder 提示词

输入以下内容：

基于我们刚才在 Chat 中确认的架构，帮我完成 IdeaBox 项目的初始搭建。

需要完成：
1. 创建 src/types/idea.ts，定义 IIdea 接口
2. 创建 src/lib/storage.ts，封装 localStorage 的读写操作，包括 getAll、getById、create、update、delete
3. 创建 src/hooks/useIdeas.ts，实现一个自定义 hooks，包含 CRUD 方法和搜索逻辑
4. 创建 src/components/IdeaCard.tsx，展示灵感卡片
5. 创建 src/components/IdeaForm.tsx，包含标题、描述、标签输入
6. 创建 src/components/TagBar.tsx，标签筛选
7. 创建 src/components/SearchBar.tsx，搜索输入
8. 修改 src/app/page.tsx，组装主页面
9. 创建 src/app/idea/new/page.tsx，新增页面
10. 创建 src/app/idea/[id]/page.tsx，编辑页面

项目根目录已初始化，src/app 下有默认的 layout.tsx。请在已有结构上修改。

4.3 Builder 的执行方式

Builder 不会像 Chat 那样逐条回复——它会在后台分析你的请求，然后一次性生成所有文件的改动。

• 你会看到左侧文件树中的文件逐个被修改
• Builder 会在每个文件右下角显示操作类型（新增 / 修改）
• 整个过程可能需要 30 秒到 2 分钟

4.4 审查 Builder 输出

Builder 执行完毕后，Trae 会显示一个 Diff 视图，你可以逐文件审查改动。这是 Builder 和 Chat 的一个重要区别：Builder 的产出需要你审查确认。

重点检查：

1. 类型定义是否符合 Chat 阶段的确认结果
2. 数据流是否正确：组件是否有正确的 props 传递
3. localStorage 的 key 是否统一（建议用一个常量）
4. 样式是否至少可用

如果发现问题，直接在 Builder 中输入修正指令：

IdeaForm 组件缺少标签输入的 UI，帮我加上一个可以添加/删除标签的输入区域。

Builder 会增量修改，不破坏已有代码。

4.5 Builder 完成的预期状态

执行完毕后，你的项目应该可以运行：

npm run dev

打开 http://localhost:3000，你应该能看到：

• 一个可以输入灵感的表单
• 灵感列表（暂时为空）
• 搜索框和标签筛选栏（功能完整）

Builder 阶段检查清单

• 所有组件文件已创建
• 类型定义正确
• 数据流完整（增删改查 + 搜索）
• npm run dev 无编译错误
• 页面可在浏览器中访问

05 · 阶段三：SOLO 模式 —— 迭代功能

5.1 切换到 SOLO

项目的基础骨架已经搭好。现在进入 SOLO 模式——这是 Trae 最特别的地方：AI 深度融入到 IDE 中，你可以用自然语言指挥 AI 修改代码，同时保持手动微调的能力。

点击 SOLO 按钮。你会看到编辑器右侧多了一个 SOLO 面板。

5.2 体验 SOLO 的三种交互

SOLO 模式下有 3 种交互方式，我们逐一体验：

方式一：选中代码 + 问问题

在编辑器打开 src/components/IdeaCard.tsx，选中整个组件，然后按 Cmd + I（或右键 → Ask SOLO），在 SOLO 面板中输入：

解释这段组件的工作原理，特别说明标签显示的逻辑。

SOLO 会选中你选中的代码，给出解释。这是理解陌生代码最快的方式。

方式二：自然语言指令修改

在 SOLO 面板中直接输入：

给 IdeaCard 组件添加一个悬停效果：鼠标移上去时卡片轻微上移 2px 并加阴影。用 Tailwind 实现。

SOLO 会定位到 IdeaCard.tsx 文件，修改其 className，然后显示 diff 让你确认。点击 Apply 接受修改。

预期修改（diff 视图）：

- <div className="bg-white rounded-lg p-4 border">
+ <div className="bg-white rounded-lg p-4 border hover:-translate-y-0.5 hover:shadow-lg transition-all duration-200">

方式三：文件级重构

在 SOLO 面板输入：

我想把 localStorage 操作从 useEffect 迁移到一个 Provider 模式，用一个 React Context 来管理灵感数据。帮我重构。

这是一个较大的改动。SOLO 会分析现有代码结构，生成一个迁移计划，然后逐步执行。这个过程可能会涉及：

1. 创建 src/context/IdeaContext.tsx
2. 修改 src/app/layout.tsx 包裹 Provider
3. 更新 useIdeas.ts hooks
4. 修改所有消费者组件

SOLO 会逐个文件展示 diff，你可以选择全部接受或逐个审查。

5.3 添加一个”暗色模式”

作为 SOLO 的实战练习，我们来添加暗色模式切换功能：

帮我给项目添加暗色模式支持。使用 Tailwind 的 dark: 变体 + next-themes 库。模式切换按钮放在页面右上角。

SOLO 会：

1. 安装 next-themes 包
2. 创建 ThemeProvider 包裹
3. 添加切换按钮组件
4. 修改现有组件添加 dark: 样式类

完成后你会看到右上角多了一个暗色/亮色切换按钮，并且所有卡片和背景都支持了暗色主题。

5.4 SOLO 的错误处理

如果 SOLO 生成的代码有问题，不要手工回退。直接在 SOLO 面板中描述问题：

切换暗色模式后，文字颜色没有变化，读起来很费劲。帮我检查缺少哪些 dark: 样式类。

SOLO 会扫描相关组件，补全缺失的样式。

SOLO 阶段检查清单

• AI 能理解选中代码并给出解释
• 能通过自然语言指令修改组件 UI
• 能完成较大范围的重构（Provider 模式迁移）
• 新功能（暗色模式）正常可用
• 能通过对话修复 AI 产生的 bug

06 · 模式切换决策表

很多人的困惑是：三个模式到底什么时候切换？下面这张表可以直接保存下来当参考：

黄金法则：Chat 想清楚，Builder 搭起来，SOLO 慢慢调。

07 · Git 工作流

7.1 初始化仓库

git init
git add .
git commit -m "chore: initial project scaffold by Trae Builder"

7.2 按功能分支开发

Trae 的代码生成是按功能增量的，建议也按功能提交：

# Builder 生成的初始版本
git checkout -b feat/initial-scaffold
git commit -m "feat: idea CRUD with localStorage"
 
# SOLO 添加暗色模式后
git checkout -b feat/dark-mode
git commit -m "feat: add dark mode with next-themes"

7.3 在 Trae 中使用 Git

Trae 内置了 Git 面板（左侧 Source Control 图标），你可以在 GUI 中完成：

• 查看变更文件
• 编写提交信息
• 推送远程仓库

如果你更习惯命令行，直接在 Trae 内置终端中操作是一样的。

7.4 推送到 GitHub

# 先在 GitHub 创建一个空仓库，然后：
git remote add origin git@github.com:你的用户名/ideabox.git
git push -u origin main

贴心提示：如果在 Trae 中配置 GitHub 登录，可以直接在 Trae 内完成创建仓库和推送的操作，不用切到浏览器。

08 · 部署到 Vercel

8.1 用 Chat 确认部署方案

在 Chat 中输入：

我要把 IdeaBox 部署到 Vercel，这是一个 Next.js 项目，数据存在 localStorage。部署有什么需要注意的吗？

AI 会告诉你：

• Vercel 对 Next.js 有原生支持，零配置即可
• localStorage 只在浏览器端可用，确保所有访问 localStorage 的代码都用 typeof window !== 'undefined' 包裹，或放在 useEffect 中
• 不需要 Vercel 环境变量（没有后端 API）

8.2 在 Vercel 中导入项目

方式一：通过 Vercel CLI

# 安装 Vercel CLI
npm i -g vercel
 
# 在项目根目录执行
vercel
 
# 按提示登录并完成部署
# 第一次会询问配置，全部默认即可

预期输出：

🔍  Inspect: https://vercel.com/你的用户名/ideabox/xxxxx
✅  Production: https://ideabox.vercel.app

方式二：通过 Vercel Dashboard

1. 打开 vercel.com 
2. 点击 Add New → Project
3. 导入你的 GitHub 仓库（你的用户名/ideabox）
4. Vercel 会自动识别为 Next.js 项目
5. 所有配置保持默认，点击 Deploy

8.3 部署后的验证

部署完成后：

1. 打开 Vercel 分配的域名（如 https://ideabox.vercel.app）
2. 测试核心功能：新增灵感 → 搜索 → 标签筛选 → 暗色模式切换
3. 打开浏览器 DevTools 的 Application → Local Storage，确认数据正常存储

8.4 后续更新

每次你推送代码到 main 分支，Vercel 会自动重新部署。你只需要：

git add .
git commit -m "fix: improve search performance"
git push

等 1-2 分钟，Vercel 的部署就会自动完成。可以在 Vercel Dashboard 的 Deployments 页面查看构建日志。

09 · 总结

完整工作流回顾

构思 Idea
   │
   ▼
Chat ────────────→ 讨论方案、确认架构、定义类型
   │
   ▼
Builder ──────────→ 生成初始代码脚手架
   │
   ▼
SOLO ─────────────→ 迭代功能、修复问题、优化体验
   │
   ▼
Git ──────────────→ 分功能提交、推送到 GitHub
   │
   ▼
Vercel ────────────→ 自动部署、验证上线

各阶段关键产出

核心心法

1. 不要跨模式工作：在 Chat 中确认好的事情，不要在 Chat 中生成代码。切到 Builder 或 SOLO。
2. rules 是第一生产力：花 5 分钟写好 .trae/rules，省掉后续无数次的返工。
3. Builder 的产出要审查：AI 也会犯错，diff 视图是你的安全网。
4. SOLO 是主力开发模式：日常开发 80% 的时间在 SOLO 中度过——写功能、修 bug、做重构。
5. 小步提交：AI 生成代码速度快，但不要一次提交大量改动。按功能拆分，方便回滚。

三句话记住 Trae

• Chat 是白板，讨论不写代码。
• Builder 是工程队，一次把毛坯搭好。
• SOLO 是 AI 编程搭档，你主导、它执行。

10 · 下一篇

至此你已经走完了「从零到上线」的完整流程。你学会了：

• 用 Chat 模式梳理架构
• 用 Builder 模式搭建初始项目
• 用 SOLO 模式迭代功能
• 用 Git 管理版本
• 部署到 Vercel

但这只是开始。在下一篇文章 30 · Trae 高级工作流：多文件重构与测试驱动 中，你将学到：

• 如何用 SOLO 进行跨文件的大规模重构
• 如何让 AI 帮你写单元测试和集成测试
• 如何建立”先测试后实现”的 TDD 工作流
• 如何用 .trae/rules 控制 AI 的编码风格到标点级别

本文是 Trae 实战系列的第 29 篇。
系列目录：00 · 目录与索引