Appearance
课堂 Prompt 卡片
使用说明：以下三张卡片对应培训的三个互动练习（练习 1/2/3）。所有 Prompt 在两款工具（Qoder / Trae）中原样可用，可整段复制，也可把【】标记处替换成你自己的内容。带
删除线的标题意为"卡住时先看它"。
卡片一：Hello 页面（练习 1 · 15 分钟）
四步流程
- 新建
vibe-workshop/hello文件夹 - 在 IDE（Qoder 或 Trae）中打开该文件夹
- 在对话区粘贴下面的 Prompt（Trae如果看不见Agent对话框 记得按
Ctrl+U/Command+U呼出输入框） - 看预览（Qoder：预览区/预览按钮；Trae：内置浏览器打开或双击 HTML 文件）
Starter Prompt（两工具同一套，原样可用）
可直接复制粘贴到 AI 对话区：
text
请帮我创建一个简单的网页，显示"Hello, Vibe Coding!"，文字居中，使用蓝色。验收 4 条（全部满足再举手）
- [ ] 代码区出现 HTML 代码
- [ ] 文件区出现新文件
- [ ] 预览区（或浏览器）显示蓝色居中文字
- [ ] 举手示意完成
卡住自查（先看这张表，再举手）
| 问题 | Qoder 解法 | Trae 解法 |
|---|---|---|
| AI 没反应 | 检查网络与登录 | 确认已登录，按 Ctrl+U 确认聊天框已呼出 |
| 回复很慢 | 耐心等待，检查网络 | 高峰期排队属正常，耐心等待 |
| 看不到预览 | 点预览按钮或浏览器打开 HTML | 内置浏览器打开或双击文件 |
| 额度用完 | 查看额度、等待刷新 | 登录即赠额度，用尽需按 Token 付费续充；高峰期可能排队 |
卡片二：个人名片页 + 三轮微调（练习 2 · 15 分钟）
Starter Prompt（生成第一版）
把【关于我】里的"姓名___、一句话介绍___"换成你自己的真实信息：
可直接复制，并把「关于我」换成你的信息：
text
我想做一个个人名片页。【关于我】姓名___、一句话介绍___；【至少要有】头像占位、名字、一句话介绍、联系方式；【风格】简约专业，深蓝+白；请先生成第一版，结构清楚能用，不要过度复杂。三轮微调（每轮只在对话区追加一句，别新建对话）
| 轮次 | 目标 | 追加提示词示例 |
|---|---|---|
| 第一轮 | 修明显错误 | 名字/布局错位/链接不可点——把问题直接描述给 AI |
| 第二轮 | 调风格 | 把主色改成浅蓝，整体间距再宽松一点。不要新增模块。 |
| 第三轮 | 小幅细化 | 按钮文案、间距等细节微调 |
两条铁律（P26）：① 一次只改一类问题；② 改动边界说清楚——"只改这一处，别动布局"。
卡片三：极简待办清单（练习 3 · 20 分钟）
背景故事（供你把【背景】段改写成自己的话）
当上班族每天早上到公司时，想快速列出今天要做的事，以便不遗漏任务、安心投入工作。
五步流程
| 步骤 | 时间 | 做什么 |
|---|---|---|
| ① 建文件夹 | 2' | 新建 vibe-workshop/todo/ 文件夹并在 IDE 打开 |
| ② 填模板 | 3' | 把下方 Prompt 的【背景】段改写成自己的话（或直接整段复制） |
| ③ 生成 | 8' | 粘贴 Prompt，等待生成 index.html（Trae 用 SOLO 模式或直接 IDE 均可） |
| ④ 验证 | 3' | 双击打开，按验收清单逐项测试 |
| ⑤ 迭代 | 4' | 追加一轮"迭代 Prompt"，观察功能升级 |
Starter Prompt（完整版 · 基于万能模板七要素）
可直接复制，并把【背景】段改写成自己的话：
text
你是一个注重细节和用户体验的前端开发者，擅长做让人用起来顺手的小工具。
## 背景
我每天上班第一件事是列当天要做的事，经常记在便签上但容易丢。
目标用户：我自己和同事，要求简单直接，打开就能用。
## 任务
帮我做一个极简待办清单网页应用。
## 要求
- 添加任务：输入框 + 添加按钮（按回车也能添加）
- 完成任务：点击勾选，任务显示删除线
- 编辑任务：双击任务文字可修改
- 删除任务：每个任务右侧有删除按钮
- 数据保存在浏览器本地（localStorage），刷新页面任务不丢失
- 顶部显示"还有 X 件事没做"的计数
- 中文界面，手机端也能用
## 约束
- 不要用任何框架，单个 HTML 文件（内嵌 CSS 和 JS）即可
- 不需要后端、不需要安装任何依赖
- 先只做这些功能，不要加分类、截止日期等额外功能
## 输出格式
单个 index.html 文件，双击即可打开使用精简版（完成快的学员练手：重开一个文件夹，用这一条重新做一遍）
可直接复制（适合重复做过的任务）：
text
你是一个前端开发者。背景：我想做一个极简待办清单。任务：生成单个 index.html。要求：- 添加/勾选完成/双击编辑/删除任务 - 用 localStorage 保存，刷新不丢 - 顶部显示未完成数 - 手机端可用。迭代 Prompt（步骤 ⑤ 用，原样粘贴）
可直接复制（练习 3 迭代用）：
text
很好用！请再加两个小功能：1) 给任务加"重要/普通"标签，重要任务用红色圆点标记；2) 底部加"清除已完成"按钮。只加这两个，不要动其他功能。验收清单（P32 · 逐项打勾才算完成）
- [ ] 双击
index.html打开，界面正常显示，有输入框、添加按钮和计数 - [ ] 添加 3 条任务 → 列表出现 3 条，计数显示"还有 3 件事没做"
- [ ] 勾选 1 条 → 该任务出现删除线，计数变为 2
- [ ] 双击任务文字 → 可以修改内容并保存
- [ ] 删除 1 条 → 列表少一条，计数正确
- [ ] 刷新浏览器 → 未完成的任务仍在（localStorage 生效）
- [ ] 迭代后新增：重要任务红色圆点标记、"清除已完成"按钮
常见报错排查卡（P33 · 把对应 Prompt 贴给 AI，让它继续修）
| 报错现象 | 原因 | 排查 Prompt（原样粘贴） |
|---|---|---|
| 刷新后任务全部消失 | 没存 localStorage 或读取时机不对 | 刷新后任务不见了，请检查是否用 localStorage 保存了任务，以及页面加载时是否正确读取恢复。 |
| 双击任务无法编辑 | 双击事件没绑定或与勾选冲突 | 双击任务文字无法进入编辑，请检查双击事件是否正确绑定，并确保和勾选完成不冲突。 |
| 按回车页面刷新、任务没加上 | 表单默认提交行为没阻止 | 按回车后页面刷新了且任务没添加，请阻止表单默认提交，改为用 JS 添加任务。 |
| 手机端布局错乱 | 没做移动端适配 | 手机上布局乱了，请做基本移动端适配：宽度自适应、按钮方便点按。 |
| AI 私自加了分类/提醒等功能 | 没读懂"约束"，范围失控 | 请只保留我要求的功能，移除你额外添加的分类和截止日期，保持极简。 |
加餐挑战与课后作业（P34）
加餐挑战（快的学员）："今天吃什么"点餐工具
可直接复制（加餐挑战）：
text
帮我做一个"今天吃什么"随机点餐工具：把公司附近常吃的东西列成清单，点一下随机抽取一个，不满意可以"换一个"，直到满意为止。进阶玩法：让 AI 支持上传菜单图片识别菜品后再抽取。图片识别依赖模型视觉能力，失败就退回手动输入清单，不影响基础功能。
课后作业 A：旅游攻略规划
可直接复制（课后作业 A）：
text
我想去 XX 玩 X 天，预算 XX 元，偏好 XX（如美食/自然风光/亲子）。请生成一份详细行程攻略：每天上午/下午/晚上的安排、交通建议、预算分配，排版成精美的 Markdown 文档。体会：需求越具体，攻略越贴合。
课后作业 B：数据脱敏（职场延续）
把客户名单里的手机号和邮箱中间几位打码，输出脱敏后的新文件。
附录：7 个核心概念速记（口语化定义）
| 概念 | 一句话定义 | 类比 |
|---|---|---|
| Agent IDE | 把 AI 装进编程环境的一体化工具（Qoder/Trae/Claude Code 等） | 你开的整车 |
| Token | AI 处理与计费的最小"字块"单位 | 里程表上的油钱 |
| LLM API | 按量付费调用大模型的接口 | 加油站 |
| MCP | 给 AI 外接工具的标准协议（Model Context Protocol） | USB-C 接口 |
| Skills | 可安装的标准作业流程包 | 技能包/驾照科目 |
| Context | AI 一次能看见的全部信息（对话+文件+工具结果） | 副驾能装的文件箱 |
| Harness | IDE 内包裹 LLM 的执行框架层（工具调度、文件读写、规则注入） | 底盘与仪表盘 |
万能模板七要素速查（P25）
| 要素 | 必填程度 | 作用 |
|---|---|---|
| 角色 | 推荐 | 让 AI 进入专家模式 |
| 背景 | 必填 | 提供上下文信息 |
| 任务 | 必填 | 说清楚要做什么 |
| 要求 | 推荐 | 明确成功标准（要什么） |
| 约束 | 推荐 | 划定边界，防止"加戏"（不要什么） |
| 格式 | 视情况 | 指定输出形式 |
| 示例 | 可选 | 用例子教 AI 你想要什么 |
填写顺序：先任务 → 再背景 → 后约束。
调试公式速查（P36-P37）
text
完整日志 + 操作步骤 + 预期结果 = 快速解决方案
公式示例：我运行 pnpm dev 启动项目，终端报错：[完整错误日志] 我预期的结果是：开发服务器正常启动，能在 localhost:3000 访问。帮我分析并修复这个问题。
循环修复：按你的方法改了，现在出现新的错误：[新错误日志] 请继续分析。