小米最近开源了 MiMo-V2.5-TTS 系列模型，限时免费。作为一个 AI 语音合成爱好者，我第一时间就想把它们整合到一个 Web 界面里，方便随时调用和演示。
传统开发流程：读文档 → 写接口 → 调样式 → 联调 → 改 bug → ……至少半天。
这次我用AI 编程辅助，把流程压缩成了3 个步骤，全程不到 10 分钟：
| 步骤 | 工具 | 耗时 |
|---|---|---|
| ① 整理 API 文档 | WorkBuddy | 2 分钟 |
| ② 生成 HTML 页面 | CodeBuddy | 5 分钟 |
| ③ 启动测试 | CodeBuddy | 1 分钟 |
一、准备工作
1.1 获取 API Key
前往 Xiaomi MiMo 开放平台 注册账号，在「API 管理」页面生成您的API Key。
⚠️ 注意：当前处于限时免费阶段，但需绑定支付方式（防止滥用），实际调用不扣费。
二、三大核心模型功能详解
| 模型名称 | 功能定位 | 输入 | 输出 |
|---|---|---|---|
| mimo-v2.5-tts | 基础语音合成 + 预置音色 + 风格控制 | 文本 + 风格指令 + 预置音色ID | 高质量语音（MP3/WAV） |
| mimo-v2.5-tts-voiceclone | 音色克隆 | 文本 + 参考音频（3~10秒） | 克隆音色的语音 |
| mimo-v2.5-tts-voicedesign | 文本描述生成音色 | 文本 + 音色文字描述（如“沙哑的摇滚大叔”） | 定制化音色的语音 |
三、三步快速搭建 Web 交互界面
步骤一：整理 API 参考文档
1.1 获取官方文档信息
打开 Xiaomi MiMo Home，找到 MiMo-V2.5-TTS 系列的 API 文档页面，复制文档信息。
将复制的文档信息粘贴到 WorkBuddy，输入指令：
整理以上 MiMo-V2.5-TTS API 信息，生成一份结构清晰的 API.md 文档
WorkBuddy 输出结果：一份完整的MiMo-V2.5-TTS-API参考文档.md，包含所有必要的调用参数和示例代码，方便后续生成代码时快速查阅。
步骤二：CodeBuddy 生成 HTML 交互页面
2.1 输入 Prompt
打开CodeBuddy AI 编程，将步骤一生成的 API.md 内容作为上下文，输入以下需求：
text
结合上面这份 API 文档，生成一份完整的 HTML 页面，要求： 1. 集成以下四个核心功能： ✅ mimo-v2.5-tts-voiceclone —— 声音克隆（支持上传参考音频） ✅ 预置音色与音色设计 —— 下拉选择或手动输入音色 ID ✅ mimo-v2.5-tts-voicedesign —— 通过文本描述定制音色 ✅ mimo-v2.5-tts 唱歌模式 —— 开关控制 2. 交互要求： - 模型切换时，UI 动态显示对应的参数区域 - 唱歌模式用开关切换 - 一键生成，返回音频后自动播放 3. 技术要求： - 纯前端 HTML + CSS + JavaScript - 使用 /chat/completions 端点 - 现代化 UI（毛玻璃效果、渐变背景）
3.1 启动本地服务
将 CodeBuddy 生成的 HTML 代码保存为mimo_tts_studio.html，启动 HTTP 服务：
npx --yes serve -l 3456 -s .3.2 功能测试清单
| 测试项 | 操作 | 预期结果 |
|---|---|---|
| ✅ 基础 TTS | 选择模型、输入音色ID、填写文本 | 返回对应音色的语音 |
| ✅ 音色克隆 | 切换克隆模式、上传3~10秒音频 | 返回克隆音色的语音 |
| ✅ 音色设计 | 切换设计模式、输入"沙哑大叔音" | 返回定制音色的语音 |
| ✅ 唱歌模式 | 开启开关、输入歌词（带空格） | 返回带旋律的歌声 |
如果你也在用 AI 编程工具做类似项目，欢迎在评论区交流！觉得有用的话，点赞 + 收藏 + 关注支持一下～
心得体会
文档整理是关键：API 文档越结构化，生成的代码越精准。WorkBuddy 帮我节省了手动整理的时间。
Prompt 要具体：在 CodeBuddy 中明确列出所有功能点（克隆、设计、唱歌），生成的页面一次到位。
动态 UI 很重要：模型切换时动态显示不同参数区域，AI 直接帮我处理好了这个交互逻辑。
限时免费要抓紧：目前 MiMo 全系列免费，感兴趣的赶紧体验。
