“智研达人”系列分享活动：AI 编程工具 Trae入 门教程

这是由中科大图书馆主办的“智研达人” AI 工具分享活动，我分享的主题是 AI 编程工具 Trae 入门教程，这个博客是我分享内容的详细大纲与讲义。Trae 是由字节跳动团队研发的一款类似于 VSCode 的编译器，覆盖从编码、调试到测试、重构、部署等多类开发任务，其深度融合 AI 能力，是一名个能够理解需求、调用工具并独立完成各类开发任务的 AI 开发工具。

1 引言

1.1 我的科研工作流

大语言模型已经成为了科研工作中不可或缺的工具，它可以帮助我们快速完成各种任务，如阅读文献、代码编写、论文润色等。通过大语言模型，我们可以更高效地完成科研工作，显著提高工作效率。

1.2 当前AI辅助科研的痛点

• 大语言模型与科研工具彼此独立。
• 大语言模型难以共享科研知识库。

1.3 AI编程工具Trae

三大核心功能：

• Tab-Cue
• 智能体聊天模式
• Editor内AI编码

2 Tab-Cue

说明：Tab-Cue是其核心交互功能，通过AI驱动的智能补全和上下文感知能力显著提升编码效率。

• 代码补全
• 智能代码重写
• 变量与字段联想
• 光标位置预测
• 接受、接受部分和拒绝
• 配置

2.1 代码补全与重写

public class Array Sort{
	// 编写一个方法，可以接受数组，并排序，排序方法使用冒泡排序
	//             智能代码重写 -> 从大到小排列
	
	// 编写一个方法，可以接收数组，并打印数组
	
	// 编写一个main方法，测试sort方法
}

2.2 变量与字段联想

当编写成员变量（字段）时，会进行自动联想和补全

另外，也支持多行批量修改

2.3 光标位置预测

2.4 接受，接受部分和拒绝

• tab 接受补全
• Ctrl + ➡️ 接受部分补全（逐词接受）
• Esc / 继续输入 表示拒绝补全

public class Calculator {
    /*
    * 这是一个加法方法，用于计算两个整数的和
    */
    public int add(int a, int b) {
        return a + b;
    }
    /*
    * 这是一个减法方法
    */
    public int subtract(int a, int b) {
        return a - b;
    }
}

2.5 配置

直接在代码中输入指令，无需切换到聊天窗口

3 智能体聊天模式

3.1 内置智能体

Trae 提供 IDE 模式和 SOLO 模式两种开发模式，分别侧重人机协作与 AI 自主开发，以下是核心区别：

IDE模式

• 特点：保留传统开发流程，支持智能问答、代码补全等辅助功能，用户对开发过程有更强的掌控感。
• 适用场景：适合需要惊喜控制代码或逐步验证逻辑的开发者

SOLO模式

• 特点：AI 主导全流程（需求理解、编码、测试、部署），通过自然语言输入即可自主完成开发任务，自动化程度高。
• 分类：
  • SOLO Builder：聚焦快速原型开发，通过自然语言描述快速生成完整Web应用（含前后端），适合从零到一的场景
  • SOLO Coder：面向专业开发者，处理复杂项目迭代、代码重构、Bug修复等工程化任务，支持多任务并行和智能体协同，提供“Plan”模式辅助开发规划

选择建议

1. 若需要保留开发自主性，选择 IDE 模式；
2. 若追求效率或处理标准化任务，SOLO 模式更高效。

应用案例1：大众点评

通过 SOLO Builder 开发一个类似大众点评的网站应用。详细过程如下：

1. 创建一个文件夹，使用 SOLO Builder 智能体进行 AI 编程
2. 集成 Supabase 服务，用于用户认证和数据存储
3. 创建 Supabase 项目，并连接至当前 Trae 项目

提示词：

我想开发一个简化版的大众点评网站的应用，需要首先以下核心功能模块：

1. 用户系统

• 用户注册/登陆功能（支持手机号+验证码或邮箱+密码方式）
• 个人资料管理（头像、昵称、联系方式等基本信息）
• 用户权限管理（普通用户/商家用户）

2. 商家模块

• 商家信息展示（名称、地址、联系方式、营业时间）
• 商家分类检索（餐饮、娱乐、购物等分类）
• 地理位置展示（集成地图 API 显示商家位置）

3. 评价系统

• 用户评价功能（星级评分+文字评价）
• 评价展示（按照时间排序，支持分页）
• 商家回复功能

4. 基础搜索功能

• 按照商家名称/位置/地理位置搜索
• 简单筛选功能（按评分、距离等）

5. 技术实现要求

• 可运行的完整系统模型
• 基础功能测试报告
• 简单的使用说明文档
• 源代码和部署指南

应用案例2：网页游戏贪吃蛇

Plan 模式： 为完成任务制定详细的计划，先和用户沟通制定计划，确认后再执行

提示词：

你现在是一名资深的网页游戏开发工程师，请帮我使用原生 HTML+CSS+JavaScript 编写一个可以直接在浏览器中运行的网页版贪吃蛇游戏，要求如下

1. 功能要求

• 要求有积分统计
• 页面要有多种背景可以切换
• 代码添加中文注释

2. 技术要求

• 不适用任何框架或库（如 React、Vue、jQuery 等）
• 所有代码写在同一个 HTML 文件中
• 有详细注释，逻辑清晰

3. 输出格式要求

• 一次性输出完整的HTML代码，并直接保存为“snakeGame01.html”文件到当前文件夹下
• 代码可以直接运行，无需任何依赖
• 包含<\style>和<\script>标签

3.2 自定义智能体

创建说明： 我们在Trae中创建自定义智能体可以帮助我们高效处理各种任务。

创建提示词：

1. 信息速览专家：自动搜索、整理信息并生成总结文档和可视化网页，适合快速了解新概念或行业报告
2. 可视化讲师：将复杂概念转化为直观的可视化网页，通过图文并茂的方式帮你深入理解
3. MCP 自动化助手：结合多种 MCP 工具，帮你完成文件操作、网页搜索、截图等重复性工作
4. Java 技术专家：你是一名 Java 开发专家，非常擅长 Java 的各种框架，算法和性能优化
5. 前端架构师：前端开发高级工程师，非常牛的那种，级别可以达到阿里 P8

应用案例1：可视化算法

使用智能体：

使用可视化讲师智能体：用网页动画的形式，讲解一下冒泡排序

应用案例2：数据收集

使用智能体（润色前）：

帮我收集美国主流大学的工业工程/运筹学 PhD 项目的申请信息并汇总到 Excel 表格中，列名包括学校、学院、申请链接、截止日期、材料要求等信息

使用智能体（润色后）：

开发一个完整的数据收集与管理系统，用于收集美国主流大学的工业工程/运筹学PhD项目申请信息。系统需要包含以下核心功能：

1. 数据收集模块：系统性地收集美国排名前50大学的工业工程(Industrial Engineering)和运筹学(Operations Research)PhD项目的详细信息，包括但不限于：学校名称、所属学院、项目官方申请链接、申请截止日期（区分春季和秋季入学）、所需申请材料清单（GRE成绩、TOEFL/IELTS要求、推荐信数量、个人陈述、简历等）、项目时长、奖学金信息、导师联系方式、研究方向等关键信息。

2. Excel数据管理：将收集到的所有信息按照标准化格式整理到Excel表格中，确保列名统一为：学校名称(School)、学院名称(College/School)、申请链接(Application Link)、申请截止日期(Application Deadline)、材料要求(Document Requirements)、GRE要求、语言成绩要求、推荐信要求、个人陈述要求、简历要求、项目时长、奖学金信息、备注等。每个字段都需要有清晰的格式规范和数据验证规则。

3. 网页可视化界面：开发一个响应式网页应用，实现 Excel 数据的动态展示和交互功能。界面需要包含数据表格视图、搜索筛选功能（按学校名称、截止日期、GRE要求等条件筛选）、排序功能、分页显示。同时提供数据编辑功能，允许用户在网页上直接添加新学校信息、修改现有数据、删除过时信息，所有更改需要实时同步到后端数据库。

4. 数据持久化与同步：实现 Excel 文件与网页数据库的双向同步机制，确保用户在网页上的任何修改都能自动更新到 Excel 文件中，同时支持 Excel 文件导入功能，保持数据的一致性和完整性。

5. 用户权限管理：为不同用户设置相应的权限级别，普通用户可以查看和补充信息，管理员用户可以审核和修改所有数据，确保数据质量和安全性。

6. 数据验证与质量控制：建立严格的数据验证机制，包括URL格式验证、日期格式统一、必填字段检查、重复数据检测等功能，确保收集到的信息准确可靠。

7. 导出与备份功能：提供多种格式的数据导出选项（Excel、CSV、PDF），并实现定期自动备份机制，防止数据丢失。

系统需要支持多语言界面（中英文切换），提供详细的使用文档和操作指南，确保用户能够高效地完成数据收集、管理和维护工作。

常用配置：

• Auto Mode：基于效果与速度帮助选择最优模型
• Max Mode：适用于复杂任务，支持长上下文，适合对质量要求高、能接受额外成本的用户
• 制定模型：对相关模型进行勾选即可
• 添加自定义模型：除了内置模型外，可以额外添加模型（服务商、模型、API密钥）

注意事项

• 代码生成、修改等需要注意的地方

  • 完整的保留或拒绝：Ctrl+Enter 接受 Ctrl+Backspace 拒绝
  • 某处内容保留或拒绝：Alt+N 前进 Alt+Y 后退

  

• 回退：Trae在发出每次请求时，可以回退到本轮对话发起前的状态，⚠️ 回退后，回退点后面的数据状态不再保留

  

4 编辑器内AI编码

使用‘Ctrl+I’启用 Editor 内 AI 编码，直接在编辑器窗口中生成新代码或编辑现有代码，适合精准修改代码/内容，也支持选中一段代码进行修改、以及增加新的功能（选中整个代码）。

一个简单的案例：风扇

提示词：

创建一个页面，该页面有一个小风扇，创建两个按钮，分别控制开风扇和关风扇，使用html+css+javascript实现。

5 其他的一些设置

5.1 Trae上下文

在Trae里，“上下文（context）”是指AI工具在回答问题或辅助编程时所能“看到”和“理解”的信息范围，有助于Trae能精准响应。

代码索引管理

对工作区中的代码进行全局索引构建，发起#workspace问答时将自动全局前所遇问题相关的跨文件上下文，给出与项目更相关的回复

忽略文件

功能：通过将’.ignore’文件添加到根目录来控制哪些文件/文件夹被忽略。

作用：提升索引速度，排除依赖目录（如：node_modules/、vendor/）、构建输出目录（如：build/、out/）、大型媒体和数据文件（如：*.mp4、*.mov、*.avi），从而避免某些与当前任务无关的文件造成干扰

文档集

通过URL、本地上传的方式添加常用的文档集作为上下文与AI问答

#符号与引用

• #File 引用文件
• #Folder 引用文件夹
• #Code 将函数或类的相关代码作为AI助手对话的上下文
• #Doc 指定文档集
• #Workspace 引用工作区
• #Web 联网搜索
• #Problems 分析报错并提供解决方案

提示词：

1. #workspace 有哪些文件？
2. #workspace 哪些文件被忽略了？
3. 根据 #Doc:Gurobi，告诉我如何求解二次规划？

5.2 Rules规则

Rules 是给 Trae AI 功能生成结果添加规则和限制，让 Trae 生成的代码贴合团队规范，主要的作用如下：

• 约束代码风格（如强制用驼峰命名、要求方法写注释等）
• 能限定技术选型（如指定优先使用某技术/框架/库，禁止使用某组建/框架/库）
• 提前指定配置参数（如提前设置连接数据库方式、账号密码等）

⚠️ 注意事项：若项目规则与用户规则冲突，则项目规则的优先级更高

	项目规则（Project Rules）	用户规则（User Rules）
作用范围	仅对当前项目生效，团队成员共享相同规则	对所有项目生效，个人专属配置
适用场景	同意团队编码规范（如技术栈、依赖版本）	个人习惯（如通用偏好和工作风格）

6 使用案例

案例1：网页小程序

提示词：

你现在是已经资深网页前端开发工程师，请帮我使用原生 HTML + CSS + JavaScript 编写一个可直接在浏览器中打开使用的【在线投票程序】，要求如下：

1. 功能：

• 创建投票：输入投票标题，至少含2个选项；支持添加/删除选项
• 开始投票：显示选项列表，点击为某一选项投票，实时更新票数与百分比
• 防重复投票：同一设备对同一投票仅能投一次（使用 localStorage 记录）
• 结果展示：显示每个选项票数和百分比，提供简单进度条或条形图效果
• 数据持久化：投票标题、选项、票数、是否已投状态均使用 localStorage 保存，刷新后保留
• 重置：提供“重置投票”按钮，清空数据并重新创建新的投票

2. 界面与技术：

• 风格简洁淡雅（浅灰/浅蓝），居中卡片布局，按钮圆角阴影
• 使用 CSS Flex 或 Grid 布局；当前日期不需要显示
• 不使用任何框架或库； 全部代码在同一个 HTML 文件中
• 使用原生 JavaScript 操作 DOM， 逻辑清晰， 适量注释

3. 输出格式：

• 直接保存为 “vote.html” 文件，并在浏览器中打开即可使用
• 代码可直接运行，无需任何依赖

案例2：数据分析可视化

1. 配置 mcp-server-chart：一个通过 AntV 生成图表模型上下文协议（Model Context Protocal）服务器。我们可以使用这个MCP服务器来进行图表生成和数据分析。其中，MCP 是让 AI 助手能调用外部工具和数据的协议，从而使得Trae能做更多的事情。
2. 提示词：帮我制作词云图，使用不同的颜色，词的大小根据数值区分，做到漂亮好看

案例3：文档可视化

提示词：

请参考积极推动物价合理回升，生成可视化的报告网页。

1. 内容要求

• 讲文档生成一个页面
• 所有页面内容必须为简体中文
• 保持原文件的核心信息，但以更易读、可视化的方式呈现

2. 设计风格

• 整体风格参照 Linear App 的简约现代设计
• 使用清晰的视觉层次结构，突出重要内容
• 配色方案应专业、和谐，适合长时间阅读

3. 技术规范

• 使用 HTML5、TailwindCS3 3.0+（通过CDN引入）和必要的 JavaScript
• 实现完整的深色/浅色模式切换功能，默认跟随系统设置
• 代码结构清晰，包含适当注释，便于理解和维护

7 结语

以上内容的主要参考资料为韩顺平老师发布在 B 站中的 Trae 保姆级教程｜AI 编程工具完整入门，实战项目手把手教学，参考案例更多聚焦于前端这一领域。

我想，AI 和 LLM 的发展其实更多为非计算机专业的同学实现自身的需求提供可能，它很大程度上降低了编程的门槛，辅助我们完成自己需要的内容。因此，在我看来，想象力才是如今时代最稀缺、也是最重要的资源。