一. Trae介绍
1. 简介
Trae（发音 “垂”）是字节跳动自研、永久免费的 AI IDE，基于 VS Code 内核改造，国内直连、无需FQ、不用自己配置 API Key。
平台：Windows /macOS 客户端 + 网页版
核心：AI 辅助编码 + 全自动开发智能体 + 可定制 Skill 工作流
定位：对标 Cursor，但中文更强、网络更快、完全免费
Trae 最关键的设计是双模式自由切换，两种模式能力差距非常大。
需求：
“帮我做一个完整的后台管理系统，包含：登录页、权限路由、用户管理、角色管理、菜单管理、分页、搜索、新增编辑弹窗，技术栈用 React + Ant Design + TypeScript，目录结构规范，自动生成 README 和接口注释。”
A 在 IDE（普通）模式下：
AI 只能一页一页、一个组件一个组件生成，你需要不断发指令、确认、新建文件、复制代码，无法一次性生成完整项目结构和全链路代码。
B 在 SOLO 模式下：
你只需要把上面需求一次性发给 AI，它会：
自动创建整个项目目录
生成所有页面、组件、路由、类型定义
自动安装依赖、修复报错
输出可直接运行的完整项目
全程无需你手动建文件、写配置、拼接代码。
这就是 SOLO 和普通模式最本质的差距：普通模式是 “补代码”，SOLO 是 “造项目”。
3. 模型配置
(1) 自带模型
手动选择官方的模型，或者 Auto Mode自动选择，注意：Auto 模式，不会使用自己配置的模型。
另外现在已经开启收费模式，免费状态下会排队，额度也是有限的。
(2) 手动配置自己的模型
二. 基本用法
# 文件引用（提升准确率关键） 在聊天框输入 #文件名.js，把整个文件拉入上下文：
#user.ts 帮我优化这个接口的异常处理
感知整个项目的变量、函数、组件依赖，大型项目写代码如丝般顺滑。
粘贴 Figma 链接 → 自动生成 React/Vue 页面，切图效率提升 10 倍。
三. Skill用法
1. 什么是Skill？
Skill = 可复用的 AI 工作流模板
你可以把它理解为：给 AI 装一个 “专业插件”，让它按固定规范、固定流程做事。
普通 AI 每次都要重复写提示词；Skill 把团队规范、最佳实践、重复流程固化下来，一次安装、永久使用、自动触发。
一个 Skill 就是一个文件夹，核心只有一个文件：
frontend-design/
└── SKILL.md # 触发条件 + 执行步骤 + 输出规范（必须）SKILL.md 写清楚：什么时候用、做什么、输出格式。
** 前端设计：**frontend-design → 统一高级 UI 风格
** 代码审查：** 安全 / 性能 / 规范检查 → 团队统一标准
** 后端模板：**Controller/Service/Entity 自动生成
** 团队规范：** 命名、注释、目录结构强制执行
** 自动化流程：** 上线前检查、日志规范、接口文档生成
4. Skill哪里找？
无需手动编写配置，直接在对话面板下发指令，让 Trae 自动创建 Skill：
帮我生成一个代码审查Skill，要求检查三点：
1. 安全漏洞：SQL注入、XSS、危险函数调用
2. 性能问题：循环嵌套、重复请求、冗余代码
3. 编码规范：变量命名、函数注释、代码缩进
输出格式要求：问题等级+问题描述+修复建议 发送后，Trae 会自动生成完整 Skill 目录与 SKILL.md，直接启用即可使用。
适合直接使用他人成熟模板：
常用的下载地址：
https://www.modelscope.cn/skills
https://github.com/anthropics/skills/tree/main/skills
获取外部 Skill 文件夹（社区分享、团队公用模板）；
(1) 打开 Trae 设置 → 规则和技能 → 技能；
(2) 选择「导入」，加载完整 Skill 目录；
(3) 开关控制启用 / 关闭，多个 Skill 可同时共存，AI 自动匹配场景。
注：可以针对全局导入，也可以针对某个项目导入
手动编写可精准定制复杂流程，SKILL.md 固定三段式结构：触发条件 + 执行步骤 + 输出格式。
## 触发条件
用户输入：代码审查、安全检查、代码质检 时，自动启用本技能。
## 执行步骤
1. 读取用户提供的代码或文件；
2. 逐项检查安全风险、性能问题、编码规范；
3. 分类汇总所有问题，不遗漏边界场景；
4. 针对每一条问题给出可落地修复方案。
## 输出格式
【风险等级】高/中/低
【问题描述】具体代码问题
【修复建议】修改方案与示例代码编写完成后放入 Skill 目录，在设置中启用即可生效。
三. Skill用法
1 安装启用后，不需要复杂配置，直接在聊天里告诉 AI：使用 frontend-design 技能。
示例对话（直接复制即可用）
你输入：
使用 frontend-design 技能，创建一个现代化的登录页面，要求：
1. 极简高级风格，不要俗气渐变色
2. 包含账号、密码、记住我、登录按钮
3. 适配移动端
4. 用 React + Tailwind 实现A. 识别并启用 frontend-design 技能
B. 按照技能预设的工业级设计规范生成代码
C. 输出结构清晰、配色高级、交互现代的登录页
** 不用 Skill：**AI 生成的页面往往 “网红风、渐变多、不统一、粗糙”。
用 frontend-design：AI 输出极简、高级、一致性强、生产可用的界面，避免 “AI 审美” 通病。
使用 frontend-design 技能，重构 #index.html，提升设计质感使用 frontend-design 技能，生成一个卡片组件，带 hover 动画使用 frontend-design 技能，优化这个页面的配色和间距!
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。