入门实战案例二之开发网站

视频链接

【Claude Code 实战教程】从零开发声音克隆网站｜用Claude+Cursor实现AI语音克隆与TTS功能- 01网站搭建本期视频将带你用Claude Code和Cursor，从零开发一个能实现声音克隆和文字转语音的AI网站。教程涵盖项目规划、子代理并行开发、Fish Audio API使用、错误调试与本地部署，适合初学者快速掌握AI协同开发实战流程。https://www.bilibili.com/video/BV1wa8szYEoR

内容

1. 项目初始化
   • 创建项目文件夹 voice-clone，用 Cursor 打开。
   • 打开终端并运行 claude 启动 Claude 会话。
2. 核心文件
   • 新建 claude.md → 项目记忆规则
   • 新建 todo.md → 待办任务清单
3. 在 claude.md 设定两条规矩
   • 所有代办需写入 todo.md，完成后打勾。
   • 使用 Task 工具创建并行 子代理 提升开发效率。
4. 子代理概念
   • 多个独立上下文的 Claude 分身，可并行处理任务。
5. 获取 Fish Audio API 文档
   • /mcp 确认 context7 已连接。
   • 指令：使用context7 查询 Fish Audio 的API文档并保存到本地。
6. 项目目标与技术栈
   • 目标：实现 声音克隆 + 文本转语音 网站，本机部署。
   • 组合：前端框架 + 后端框架/语言 + 轻量数据库 SQLite。
7. 深度评估技术栈
   • 切换 计划模式，附 ultra think，让 Claude 评估合理性。
8. 精简功能范围
   • 将方案压缩到仅保留克隆与 TTS 两大核心功能。
9. 拆分待办任务并写入 todo.md
   • a. 安装依赖
   • b. 开发后端
   • c. 开发基础页面
10. 确保任务文件无乱码
    • 打断并纠正 Claude，保证列表正确保存。
11. 提醒启用并行子代理
    • 你可以使用task工具创建多个子代理…
12. 监控执行
    • 发现遗漏、未打勾或任务偏离 → 立即打断修正。
13. 完成开发后代码审查
    • 再次用 ultra think + 子代理交叉检查潜在问题。
14. 生成项目总结
    • 执行 /init，在 claude.md 生成结构说明。
15. 上下文管理
    • 看到 “剩余 16%” 提示 → /compact 或 clear 释放空间。
16. 版本快照
    • 指令：请把我当前修改的文件全部提交（Git commit）。
17. 配置环境变量并启动
    • 填写 FISH_AUDIO_API_KEY=… 等到 .env。
    • 运行启动命令 → 若报错复制日志给 Claude 解决。
18. 验证运行
    • 浏览器访问本地地址，核心模块正常；页面警告留待下节排错。