02 实战预热

10分钟完成1个AI小游戏

1. 打开Trae，创建项目
2. 在Trae输入框中，描述你的需求，如：

“复刻一个Google小恐龙游戏，把小恐龙改成小猫”

• Trae会拆分任务并进行开发

3. 在AI写代码的过程中，如果需要你确认某些操作，请按照提示执行。
4. 确认执行后，Trae会帮你打开Web，为你预览游戏界面。
5. 持续优化你的小游戏。 比如，我觉得画面还不够好看，可以继续对 AI 说：
6. 代码调整后，刷新游戏页面，就能看到游戏画面的调整

开发视频提取文字工具站

1. 需求分析
   1. 做自媒体或社媒公众号运营的小伙伴，经常需要从Youtube获取新的高质量视频，并对其中的观点和内容进行学习或二创。但提取视频的信息比较麻烦，大部分工具还是收费的，我们完全可以自己做一个
2. 竞品参考
   1. 我们可以找一个竞品作为参考，比如这个。它的设计和交互都很简单：输入框+提取按钮。点击提取按钮就显示视频的字幕列表
   
3. 技术方案设计
   1. 模块拆解：我们把整个工具拆解为2块
      1. 后端服务：爬取视频字幕列表
      2. 前端页面：实现 输入URL -> 解析 -> 结果展示的交互
   2. 技术方案
      1. 字幕抓取
         1. 我们可以找现成的封装好的API服务，比如：https://supadata.ai/youtube-transcript-api（这个API本身有100次免费调用的额度）
      2. 前端页面
         1. Next.js + TailwindCSS
4. 编程实现
   1. 明确需求后，我们可以跟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"]
   }

   展开完整代码
   2. 同时，我们同步准备对应的测试API
      1. 进入对应的链接，获取我们的测试API Key
      
   3. 接下来，我们复制一个Youtube视频链接
   4. 把API Key发给Trae，让它配置后，启动服务器。我们就完成了这样的一个项目
      1. 成果如下