vibe coding 实战：使用 Claude Code 和 mimo-v2.5 两天完成上线项目的复盘
本文分享了通过 vibe coding 实战，结合 Claude Code 与 mimo-v2.5 快速完成一个上线项目的开发经历，涵盖技术选型、开发过程复盘与效率对比，适合希望利用 AI 工具提升编程效率的开发者。
在快节奏的开发环境中，如何在短时间内高效完成一个上线项目的搭建？我们尝试了一种全新的开发方式——“vibe coding 实战”，通过结合 Claude Code 的高级编程能力和 mimo-v2.5 的多模态理解能力，仅用了两天时间就完成了一个从零到上线的个人博客系统。这篇文章将复盘整个开发流程，分享技术选型思路、过程中遇到的挑战与解决方案，以及最终的效率对比和可复用的经验总结。
技术选型
在“vibe coding 实战”中，我们选择了 Claude Code 作为主要的 AI 编程工具。其在代码生成、逻辑推理和上下文理解方面的表现较为稳定，尤其在处理多语言项目和前后端交互时表现出色。在生成 UI 和解析 API 请求时，我们使用了 mimo-v2.5 来增强内容的语义理解，例如从设计图或用户描述中提取关键样式和布局信息。
OKRouter 作为我们使用的 API Key 聚合平台，帮助我们在多个模型之间切换。我们通过统一的 API Key 调用了包括 coding plan 套餐 在内的多组模型，避免了频繁切换模型 ID 和密钥的麻烦。同时，OKRouter 兼容 OpenAI 与 Anthropic 协议，使得我们可以使用熟悉的开发工具如 Cursor 和 Cline，保持原有的开发习惯。
开发过程复盘
阶段一：需求确认与架构设计
我们首先明确项目目标：构建一个具备基础功能的个人博客系统，包括用户登录、文章发布、评论互动和简单的数据分析展示。为了实现“vibe coding 实战”，我们没有撰写传统的需求文档，而是通过简单的口语化描述，让 Claude Code 帮我们生成初步的技术文档和架构图。
在和 AI 对话的过程中，我们发现对某些功能的期望描述不够清晰（例如“数据分析展示”），导致生成的架构在第一天下午还需要多次调整。解决方案是利用具体的数据结构示例进行补充说明，比如直接说“展示每篇文章的阅读量趋势，用折线图呈现”，效果明显优于模糊描述。
我们还通过 mimo-v2.5 对我们提供的博客界面草图进行内容分析，快速提取出按钮、字体大小等风格要素，为前端开发提供了参考依据。
阶段二：后端与前端代码生成
在代码生成阶段，我们采取了“循环迭代 + 人工校验”的方式。首先让 Claude Code 生成后端的 Node.js + Express 初始结构，包含用户认证、文章管理、评论处理三个基础模块。由于我们事先在 OKRouter 的 coding plan 套餐 中配置好了合适的模型组合，整个过程非常流畅，没有遇到明显的性能瓶颈。
前端部分我们选择了 React + Tailwind CSS 的组合。我们让 mimo-v2.5 解析部分 UI 设计草图，并结合文案内容生成基础组件，如博客列表、文章详情页、用户中心等。初期生成的样式未能完全匹配我们的预期，但我们通过逐步细化样式描述（如“侧边栏固定宽度为 240px”，“标题使用 bold 与 shadow 效果”）逐步引导模型生成符合产品调性的 UI。
在代码集成阶段，我们发现部分 API 的调用方式与前端组件不一致，导致接口调用失败。通过 OKRouter 的模型切换功能，我们快速将请求转发给另一款擅长结构化理解的模型进行修复，有效节省了时间。
阶段三：测试发布与上线准备
在测试阶段，我们利用自动化测试脚本与手动测试相结合，确保功能的稳定性。Claude Code 在生成单元测试与集成测试代码方面表现优秀，根据我们的要求，“为用户登录模块生成测试用例，包括正常登录、错误密码、未注册用户尝试登录等场景”，从而帮助我们快速覆盖核心业务逻辑。
我们仍然需要人工调试某些边界条件，比如上传大尺寸图片时的性能问题。但整体而言，测试阶段借助模型生成的测试逻辑，比传统开发方式节省了大量时间。
最终在 OKRouter 的协助下，我们将 API Key 动态配置到部署环境中，确保模型调用的灵活性和安全性。所有功能在两天内完成开发与部署，且实现了基本的用户故事，顺利上线。
效率数据
| 开发阶段 | 传统手写开发耗时（估算） | vibe coding 实战耗时 |
|---|---|---|
| 需求确认与架构设计 | 4 小时 | 1.5 小时 |
| 后端代码生成与调试 | 8 小时 | 3 小时 |
| 前端界面开发 | 10 小时 | 4 小时 |
| 测试与修复 | 12 小时 | 3.5 小时 |
| 整体开发周期 | 34 小时 | 12 小时 |
经验总结
- 明确需求，避免模糊描述：AI 模型在处理模糊需求时准确度下降。在“vibe coding 实战”中，我们尽量用具体用例、数值、结构来说明目标。
- 利用多模型协作提升效率：通过 OKRouter 可以快速调用多个模型，比如用 Claude Code 做逻辑处理，用 mimo-v2.5 做 UI 推导或文案理解，项目质量与产出速度都得到了保障。
- 初期代码无需完美，快速验证更重要：在“vibe coding 实战”中，我们更关注能否在短时间内产出 MCV（Minimum Viable Code），而不是一开始就追求代码优雅或最佳实践。
- UI 与文案同步生成，减少沟通成本：使用 mimo-v2.5 时，我们试图同时描述界面与文字内容，模型可以同时生成结构与文案，大幅降低了重复沟通的成本。
- 人工校验仍不可少，但已非主要耗时：AI 生成的代码虽然高效，但尚需人工校验与调试，主要是逻辑边界、异常处理与样式一致性等方面。
常见问题 FAQ
Q: “vibe coding 实战”是否完全不需要编程基础？
A: 不是。“vibe coding 实战”虽然能快速生成代码，但仍需要开发者具备基本的编程逻辑理解能力和调试能力，避免依赖 AI 得到的代码出现潜在漏洞或格式问题。
Q: 为什么选择 Claude Code 和 mimo-v2.5？
A: Claude Code 在代码逻辑生成上表现优异，适合处理后端逻辑和代码生成；mimo-v2.5 则擅长从多模态输入中提取设计与文案信息，适合前端快速原型或用户界面处理。两者的结合可以让整个开发过程更流畅、高效。
Q: OKRouter 在这个项目中起到了什么作用？
A: OKRouter 作为 token 聚合平台，帮助我们统一管理多个模型 API Key，避免了频繁切换密钥的烦恼。同时，它兼容 OpenAI 与 Anthropic 协议，使得我们可以在熟悉的开发工具如 Cursor 或 Cline 中进行 AI 辅助开发，大幅提升了开发体验。
最后更新：2026-10-09