产品

第 5 课：TRAE IDE 安装、规则、上下文与小步开发

零基础用户常把一个超长需求一次发给 AI，然后在大量改动、依赖安装和报错中失去控制。本节依据 TRAE 官方最新文档，建立“打开项目—加载上下文—确认计划—小步修改—运行验证—检查差异—提交”的稳定协作循环。

2026-09-08当前状态：更新中

AI · 网站 · Agent

1. 这一节解决什么问题

2. 学完要拿到什么结果

能在 TRAE IDE 打开或克隆项目。
一个 .trae/rules/ 项目规则文件。
一次用 /spec 或 Agent 生成并人工确认的计划。
能用 #File、#Folder、#Problems 和终端错误补充上下文。
完成“只改一个组件并验证”的练习提交。

3. 对应的开源对标及链接

TRAE 官方快速开始、内置 Agent、Rules、上下文、Spec/Plan。
AI Vibe Coding 101：参考准备、清晰指令、尝试修错、再扩展的项目推进方式。
本项目 TRAE 功能核验：记录 2026-07-21 的准确按钮与限制。

4. 完整图文课程正文

4.1 明确使用哪一个 TRAE

TRAE 当前包含 IDE、Work、插件与 CLI。课程主线使用 TRAE IDE：左上角可切 IDE/SOLO。IDE 模式保留编辑器、终端、调试与 Git，适合新手看清每一步；SOLO 可让 AI 自动规划、生成、测试和预览。不要把 TRAE Work 的 Work/Code/Design 模式当成 IDE 的按钮。

4.2 安装与打开项目

官方快速开始当前支持 Windows 10/11 x64、macOS 12+；Linux 具体发行版见官方页。从 TRAE 官网下载 IDE。启动后按引导选择主题和语言、可选导入 VS Code/Cursor 设置并登录。打开本地项目：左侧“打开文件夹”，或左上角“选择项目 > 打开文件夹”；也可选择“克隆 Git 仓库”。

4.3 AI 需要上下文，不需要猜

输入框输入 # 可添加 Code、File、Folder、Workspace、Doc、Problems、Web、Rule、Past Chats。修改 RFQ 时至少引用 PRD、表单组件和环境变量示例；排错时引用 #Problems 或复制终端完整报错。上下文越相关越好，不是越多越好。

4.4 项目规则是长期护栏

在“设置 > 规则 > + 创建 > 项目”创建规则，TRAE 会在 .trae/rules/ 生成 Markdown。规则指定技术栈、商业事实边界、密钥、验证命令和改动范围。规则不能替代每次任务的目标，但能防止 AI 反复忘记重要约束。

4.5 Plan、Spec 与 Agent

边界清晰的小功能用 /plan；从零搭建完整网站用 /spec，它会在 .trae/specs/ 生成 spec、tasks、checklist，并等待确认。内置 Chat 不能使用 Plan/Spec。使用 Agent：输入框左下角 @ 选择 Agent，第一次就说明目标、约束、页面、禁止项与验收；先读 PRD/技术方案，再同意执行。

4.6 安全循环

flowchart LR
  A[选择一个验收项] --> B[引用最小上下文]
  B --> C[让 Agent 先解释计划]
  C --> D[执行一个小改动]
  D --> E[运行检查/浏览器验收]
  E --> F[查看代码变更]
  F --> G[Git 提交]
  G --> A

5. 零基础用户能够执行的操作步骤

打开TRAE 官网下载页，对照官方快速开始安装。
在 TRAE 中打开 cases/garlic-b2b-website/；若学习者从课程仓库开始，也可先克隆仓库。
打开终端，运行 node -v 与 npm -v；Node 低于项目 README 要求时先安装符合要求的 LTS。
按TRAE 项目总提示词创建项目规则，选择“始终生效”。
在 Agent 中输入 /spec，附上 #File PRD、#Folder 网站目录和 #Rule 项目规则，要求只生成计划。
检查计划是否包含安装、页面、双语、RFQ、SEO、测试、构建与许可证；删除不在 PRD 的支付、账户、后台。
选择一个很小的练习，例如修改示例站页脚的“示例数据”提示；要求修改后运行检查。
通过“查看变更/代码变更”审阅差异；确认没有密钥和无关文件。
在“源代码管理”暂存并提交，或终端执行 Git 命令。

6. 可直接复制给 TRAE 或其他 AI 的提示词

请作为本项目的 Agent 工作。先阅读 #File:README.md、#File:../../templates/08-prd-template.md、#Folder:src 和 #Rule:项目规则。
本轮只做计划，不修改文件、不安装依赖。
目标：把 PRD 拆成每次 30—90 分钟、且每步都能运行验证的里程碑。
每个里程碑写：输入文件、允许修改范围、预期页面/行为、运行命令、人工验收、回滚点。
必须覆盖双语路由、产品详情、质量/市场/FAQ、RFQ 环境变量、SEO、移动端、可访问性、构建和第三方声明。
禁止加入支付、登录、库存、虚构数据、硬编码密钥。遇到信息不确定时列问题，不自行补全。

7. 云南大蒜项目中的具体示范

项目规则核心示例：

---
alwaysApply: true
---
- 使用简体中文解释操作，代码标识符使用英文。
- 技术栈以现有 package.json 为准，不擅自更换框架。
- 企业名、产能、证书、市场、客户、交期未知时必须显示“示例数据，发布前需企业确认”。
- 禁止写入真实密钥；只维护 .env.example。
- 每次只完成一个里程碑，运行 npm run check 和 npm run build 后汇报。
- 保持 /zh 与 /en 对应页面、键盘可操作、375px 无横向滚动。
- 不复制没有明确许可证的代码、图片和正文。

本轮小任务验收：页脚中文显示“课程示范站，不代表真实企业”；英文显示“Course demo site; not a real company”；两个语言页都能看到，构建通过，没有更改 RFQ 或其他页面。

8. 可填写模板

TRAE 小步任务卡：

字段	填写
本轮只解决
引用上下文
允许修改目录
禁止改动
命令验证
浏览器验收
成功后提交说明
失败时回到哪个提交

9. 常见错误

把 Work、插件或 CLI 的界面教程套到 TRAE IDE。
一次要求“做完整站并上线”，没有中间验收。
只发截图，不附完整报错、文件和刚执行的动作。
不读 Agent 计划就确认，任由它新增数据库、支付或不必要依赖。
把 .env.local、聊天记录或客户资料提交到 Git。

10. 排错方法

界面找不到时先查本课官方链接和功能核验表，按功能名在设置中搜索。AI 改动过大时不要继续加提示，先停止、查看变更、撤销该轮或回到上一 Git 提交，再把任务缩小。命令报错时记录当前目录、命令、Node/npm 版本和完整错误；用 #Problems/终端输出让 Agent 先解释根因和最小修复。

11. 完成标准

从官方链接安装并能打开正确项目。
已创建项目规则，包含事实、密钥、技术和验收约束。
能区分 IDE/SOLO 与 Work 的产品模式。
能用 # 引用精确上下文，并人工确认 Agent 计划。
已完成一个小改动、运行验证、查看差异并提交 Git。

12. 本节成果如何进入下一节

下一节先不继续写功能，而是把对标观察和内容证据转成页面结构、设计令牌与组件规范。项目规则会保证 TRAE 不在 UI 阶段编造内容或擅自换技术栈。

上一节：第 4 课：定位、功能优先级与可验收 PRD
下一节：第 6 课：从网站结构到可实现的 UI 规格