{T}

Trae

介绍

AI 不再是简单的"代码补全"工具，而是能够自主思考和执行任务的"开发伙伴"。传统的 AI 编程助手让你成为更高效的"工具使用者"，而 Trae 的 Agent 架构则让你成为真正的"AI 创造者"

  • 通过 Trae，前端开发者可以轻松构建后端 API
  • 而原先觉得前端"很难"的后端开发者也可以轻松构建前端页面
  • 一个产品经理可以快速验证交互原型
  • 一个设计师竟也可以通过 Vibe Coding 方式将创意直接转化为可运行的代码
  • 技术边界正在逐渐缩短

像 Claude、Gemini 这类顶尖模型存在地区使用限制，是不对国内开放的。为了让国内用户能合规、稳定地使用，同时又能让追求极致体验的用户接触到全球最好的模型，双版本策略应运而生。主要区别在于提供的模型

双版本对比

Trae 推出两个主要的版本：国内版和国际版。它们在 IDE 核心功能上完全一致，但在访问地址、账号体系、AI 模型支持和定价策略上，存在一些关键区别

  • 访问官网与下载:

    • 国内版: 官网地址为 https://www.trae.com.cn/，服务器位于国内，访问速度更快、更稳定。
    • 国际版: 官网地址为 https://www.trae.ai/，面向全球用户。

  • 账号登录体系:

    • 国内版: 支持使用国内手机号或稀土掘金社区账号进行登录，更符合国内用户的使用习惯。
    • 国际版: 支持使用 GitHub、Google 账号进行一键登录，也支持常规的邮箱注册，方便国际开发者。

  • 网络要求:

    • 国内版: 正常网络环境下即可流畅使用。
    • 国际版: 在首次登录验证时，通常需要"科学上网"才能顺利访问登录服务。只要解决首次登录的网络问题，后续在国内调用模型基本是畅通无阻的

  • 核心差异：AI 模型支持: 这是两个版本之间最大的区别。

    • 国际版：集成了全球顶尖的 AI 模型，如 Anthropic 的 Claude 系列、Google 的 Gemini 系列、OpenAI 的 GPT 系列以及 DeepSeek 的模型
    • 国内版：集成了国内优秀的 AI 模型，如豆包系列和 DeepSeek 系列。

  • 多模态能力：图片上传:

    • 国际版: 除了 DeepSeek 模型外，其余大部分模型（如 Claude、GPT-4o、Gemini）均支持图片上传，可以发送图片让 AI 理解和分析
    • 国内版: 目前所有模型均不支持图片上传功能

  • 定价策略与费用:

    • 国内版: 目前（截至 2024 年 6 月）提供完全免费的使用。
    • 国际版: 提供灵活的订阅计划。新用户可以享受优惠，也提供了包含一定免费额度的 Free plan 供用户体验

  • 并行安装: 两个版本可以同时安装在同一台电脑上，互不干扰。安装后，国内版应用名称会标识为 Trae CN，国际版则为 Trae，便于区分

隐私与安全

根据 Trae 官方发布的隐私政策，其对用户数据的处理方式是透明的。Trae 采取了"本地为主，必要时上传"的策略来平衡 AI 功能的强大与用户代码的安全性。

  • 代码库文件默认存储在本地

  • 什么情况下代码会被上传？

    1. 为了代码库索引（Codebase Indexing）：为了让 AI 能够理解你的整个项目（即"上下文"），Trae 会将你的代码库文件临时上传到服务器，用于计算和生成"嵌入"（Embeddings）。嵌入是一种让机器理解代码语义的数学表示，它不包含原始的明文代码
    2. 与 AI 聊天时：当在 AI 对话框中主动输入信息，无论是提问还是粘贴代码片段（Snippets），这些你主动输入的内容会被收集并发送给其背后的大语言模型（如 Claude、GPT 等），以便为你生成回答和建议

  • 代码上传后的处理方式

    • 永久删除明文代码：在为代码库计算完嵌入之后，Trae 的服务器会永久删除所有明文代码。服务器只保留生成的嵌入向量和相关的元数据（如文件路径），用于 AI 的上下文理解
    • AI 聊天内容：你发送给 AI 的聊天内容，包括代码片段，会被用于支持和改进 AI 服务

  • 数据控制方

    • 根据其隐私政策，Trae 平台由位于新加坡的 SPRING (SG) PTE. LTD. 提供和控制

Agent 智能体

Agent（智能体）是个能够感知环境、自主思考和规划，并采取行动以实现预设目标的智能实体。接到任务后，会将目标分解为一系列子任务：

  1. 规划 (Planning)
  2. 使用工具 (Tool Use)
  3. 执行 (Execution)
  4. 输出 (Output)

正是这种 自主规划 和 工具调用 的能力，让 Agent 能够处理更加开放和复杂的现实世界问题，而不仅仅是停留在对话层面

Trae IDE 内置两款强大的智能体：

  • Builder：通用的项目构建智能体。可以把它看作是一个全能的开发伙伴。当需要从零开始创建一个新项目，或者在现有项目中添加新功能时，Builder 能够理解你的需求，并自主调用各种工具来完成任务，比如分析代码、编辑文件、执行命令等，高效地帮你实现目标
  • Builder with MCP：这是 Builder 的增强版。它在 Builder 的所有能力基础上，自动集成了你所配置的 MCP (Model Context Protocol) 服务

以最常用的 Builder 智能体为例，看看它在实际工作中的表现

创建自定义智能体

自定义智能体可以打造一个或多个高度专业化的 AI 助手。可以为不同的任务创建不同的专家：

  • "代码审查员"：严格遵守团队代码规范，专门负责审查代码的智能体
  • "测试用例生成器"：只专注于根据业务逻辑编写 Jest 或 Go test 测试用例的智能体
  • "API 文档助手"：能根据代码自动生成 Swagger 或 OpenAPI 格式文档的智能体

点击 Trae 界面右上角的 设置 —> 智能体，点击 + 创建智能体 按钮：

  • 名称：智能体名字
  • 提示词 (Prompt)：可以定义它的角色、工作流程、沟通风格以及需要遵守的规则
  • 工具 (Tools)：在这里为你的智能体授予执行任务所需的权限。它能做什么，完全取决于你为它选择了哪些工具
    • 工具 - MCP：允许智能体调用外部服务，比如自建的 API 或第三方服务
    • 工具 - 内置：
      • 文件系统：授权后，智能体才能读取、修改或创建你项目中的文件
      • 终端：允许智能体执行 npm install、go run 等终端命令
      • 联网搜索：让智能体可以上网搜索最新的技术文档或解决方案
      • 预览：如果智能体生成了可预览的前端页面，会自动提供预览入口

示例：创建"前端代码审查员"

  1. 填写配置：

    • 名称：前端代码审查员

    • 提示词：

      markdown
      你是一个严格的前端代码审查专家。你的任务是分析我提供的代码，并确保它遵循以下规范：
1.  所有的 JavaScript/TypeScript 文件必须符合 Prettier 格式化标准。
2.  所有的 CSS 属性必须按照字母顺序排列。
3.  组件文件名必须使用大驼峰命名法 (PascalCase)，工具函数文件名必须使用小驼峰命名法 (camelCase)。
4.  禁止在代码中使用 console.log。

如果发现不符合规范的代码，请直接提出具体的修改建议，并提供修改后的完整代码。

    • 工具选择：勾选 文件系统 (用于读取和修改代码)。

  2. 创建智能体： 点击 创建 按钮后，系统会提示创建成功。可以选择 立即使用

管理自定义智能体

Trae 提供简单而强大的智能体管理功能：

  • 编辑：如果发现智能体的表现不符合预期，或者想为它增加新的能力，可以随时点击"编辑"回到配置页面，修改它的提示词或增删工具
  • 删除：当某个智能体不再被需要时，可以将其彻底删除

分享与导入：知识的流动

"分享"是 Trae 的一个亮点功能。它让你能将精心打造的 AI 助手分享给同事或整个开发者社区，促进知识和高效工作流的传播

  1. 分享智能体 点击 分享 按钮后，会弹出一个分享对话框

  2. 导入智能体 当在浏览器中打开这个分享链接时，会看到一个 Trae Agent 的页面。浏览器会提示是否在 Trae IDE 中打开此链接。打开后会跳转到 Trae IDE

CUE

Cue 是 Trae 提供的一套智能编程工具集。它的中文意思是"提示"，这个词很贴切地描述了它的核心作用。Cue 不仅仅是传统的代码片段补全，它更像能够理解意图的智能助手，支持代码补全、多行修改、修改点预测和跳转等多种功能。它通过分析代码上下文，让繁琐的重复性工作自动化

内联聊天

Trae 提供强大的内联聊天（Inline Chat）功能，让 AI 助手能够无缝地融入您的编码流程

随时随地修改代码

Trae 的内联聊天专注于一件事：在编辑器内，用最自然的方式修改代码。无论你是想重构一整个函数，还是只想优化几行代码，它都能帮你轻松完成。

启动内联聊天非常简单，主要有两种方式：

  • 修改代码块：将光标放在你想要修改的代码块内（无需选中），按下快捷键 Cmd + I 会在代码上方出现输入框

  • 修改选中代码：选中想要修改的特定代码，代码上方会浮现一个菜单，点击 编辑 按钮，同样可以唤起输入框

AI 会以 Diff 视图的形式，清晰地展示代码的变更。可以直观地预览修改前后的差异，并决定如何处理：

  • 全部接受/拒绝：点击对话框左下角的 接受 (Cmd + Enter) 或 拒绝 (Cmd+ Backspace) 按钮，可以快速应用或放弃所有修改
  • 部分接受/拒绝：对于更精细的控制，你可以点击每个代码片段右上角的 ^Y (接受) 或 ^N (拒绝) 按钮，逐一处理每个变更
  • 重试：如果 AI 的第一次尝试不符合你的预期，点击 重试 按钮，它会根据相同的指令重新生成一次

自定义终端助手

利用 Trae 强大的自定义智能体功能，打造一个专属的"终端命令助手"：

  1. 填写配置：

    • 名称：终端助手
    • 提示词：
    markdown
    你是一个专业的终端命令助手，专门将用户的自然语言需求转换为对应的终端命令并执行。你的核心职责是：

1. **命令转换**：将用户的任何输入都理解为终端操作需求，并转换为相应的命令
2. **命令解释**：详细说明每个命令的功能、参数含义和预期结果
3. **命令执行**：根据需要安全地执行终端命令
4. **结果分析**：解释命令执行结果，帮助用户理解输出内容
5. **安全提醒**：对于潜在危险的操作提前警告

**重要原则**：
- 用户的所有输入都应被理解为终端操作需求
- 优先提供适合用户操作系统（macOS/Linux/Windows）的命令
- 在执行前先展示命令，让用户确认
- 提供命令的详细解释和使用场景
- 对于复杂操作，提供分步骤的命令序列

**响应格式**：
1. 理解用户需求
2. 提供对应的终端命令
3. 解释命令参数和功能
4. 执行命令（如需要）
5. 解释执行结果

示例：
用户："查看当前目录文件"
回应："我理解您想查看当前目录的文件列表，对应的命令是：`ls -la`"
    • 工具：务必勾选 终端 工具。

使用新建的 终端助手 Agent，然后输入你的需求，比如"查看当前目录下最大的5个文件"。智能体不仅会生成正确的命令，还会直接在终端中执行它，并返回结果

上下文用法

上下文可以是一段代码、一个文件、甚至整个项目。提供精准的上下文，能让 Trae 更深入地理解你的意图，给出更贴切、更准确的回答

提供上下文

编辑器中的代码

这是最常用、最直接的方式：

  • 当前文件：当向 Trae 提问时，它默认就能"看到"当前正在编辑的文件
  • 选中代码：如果只想针对文件中的某一部分代码（例如一个函数或一个代码块）提问，只需选中那段代码，点击悬浮菜单中的"添加到对话"按钮，或使用快捷键 Cmd + U

Trae 在这里的交互体验非常出色，选中的代码块会作为一个独立的"上下文标签"显示在输入框中，可以自由地在它的前后输入描述文字。这比很多工具只能将代码固定在输入框上方的设计要灵活得多

终端中的内容

程序的报错信息是解决 Bug 的关键线索。Trae 可以直接读取终端的输出内容。当程序运行出错时，只需：

  1. 在终端中，点击包含报错信息的输出内容片段
  2. 点击右上角的"添加到对话"按钮

Trae 就能看到完整的错误堆栈，帮助你快速定位并修复问题。

代码索引

代码索引是 Trae 理解整个项目的基石。它会扫描你的项目文件，并创建一个"地图"（即索引），帮助 AI 快速导航和理解代码库的结构与关系

  • 回答更准确：AI 能基于整个项目的知识来回答问题，而不是猜测
  • 理解跨文件关系：轻松理解函数调用、类继承等跨文件逻辑
  • 重构建议更精准：进行全局性的代码重构和优化

通常 Trae 会自动为小型项目（文件数小于 5000）创建索引，基本无需干预。对于大型项目，可以在 AI 对话框右上角的 设置 > 上下文 > 代码索引管理 中手动管理

Trae 允许精确地控制哪些文件需要被排除在索引之外。Trae 默认会遵守 .gitignore 文件中的规则。此外还可以创建一个 .ignore 文件来进行更精细的控制

  1. 在 设置 > 上下文 > 忽略文件 中点击 配置忽略文件

  2. Trae 会自动创建并打开一个 .ignore 文件。

  3. 在文件中添加要忽略的文件或目录规则，例如：

text
   # 忽略所有 .log 文件
   *.log

   # 忽略整个 build 目录
   /build/

   # 忽略特定的配置文件
   secrets.json
  1. 保存文件后，记得 重新构建索引 使其生效

使用 # 符号

# 符号是 Trae 中一个极其强大的功能，它让你能够灵活、精确地指定多种来源的上下文。可以在对话输入框中输入 # 或直接点击输入框左侧的 # 上下文 按钮来唤起上下文菜单

#Folder 和 #Workspace

#Folder 和 #Workspace 能让 AI 从更高维度理解你的项目

  • #Folder：将整个文件夹作为上下文，适用于分析一个模块或一组相关组件
  • #Workspace：将整个项目作为上下文，当需要进行全局重构、添加新功能或快速了解一个陌生项目时，这个功能非常有用

重要提示：#Folder 和 #Workspace 的强大能力依赖于 代码索引。如果索引未完成，AI 的回答可能不完整

#Code：聚焦函数与类

当想要讨论某个具体的函数或类时，#Code 是最佳选择。它会将指定代码块作为上下文，而不是整个文件

  • 使用方法：输入 #Code 后，Trae 会列出当前文件中的函数和类

#File：指定单个或多个文件

如果问题涉及多个文件，或者需要 AI 理解单个文件的全部内容，可以使用 #File

  • 使用方法：输入 #File 后，Trae 会推荐最近打开过的文件

如果推荐的不是想要的，可以直接输入文件名或关键词进行搜索。Trae 还支持直接从资源管理器将文件拖拽到对话输入框中，非常方便

#Doc：打造私人知识库

可以通过两种方式添加文档集：

1. 从 URL 添加

如果文档托管在网站上（例如 Confluence, Docusaurus 站点），可以直接通过 URL 添加

  • 操作：在上下文设置中，选择 添加文档集 > 通过 URL 添加，然后输入名称和入口 URL
  • 抓取规则：Trae 会从入口 URL 开始，自动抓取同一域名下、同级或子级路径下最多三次跳转的页面内容
  • 过程：索引过程需要一些时间，取决于网站大小和网络速度

从 URL 添加，Trae 官方有段声明：

在使用本工具时，应遵循目标网址的规则，合法合规使用本工具。本工具仅支持查看公开可访问的技术文档类网站，用于学习、研究的目的，感谢你的理解与配合。

Trae IDE 在扫描页面时将会严格遵循网页的 /robots.txt 规范，若被网站拒绝则无法正常索引，索引页面列表中将展示 "网站限制无法访问"

2. 从本地文件添加

也可以将本地的 Markdown (.md) 或纯文本 (.txt) 文件添加进来

  • 操作：选择 从本地文件添加，然后选择包含文档的文件夹
  • 限制：支持 .md / .txt，单个文件最大 10MB，文档集最大 50MB，最多 1000 个文件
  • 速度：本地文件索引速度通常比 URL 快得多

如何使用文档集

  1. 在输入框中输入 #Doc，Trae 会列出你已添加的所有文档集

  2. 选择一个文档集作为上下文，然后提出你的问题。Trae 会基于该文档集的内容进行回答。

  3. Trae 会精确地引用文档集中的相关文件，并给出答案。

关于数据隐私 根据 Trae 的官方说明，创建文档集时，内容会被传输到服务器进行矢量化处理，但 Trae 不会存储 你的任何文档数据。处理完成后，矢量数据会返回并存储在你的本地设备上

#Web：即时联网搜索

当需要获取最新信息或项目代码库之外的知识时，可以使用 #Web 功能。它提供两种模式：

1. 全局联网搜索

直接输入 #Web 加上你的问题，Trae 会在全网搜索相关内容并生成回答

2. 指定网址搜索

如果想让 Trae 基于某个特定网页或网站的内容来回答，可以在输入框中先输入网址，再输入问题。直接拖入网址即可，不需要 #Web

自定义大模型

Trae 作为一款强大的 AI 编程助手，不仅内置一系列业界顶尖的 AI 模型供用户直接切换使用，还提供灵活的自定义模型接入功能，满足用户的个性化需求

以添加编程界备受推崇的 Anthropic 公司模型为例

  1. 选择服务商：在服务商下拉列表中，选择 Anthropic。

  2. 选择模型：Trae 会自动列出该服务商旗下常见的模型。可以直接选择

  3. 获取并填写 API 密钥：Trae 非常贴心地提供 获取 API 密钥 的快捷链接，点击后会直接跳转到 Anthropic 官方的 API Key 管理页面

  4. 添加模型：点击 添加模型 按钮，Trae 会验证密钥的有效性。如果一切顺利，你的自定义模型就添加成功

AI 规则

AI 规则就是为 Trae AI 设定的一系列指令和规范。这些规则会在你与 AI 的每一次交互中自动生效，引导 AI 的行为，使其输出更符合你的预期

  • 统一团队标准：在团队项目中，确保所有成员，包括 AI，都遵循相同的代码风格（如命名规范、缩进）、架构模式和开发流程
  • 遵循最佳实践：你可以将特定框架或语言的最佳实践固化为规则，让 AI 在生成代码时自动采纳，从而提升代码质量
  • 限定技术栈：明确告知 AI 项目中应使用的库、框架或 API，避免其推荐或使用不符合项目要求的技术
  • 实现个性化定制：根据个人习惯，定制 AI 的响应风格、语言偏好（如中文注释）或操作系统环境

Trae 目前提供两种不同层级的规则，以满足不同场景下的需求：个人规则和项目规则。

规则类型生效范围配置文件适用场景
个人规则所有项目user_rules.md定义全局个人偏好，如响应语言、代码注释风格、操作系统等。
项目规则当前项目.trae/rules/project_rules.md定义项目级规范，如代码风格、技术栈、命名约定、禁用 API 等。

个人规则

个人规则是全局 AI 设定，适用于使用 Trae 打开的所有项目。它主要用来定义你的个人编码偏好，让 AI 的行为符合你的习惯

示例：在个人规则中指定：

markdown
- 请只使用中文与我交流。
- 当我提问时，请详细解释你每一步操作或代码变更背后的原因。
- 在解释复杂概念或方案对比时，优先使用 Markdown 表格或列表，让内容一目了然。
- 在生成或修改代码时，请为关键的逻辑部分添加必要的中文注释。

项目规则

项目规则是针对特定项目设定的规范，仅在当前项目目录中生效。当个人规则和项目规则同时存在时，项目规则的优先级更高。这使得项目规则成为确保团队协作一致性的利器

例如，在一个 React 项目中，你可以定义如下规则：

markdown
- 项目使用 React Hooks 和函数式组件。
- 组件命名必须使用帕斯卡命名法 (PascalCase)。
- 数据请求库请使用 SWR，不要使用 axios。

示例：为 React 项目定制高级规则

首先在 project_rules.md 文件中定义一套覆盖核心原则、组件开发、数据请求、状态管理和代码风格的综合性规范

markdown
# React + TypeScript 项目开发规范

## 1. 核心原则
- **必须** 使用 TypeScript，并启用 `strict` 模式。
- **必须** 使用函数式组件 (Functional Components) 和 Hooks。
- **推荐** 使用 ESLint 和 Prettier 保持代码风格一致。

## 2. 组件开发
- 组件文件名和组件名**必须**遵循帕斯卡命名法 (PascalCase)，例如 `UserProfile.tsx`。
- Props **必须**使用 `interface` 定义其 TypeScript 类型，且接口名以 `I` 作为前缀，例如 `interface IUserProfileProps`。
- 样式**必须**使用 CSS Modules (`.module.css`)，以确保样式的局部作用域。
- 组件的文件结构**推荐**采用目录式组织：`components/UserProfile/index.tsx`, `components/UserProfile/UserProfile.module.css`。

## 3. 数据请求
- 客户端数据请求**必须**使用 `SWR` 库进行处理，以实现高效的缓存和状态管理。
- **必须**妥善处理数据请求过程中的 `loading` 和 `error` 状态，并向用户提供清晰的反馈。

## 4. 状态管理
- 全局状态管理**推荐**使用 `Zustand`。
- Store 的创建和使用需遵循 `Zustand` 的最佳实践。

## 5. 代码风格
- 导入顺序**推荐**遵循以下分组：React 相关 -> 外部库 -> 内部绝对路径 (`@/`) -> 相对路径 (`./`, `../`)。
- 所有非简单、非自明的功能函数**必须**包含 JSDoc 注释，解释其功能、参数和返回值。

Vibe Coding

Vibe Coding 就是不再需要逐行编写精确的代码，而是向 AI 描述想要实现的"氛围"或"感觉"。比如，"让这个页面看起来更有科技感" 或 "给我一个温馨舒适的登录界面"。AI 会理解你的模糊意图，并将其转化为具体的代码实现

这就像是你有一个想法，但可能无法准确地用技术语言描述出来。这时可以给 AI 一个大概的描述，让它来进行"氛围编程"。如果结果符合你的预期，就直接采用；如果不满意，可以基于生成的结果进行调整，AI 会一步步引导你更精确地表达自己的想法。在 AI 时代，这种试错的成本极低，如果不满意，可以随时撤销重来

随着 AI 技术的发展，涌现出许多支持 Vibe Coding 的工具，它们让开发者能够通过自然语言快速构建应用：

  • v0 by Vercel: 优秀的前端 UI 生成工具，可以根据文本和图片描述生成 React + Tailwind CSS + Shadcn UI 代码
  • Bolt / Replit / Lovable: 这些平台也提供了类似的功能，旨在通过 AI 辅助，加速从想法到产品的过程
  • Trae: Trae 同样非常适合进行 Vibe Coding。它深度集成在 IDE 中，可以利用 Trae 内置的预览功能，可以一边和 AI 对话，一边在左侧的预览窗口实时看到效果。这种"右边聊天，左边看效果"的模式，极大地提升了"氛围编程"的效率和沉浸感

实战演示

通过多个具体的案例来展示如何在 Trae 中实践 Vibe Coding。在项目根目录，创建 .trae/rules/project_rules.md 文件：

markdown
你现在是一个充满创造力的全栈开发专家和用户体验设计师。
你的核心任务是根据用户的需求描述，创建具有现代化设计风格、视觉精美、交互性强的应用程序。

技术要求：
- 优先使用纯 HTML、CSS 和 JavaScript 创建独立运行的文件
- 采用响应式设计，确保在不同设备上都能良好展示
- 注重用户体验，包含流畅的动画和直观的交互
- 代码结构清晰，便于理解和修改

设计原则：
- 界面简洁现代，色彩搭配和谐
- 交互反馈及时，操作流程顺畅
- 功能完整，满足用户核心需求
- 兼顾美观性和实用性

工作流程：
- 仔细分析用户需求，理解其真实意图
- 生成代码后，提供预览功能
- 对于复杂项目，可适当创建多个文件，但保持整体架构清晰

## HTML文件预览规则

当创建HTML文件后，为了提供更好的开发体验和热更新功能，应该：

1. **使用npx live-server启动本地服务器**
   - 命令：`npx --yes live-server --port=3000 --host=localhost --no-browser 文件名.html`
   - 优势：无需安装依赖，支持热更新，配合Trae编辑器内置预览功能，避免打开外部浏览器
   - 适用场景：所有HTML文件的预览和开发
   - 重要：使用`--no-browser`参数禁止自动打开浏览器，`--yes`参数避免用户交互，实现完全自动化

2. **最佳实践**
   - 优先使用live-server，提供实时热更新功能
   - 端口统一使用3000，保持一致性
   - 确保用户体验简单，减少配置步骤
   - 在vibe coding项目中，让用户专注于效果预览，无需关心环境配置

示例 1：物理教学工具 - 杠杆原理模拟器

markdown
我是一名中学物理老师，想制作一个交互式网页，用于讲解"杠杆原理"的基本概念与应用，目标包括：

1. 通过动态演示模拟杠杆系统在不同力矩条件下的平衡与失衡状态，展示杠杆转动或保持平衡的过程
2. 支持用户实时调节相关参数（如动力大小、阻力大小、两力到支点的距离等），并根据输入即时更新动画效果与数值变化
3. 页面布局为左右分栏：左侧为参数控制区与知识要点展示区，右侧为杠杆示意动画区域
4. 整体视觉风格简洁直观、具有一定的科普风格，适合初中学生理解与操作
5. 最终生成一个可独立运行的 HTML 文件，方便老师在课堂或脱网环境下展示使用

实例 2：数据可视化分析工具

下载关于学生心理健康的数据集：[Student Mental Health]

nginx
根据提供的文件 `Student-Health-Analysis.csv` 制作一个学生心理健康分析，最终的表现形式以 HTML 的方式打开查看，期望的效果是能够交互、页面设计美观，请发挥你最大的潜力来做！
不要直接嵌入 CSV 数据到 html 文件，这个数据比较大，应该动态发起请求。

这个 Vibe Coding 示例会复杂些，需要动态的获取数据。观察结果，然后给出新的指令来引导 AI 修复问题

案例三：专业文档制作 - PPT 演示文稿

markdown
请基于以下资料，创建一个专业且视觉精美的 HTML 格式 PPT 演示文稿，要求：

### 核心功能要求
1. **内容结构清晰**：包含 4-6 个核心章节
2. **关键信息突出**：每个章节提取 3 个关键要点，突出最具说服力的数据和案例
3. **现代设计元素**：采用渐变背景、卡片式布局、平滑过渡动画
4. **完整交互导航**：页码显示、上下页切换、进度条指示
5. **多种控制方式**：支持键盘方向键控制和全屏显示模式
6. **专业配色方案**：确保文字可读性和视觉冲击力
7. **响应式设计**：适配演示大屏和移动设备

### 特殊功能要求
8. **首页目录导航**：创建一个专业的首页，包含完整的章节目录，支持点击直接跳转到对应幻灯片
9. **视觉层次设计**：目录采用编号卡片布局，包含章节标题和简短描述
10. **交互反馈**：目录项具有悬停效果和平滑过渡动画

### 内容来源
基于以下资料中的内容：
https://www.anthropic.com/news/claude-4
https://www.anthropic.com/news/agent-capabilities-api

### 预期效果
- 专业的商务演示效果
- 流畅的页面切换动画
- 直观的导航和进度指示
- 优秀的视觉设计和用户体验

在处理结构化内容创作任务时，Vibe Coding 使得不再需要手动调整字体、配色和布局，而是将精力完全集中在定义需求和最终效果的"感觉" 上。这极大地提升内容创作的效率和质量，特别适合制作汇报、演讲分析等演示文稿

示例 四：休闲娱乐 - 连连看游戏

nginx
制作一个“连连看“网页小游戏，设计要求如下：
1. 经典连连看玩法：点击两个相同图案的方块，在规则允许的情况下将其连接消除
2. 页面整体风格清爽可爱，色彩明亮，适合各年龄段用户
3. 交互功能完普：
-鼠标点击选中，连线消除时显示动画效果
- 错误操作有视觉反馈（抖动或红框提示）
- 游戏倒计时功能（60秒），时间结束提示游戏结束
- 支持重开游戏，重新生成方块布局
4. 基础音效支持（消除成功音、倒计时提示音）
5.8x6 的图块网格，使用emoji 或精美图标
6. 响应式布局，手机和桌面都能正常游戏
7.流畅的动画和视觉反馈，提升游戏体验

案例五：文化教育 - 成语故事动画

markdown
做一个有趣的动画，展示"亡羊补牢"的故事，用于对小朋友进行教学，要求：

1. 分步骤展示故事情节，每个步骤有文字说明
2. 包含交互元素，小朋友可以点击推进故事进展
3. 动画生动有趣，人物和场景设计可爱
4. 色彩搭配温馨，适合儿童观看
5. 故事结束后显示成语的含义和寓意
6. 支持重播功能，方便重复学习
7. 简单易懂的操作界面，符合儿童使用习惯

迭代优化技巧

如果达不到一次成功的预期，可以通过以下方式进行"氛围"调整：

视觉优化：

  • "让这个页面看起来更有科技感"
  • "颜色太单调了，增加一些活泼的色彩"
  • "动画效果有点生硬，让过渡更加流畅"

交互改进：

  • "增加更多的用户反馈，让操作感更强"
  • "简化操作流程，让用户更容易上手"
  • "添加帮助提示，引导用户如何使用"

功能扩展：

  • "增加导出功能，让用户可以保存结果"
  • "添加分享按钮，方便用户传播"
  • "支持自定义参数，让用户有更多控制权"

优势与注意事项

优势：

  1. 降低门槛： 无需深厚的编程功底，只要能用自然语言描述想法，就能创造出应用，极大地释放了非技术人员的创造力。
  2. 极速原型： 对于初创公司、设计师或产品经理，Vibe Coding 是验证想法、制作高保真原型的绝佳方式，速度远超传统开发。
  3. 激发灵感： 有时候 AI 生成的"意外之喜"可能会给你带来新的灵感，让你的产品朝着意想不到的方向发展。

注意事项：

  1. 代码可维护性： AI 生成的代码可能并不总是最优的，尤其是在代码结构和可维护性方面。以上使用的 HTML、CSS、JavaScript 这种形式产生的代码是不适合人工去做二次修改维护的。对于需要长期演进的严肃项目，仍需要人类开发者进行审查和重构，至少在技术选型上要考虑可维护性
  2. 大型项目与团队协作： Vibe Coding 目前更适合一次性的、小型的或个人项目。在大型项目中，如何保证代码风格统一、如何进行版本控制和团队协作，都是需要解决的挑战
  3. "幻觉"问题： AI 可能会"误解"你的意图，或者生成看似正确但实际有问题的代码。因此，开发者仍然需要具备基本的判断和调试能力

Vibe Coding 是一种令人兴奋的全新编程范式，它将开发的重点从"如何实现"转向了"想要什么"。这种方式极大地降低了技术门槛，加速了从想法到原型的过程，让每个人都有机会成为创造者。当然，Vibe Coding 目前更适合快速原型和小项目，对于大型、需要长期维护的项目，仍需关注其代码质量和可维护性。

如果未来 Trae 再集成一键部署到远端的功能，这才是 Vibe Coding 的终极形态，真正实现从想法到上线的一站式闭环

SOLO 模式登场

Trae SOLO 模式让 AI 成为开发的主导者，将编辑器、终端、文档、浏览器等工具全部整合到 AI 的工作流中。SOLO 就像一位“上下文工程师”（Context Engineer），它能够理解复杂的任务，进行规划、执行和交付

只需向 SOLO 提出需求，它就能独立完成从需求分析、产品设计、UI 构建、状态管理、API 对接到最终部署的全过程。 这不仅能帮助开发者克服学习新框架的挑战，还能让产品经理快速将想法变为可交互的原型，而无需等待开发周期

实战演示

创建名为“绘本岛”的亲子阅读网站

第一步：提出需求

一切始于一个清晰、具体的需求。向 SOLO Builder 提供以下提示词，详细描述了网站的品牌、功能、流程和视觉风格。一个高质量的提示词是 AI 理解并出色完成任务的关键。

markdown
我想打造一个面向中国亲子家庭的“绘本阅读 + 亲子活动”平台网站，整体风格参考小红书与宝宝巴士，设计要温馨、清新、富有童趣，适配移动端浏览。

## 🌟 品牌名称与 Logo 文案设计

- **品牌名称**：绘本岛（HuibenDAO）
- **Logo 构思文案**：
  Logo 主体以“绘本岛”三个字为核心视觉元素，结合一本打开的绘本变成一座小岛的形状，岛上长出一棵树，寓意“阅读育人、成长扎根”。整体采用手绘风格，色调柔和亲切，适合亲子主题。

## 🎯 产品 Slogan（宣传语）

- “绘本岛——让亲子时光，更温暖一点”
- “每天十分钟，绘出成长的奇妙旅程”
- “不止是绘本，更是你和孩子的故事岛屿”

## 📱 网站核心结构与页面

### 首页
- 展示热门绘本、新上架内容、亲子活动推荐、大图轮播区域以及节日专题（如“六一儿童节精选”）
- 顶部设有搜索栏，底部为导航栏（绘本馆 / 活动 / 阅读记录 / 我的）

### 注册登录页
- 支持家长手机号、微信、一键登录注册
- 可设置孩子信息（姓名、年龄、兴趣）

### 绘本馆页面
- 分类展示海量绘本
- 支持按照年龄段、主题（如“友情”“自然”“情绪管理”）筛选
- 支持评分排序与关键词搜索

### 绘本详情页
- 展示绘本封面、简介、页内插画预览、适读年龄
- 显示家长评论与推荐语
- 支持加入收藏、开始阅读等操作

### 亲子活动页
- 发布线下亲子活动（如绘本故事会、亲子手工课、周末亲子营）
- 可查看活动详情、报名状态
- 活动按地区筛选，可收藏、分享或预约提醒

### 阅读记录页
- 展示已阅读绘本、收藏记录和孩子的成长阅读足迹
- 可打卡、写读后感或上传照片

### 用户中心
- 管理孩子档案（支持多个子女切换）
- 查看活动订单、地址管理
- 联系客服（支持微信客服与邮件）

## 🛒 购物流程

- 支持购买实体绘本或活动课程包
- 流程包括：加入购物车 → 下单结算 → 支付（微信、支付宝、银行卡）
- 填写收货地址后可查看物流状态与历史订单

## 🎨 视觉风格

- 主色调：米白、淡黄、天蓝
- 插画风格柔和亲子感
- 页面排版清晰，图文比例适中
- 交互动效细腻自然
- icon 风格统一，不使用 emoji

第二步：AI 生成产品方案

收到需求后，SOLO 并没有马上开始写代码，而是首先进行需求分析和规划，生成了一份非常详细的产品需求文档（PRD）。这份文档不仅包含了核心功能规划、设计规范，甚至还有购物流程图，非常专业

这种“先规划，后执行”的模式，确保了 AI 的工作方向与我们的预期完全一致，避免了后续大量的修改和返工

第三步：一键启动，全程监控

在确认产品文档无误后，点击了聊天窗口中的“确认，开始开发！”按钮，SOLO 便正式开启了它的“表演”

第四步：自主修复与实时预览

整个开发过程是全自动的。可以看到右侧的终端窗口中，SOLO 正在自主执行各种命令，比如创建项目、安装依赖等。当代码编写完成后，它甚至会自己运行 npm run check 等命令进行检测。如果发现错误，它会尝试自主修复，整个过程完全无需干预，静静看着它表演就好

在自检一切正常后，SOLO 会自动启动开发服务器。此时只需切换到浏览器面板，就能立即看到应用的预览效果。这里切换到了手机样式来查看，可以看到，一个漂亮的“绘本岛”网站雏形已经诞生了。排版和设计都相当不错，虽然一些细节功能（比如点击事件）可能还不完善。但可以在此基础上反复进行调试和迭代

第五步：二次修改与“选择元素”

不再需要用复杂的语言去描述要修改页面的哪个位置。直接点击右上角的“选择元素”按钮，在预览页面上选中你想修改的部分，它就会被自动添加到 AI 聊天框中。然后再告诉 AI 你想做什么修改即可

第六步：一键部署，轻松上线

当网站开发和调试完成后，最后一步自然是上线部署。点击“部署”按钮后，Trae 会引导授权 Vercel 账户。授权成功后，SOLO 会接管后续所有的部署工作。可以在界面上清晰地看到部署状态、公开访问地址等信息

部署完成后，就可以通过生成的公开链接，在任何浏览器中访问我们的“绘本岛”网站了，也可以随时分享给朋友们体验

https://trae3mq6vvax.vercel.app/

搭建知识库

一个现代 AI 知识库该有的 RAG 功能，这些 AI 编程工具基本上都已具备。但不同工具在实现上还有细微差别，例如 Trae 和 Cursor 通过 Codebase 索引，而 Claude Code 结合传统的 Grep 搜索，各有千秋。

通过修改这些 AI 助手的规则配置文件，配置知识库该有的规则和工具，就能轻松地将它们调教成符合我们个人需求的、高度智能化的知识库

知识库概念

知识库是一个用于存储、组织和检索信息的系统。传统的笔记软件，如 Evernote、Notion，都是知识库的形态。但是随着知识库内容的增长，很快会遇到一个瓶颈：检索困难。关键词搜索常常不够精准，而复杂的标签和分类系统又带来了极高的维护成本

AI 知识库的核心能力在于它不仅仅是存储信息，更是理解信息。它具备以下几个关键能力：

  • 语义理解：能理解自然语言提出的模糊问题，而不是仅仅匹配关键词。
  • 智能检索：能跨文件、跨主题地找到关联信息，并进行总结和提炼。
  • 内容生成：能根据已有的知识，帮助你整理、修改甚至创作新的内容。

AI 知识库不仅只能查询已经存在于本地的知识。这得益于一种名为 RAG（Retrieval-Augmented Generation，检索增强生成） 的技术。RAG 允许 AI 模型在回答问题时，除了利用自身训练数据外，还能主动从外部知识源（如互联网、指定数据库）中检索最新信息，并将其整合到回答中

Trae 构建个人知识库

清晰的目录结构是构建知识库的第一步。对于 AI 知识库而言，建议采用这种扁平化的目录结构，将精力更多地放在内容本身，而不是复杂的层级。这样的结构既符合人类的阅读习惯，也便于 AI 理解不同内容板块之间的关系

  • 打开 Trae 的 MCP 配置界面，安装和启用 Tavily、Sequential Thinking

  • 在项目根目录创建规则文件，可以为 AI 助手设定一套专属的工作指令，让它更懂你、更好地为你服务

项目根目录下创建 .trae/rules/project_rules.md 文件，并将下面的规则内容填入：

markdown
# 个人知识库助手规则

## 角色定位
你是一个专业的技术文档知识库助手，专注于从本地文档和在线资源中提供准确、完整的技术信息。

## 核心原则

### 1. 语言要求
- 总是使用中文回答用户问题
- 保持专业、清晰、易懂的表达方式
- 技术术语可保留英文原文，但需提供中文解释

### 2. 信息检索流程
执行以下严格的检索顺序：

#### 第一步：本地文档检索
- 首先在本地项目文档中检索相关信息
- 重点检索 `docs/` 目录下的 Markdown 文件

#### 第二步：联网补充搜索
- 不论什么问题必须使用 Tavily 工具进行联网搜索获取实时内容，进行信息补全
- 搜索时使用精准的关键词，必要时进行多次搜索
- 优先选择官方文档、技术博客等权威来源

#### 第三步：信息整合
- 将本地文档和在线资源的信息进行整合
- 确保信息的准确性和时效性
- 去除重复和冲突的内容

### 3. 引用标注规范
在回答中必须明确标注信息来源：

**本地文档引用格式：**
\`\`\`
📚 本地参考：
- 文件：[chapter1/3-agent.md（第 12-25 行）](本地文件地址)
\`\`\`

**在线资源引用格式：**
\`\`\`
🌐 在线参考：
- [标题](URL) - 来源网站名称
- [标题](URL) - 来源网站名称
\`\`\`

### 4. 复杂问题处理
当遇到以下情况时，使用 `Sequential Thinking` 工具：
- 问题涉及多个知识点需要综合分析
- 需要对比不同技术方案的优劣
- 问题需要分步骤解答才能清晰表达
- 涉及复杂的技术原理或实现逻辑

使用步骤：
1. 分析问题的复杂度
2. 拆解为多个子问题
3. 逐步检索和分析每个子问题
4. 整合所有信息形成完整答案

## 回答结构模板

### 标准回答格式：
\`\`\`
## [问题主题]

[简要总结答案]

### 详细说明
[展开详细内容，分点说明]

### 参考资料

📚 本地参考：
- [列出本地文档来源]

🌐 在线参考：
- [列出在线资源来源]

### 相关建议
[如适用，提供额外的建议或最佳实践]
\`\`\`

## 特殊场景处理

### 找不到相关信息时
1. 明确告知用户本地文档中未找到相关内容
2. 尝试使用不同关键词进行联网搜索
3. 如果仍无法找到，诚实告知并建议用户提供更多上下文

### 信息冲突时
1. 标注不同来源的差异
2. 说明可能的原因（版本差异、使用场景不同等）
3. 提供建议的处理方案

在对话时选择支持 MCP Server 的智能体，例如 Builder with MCP 这个有调用 MCP 工具的能力，模型则可以根据自己的需求灵活选择

我们来看一个实际的运行过程。当我提问“什么是 MCP？”时，AI 助手的执行流程完美地体现了我们规则的设定：

  1. 检索本地文档：它严格按照规则，首先在工作区中搜索与“MCP”相关的本地文档
  2. 联网搜索：接着，它调用 Tavily 工具进行联网搜索，以获取更全面和最新的信息
  3. 整合并引用：最后，它将本地和在线的信息进行整合，并按照我们定义的格式，清晰地列出了参考资料来源

Cursor 构建个人知识库

Cursor 的配置和使用流程与 Trae 非常相似，同样可以轻松地打造成强大的个人知识库

  • 在项目根目录的 .cursor/mcp.json 文件中配置 Tavily、Sequential Thinking

  • 配置项目规则。Cursor 的项目规则文件后缀是 .mdc，它可以很好地兼容 Markdown 格式

在项目根目录创建 .cursor/rules/rag.mdc 文件，规则内容同 trae

配置完成后就可以开始在 Cursor 中进行智能查询