第三节：Trae的基本使用 和 Skill的详细用法
一. Trae介绍
1. 简介
Trae（发音 “垂”）是字节跳动自研、永久免费的 AI IDE，基于 VS Code 内核改造，国内直连、无需FQ、不用自己配置 API Key。
平台：Windows /macOS 客户端 + 网页版
核心：AI 辅助编码 + 全自动开发智能体 + 可定制 Skill 工作流
定位：对标 Cursor，但中文更强、网络更快、完全免费
2. 两大核心模式：IDE（普通）模式 vs SOLO 模式
(1）IDE 模式（普通模式）—— 你主导，AI 辅助
- 像传统 VS Code，你写代码、AI 帮忙补全、查 Bug、解释逻辑。
- 适合：日常开发、改 Bug、写业务逻辑、需要精细控制的场景。
- 特点：每一步都由你决策，AI 不擅自改动整个项目。
(2）SOLO 模式 ——AI 主导，全流程自动
- AI 是 “独立开发者”，你只需要一句话需求，AI 自动完成：拆解需求 → 设计架构 → 建目录 → 写代码 → 调接口 → 生成文档 → 自测。
- 适合：新项目、复杂系统、原型快速交付、不想写重复代码。
- 特点：AI 自主决策、自动执行、全程无需你逐行确认。
(3）核心区别（一句话）
- IDE 模式：你开车，AI 副驾帮忙看路、提醒违章。
- SOLO 模式：你说目的地，AI 全程自动驾驶到终点。
(4）只有 SOLO 能做、普通模式做不了的真实例子
需求：
“帮我做一个完整的后台管理系统，包含：登录页、权限路由、用户管理、角色管理、菜单管理、分页、搜索、新增编辑弹窗，技术栈用 React + Ant Design + TypeScript，目录结构规范，自动生成 README 和接口注释。”
A 在 IDE（普通）模式下：
AI 只能一页一页、一个组件一个组件生成，你需要不断发指令、确认、新建文件、复制代码，无法一次性生成完整项目结构和全链路代码。
B 在 SOLO 模式下：
你只需要把上面需求一次性发给 AI，它会：
自动创建整个项目目录
生成所有页面、组件、路由、类型定义
自动安装依赖、修复报错
输出可直接运行的完整项目
全程无需你手动建文件、写配置、拼接代码。
这就是 SOLO 和普通模式最本质的差距：普通模式是 “补代码”，SOLO 是 “造项目”。
3. 模型配置
(1) 自带模型
手动选择官方的模型，或者 Auto Mode自动选择，注意：Auto 模式，不会使用自己配置的模型。
另外现在已经开启收费模式，免费状态下会排队，额度也是有限的。
(2) 手动配置自己的模型
二. 基本用法
1. Chat 对话（Ctrl+U / Cmd+U）
- 选中代码 → 提问：解释、优化、查 Bug、重构。
- 直接输入中文：生成函数、组件、测试用例、注释。
2. # 文件引用（提升准确率关键）
#文件名.js，把整个文件拉入上下文：- 示例：
#user.ts 帮我优化这个接口的异常处理 - 作用：防止 AI 乱改无关代码，上下文更准、输出更稳。
3. SOLO 全自动开发（重点）
- 支持中途暂停、修改需求、人工干预。
- 适合：全栈项目、后台系统、小程序、官网。
4. 跨文件智能补全
5. Figma 转代码
三. Skill用法
1. 什么是Skill？
Skill = 可复用的 AI 工作流模板
你可以把它理解为：给 AI 装一个 “专业插件”，让它按固定规范、固定流程做事。
普通 AI 每次都要重复写提示词；Skill 把团队规范、最佳实践、重复流程固化下来，一次安装、永久使用、自动触发。
2. Skill 的结构
frontend-design/
└── SKILL.md # 触发条件 + 执行步骤 + 输出规范（必须）3. Skill 典型应用场景
** 前端设计：**frontend-design → 统一高级 UI 风格
** 代码审查：** 安全 / 性能 / 规范检查 → 团队统一标准
** 后端模板：**Controller/Service/Entity 自动生成
** 团队规范：** 命名、注释、目录结构强制执行
** 自动化流程：** 上线前检查、日志规范、接口文档生成
4. Skill哪里找？
方式一：AI 自动生成（零基础首选）
帮我生成一个代码审查Skill，要求检查三点：
1. 安全漏洞：SQL注入、XSS、危险函数调用
2. 性能问题：循环嵌套、重复请求、冗余代码
3. 编码规范：变量命名、函数注释、代码缩进
输出格式要求：问题等级+问题描述+修复建议SKILL.md，直接启用即可使用。方式二：导入社区 / 现成 Skill
适合直接使用他人成熟模板：
常用的下载地址：
https://www.modelscope.cn/skills
https://github.com/anthropics/skills/tree/main/skills
获取外部 Skill 文件夹（社区分享、团队公用模板）；
(1) 打开 Trae 设置 → 规则和技能 → 技能；
(2) 选择「导入」，加载完整 Skill 目录；
(3) 开关控制启用 / 关闭，多个 Skill 可同时共存，AI 自动匹配场景。
注：可以针对全局导入，也可以针对某个项目导入
方式三：手动编写 SKILL.md（高阶自定义）
SKILL.md 固定三段式结构：触发条件 + 执行步骤 + 输出格式。## 触发条件
用户输入：代码审查、安全检查、代码质检 时，自动启用本技能。
## 执行步骤
1. 读取用户提供的代码或文件；
2. 逐项检查安全风险、性能问题、编码规范；
3. 分类汇总所有问题，不遗漏边界场景；
4. 针对每一条问题给出可落地修复方案。
## 输出格式
【风险等级】高/中/低
【问题描述】具体代码问题
【修复建议】修改方案与示例代码
三. Skill用法
以 frontend-design 为例
1 安装启用后，不需要复杂配置，直接在聊天里告诉 AI：使用 frontend-design 技能。
示例对话（直接复制即可用）
你输入：
使用 frontend-design 技能，创建一个现代化的登录页面，要求：
1. 极简高级风格，不要俗气渐变色
2. 包含账号、密码、记住我、登录按钮
3. 适配移动端
4. 用 React + Tailwind 实现A. 识别并启用 frontend-design 技能
B. 按照技能预设的工业级设计规范生成代码
C. 输出结构清晰、配色高级、交互现代的登录页
2. 效果对比（为什么要用 Skill）
** 不用 Skill：**AI 生成的页面往往 “网红风、渐变多、不统一、粗糙”。
用 frontend-design：AI 输出极简、高级、一致性强、生产可用的界面，避免 “AI 审美” 通病。
3. 其他常用调用方式
- 重构页面：
使用 frontend-design 技能，重构 #index.html，提升设计质感 - 生成组件：
使用 frontend-design 技能，生成一个卡片组件，带 hover 动画 - 优化样式：
使用 frontend-design 技能，优化这个页面的配色和间距
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
浙公网安备 33010602011771号