小米最近开源了 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 编程工具做类似项目，欢迎在评论区交流！觉得有用的话，点赞 + 收藏 + 关注 支持一下～

心得体会

1. 文档整理是关键：API 文档越结构化，生成的代码越精准。WorkBuddy 帮我节省了手动整理的时间。

2. Prompt 要具体：在 CodeBuddy 中明确列出所有功能点（克隆、设计、唱歌），生成的页面一次到位。

3. 动态 UI 很重要：模型切换时动态显示不同参数区域，AI 直接帮我处理好了这个交互逻辑。

4. 限时免费要抓紧：目前 MiMo 全系列免费，感兴趣的赶紧体验。