Vibe Coding 培训资料包

Appearance

课前环境准备指引 ​

完成期限：请在培训开始前 1 天完成本指引的全部步骤（约 15 分钟）。

本指引对应：本培训的课前准备（PPT P18/P20，练习 1 现场动手）。

工具选择：Qoder 与 Trae 二选一即可。两款工具课堂上的 Prompt 完全通用，选哪款都能全程跟做。不知道怎么选？见文末"选择建议"。

第 0 步：准备工作文件夹（1 分钟） ​

在桌面（或"文档"文件夹）新建一个文件夹，命名为：

vibe-workshop

课堂练习 1/2/3 的全部文件都会生成在这个文件夹里，请记住它的位置。

方案 A：安装 Qoder（约 10 分钟） ​

1. 下载 ​

2. 安装 ​

  1. 双击下载的安装文件
  2. 按安装向导提示完成安装（Windows 一般为 .exe，一路"下一步"；macOS 将应用拖入"应用程序"文件夹）
  3. 双击 Qoder 图标启动

3. 登录（首次启动必须） ​

  1. 在 Qoder 界面右上角点击用户图标（或按快捷键 Ctrl+Shift+,（Windows）/ ⌘+Shift+,（macOS）），选择 Sign in（登录）
  2. 在打开的网页上：
    • 点击 Sign up 完成注册，或
    • 直接用 Google / GitHub 账号登录（国际版推荐，最快）
  3. 返回 Qoder 界面，看到自己的头像/用户名即登录成功

4. 打开工作文件夹 ​

启动界面点击 Open（打开）（快捷键 Ctrl+O（Windows）/ ⌘+O（macOS）），选中第 0 步创建的 vibe-workshop 文件夹并打开。

5. 自检（照做一遍，1 分钟） ​

在底部/侧边的对话区输入框粘贴并发送：

可直接复制粘贴到 AI 对话区：

text
请帮我生成一个简单的 HTML 页面：居中显示一个 3×3 的彩色小方块网格（红/黄/蓝等不同颜色），方块之间留点间距。

能看到彩色方块网格的预览，即说明"已登录 + AI 能回复 + 能生成代码 + 能预览"整条链路已就绪。自检后可删除生成的测试文件，保持文件夹整洁（不删也完全不影响）。

方案 B：安装 Trae（约 10 分钟） ​

国内版 vs 国际版 · 模型差异：

  • 国内版：默认接入国产模型（如豆包），中文场景友好、国内直连访问顺畅
  • 国际版：可接入 Claude / GPT 等主流模型，或经 OpenRouter 接入更多模型，模型选择更灵活
  • 两版都能流畅完成本培训的三个练习；建议选其一跟做，不要中途切换。
  • 高峰期免费用户可能进入公共慢速队列，可在设置中切换其他模型（如 DeepSeek）缓解排队。

1. 下载 ​

注意区分：下载页上的 TraeCode 是编程 IDE（本培训使用它）；TraeWork 是 AI 办公平台，本培训不使用。

2. 安装 ​

  1. 双击下载的安装文件
  2. 按安装向导提示完成安装
  3. 双击 Trae 图标启动

系统要求：macOS 12.0+；Windows 10/11。

3. 登录（首次启动必须） ​

  1. 启动后按提示登录/注册：国内版支持手机号等字节账号体系方式注册登录；国际版支持 Google / GitHub 账号登录
  2. 登录成功后进入主界面
  3. 国内版默认使用国产模型（豆包），个人用户不再完全免费——登录即赠送一定额度，额度用尽后需付费续充（高峰期可能排队，属正常现象）

费用预期（已按官方核实，如有变动以官方为准）：

  • 国际版：提供 Free / Lite / Pro / Pro+ / Ultra 等套餐；登录送赠送额度（Basic Usage，约 3 美元/月），用尽后按实际 Token 消耗自动累计，每累计 3 美元扣费一次。
  • 国内版：采用积分制并提供积分套餐；默认 Doubao-Seed（豆包）模型可享折扣，高峰期免费用户可能排队/进慢速队列。
  • 结论：Trae 已不再完全免费——个人用户靠赠送额度可先起步，用尽需付费或升级套餐。本培训三个练习消耗极小，赠送额度通常足够。

4. 打开工作文件夹 ​

选择 打开文件夹 / Open Folder，选中第 0 步创建的 vibe-workshop 文件夹并打开。

5. 自检（照做一遍，1 分钟） ​

  1. 呼出 Agent 聊天框（找不到输入框时，按 Ctrl+U（Windows）/ Command+U（macOS）呼出）
  2. 粘贴并发送：

可直接复制粘贴到 AI 对话区：

text
请帮我生成一个简单的 HTML 页面：居中显示一个 3×3 的彩色小方块网格（红/黄/蓝等不同颜色），方块之间留点间距。
  1. 生成后，用内置浏览器打开生成的 HTML 文件，或直接双击文件在浏览器中查看效果

能看到彩色方块网格即说明环境就绪。注意：Trae 左上角有 IDE / SOLO 双模式，自检用 IDE 即可。

自检总清单（培训前请确认全部打勾） ​

  • [ ] 电脑已安装 Qoder 或 Trae（任一款）
  • [ ] 已完成登录，主界面正常
  • [ ] 桌面已有 vibe-workshop 文件夹，并已在 IDE 中打开过
  • [ ] 已用自检 Prompt（彩色方块网格）验证：AI 能生成代码并能看到效果
  • [ ] 已经知道：自己工具的"输入框"在哪里（Qoder 常驻对话区 / Trae 按 Ctrl+U）

常见问题 ​

问题解法
下载速度慢Qoder 可改用 Qoder CN（qoder.com.cn/download）；Trae 国内版（trae.cn/download）国内直连通常较快
登录页打不开检查网络；Qoder 可尝试 Qoder CN 版本
AI 回复很慢/排队高峰期排队属正常，耐心等待即可；课堂现场可先跟随讲师投屏
双击 HTML 文件没反应用浏览器打开：右键文件 → 打开方式 → 选择浏览器
安装失败/启动报错把完整错误提示截图保存，培训开场后找讲师协助；或把错误信息连同你的操作步骤发给 AI 让它帮你排查

选择建议（二选一） ​

  • 想要最简单、开箱即用 → 选 Trae 国内版（注册即用、登录即赠额度、SOLO 模式自动建项目）
  • 想跟着讲师机同款操作、为后续正式项目/插件生态做准备 → 选 Qoder（国际版或 Qoder CN 均可）
  • 两款都会的没关系：课堂跟做只用一款，不要中途切换

培训当天携带清单 ​

  • [ ] 笔记本电脑 + 电源（请勿只带平板/手机）
  • [ ] 已装好并登录的 Qoder 或 Trae
  • [ ] 桌面 vibe-workshop 文件夹就位
  • [ ] 手机（查看课堂资料包用）