vibe-coding-课程-干货集训
02 实战预热
10分钟完成1个AI小游戏
- 打开Trae，创建项目
- 在Trae输入框中，描述你的需求，如：
“复刻一个Google小恐龙游戏，把小恐龙改成小猫”
- Trae会拆分任务并进行开发
- 在AI写代码的过程中，如果需要你确认某些操作，请按照提示执行。
- 确认执行后，Trae会帮你打开Web，为你预览游戏界面。
- 持续优化你的小游戏。 比如，我觉得画面还不够好看，可以继续对 AI 说：
- 代码调整后，刷新游戏页面，就能看到游戏画面的调整
开发视频提取文字工具站
- 需求分析
- 做自媒体或社媒公众号运营的小伙伴，经常需要从Youtube获取新的高质量视频，并对其中的观点和内容进行学习或二创。但提取视频的信息比较麻烦，大部分工具还是收费的，我们完全可以自己做一个
- 竞品参考
- 我们可以找一个竞品作为参考，比如这个。它的设计和交互都很简单：输入框+提取按钮。点击提取按钮就显示视频的字幕列表
- 技术方案设计
- 模块拆解：我们把整个工具拆解为2块 1. 后端服务：爬取视频字幕列表 2. 前端页面：实现 输入URL -> 解析 -> 结果展示的交互
- 技术方案
1. 字幕抓取
- 我们可以找现成的封装好的API服务，比如：https://supadata.ai/youtube-transcript-api（这个API本身有100次免费调用的额度） 2. 前端页面
- Next.js + TailwindCSS
- 编程实现
- 明确需求后，我们可以跟Trae描述需求
我要做一个YouTube视频字幕提取工具
**工具形式**：Web
**前端技术栈**：Next.js 14 (App Router)、Tailwind CSS
**交互**：输入URL → 点击「提取」→ 调用API → 返回字幕 → 前端展示
**UI风格**：Swiss Grid
**API来源**：Supadata YouTube Transcript API（https://supadata.ai/youtube-transcript-api）
**API调用方式**：
# 端点
GET https://api.supadata.ai/v1/transcript
# 请求头
x-api-key: YOUR_API_KEY
# 请求参数
- url: YouTube视频链接（必填）
- lang: 语言代码，如 en、zh（可选）
- text: 设为 true 返回纯文本，否则返回带时间戳的分段数据（可选）
# 请求示例
curl 'https://api.supadata.ai/v1/transcript?url=https://youtu.be/dQw4w9WgXcQ&text=true' \
-H 'x-api-key: YOUR_API_KEY'
# 响应示例（text=true 纯文本模式）
{
"content": "We're no strangers to love, you know the rules and so do I...",
"lang": "en",
"availableLangs": ["en", "es", "zh-TW"]
}
# 响应示例（带时间戳模式）
{
"content": [
{ "text": "[Music]", "offset": 0, "duration": 14650, "lang": "en" },
{ "text": "We're no strangers to", "offset": 18800, "duration": 1000, "lang": "en" }
],
"lang": "en",
"availableLangs": ["en", "es", "zh-TW"]
}
- 同时，我们同步准备对应的测试API 1. 进入对应的链接，获取我们的测试API Key
- 接下来，我们复制一个Youtube视频链接
- 把API Key发给Trae，让它配置后，启动服务器。我们就完成了这样的一个项目 1. 成果如下
