🔧 VC工具安装
与第一条提示词

第2课 · 工具实操
⏱ 120分钟🛠️ 工具实操🔥 焚诀②：三要素公式

🎯 本课目标

💻

安装Trae CN

成功安装并注册登录

🗺️

认识四大功能区域

能说出每个区域的作用

📐

掌握三要素公式

每人写出1条含三要素的提示词

✍️

发出第一条提示词

成功发送并看到AI回复

⚠️

了解新手弯路

知道常见错误和正确做法

🔄 上节回顾

1

VC的核心是什么？

大家来说需求，AI来写代码

2

提示词是什么？

你对AI说的话 = Prompt

🔥

焚诀①：角色扮演法

口诀：开口先定角色，AI立刻进入状态

今天：装工具、写提示词、让AI真正帮我们干活！

🤔 为什么选 Trae CN？

🏠

国内直连

不需要特殊网络环境
不需要任何额外配置
打开就能用

🆓

基础免费

有每日免费额度
学这门课完全够用
无需付费

🗣️

中文友好

界面中文
对话支持中英文混合
零基础无障碍

其他可选工具：通义灵码（阿里）、文心快码（百度）、WorkBuddy（阿里）——课程统一用Trae CN

📥 安装 Trae CN

第1步
打开浏览器，搜索 "Trae CN" 或直接访问 trae.ai
第2步
点击"下载"，选择对应系统版本（Windows / Mac）
第3步
下载完成后双击安装包，按提示完成安装
第4步
打开Trae CN，点击"注册"
第5步
使用邮箱或手机号注册（推荐邮箱）
第6步
输入验证码，设置密码
第7步
🎉 登录成功！看到主界面

🗺️ Trae CN 四大核心区域

📁

项目列表区

左侧
管理所有项目
创建新项目

📝

代码编辑区

中间
AI生成的代码
查看和微调

💬

AI对话区

右侧/底部
跟AI聊天
提需求

👁️

预览区

点击预览按钮
看网页真实效果

现在请跟我做：新建项目 → 选择"Web项目" → 命名"我的第一个网页" → 创建
📐

提示词三要素公式

今天最重要的内容

📐 提示词三要素公式

每条提示词 = 三个要素缺一不可
🎭
【角色】
你是一个_______
（专家身份）
🎯
【任务】
请帮我_______
（做什么事情）
📋
【要求】
①___②___③___
（具体约束条件）
🎯 谁来做 + 做什么 + 怎么做 = 好提示词

📊 三要素完整 vs 不完整

❌ 只有任务（1/3）

"做一个网页"

没角色、没要求 → AI只能瞎猜

⚠️ 有角色+任务（2/3）

"你是一个前端开发专家，帮我做一个网页"

有角色有任务、没要求 → 稍微好一点，但还是模糊

✅ 三要素齐全（3/3）

"你是一个前端开发专家，请帮我做一个个人博客首页。 要求：①顶部有导航栏（首页/关于/文章） ②中间文章列表（标题+日期+摘要） ③白底+深蓝配色 ④适配手机屏幕"

角色+任务+要求 → AI知道到底要干什么！

✍️

历史性时刻

发出你人生中第一条提示词！

✍️ 你的第一条提示词

你是一个前端开发专家。 请帮我创建一个"你好，世界"的网页。 要求： ① 页面正中间显示"你好，世界！我是[你的名字]"这句话 ② 文字用大字号，颜色用你喜欢的颜色 ③ 背景用你喜欢的颜色 ④ 简洁就好，不需要太复杂
操作：把"[你的名字]"换成你自己的名字 → 粘贴到AI对话区 → 按回车！

🎨 课堂练习：自由尝试

🎉 恭喜！每个人都发出了第一条提示词！
你们已经是 Vibe Coder 了！
🔄

换角色试试

UI设计师、全栈工程师、Python开发者……

🎯

换任务试试

自我介绍页、课程表、相册……

🎨

换要求试试

改颜色、改布局、加动画……

用三要素公式写3条提示词，感受"不同写法 → 不同结果"的差异

⚠️ 新手最容易走的5条弯路

🚫 弯路1：一次提太多需求

AI会顾此失彼 → 正确：每次只描述一个功能，逐个实现

🚫 弯路2：描述太模糊

"做好看点"——AI不知道你说的"好看"是什么 → 正确：加上颜色代码、尺寸、排版方式

🚫 弯路3：不满意就放弃

第一版本来就不完美 → 正确：继续对话修改！好代码是迭代出来的

🚫 弯路4：不看AI生成了什么

永远学不会阅读代码 → 正确：大致浏览一下结构，慢慢就会有感觉

🚫 弯路5：遇到报错就慌

报错是日常！ → 正确：截图或复制报错信息，发给AI，它能帮你修

🔥 焚诀②

三要素公式

核心心法：每条提示词，三要素缺一不可。
🎭 【角色】你是一个___________
给AI戴上"专家帽子" | 示例：前端开发专家 | UI设计师 | 全栈工程师
🎯 【任务】请帮我_____________
告诉AI要"做什么事" | 示例：做一个博客首页 | 设计一个登录界面
📋 【要求】①_______ ②_______ ③_______
给AI画好"框框" | 示例：配色白底+蓝色 | 顶部导航栏 | 适配手机屏幕
口诀：谁来做 + 做什么 + 怎么做 = 好提示词

🔥 三要素公式 · 进阶用法

🎭🎭

角色可以复合

"你是一个擅长UI设计的前端开发专家"
🔧

要求可以加技术约束

"用纯HTML+CSS+JS，不要引入任何外部框架"
👆

要求可以加用户体验

"按钮要大一点方便手机点击"

❌ 低质量

"写个登录页面"

✅ 高质量

"你是一个前端开发专家，请帮我设计一个登录页面。要求： ① 白色卡片居中，带圆角和阴影 ② 有'用户名'和'密码'两个输入框 ③ 登录按钮用蓝色，鼠标放上去颜色变深 ④ 卡片下方有'忘记密码？'链接 ⑤ 简洁大方，不要花哨的动画"

📋 本课总结

1

装好了Trae CN

这是今后所有课程的工具基础

2

学会了三要素公式

角色 + 任务 + 要求 = 好提示词

3

发出了人生第一条提示词

你们已经是Vibe Coder了！

🔥

焚诀②：三要素公式

谁来做 + 做什么 + 怎么做 = 好提示词

📅 下节课预告

第3课：跑起第一个网页程序

🪪 真正做出一个完整的个人介绍网页
🔄 体验"对话→修改→预览"的迭代循环
🔥 学习焚诀③：迭代追问法
作业：想好你的个人介绍网页要做什么？准备一段自我介绍的文字，下节课要用。

🎉 恭喜成为Vibe Coder！

有问题吗？下节课见！