快速入门

大模型 Large Language Model（LLM）

AI编程工具的"大脑"。它负责理解你说的话、生成你需要的内容。

Token：AI的"计费单位"

Token是大模型处理文字的最小单位。"按字数计费"——用的Token越多，花的钱越多。

• 1个汉字 ≈ 1-2 个 Token
• 1个英文单词 ≈ 1-2 个 Token
• 代码的 Token 计算比较复杂，通常比普通文字多一些

API Key：大模型的"门禁卡"

API Key是一串字符，可以理解为调用大模型的"门禁卡"。有了它，AI编程工具才能连接到云端的大模型来工作。

你需要到大模型提供商的官网注册账号，然后创建一个API Key。

MCP：AI的"工具箱"

MCP，全称 Model Context Protocol 模型上下文协议，是一个让AI能调用外部工具的协议，被称为AI 领域的 USB‑C 接口。你可以理解为AI的"工具箱"——没有工具箱，AI只能动嘴皮子；有工具箱，AI就能真正"动手"干活。

• MCP Server = U 盘、硬盘、外设；

• MCP Client = 电脑上的 USB‑C 接口；

• Host = 电脑本体；

只要两边都支持标准，不同外设可以直接插上就用，不需要每个设备单独写驱动。

和Skill的区别

• MCP = AI的"手脚"：让AI能操作外部工具（数据库、浏览器等）

• Skill = AI的"技能"：让AI更擅长某类任务（写测试、代码审查等）

类比：MCP是给AI装上"手"和"脚"，让它能干活；Skill是教AI一些"专业技能"，让它干得更好。

MCP 使用示例

可以在 trae 的设置中管理 MCP Servers。

配置完成后，在 Trae 的 AI 对话中可以直接使用浏览器自动化功能。

请打开 https://www.baidu.com 并截图

示例 ：填写表单
打开 http://www.xxxxxx.com/user/login.html 并填写表单：
- 账号：18888888888
- 密码：123456
然后提交表单

Skill：AI的"技能包"

Skill是AI的"技能包"，用来扩展AI在特定领域的能力。就像给手机装APP——手机本身能打电话，装了微信就能聊天，装了抖音就能刷视频。

有了Skill，AI在特定任务上会表现得更好。比如：

• 装了"代码审查Skill"，AI审代码更专业

• 装了"测试生成Skill"，AI写测试用例更快

• 装了"文档生成Skill"，AI写文档更规范

skill 使用示例

指令提示词：帮我用html设计一个登录页面

只创建了一个html文件，html,css,js代码混在一起。

让AI帮我们生成一个skill：

请创建名为 web-standards 的 skill，用于规范 HTML/CSS/JS 纯原生编码。

## 规范要求

### HTML
- 仅使用语义化标签（header, nav, main, section, article, footer, button）
- 非必要不使用 div/span
- 表单必须正确关联 label
- 必须包含 viewport meta 标签

### CSS
- 禁止使用任何 CSS 框架（Bootstrap、Tailwind 等）
- 禁止使用内置图标库（Font Awesome 等）
- 仅使用纯 CSS + CSS 自定义属性（变量）
- 必须使用 box-sizing: border-box
- 推荐 BEM 命名规范

### JavaScript
- 仅使用原生 JS（禁止 jQuery/框架）
- 使用 addEventListener 绑定事件
- 使用 const/let（禁止 var）
- 推荐箭头函数和 async/await

### 文件结构
- CSS 和 JS 必须放在独立外部文件中
- 禁止行内样式和行内脚本
- 至少包含：1个 HTML + 1个 CSS + 1个 JS

使用skill重新再生成一个登录页面，已按照skill中规范重新创建

trae 官方推荐 skill：https://docs.trae.cn/ide_top-10-recommended-skills-for-development-scenarios

快速入门

请帮我从零创建一个待办事项（Todo List）Web应用，要求如下：

【技术栈】
- Vue 3 + Composition API
- Vite 构建工具
- Tailwind CSS 样式

【功能需求】
1. 显示待办事项列表
2. 可以添加新的待办事项（输入框 + 添加按钮）
3. 可以标记事项为完成/未完成状态
4. 可以删除事项
5. 数据持久化：使用localStorage保存数据，页面刷新后不丢失
6. 支持筛选：全部 / 未完成 / 已完成

【UI要求】
1. 使用Tailwind CSS，卡片式设计
2. 完成的事项显示删除线效果
3. 添加悬停效果和过渡动画
4. 响应式布局，适配移动端
5. 整体风格简洁现代

【代码规范】
1. 使用中文注释
2. 组件命名使用PascalCase
3. 变量命名使用camelCase
4. 代码结构清晰，逻辑分离

帮我添加一个编辑功能，双击事项可以修改内容;

添加一个统计功能，显示总事项数、已完成数、未完成数

命令行 AI 编程工具 Claude Code

首先安装 Node.js

安装 Claude Code

# 推荐：NPM 全局安装
npm install -g @anthropic-ai/claude-code

# 卸载
npm uninstall -g @anthropic-ai/claude-code

# 验证
claude --version

# 更新
claude update

# 启动
claude

默认会使用海外模型，无海外网络会启动失败，可以换成国内模型。直接让 trea 帮我们配置即可。

我本地已经安装了 Claude Code，但是没有海外网络无法启动，现在我需要配置国内的大模型 (Minimax、deepseek、qwen)，帮我配置一下。

购买 API-KEY 配置到 ~.claude\settings.json 使用。