前端开发者 Vibe Coding 实战教程

以「小星星英语」少儿学习 App 为例，从零掌握 AI 辅助开发全流程

写在前面：这份教程是什么？

你是一个前端开发者，会写 Vue/React，了解基本的后端知识。你听说了 vibe coding，但不确定该从哪里开始。

这份教程用一个真实项目——给 5-8 岁中国孩子做的英语启蒙 H5 App——带你走一遍完整的 AI 辅助开发流程。主要工具是 Trae（字节跳动的免费 AI IDE），同时会穿插说明 Cursor、Claude Code、VS Code + Cline 等工具在同场景下的用法差异。

你会学到的不是"怎么用某个按钮"，而是一套可迁移的工作方法论：

什么时候该让 AI 写代码，什么时候该自己写
怎么写 prompt 让 AI 输出高质量代码
怎么审查 AI 代码，避免埋坑
怎么组织项目，让 AI 始终理解你的上下文

前置要求：会 HTML/CSS/JS，了解 Vue 3 基础语法，会用终端运行命令。不需要 AI 使用经验。

第一章 · 环境准备与工具认知

1.1 安装 Trae

访问 trae.ai 下载并安装。Trae 基于 VS Code 构建，你的 VS Code 插件和快捷键基本通用，学习成本接近零。

安装后打开，你会看到熟悉的编辑器界面，但右侧多了一个 AI Chat 面板，顶部多了一个 Builder Mode 按钮。这两个就是你和 AI 交互的主要入口。

1.2 Trae 的两种工作模式

模式	说明	适用场景
Chat 模式	右侧面板对话，AI 逐步回答、修改代码	日常编码、问答、小范围修改
Builder 模式	用一段自然语言描述，AI 自动生成整个项目	从零搭建项目骨架、生成完整页面

学习建议：先用 Builder 模式感受"从零到有"的震撼，再切回 Chat 模式做精细控制。这就像你先用脚手架搭好楼体，再一间一间装修。

1.3 其他工具的对应关系

如果你在用或打算用其他工具，这里是功能映射：

能力	Trae	Cursor	Claude Code	VS Code + Cline
整体项目生成	Builder Mode	Composer (Agent)	终端直接描述	Chat 面板
逐步对话编码	Chat 面板	Chat / Cmd+K	终端对话	Chat 面板
代码补全	Tab 补全	Tab 补全（更快）	无（这是它的短板）	取决于插件
多文件重构	Chat 中 @文件	Composer 多文件	天然擅长	Chat 中选文件
项目规则文件	支持 .trae/rules	.cursorrules	CLAUDE.md	.clinerules
费用	免费（Pro $10/月）	$20/月起	$20/月起	免费 + API 费用

重点提示：不同工具的 prompt 技巧是通用的。学会了在 Trae 里怎么写好 prompt，换到 Cursor 或 Claude Code 一样适用。

第二章 · Step 1：写 PRD（不是写代码！）

2.1 为什么第一步不是打开编辑器

Vibe coding 最大的误区就是打开工具直接说"帮我做一个 App"。

模糊的 prompt 会产出模糊的代码。 你告诉 AI "做一个英语学习 App"，它会给你一个通用的、毫无特色的表单式应用。你告诉它详细的用户场景、交互细节、技术约束，它才能给出有针对性的好代码。

所以第一步是写 PRD（Product Requirements Document，产品需求文档）。不需要很正式，但需要覆盖以下要素：

2.2 PRD 核心要素清单

markdown

# 必须包含的 5 个部分

1. 一句话描述：这个产品是什么、给谁用、解决什么问题
2. 用户场景故事：2-3 个具体的使用场景（谁在什么情况下做什么）
3. 功能优先级：P0（必须有）/ P1（下一版）/ P2（远期），MVP 只做 P0
4. 交互设计要求：视觉风格、关键页面、操作原则
5. 技术约束：技术栈、已有限制、性能要求

2.3 实战：用 AI 帮你写 PRD

打开 Trae 的 Chat 面板，输入以下 prompt：

我要做一个 H5 应用，面向 5-8 岁中国零基础儿童的英语启蒙 App。

核心特点：
- 通过 AI 语音对话教孩子学英语
- 每天 5-10 分钟，游戏化激励让孩子有兴趣持续学
- 技术栈：Vue 3 + Vite 前端，Python 后端，SQLite 存储

请帮我写一份 PRD，需要包含：
1. 产品概述和目标用户
2. 3 个具体的用户场景故事
3. MVP 功能清单（分 P0/P1/P2）
4. 关键页面描述和交互原则
5. 技术架构初步方案
6. AI 伙伴的角色人设和对话示例

不要写得太正式，但要具体到能指导开发。

🔑 Prompt 技巧 #1：给 AI 明确的结构要求
注意这个 prompt 不是说"帮我写个 PRD"，而是列出了 6 个具体要求。这叫做结构化 prompt——你给 AI 一个清晰的框架，它就不会漫无目的地发挥。
对比：
❌ "帮我写一个儿童英语 App 的 PRD" → 泛泛而谈
✅ 上面的 prompt → 有结构、有细节、有约束

2.4 审查 AI 输出的 PRD

AI 生成的 PRD 不能直接用，你需要像审查代码一样审查它：

检查清单：

[ ] 用户场景是否贴合真实情况？（5 岁孩子真的会这样操作吗？）
[ ] P0 功能是否太多？（MVP 应该精简到极致）
[ ] 技术方案是否跟你的约束匹配？
[ ] 有没有遗漏关键问题？（比如：儿童语音识别准不准？iOS Safari 兼容性？）

修改方式：直接在 Chat 里继续对话——

PRD 整体不错，但有几个问题：
1. P0 功能太多了，把「自动复习」移到 P1，MVP 先做最简单的线性课程
2. 用户场景 A 中，5 岁孩子不太可能自己打开 App，通常是家长帮忙打开
3. 补充一个技术挑战：iOS Safari 的麦克风权限和音频自动播放限制
4. AI 伙伴的对话示例再加一个「孩子沉默不说话」的处理场景

请更新 PRD。

🔑 Prompt 技巧 #2：迭代优于重写
不要因为不满意就重新写一遍 prompt。在现有基础上给出具体修改意见， AI 会保留好的部分，只改你指出的问题。这比从头来更高效，也更可控。

2.5 最终产出

经过 2-3 轮迭代后，你应该有一份 1-2 页的 PRD，明确了：

4 个关键页面：启动页、学习页、成就页、家长页
MVP 只做：基本课程流程 + 语音跟读 + 星星奖励
技术方案：Vue 3 + Vite，先用浏览器 Web Speech API，后端暂缓

把这份 PRD 保存为 docs/PRD.md 放在项目根目录。 后续开发时，你可以用 @docs/PRD.md 让 AI 随时参考。

第三章 · Step 2：创建项目规则文件

3.1 什么是项目规则文件

项目规则文件是你和 AI 之间的"长期约定"。每次 AI 开始工作时都会读这个文件，就像新同事入职时读的团队开发规范。

不同工具的文件名不同，但作用一样：

工具	文件名	位置
Trae	`.trae/rules` 或项目内 `.md`	项目根目录
Cursor	`.cursorrules`	项目根目录
Claude Code	`CLAUDE.md`	项目根目录
Cline	`.clinerules`	项目根目录

3.2 实战：编写项目规则

在 Trae 的 Chat 里输入：

我现在要开始一个新项目，请帮我创建项目规则文件。以下是项目信息：

## 项目信息
- 项目名：LittleStar English（小星星英语）
- 类型：H5 移动端应用
- 技术栈：Vue 3 + Vite + TypeScript + Pinia
- 目标设备：手机和平板浏览器（移动端优先）
- 设计风格：圆润卡通、色彩明亮、适合 5-8 岁儿童

## 开发规范
- 使用 Composition API + <script setup> 语法
- 组件命名：PascalCase，文件命名：kebab-case
- CSS 方案：scoped CSS + CSS Variables，不用 Tailwind
- 状态管理：Pinia
- 路由：Vue Router
- 所有文字内容使用中文注释
- 组件保持小而专注，单个文件不超过 200 行
- 移动端适配使用 vw/vh + rem 方案

## 代码风格
- 变量命名用英文，注释用中文
- 异步操作统一用 async/await
- 错误处理不能省略
- console.log 调试完要删除

请生成一个完整的项目规则文件。

AI 会生成类似这样的内容，保存为 CLAUDE.md（通用格式，各工具都能用）：

markdown

# LittleStar English - 项目开发指南

## 项目简介
面向 5-8 岁中国儿童的 H5 英语启蒙应用。移动端优先。

## 技术栈
- 前端：Vue 3.4+ / Vite 5+ / TypeScript 5+
- 状态管理：Pinia
- 路由：Vue Router 4
- CSS：Scoped CSS + CSS Variables（不使用 Tailwind）
- 移动端适配：vw/vh + rem

## 目录结构
src/
├── views/          # 页面级组件（对应路由）
├── components/     # 可复用组件
│   ├── common/     # 通用组件（按钮、弹窗等）
│   └── learning/   # 学习相关组件
├── composables/    # 组合式函数
├── stores/         # Pinia stores
├── router/         # 路由配置
├── assets/         # 静态资源
│   ├── images/
│   └── audio/
├── styles/         # 全局样式和变量
├── types/          # TypeScript 类型定义
└── utils/          # 工具函数

## 编码规范
- 组件：<script setup lang="ts"> + Composition API
- 命名：组件 PascalCase，文件 kebab-case，变量 camelCase
- 单文件 ≤ 200 行，超过则拆分
- 注释用中文，变量名用英文
- 所有异步用 async/await，必须有 try/catch
- 禁止提交 console.log

## 设计规范
- 主色调：#4ECDC4（青绿）#FFE66D（暖黄）#FF6B6B（珊瑚红）
- 圆角：全局 16px，按钮 24px
- 最小触摸区域：48x48px（儿童适配加大到 56x56px）
- 字体：系统圆体，中文 16px 起，英文教学词 24px 加粗
- 动画：所有交互有反馈，时长 200-300ms，缓动 ease-out

🔑 Prompt 技巧 #3：在规则文件中具体到数值
不要写"使用明亮的颜色"，而是写 #4ECDC4。不要写"按钮要大一些"，而是写 最小触摸区域 56x56px。 AI 对数值的执行力远强于对形容词的理解。

3.3 为什么这一步如此重要

没有规则文件时，你每次和 AI 对话都要重复说明技术栈、编码风格、设计要求。有了规则文件，AI 每次开始工作前都会先读它，就像一个记忆力极好的同事，永远记得你们的约定。

在 Trae 中：把规则文件放在项目根目录，Builder Mode 和 Chat 模式都会自动读取。

在 Cursor 中：使用 .cursorrules 文件，Cursor 会在每次对话时自动注入。

在 Claude Code 中：使用 CLAUDE.md，Claude Code 启动时自动加载。

第四章 · Step 3：用 Builder Mode 生成项目骨架

4.1 这一步的目标

用 AI 一次性生成可运行的项目基础结构：路由、页面框架、公共组件、基础样式。不追求完美，追求"能跑起来"。

4.2 实战：在 Trae 中使用 Builder Mode

点击 Trae 顶部的 Builder Mode 按钮，输入以下 prompt：

请根据项目规则文件（CLAUDE.md）创建一个 Vue 3 + Vite + TypeScript 项目。

## 需要创建的内容

### 1. 项目初始化
- Vite + Vue 3 + TypeScript 项目
- 安装 vue-router、pinia
- 配置移动端 viewport meta 和 rem 适配

### 2. 四个页面（先写框架，不需要完整功能）
- `/` 首页：展示 AI 伙伴「星星」的欢迎语 + "开始学习"大按钮
- `/learn` 学习页：顶部进度条 + 中间图片展示区 + 底部麦克风按钮
- `/achievement` 成就页：星星数量 + 徽章网格 + 连续打卡日历
- `/parent` 家长页：需输入密码（1234）才能进入，展示学习数据

### 3. 公共组件
- StarButton：圆角大按钮，点击有弹跳动画
- StarCounter：显示当前星星数量，有闪烁动画
- ProgressBar：课程进度条，带百分比

### 4. 全局样式
- CSS Variables 定义颜色、圆角、字体大小
- 全局 reset 和移动端适配
- 底部 TabBar 导航（首页/学习/成就）

### 5. 状态管理
- userStore：星星数、已学单词、连续打卡天数、今日是否完成
- courseStore：当前课程、当前单词索引、课程列表

## 视觉要求
- 背景：浅蓝渐变（像天空一样温暖）
- AI 伙伴用一个大的 emoji 星星 ⭐ 代替（后续替换为插画）
- 所有按钮至少 56px 高，有圆角和阴影
- 页面切换有滑动过渡动画

请生成完整的项目代码。

4.3 Builder Mode 的工作过程

点击发送后，Trae 的 Builder Mode 会：

分析你的需求，拆解成文件列表
逐个生成文件，你能看到实时进度
自动创建目录结构，包括路由配置、store、组件等
生成可运行的代码

整个过程大约 1-3 分钟。完成后，打开终端运行：

bash

npm install
npm run dev

你应该能看到一个可以运行的基础应用——有导航、有页面、有动画，虽然内容还是占位符，但结构是完整的。

🔑 Prompt 技巧 #4：Builder Mode 的 prompt 要"面面俱到但不要过深"
Builder Mode 擅长广度——一次性搭好多个文件的骨架。它不擅长深度——某个组件的复杂交互逻辑。
所以你在 Builder 的 prompt 里要覆盖所有需要的文件和组件，但每个组件只描述"做什么"，不用说"怎么做"。深度的部分留到 Chat 模式一个一个打磨。

4.4 同样的操作在其他工具中怎么做

在 Cursor 中：打开 Composer（Cmd+I），选择 Agent 模式，粘贴同样的 prompt。Cursor 会在你的工作区自动创建文件。

在 Claude Code 中：在终端运行 claude，然后粘贴 prompt。Claude Code 会执行命令创建项目、安装依赖、写文件，全程自主完成。这是它的最大优势——不需要你点确认，它会自己 npm init、创建目录、写代码、运行测试。

在 VS Code + Cline 中：打开 Cline 面板，粘贴 prompt。Cline 会逐步执行，但每一步都需要你点击"Approve"确认。这更安全但更慢。

4.5 审查生成的代码

这一步非常关键！ AI 生成的代码不能直接用于生产，你必须审查。

作为前端开发者，重点检查：

检查清单（花 10-15 分钟过一遍）：

□ package.json：依赖版本是否合理？有没有装了不需要的包？
□ vite.config.ts：移动端适配配置是否正确？
□ router/index.ts：路由结构是否和 PRD 一致？
□ 各页面组件：是否用了 <script setup>？是否遵守了规则文件的规范？
□ CSS Variables：颜色值是否和设计规范一致？
□ 跑一下 npm run dev：能不能正常启动？控制台有没有报错？
□ 在手机模拟器里看一下：布局是否正常？按钮够不够大？

这就是你作为前端开发者的核心价值——AI 写得快，但你能看出它写得对不对。非程序员用 vibe coding 最大的风险就是"代码跑起来了但满是隐患"。你不会有这个问题，因为你看得懂代码。

第五章 · Step 4：用 Chat 模式逐个打磨功能

5.1 切换思维：从"广度"到"深度"

骨架搭好后，接下来进入 Chat 模式，一个功能一个功能地精细打磨。这是你花时间最多的阶段，也是 prompt 技巧最重要的阶段。

核心原则：一次只做一件事。

5.2 实战功能 A：学习页的课程流程

第 1 轮：先描述整体流程

我现在要实现学习页（/learn）的核心课程流程。

@src/views/learn-page.vue （让 AI 看到当前文件）
@docs/PRD.md （让 AI 参考需求文档）

## 课程流程
一节课包含 5 个单词，流程如下：

1. 「展示阶段」：显示单词图片 + AI 语音播放英文发音 + 中文翻译
   - 图片居中大图显示
   - AI 伙伴说："这是 apple！苹果！跟我一起说：apple~"
   - 播放完自动进入下一步

2. 「跟读阶段」：麦克风按钮变亮，提示孩子说
   - 按住麦克风说话，松开结束
   - 用 Web Speech API 识别
   - 识别到的文字显示在屏幕上

3. 「反馈阶段」：根据识别结果给反馈
   - 识别成功（匹配度 > 60%）：星星 +1，播放欢呼音效，弹出 "太棒了！"
   - 识别失败或沉默：温柔鼓励 "没关系，再来一次~"，最多重试 2 次后自动跳过

4. 「下一个」：自动进入下一个单词，重复 1-3

5. 「课程完成」：5 个单词学完后，显示本次成绩，获得徽章

请先实现步骤 1 和 2。用 TypeScript 类型定义课程数据结构。
先不要实现语音识别，用一个 mock 函数代替。

🔑 Prompt 技巧 #5：用 @ 引用上下文文件
@src/views/learn-page.vue 告诉 AI "看看这个文件的当前内容"。 @docs/PRD.md 告诉 AI "参考这个需求文档"。
在 Trae、Cursor、Cline 中都支持 @ 引用。在 Claude Code 中，AI 会自动读取整个项目结构。
这是 vibe coding 最重要的技巧之一——AI 不是全知的，你要主动喂给它需要的上下文。

🔑 Prompt 技巧 #6：说"先不要实现 X，用 mock 代替"
这叫做分层实现。语音识别是复杂功能，如果在第一轮就让 AI 同时处理 UI + 交互 + 语音，它很可能在某一层出错，导致整体不可用。
先用 mock 跑通流程，确认 UI 和交互逻辑没问题，再在第二轮替换成真实的语音实现。

第 2 轮：看到代码后，给出精确修改

AI 生成代码后，你在浏览器里看效果，然后继续对话：

代码基本可以，但有几个问题：

1. 单词图片的展示区域太小了，在手机上看不清楚。
   图片区域应该占屏幕宽度的 70%，且是正方形，居中显示。

2. "跟我说"的提示文字太小，5 岁孩子看不到。
   AI 伙伴的对话气泡文字要用 20px，加粗。

3. 缺少页面进入时的动画。
   页面加载时，图片应该从底部弹上来（类似 spring 动画），
   AI 伙伴的对话气泡应该逐字显示（打字机效果）。

4. 课程数据结构缺少音频 URL 字段，请补充。

请按以上修改。

🔑 Prompt 技巧 #7：用具体数值替代形容词
❌ "图片再大一些" → AI 不知道大多少
✅ "图片占屏幕宽度的 70%，且是正方形" → 明确可执行
❌ "加个动画" → AI 会加一个最普通的 fade
✅ "从底部弹上来，类似 spring 动画" → AI 知道用什么缓动函数

第 3 轮：接入真实的语音能力

现在流程和 UI 已经验证通过了，请把 mock 语音替换为真实实现。

## 语音播放（TTS）
使用浏览器 Web Speech API 的 SpeechSynthesis：
- 语言设为 en-US
- 语速 rate 设为 0.8（放慢，适合儿童）
- 找一个女声 voice（如果有的话）
- 播放前先检查 API 可用性，不可用时降级为显示文字

## 语音识别（STT）
使用浏览器 Web Speech API 的 SpeechRecognition：
- 语言设为 en-US
- 按住麦克风按钮时开始识别，松开时停止
- 处理 iOS Safari 兼容性（可能需要 webkitSpeechRecognition）
- 设置超时：5 秒无输入自动停止
- 将识别结果与目标单词比较（忽略大小写，允许模糊匹配）

## 请注意
- 需要处理麦克风权限请求
- 如果用户拒绝麦克风权限，显示友好提示而不是报错
- 所有 API 调用包裹在 try/catch 中
- 抽取为 composable：useSpeechSynthesis.ts 和 useSpeechRecognition.ts

@src/composables/ （看看当前有哪些 composable）

🔑 Prompt 技巧 #8：让 AI 抽取可复用模块
注意我们要求"抽取为 composable"。如果你不提这个要求，AI 很可能把语音逻辑直接写在页面组件里，导致 500 行的巨大组件，后续无法维护。
永远主动要求 AI 做合理的代码拆分——它不会自己做。

5.3 实战功能 B：激励系统

接下来实现激励系统。

@src/stores/user-store.ts
@docs/PRD.md

## 需求
1. 星星奖励
   - 每次跟读成功 +1 星星
   - 星星数显示在学习页右上角，获得时有 +1 飞入动画
   - 星星数据存在 localStorage（后续可改为后端）

2. 每日徽章
   - 完成一节课获得对应主题徽章（如"动物小达人"🐱）
   - 徽章数据：{ id, name, emoji, earnedAt, theme }
   - 成就页以网格形式展示所有徽章（已获得的亮色，未获得的灰色半透明）

3. 连续打卡
   - 记录每天是否完成学习
   - 成就页显示本月日历，已完成的日期标记星星
   - 连续 3 天有特殊提示"你已经连续学了3天，太厉害了！"
   - 连续 7 天解锁特殊徽章

## 技术要求
- 所有数据存 localStorage，封装为 composable: useLocalStorage.ts
- 星星飞入动画用 CSS animation，不引入动画库
- 徽章网格用 CSS Grid，每行 3 个
- 日历组件自己写，不引入日历库（保持轻量）

请先实现星星奖励和徽章系统，日历组件下一轮再做。

🔑 Prompt 技巧 #9：明确说"不引入 X 库"
AI 特别喜欢引入第三方库来解决问题——日历用 v-calendar，动画用 anime.js，这在生产项目中可能合理，但在学习阶段和轻量 MVP 中会增加不必要的复杂度。
主动约束 AI 的解决方案空间，让它用原生方式实现。这也是你作为开发者的判断力——AI 倾向于"堆库"，你要说"不"。

5.4 每一轮 Chat 的标准流程

┌────────────────────────────────────────────┐
│              每一轮 Chat 对话流程              │
│                                              │
│  1. 描述需求（引用上下文文件）                   │
│        ↓                                      │
│  2. AI 生成代码                                │
│        ↓                                      │
│  3. 你在浏览器中运行和检查                       │
│        ↓                                      │
│  4. 发现问题？→ 继续对话给出具体修改意见           │
│        ↓                                      │
│  5. 满意？→ 保存代码，进入下一个功能               │
│                                              │
│  ⚠️ 关键：每轮只做一个功能点                     │
│  ⚠️ 关键：每轮结束时在浏览器验证                  │
│  ⚠️ 关键：满意后立即 git commit                  │
└────────────────────────────────────────────┘

第六章 · Step 5：版本控制——你的安全网

6.1 为什么 Git 在 vibe coding 中更加重要

传统开发中，你自己写的代码通常不会突然崩溃。但在 vibe coding 中，AI 的一次修改可能意外破坏之前正常运行的功能。

原则：每完成一个可运行的功能点，立即 commit。

bash

# 骨架搭好
git add .
git commit -m "feat: 项目骨架 - 路由、页面框架、公共组件"

# 学习页课程流程完成
git add .
git commit -m "feat: 学习页 - 课程展示和跟读流程（mock 语音）"

# 语音接入完成
git add .
git commit -m "feat: 接入 Web Speech API 语音识别和合成"

# 激励系统完成
git add .
git commit -m "feat: 星星奖励 + 徽章系统"

6.2 当 AI 改崩了的时候

这种情况一定会发生。你让 AI 改一个按钮样式，它顺便重构了整个页面，然后页面挂了。

处理方式：

bash

# 方案 1：撤销这次 AI 的所有修改
git checkout .

# 方案 2：只撤销某个文件
git checkout src/views/learn-page.vue

# 方案 3：用 Trae 的内置撤销
Trae 的 Chat 面板中每次 AI 修改都有 "Undo" 按钮，点击即可回退

然后重新给 AI 一个更精确的 prompt，明确说"只修改 X，不要动其他文件"。

🔑 Prompt 技巧 #10：限制 AI 的修改范围
请只修改 src/components/star-button.vue 的样式部分。
不要修改 template 结构。
不要修改任何其他文件。
1
2
3
AI 天然倾向于"多做一点"，你必须主动约束它。

第七章 · Step 6：处理复杂功能——AI 伙伴对话

7.1 这是最考验 vibe coding 的地方

AI 对话功能涉及：前端录音 → 发送到后端 → AI 理解并回复 → 前端播放回复语音。链路长、涉及前后端、有多种失败情况。

策略：分三层实现，每层验证通过再做下一层。

7.2 第一层：纯前端 Mock 版

我要实现 AI 伙伴「星星」的对话功能。先做纯前端 mock 版本。

@src/views/learn-page.vue

## 目标
- 在学习页底部显示对话气泡区域
- 星星说的话显示在左侧（带星星头像 emoji）
- 孩子的跟读内容显示在右侧
- 每个教学步骤，星星说预设的话：
  - 展示阶段："这是 {word}！{中文翻译}！跟我一起说：{word}~"
  - 成功反馈：随机从 ["太棒了！🌟", "你说得真好！", "好厉害呀！"] 中选一个
  - 失败鼓励：随机从 ["没关系，再来一次~", "你可以的！再试试~"] 中选一个
  - 课程完成："今天学了 {n} 个单词，你真的太棒了！明天见哦~"

## 技术实现
- 对话数据结构：{ role: 'star' | 'child', text: string, timestamp: number }
- 对话列表自动滚动到底部
- 新消息出现时有淡入动画
- 星星的消息有「逐字显示」效果（打字机，每字 50ms）

先不接后端，所有回复从预设文案中选取。

7.3 第二层：接入后端 AI 对话

当 mock 版验证通过后：

Mock 版本已经跑通了，现在要接入真实的 AI 对话后端。

## 后端需求（Python FastAPI）

请创建 backend/ 目录，实现以下 API：

### POST /api/chat
请求：
{
  "child_name": "小明",
  "current_word": "apple",
  "child_said": "aple",         // 语音识别结果
  "context": "learning_new"     // learning_new | review | encouragement
}

响应：
{
  "message": "差一点点！apple，a-p-p-l-e，再说一次~",
  "emotion": "encouraging",     // encouraging | celebrating | teaching
  "stars_earned": 0
}

### AI Prompt 设计
System prompt 要定义星星的人设：
- 你是「星星」，一个温柔耐心的英语老师
- 你在教一个 {age} 岁的中国小朋友学英语
- 用中文交流，教英语单词时自然地插入英文
- 永远不要批评孩子，只用正面鼓励
- 回复要简短（不超过 30 个字），因为目标用户是小朋友
- 如果孩子说对了，热情表扬
- 如果说错了或沉默了，温柔地示范正确发音并鼓励再试

### 技术要求
- 用 FastAPI，最简安装
- AI 调用用 anthropic Python SDK 调 Claude API
- API key 从环境变量读取
- 超时处理：AI 回复超过 3 秒则返回预设鼓励语
- 先写一个可运行的最简版本

### 前端对接
- 前端用 fetch 调用后端 API
- 加 loading 状态：星星的对话气泡显示"..."打点动画
- 后端报错时降级为预设文案（不能让孩子看到报错页面）

@src/composables/useChat.ts
@src/views/learn-page.vue

🔑 Prompt 技巧 #11：前后端一起描述，但标注清楚
用 ## 后端需求 和 ## 前端对接 分开描述。 AI 能同时理解前后端，但你需要帮它组织信息。
特别注意 降级策略：后端报错时降级为预设文案。这种防御性设计 AI 不会主动想到，你必须提出来。

7.4 第三层：优化体验

AI 对话功能已经跑通了，现在优化体验：

1. 对话响应速度优化
   - 前端在发送请求的同时，先显示一个预设的过渡语
     如 "嗯~让我想想..."（随机选取）
   - 后端回复到达后替换为真实回复

2. 语音播放星星的回复
   - 星星的每条消息，除了文字显示，还要语音播放
   - 用 Web Speech API 的 TTS 朗读中文部分
   - 英文单词部分用较慢的语速单独朗读
   - 播放时麦克风按钮禁用（防止录到 TTS 的声音）

3. 网络断开处理
   - 检测 navigator.onLine
   - 离线时完全使用预设文案模式
   - 网络恢复时自动切回 AI 模式
   - 切换时不要让孩子感知到差异

请分别修改对应文件。

第八章 · 核心 Prompt 技巧总结

经过以上实战，把所有 prompt 技巧汇总如下。这些技巧在任何 AI 编码工具中都通用。

8.1 需求描述类

技巧	要点	示例
结构化 prompt	用标题和列表组织需求	`## 需求` `## 技术要求` `## 注意事项`
用数值不用形容词	明确尺寸、时间、数量	"56px" 而非 "大一些"；"0.8 语速" 而非 "慢一点"
给参考对标	指明你想要的效果像什么	"动画类似 iOS 弹窗的 spring 效果"
明确不要什么	排除不想要的方案	"不用 Tailwind" "不引入日历库"

8.2 流程控制类

技巧	要点	示例
分层实现	先 mock 后真实，先核心后优化	"先不实现语音，用 mock 函数代替"
一次一件事	每轮 prompt 只处理一个功能	不要在一个 prompt 里同时做 UI + API + 动画
引用上下文	用 @ 指定 AI 需要看的文件	`@src/views/learn-page.vue`
限制修改范围	防止 AI 改动不相关文件	"只修改这个文件的 CSS，不要动 template"

8.3 代码质量类

技巧	要点	示例
要求拆分模块	防止巨大组件	"抽取为 composable" "拆分为子组件"
要求错误处理	AI 常省略 try/catch	"所有 API 调用包裹在 try/catch 中"
要求降级方案	关键功能要有兜底	"后端超时则使用预设文案"
要求类型定义	TypeScript 项目必须	"用 TypeScript 定义课程数据结构"

8.4 你应该自己做的事（不要交给 AI）

场景	原因
代码审查	AI 生成的代码可能有隐性 bug，你要逐行扫一遍
架构决策	用什么技术方案、怎么拆分模块，这是你的判断
安全相关代码	密码验证、API Key 处理、数据脱敏
删除调试代码	AI 喜欢留 console.log，你要清理
性能优化	AI 不知道你的真实使用场景，你知道

第九章 · 完整项目推进节奏

9.1 推荐时间线

以下是用 Trae 完成这个项目的建议节奏（假设每天投入 2-3 小时）：

Day 1 ─ 准备阶段
├── 安装 Trae，熟悉界面（30 分钟）
├── 写 PRD（AI 辅助 + 人工审查）（60 分钟）
└── 创建项目规则文件 CLAUDE.md（30 分钟）

Day 2 ─ 骨架搭建
├── Builder Mode 生成项目骨架（15 分钟）
├── 审查和修正生成的代码（45 分钟）
├── 调整全局样式和动画（60 分钟）
└── git commit: "项目骨架"

Day 3 ─ 学习页核心流程
├── Chat 模式实现课程展示 + 跟读流程（mock 版）（90 分钟）
├── 审查和调优 UI 细节（30 分钟）
└── git commit: "学习页课程流程（mock）"

Day 4 ─ 语音能力接入
├── 实现 Web Speech API 语音合成（45 分钟）
├── 实现 Web Speech API 语音识别（45 分钟）
├── 处理兼容性和权限问题（30 分钟）
└── git commit: "语音识别和合成"

Day 5 ─ 激励系统
├── 星星奖励 + 动画（60 分钟）
├── 徽章系统（60 分钟）
└── git commit: "激励系统"

Day 6 ─ AI 对话（可选，需要后端）
├── 搭建 Python FastAPI 后端（45 分钟）
├── 实现 AI 对话 API（45 分钟）
├── 前端对接 + 降级处理（30 分钟）
└── git commit: "AI 对话后端"

Day 7 ─ 打磨和完善
├── 家长页面实现（60 分钟）
├── 全局动画和过渡优化（30 分钟）
├── 在真实手机上测试（30 分钟）
└── git commit: "v0.1 完成"

9.2 每天结束时的自检

markdown

□ 今天新增的功能在浏览器中可正常运行
□ 没有遗留的 console.log 和 TODO
□ 新增代码遵守了 CLAUDE.md 的规范
□ 已 git commit 并写了有意义的 commit message
□ 记录了今天使用 AI 的心得（哪些 prompt 有效、哪些无效）

第十章 · 常见踩坑与解决方案

10.1 AI 总是"多做"

现象：你让它改一个按钮，它重写了整个页面。

解决：在 prompt 末尾加约束——

仅修改 StarButton 组件的 hover 效果。
请勿修改任何其他组件或文件。
如果你认为需要修改其他地方，先告诉我原因，不要直接改。

10.2 AI 生成的代码跑不起来

现象：import 路径错误、缺少依赖、语法错误。

解决：直接把报错信息粘贴给 AI——

运行 npm run dev 后控制台报以下错误：

[报错信息粘贴在这里]

请修复。不要重构代码，只修复这个报错。

10.3 AI 的 CSS 在手机上显示异常

现象：电脑上好好的，手机上布局错乱。

解决：

这个页面在 iPhone 14 Pro（390x844）上显示异常：
- 底部按钮被安全区域遮挡
- 图片超出屏幕宽度
- 字体在手机上太小

请修复以上问题，并确保使用了：
- safe-area-inset-bottom 处理底部安全区
- max-width: 100% 防止图片溢出
- 最小字号 14px

10.4 AI "失忆"——不记得之前的约定

现象：对话长了之后，AI 开始违反编码规范。

解决：这是所有 AI 工具的通病，上下文窗口有限。两个应对策略：

开新对话 + 引用规则文件：

请阅读 @CLAUDE.md 了解项目规范。
我接下来要继续开发 xxx 功能。
当前进度：[简要描述]

把关键上下文放在 prompt 开头：

## 上下文回顾
- 技术栈：Vue 3 + Vite + TS，规范见 CLAUDE.md
- 当前在做：学习页的语音识别功能
- 已完成：课程展示、跟读 UI、TTS 播放
- 正在做：STT 识别 + 匹配逻辑

## 本次任务
...

10.5 不知道 AI 生成的代码好不好

判断标准：

好代码 ✅                           坏代码 ❌
─────────                           ─────────
组件小于 200 行                      单文件超过 500 行
函数名能读懂意图                      a, b, c, temp 变量满天飞
有 TypeScript 类型                   全是 any
有错误处理                           只写了 happy path
样式用 CSS Variables                 硬编码颜色值散落各处
逻辑抽取为 composable                所有逻辑挤在一个组件里

第十一章 · 工具对比：同一个任务在不同工具中怎么做

以"实现麦克风按钮组件"为例，展示 4 种工具的差异：

Trae

在 Chat 面板中：

我需要一个 MicButton 组件：
- 圆形大按钮（64px），居中在页面底部
- 默认状态：蓝色麦克风图标
- 按下状态：红色 + 脉冲动画 + 显示"正在听..."
- 录音中：有声波动画效果
- 请创建 @src/components/common/mic-button.vue

[AI 生成代码，你在编辑器里看到变化，点 Accept 确认]

优势：免费，界面友好，Builder Mode 适合从零开始。劣势：速度略慢于 Cursor，大项目上下文不如 Claude Code 好。

Cursor

按 Cmd+K（行内编辑）或打开 Composer：

创建 src/components/common/mic-button.vue
圆形 64px，蓝色默认/红色按下+脉冲动画
录音时显示声波效果
用 CSS animation 实现所有动画

[AI 直接在编辑器里写代码，你能看到 diff 对比，点 Accept]

优势：Tab 补全极快，编辑器内 diff 视图直观，适合精细调整。劣势：$20/月，Agent 模式烧 token 快。

Claude Code

在终端中：

claude "在 src/components/common/ 下创建 mic-button.vue 组件。
圆形64px按钮，按住录音松开停止。
默认蓝色麦克风图标，按下红色+脉冲动画+声波效果。
参考 CLAUDE.md 的设计规范。"

[Claude Code 直接创建文件、写代码、甚至可能自己运行 lint 检查]

优势：自主性最强，多文件操作能力最佳，适合大任务。劣势：无 Tab 补全，不直观（需要来回切终端和编辑器），有使用量上限。

VS Code + Cline

在 Cline 面板中：

创建 MicButton 组件：
- 路径：src/components/common/mic-button.vue
- 圆形 64px，默认蓝/按下红
- 按下脉冲动画 + 声波效果
- 遵循 .clinerules 规范

[Cline 分步执行，每一步需要你点 Approve：
 1. 创建文件 → Approve
 2. 写入代码 → Approve
 3. 可能运行 lint → Approve]

优势：开源免费，控制最精细（每步确认），支持各种模型。劣势：速度最慢（需要逐步审批），体验不如 Cursor 流畅。

第十二章 · 进阶：从"能用"到"好用"

当你完成了基础项目，你已经掌握了 vibe coding 的核心流程。接下来可以探索的进阶方向：

12.1 学会用 MCP（Model Context Protocol）

MCP 让 AI 工具能连接外部服务。比如：

连接 Figma，让 AI 直接读取设计稿生成代码
连接数据库，让 AI 直接查询数据调试问题
连接浏览器，让 AI 自己打开页面检查效果

Trae、Cursor、Claude Code 都支持 MCP。

12.2 学会写多 Agent 工作流

Claude Code 支持 SubAgent——你可以创建一个专门做 code review 的 Agent，一个专门写测试的 Agent，一个专门处理 CSS 的 Agent，形成自动化流水线。

12.3 学会 Spec-Driven Development

比 PRD 更进一步——把产品需求写成可执行的技术规格（Spec），AI 根据 Spec 自动生成代码和测试。这是 2026 年 AI 辅助开发的前沿方向。

附录 A · 本项目 Prompt 模板速查

markdown

## 模板 1：创建新组件
请在 {路径} 创建 {组件名} 组件：
- 功能：{做什么}
- 视觉：{长什么样，给具体数值}
- 交互：{怎么操作}
- 技术要求：{用什么不用什么}
请遵循 CLAUDE.md 的编码规范。

## 模板 2：修复问题
以下是运行时的报错信息：
{粘贴报错}
请修复这个问题。
只修改相关文件，不要重构其他代码。

## 模板 3：优化现有功能
@{文件路径}
这个组件需要以下优化：
1. {问题1}：{期望效果}
2. {问题2}：{期望效果}
不要改变现有功能逻辑，只做以上优化。

## 模板 4：接入新 API
我需要对接以下 API：
请求：{方法} {URL} {参数}
响应：{数据结构}
请在 {路径} 创建 API 调用函数，并在 {组件} 中使用。
要求：有 loading 状态、错误处理、超时处理。

附录 B · 推荐学习资源

资源	说明	链接
Trae 官方文档	工具本身的使用指南	trae.ai/docs
SitePoint Vibe Coding 2026	面向中级开发者的系统指南	sitepoint.com
vibecoding.app	Prompt 技巧和工具对比	vibecoding.app
Anthropic Prompt Engineering	Claude prompt 技巧（通用）	docs.claude.com
Arno Vibe Coding BP	一位开发者总结的最佳实践	arno.surfacew.com

最后一句话：Vibe coding 不是让 AI 替你写代码，是让你用自然语言指挥代码的诞生。你仍然是那个做决策、把关质量、对结果负责的人。 AI 只是让你从"一行一行敲"变成了"一段一段审"。你的前端基础不会浪费——它正是让你比非程序员用好 AI 的关键优势。

前端开发者 Vibe Coding 实战教程 ​

写在前面：这份教程是什么？ ​

第一章 · 环境准备与工具认知 ​

1.1 安装 Trae ​

1.2 Trae 的两种工作模式 ​

1.3 其他工具的对应关系 ​

第二章 · Step 1：写 PRD（不是写代码！） ​

2.1 为什么第一步不是打开编辑器 ​

2.2 PRD 核心要素清单 ​

2.3 实战：用 AI 帮你写 PRD ​

2.4 审查 AI 输出的 PRD ​

2.5 最终产出 ​

第三章 · Step 2：创建项目规则文件 ​

3.1 什么是项目规则文件 ​

3.2 实战：编写项目规则 ​

3.3 为什么这一步如此重要 ​

第四章 · Step 3：用 Builder Mode 生成项目骨架 ​

4.1 这一步的目标 ​

4.2 实战：在 Trae 中使用 Builder Mode ​

4.3 Builder Mode 的工作过程 ​

4.4 同样的操作在其他工具中怎么做 ​

4.5 审查生成的代码 ​

第五章 · Step 4：用 Chat 模式逐个打磨功能 ​

5.1 切换思维：从"广度"到"深度" ​

5.2 实战功能 A：学习页的课程流程 ​

第 1 轮：先描述整体流程 ​

第 2 轮：看到代码后，给出精确修改 ​

第 3 轮：接入真实的语音能力 ​

5.3 实战功能 B：激励系统 ​

5.4 每一轮 Chat 的标准流程 ​

第六章 · Step 5：版本控制——你的安全网 ​

6.1 为什么 Git 在 vibe coding 中更加重要 ​

6.2 当 AI 改崩了的时候 ​

第七章 · Step 6：处理复杂功能——AI 伙伴对话 ​

7.1 这是最考验 vibe coding 的地方 ​

7.2 第一层：纯前端 Mock 版 ​

7.3 第二层：接入后端 AI 对话 ​

7.4 第三层：优化体验 ​

第八章 · 核心 Prompt 技巧总结 ​

8.1 需求描述类 ​

8.2 流程控制类 ​

8.3 代码质量类 ​

8.4 你应该自己做的事（不要交给 AI） ​

第九章 · 完整项目推进节奏 ​

9.1 推荐时间线 ​

9.2 每天结束时的自检 ​

第十章 · 常见踩坑与解决方案 ​

10.1 AI 总是"多做" ​

10.2 AI 生成的代码跑不起来 ​

10.3 AI 的 CSS 在手机上显示异常 ​

10.4 AI "失忆"——不记得之前的约定 ​

10.5 不知道 AI 生成的代码好不好 ​

第十一章 · 工具对比：同一个任务在不同工具中怎么做 ​

Trae ​

Cursor ​

Claude Code ​

VS Code + Cline ​

第十二章 · 进阶：从"能用"到"好用" ​

12.1 学会用 MCP（Model Context Protocol） ​

12.2 学会写多 Agent 工作流 ​

12.3 学会 Spec-Driven Development ​

附录 A · 本项目 Prompt 模板速查 ​

附录 B · 推荐学习资源 ​

前端开发者 Vibe Coding 实战教程

写在前面：这份教程是什么？

第一章 · 环境准备与工具认知

1.1 安装 Trae

1.2 Trae 的两种工作模式

1.3 其他工具的对应关系

第二章 · Step 1：写 PRD（不是写代码！）

2.1 为什么第一步不是打开编辑器

2.2 PRD 核心要素清单

2.3 实战：用 AI 帮你写 PRD

2.4 审查 AI 输出的 PRD

2.5 最终产出

第三章 · Step 2：创建项目规则文件

3.1 什么是项目规则文件

3.2 实战：编写项目规则

3.3 为什么这一步如此重要

第四章 · Step 3：用 Builder Mode 生成项目骨架

4.1 这一步的目标

4.2 实战：在 Trae 中使用 Builder Mode

4.3 Builder Mode 的工作过程

4.4 同样的操作在其他工具中怎么做

4.5 审查生成的代码

第五章 · Step 4：用 Chat 模式逐个打磨功能

5.1 切换思维：从"广度"到"深度"

5.2 实战功能 A：学习页的课程流程

第 1 轮：先描述整体流程

第 2 轮：看到代码后，给出精确修改

第 3 轮：接入真实的语音能力

5.3 实战功能 B：激励系统

5.4 每一轮 Chat 的标准流程

第六章 · Step 5：版本控制——你的安全网

6.1 为什么 Git 在 vibe coding 中更加重要

6.2 当 AI 改崩了的时候

第七章 · Step 6：处理复杂功能——AI 伙伴对话

7.1 这是最考验 vibe coding 的地方

7.2 第一层：纯前端 Mock 版

7.3 第二层：接入后端 AI 对话

7.4 第三层：优化体验

第八章 · 核心 Prompt 技巧总结

8.1 需求描述类

8.2 流程控制类

8.3 代码质量类

8.4 你应该自己做的事（不要交给 AI）

第九章 · 完整项目推进节奏

9.1 推荐时间线

9.2 每天结束时的自检

第十章 · 常见踩坑与解决方案

10.1 AI 总是"多做"

10.2 AI 生成的代码跑不起来

10.3 AI 的 CSS 在手机上显示异常

10.4 AI "失忆"——不记得之前的约定

10.5 不知道 AI 生成的代码好不好

第十一章 · 工具对比：同一个任务在不同工具中怎么做

Trae

Cursor

Claude Code

VS Code + Cline

第十二章 · 进阶：从"能用"到"好用"

12.1 学会用 MCP（Model Context Protocol）

12.2 学会写多 Agent 工作流

12.3 学会 Spec-Driven Development

附录 A · 本项目 Prompt 模板速查

附录 B · 推荐学习资源