在AI时代开发者最常做的事情就是“造轮子”——尤其是造聊天机器在如今这个大模型技术日新月异的时代市面上的AI聊天工具层出不穷。然而对于很多开发者或深度用户来说往往面临着这样一个痛点手里有多个大模型供应商的API密钥比如国内的各家大模型或者海外的各类接口每次测试不同模型的效果时都需要频繁切换不同的网页或客户端体验极其割裂。为了解决这个痛点我决定自己动手从零开始打造一款面向普通用户的“多模型聚合聊天工具”。与传统的从零手敲每一行代码不同这次我采取了当前最前沿的开发模式——让AI写AI。我以Claude Code作为我的“主程序员”以蓝耘MaaS平台提供的GLM-5.1模型作为其背后的“最强大脑”通过极其严谨的版本迭代和提示词工程一步步将这个工具从核心骨架打磨成了具备商业化潜力的完整产品。以下是整个项目从无到有、从粗糙到精致的完整复盘。一、 巧借东风底层模型与Claude Code的环境打通在让AI帮我写代码之前首先需要解决的是“外脑”的配置问题。Claude Code官方默认调用的是Anthropic的原生接口但在国内网络环境下直接调用的体验并不稳定。因此我选择将其底层请求无缝转发到国内优秀的蓝耘MaaS平台上调用其支持的GLM-5.1模型。选择对应的模型配置过程非常极客且简洁只需在项目根目录下找到或新建一个.claude文件夹在其中创建一个settings.json文件。在文件中我们需要将ANTHROPIC_BASE_URL指向蓝耘的转发地址填入我们在蓝耘官方获取的密钥并且将ANTHROPIC_DEFAULT_HAIKU_MODEL、SONNET和OPUS这三个模型端点统一映射为/maas/zhipuai/GLM-5.1。此外为了防止在生成复杂长代码时发生超时断连我特意将API_TIMEOUT_MS设置了一个极大的值3000000毫秒并开启了禁用非必要流量的选项以提升纯净度。{ env: { ANTHROPIC_AUTH_TOKEN: 你的密钥, ANTHROPIC_BASE_URL: https://maas-api.lanyun.net/anthropic, API_TIMEOUT_MS: 3000000, CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: 1, ANTHROPIC_DEFAULT_HAIKU_MODEL: /maas/zhipuai/GLM-5.1, ANTHROPIC_DEFAULT_SONNET_MODEL: /maas/zhipuai/GLM-5.1, ANTHROPIC_DEFAULT_OPUS_MODEL: /maas/zhipuai/GLM-5.1 } }保存后在CMD终端输入claude得到智能回复这意味着我的“专属开发团队”已经正式就位。二、 夯实地基V1版本的核心架构设计任何软件的第一版最重要的原则就是“跑通核心链路不求完美但求能用”。在V1版本中我给Claude下达了明确的架构指令首先是后端设计拒绝复杂的路由只保留一个统一的OpenAI兼容接口/v1/chat/completions。这个后端就像一个“智能邮局”只负责接收前端请求并原样转发给用户配置的第三方供应商。前端方面参考了ChatGPT的经典布局核心实现了“多供应商动态配置”用户可随意填入名称、Base URL和Key、“多模型下拉选择”、“流式打字机输出”以及基础的“对话历史记录”。最后为了保证部署的极简性我要求其提供了一套docker-compose.yml实现了真正意义上的“暴露端口即可一键运行”。这一步确立了整个项目高内聚低耦合的基调。三、 体验跃迁V2版本的基础打磨与杀手锏功能当基础骨架能够对话后V2版本开始聚焦于“可用性”与“差异化”。第一步补齐体验底线对于一个代码聊天工具来说没有代码高亮是绝对不能忍的。我要求引入Markdown渲染库并在代码块右上角加上“一键复制”按钮这直击程序员的痛点。同时加入了“停止生成”按钮底层调用前端的AbortController来强行中断流式请求和AI回复底部的“重新生成”按钮把对话的控制权彻底交还给用户。输入框的逻辑也规范为Enter发送、ShiftEnter换行符合主流肌肉记忆。第二步则是赋予这个工具真正的“灵魂”——同屏双栏模型对比这是市面上绝大多数免费工具都不具备的杀手级功能。我要求在新建对话时加入“对比模式”开关。一旦开启前端聊天区从单栏切分为左右两栏。当用户发送一条提示词时前端会同时向后端发起两个并发的流式请求分别对应设置中选定的模型A和模型B。两路数据流独立返回、互不干扰在左右两栏同时呈现出打字机效果。这个功能的实用价值极高比如你想对比两个模型对同一段代码的优化能力或者对同一篇文案的润色水平一目了然再也不用切来切去。第三步我引入了Prompt模板库为了降低普通用户的使用门槛在左侧边栏增加了入口预设了包含标题、分类、System Prompt等结构的模板数据。用户只需点击即可自动新建对话并注入对应的系统提示词实现了“开箱即用”。四、 颜值即正义V3版本的UI视觉重塑功能再强大如果界面像上个世纪的软件也很难让人有使用的欲望。V3版本是一场彻头彻尾的“美颜手术”。在左侧导航栏我摒弃了纯文字引入了直观的图标加号代表新对话对话气泡代表消息库并为选中项增加了高亮反馈底部固定了设置入口。主聊天区域迎来了最大的改变历史消息列表改为了精致的卡片式设计能清晰展示对话标题和内容预览而在真正的对话区我运用了色彩心理学将用户的提问设定为清新的蓝色气泡而AI的回复则设定为护眼的绿色气泡同时统一增加了圆角与柔和的阴影彻底摆脱了干瘪的文本堆砌感。输入框也进行了升级支持了随内容自动伸缩的自适应高度预留了图片上传按钮的位置并将发送按钮改为了极具视觉冲击力的亮绿色搭配细腻的Hover悬浮效果。五、 锦上添花V4版本的微交互与模板库落地在UI大改之后V4版本我回归到了细节的极致打磨也就是所谓的“保姆级体验”。首先是模型记忆功能。每次新建对话都要重新选模型是非常反人类的。我利用前端的localStorage机制让系统默默记住用户上次使用的lastModel。新建对话时自动填充并在聊天界面顶部增加了一个轻量级的下拉菜单支持随时快速切换切换后静默保存做到了“无感记忆”。其次是对之前提到的“对比模式”开关进行了微交互重塑。原本普通的勾选框被替换成了更具现代感的Toggle Switch组件旁边贴心地加上了“对比模式已开启/已关闭”的状态文字提示。在左右分栏之间我加入了明确的视觉分隔线并且利用CSS实现了开关状态变化时聊天区域布局的平滑过渡动画让界面的变化如丝般顺滑。最后是对模板库的内容进行了实质性填充。我精心挑选了五个覆盖职场与学习高频场景的模板小红书爆款文案文案写作类、英文邮件润色翻译润色类、代码审查助手编程辅助类、周报生成器工作辅助类以及学习笔记整理学习辅助类。不仅如此模板库的界面也迎来了升级支持按照分类进行模块化展示每个模板提供预览加入了便捷的搜索功能点击后直接将占位符提示填充到输入框中形成了一个功能闭环。结语AI时代的新开发范式回顾这四个版本的迭代历程整个过程没有一行代码是我手敲的。作为开发者我的角色发生了根本性的转变——我不再是“搬砖的码农”而是成为了“产品经理”与“架构师”。我负责把控产品方向、拆解需求边界、制定交互标准而Claude Code依托蓝耘MaaS强大的GLM-5.1模型能力则负责将这些蓝图精准地转化为高质量的工程代码。这个案例生动地证明了在AI时代构建复杂应用的核心壁垒已经从“编码能力”转移到了“需求拆解能力”与“审美把控能力”。只要你能把想法描述得足够清晰、迭代得足够细腻哪怕是一个复杂的聚合聊天工具也能在极短的时间内从概念走向现实。这或许就是未来几年软件开发的最优解。