尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

多模型协作开发实战:AI辅助构建应用的成本控制与流程拆解

多模型协作开发实战:AI辅助构建应用的成本控制与流程拆解 看到“266美元、四个AI模型、一天做完一个平板上的AI小镇GLM-5.3 最后收尾”这个项目记录时我第一反应是不太相信。单独让一个模型连续写三小时应用往往会在某个环节卡住更别说四个模型换着来。但顺着这个思路自己复现了一遍我承认一点这种“多模型协作”的开发方式确实能在很短时间内把半成品拼成一个能跑的应用。关键不是模型数量而是任务拆得够细每个模型只负责一块并且每一步都有明确验收标准。这个项目最终交付的东西不复杂。一个可以在平板上打开的小镇页面里面有AI角色用户可以看它们活动也可以点击角色对话。真正值得讨论的不是这个应用本身而是用AI模型辅助写应用这件事怎么安排模型分工怎么设计提示词怎么控制成本怎么在最后一天把烂摊子收完。GLM-5.3 在里面的角色很明确负责收尾把前面模型留下的代码、样式、逻辑碎片整合成一个可以启动的项目。如果你也想复现类似玩法可以从六个角度切入模型分工、提示词设计、落地流程、成本控制、问题排查、适用边界。下面按实际落地顺序拆开讲。1. 先理解“四个AI模型做一天开发”到底在做什么1.1 这不是训练模型而是用现成模型做辅助开发很多人在看到“四个AI模型”时会以为要自己训练或微调模型。实际上这个玩法里没有模型训练动作。四个模型指的是四类已经成熟的通用大模型通过API接口或聊天界面在开发的不同阶段分别提供帮助。这就像同一个团队里有人做产品分析有人写界面有人写逻辑有人做测试只不过他们都是AI且互不共享记忆。这种做法的好处是单点可控。你不会指望一个模型从头生成整个应用而是把应用拆成多个小任务每个小任务交给最合适的模型。比如需求拆解类任务需要模型有较强的归纳能力代码生成类任务需要模型能稳定输出单文件代码最后的整合任务则需要模型能读懂散落代码并补全接口。对应到标题里的 GLM-5.3它是在最后一天被叫进来“收口”的。前面几个模型可能已经把页面、样式、数据都生成了但彼此之间没有连接起来。GLM-5.3 需要做的是新建项目、合并文件、补上缺失引用然后让应用能在浏览器里跑起来。这种事看起来不复杂但对模型的要求很不一样它要能忍受不完整的上下文还要能主动发现缺了哪些依赖。1.2 为什么多模型比单模型连续操作更稳我实际测过很多次单模型连续开发。第一次要求它写一个页面效果还行让它继续加功能效果开始下降到第五轮需求时它可能已经忘了最开始的文件结构甚至把旧代码重新生成一遍。原因很简单长对话里上下文会互相干扰模型不会主动区分“已经废弃的代码”和“当前要用的代码”。多模型协作正好能绕开这个问题。每个模型在独立会话里只做一件事输入输出都被限制得很清楚。比如模型A只输出功能清单模型B只根据清单生成页面结构模型C只负责逻辑函数。它们之间通过文件、截图或提示词传递信息而不是依赖一个超长对话。这样即使某个模型出错影响也局限在一个环节不会污染整个项目。GLM-5.3 被放在最后一个环节也有这个考虑。收尾任务要求整体理解但它面对的不是用户需求长文而是已经被前面模型整理好的半成品信息密度比原始需求低很多。对它来说任务范围越小成功率越高。1.3 谁适合用这个方式谁不适合适合的人是有一点代码基础、想在一天内验证一个想法、能接受项目比较粗糙的个人开发者。这套流程能帮你把“脑子里的产品”变成“平板上能演示的原型”但不会帮你变成生产级项目。不适合的人有两种。一种是完全不会写代码只想靠AI提示词生成完整应用。但最后代码报错、依赖安装失败、接口配置不对仍然需要人去看。另一种是团队开发要多人维护、要测试、要线上稳定性。多模型生成的东西通常缺少统一架构代码风格不一致后续维护成本很高。判断标准其实很简单如果目标是“跑通一个Demo”这套流程很合适如果目标是“上线给用户用”那还是要走传统工程路线AI只是在里面提效。2. 四个AI模型的任务切分与提示词设计2.1 用提示词限制边界而不是让模型自由发挥实际操作里模型效果好不好很大程度取决于你给的任务范围。比如你不能一开始就说“帮我做个AI小镇应用”这会让模型不知道从哪开始。更稳的写法是“你是产品经理帮我拆出AI小镇的核心功能限制在平板场景要求横屏操作时间预算一天输出列表不要解释。”这样模型不会写一堆介绍文字而是直接产出可勾选的清单。清单内容包括小镇地图、角色列表、角色移动、点击对话、对话历史、设置面板。每个功能项还要标注优先级方便后续安排先做哪个。提示词里要明确输出格式。如果后续要拿去生成代码最好让模型输出Markdown或JSON结构。比如{ features: [ {name: 小镇地图, priority: P0, description: 显示背景和角色位置}, {name: 角色对话, priority: P0, description: 点击角色后展示对话气泡} ] }有了这种结构化输出下一个模型可以直接读取不用再重新理解大段文字。2.2 代码生成模型一次只生成一个文件代码生成环节最容易踩的坑是让模型一次生成整个项目的所有文件。模型输出长度有限上下文又容易丢失最终生成的结果往往缺头缺尾。我的建议是让每个模型一次只生成一个文件而且只针对一个具体功能。比如做界面时先让模型生成一个index.html只包含小镇地图的画布和角色标记。验证能打开之后再让下一个模型生成style.css只负责样式。再后面才是logic.js处理角色点击和对话。每个文件都独立验证有问题就直接重跑该文件的Prompt不影响已经通过的文件。这看起来比“一句话生成整个项目”慢但实际上更稳。因为你不用在最后去排查“这个报错到底是哪个文件引起的”。如果文件命名和目录结构没有犯错这一阶段大概能在一两个小时内完成。为了让模型输出更好用我会在提示词里加上这些约束不要生成额外说明直接给代码。使用标准的HTML5结构。只使用原生JavaScript不引入没必要的框架。变量命名使用英文注释使用中文。在文件头部注释当前文件的主要职责。这些约束能减少后续整合时的心智负担。2.3 逻辑模型给死数据结构减少AI幻觉角色对话、小镇信息展示这种逻辑最怕模型发明不存在的数据结构。一个常见现象是模型在代码里写了一个fetch(/api/town)但根本没有这个接口或者定义了一个role.name但实际数据里的字段叫role.title。规避方法是先让模型输出数据结构并固定下来{ roles: [ {id: r1, name: 小明, position: {x: 100, y: 200}}, {id: r2, name: 小红, position: {x: 300, y: 150}} ] }然后告诉模型“所有代码必须基于这个数据结构开发不能新增或修改字段名。”这样做能大幅减少逻辑错误因为代码和数据的契约先定了。在实际项目中这一步我一般会花二十分钟做数据结构定义四十分钟做逻辑开发。如果跳过数据结构直接写逻辑后面多半要花更多时间在调试上。模型不知道你的数据长什么样就只能靠猜猜出来的字段自然不稳定。2.4 GLM-5.3 的收尾工作把碎片拼成项目前面所有模型输出可能是一堆静态页面、零散脚本和样式。它们各自单独能看但还没有成为一个项目。到这一步把 GLM-5.3 拉进来让它做集成。给它的输入是已有文件列表、每个文件的作用说明、当前报错信息、目标运行环境。让它在这些约束下补齐项目入口和模块引用。比如它可能会补一个package.json写一个启动脚本把逻辑函数引入页面解决跨域问题。这里要特别强调“先看报错再改代码”。GLM-5.3 如果只是凭空生成整合代码还是容易出错。正确顺序是先把当前项目启动起来记录第一个报错把报错信息贴给它。改完再看下一个报错。这个过程就像人工调试只是由AI帮你写修复代码。注意收尾阶段不要同时让AI处理所有报错一次只处理一个。否则它可能改A修B最后把原本能跑的部分也改坏。3. 从零到平板运行的一日流程3.1 第一步准备环境优先用Web技术要在一天内把应用放到平板上最省事的技术方案是Web。也就是说写一个网页应用然后通过PWA或简单的打包工具把它变成平板上的独立应用。这样做的好处是不需要等待不同平台的编译结果浏览器能打开就能逐步验证。你需要准备的东西不复杂一台能运行Node.js的开发机一个代码编辑器比如VS Code一个平板或者平板模拟器模型API的访问权限和Key如果这些都没有先花半小时把Node.js和编辑器装好。模型API可以先用网页版聊天界面手动生成代码然后粘贴到本地文件里不一定非要写API调用的脚本。对于想快速跑通的人来说网页版反而比API调用更省心因为不需要处理鉴权和请求格式。3.2 第二步从单个页面开始跑通最小闭环不要一开始就做完整小镇。先做一个只有一个角色、一块背景的页面。页面启动后能看到角色站在那里点击角色会弹出一句话。这个最小闭环只有三个部分HTML结构、CSS样式、一行JavaScript的点击事件。等这个页面能在浏览器里正常显示再逐步加第二个角色、对话输入框、历史消息列表。每个功能加完后都刷新页面检查。我一般会在浏览器开发者工具里开着Console确保没有任何红色报错再继续。这一步的关键不是代码多漂亮而是“每加一个功能整个页面还是活的”。一旦页面变成白屏说明最近一次改动有问题就该立即回退或让AI修复而不是继续叠加功能。一个最小页面大概长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAI小镇/title style #map { width: 100%; height: 100vh; background: #d4f0c5; position: relative; } .role { position: absolute; width: 40px; height: 40px; background: #ff8c42; border-radius: 50%; } /style /head body div idmap div classrole idrole-r1 styleleft:100px;top:200px;/div /div script document.getElementById(role-r1).addEventListener(click, function () { alert(你好我是小明); }); /script /body /html这个文件能打开项目就有了最基础的骨架。3.3 第三步接入AI对话但要保留兜底当角色点击后需要AI生成回复时再接入大模型API。这个环节最容易出现两个问题接口调用失败、响应速度太慢。我的做法是先用本地写死的回复文本把整个链路跑通再替换成真实模型调用。接口调用包含几个关键配置项请求地址不同模型服务的地址不同要确认是官方地址还是代理地址请求头需要带上Content-Type和Authorization请求体模型名称、消息列表、最大输出token超时时间默认容易太短建议先设30秒错误处理请求失败时界面要显示默认回复而不是一直转圈这些配置在平板上运行时还要注意跨域。如果页面是本地文件而API在远程服务器存在跨域问题。简单处理方法是本地起一个小服务来访问页面或者使用支持跨域的后端转发方案。比如用Python起一个简单静态服务python3 -m http.server 8080然后通过http://localhost:8080打开页面这样比直接双击HTML文件更能模拟真实环境。3.4 第四步真机调试与检查清单把应用从浏览器迁到平板通常要处理屏幕尺寸、触控事件和浏览器兼容性。进入真机调试前我建议先过这份检查清单页面能否在平板浏览器里打开横竖屏切换后角色位置是否错乱点击角色是否响应触控区域是否太小弹出输入法时页面是否被挤压无网络时是否显示兜底内容而不是白屏AI回复期间用户能否看到加载状态这六项至少能覆盖平板端大多数体验问题。如果发现某一项不通过先缩小范围单独排查那一项不要一次修改多个变量。比如角色位置错乱就先看CSS里是否用了固定像素再看平板的视口宽度是不是和桌面端差别过大。4. 266美元的成本到底花在哪4.1 成本拆解不是只有一个API账单从标题来看266美元并不是一个固定报价而是这一轮开发的总花费。按常见情况拆可能包含三块模型API调用费用、AI编程工具订阅费用、少量测试设备和资源费用。模型API费用通常是最大头。四个模型轮番调用再加上调试时的重复调用累计token会很快涨上去。如果使用带缓存功能的模型服务可以省一部分如果每次重新让模型理解整个项目成本会更高。AI编程工具订阅也要算进去。现在很多代码编辑器内置AI助手按月订阅。这类费用不算高但也是成本的一部分。还有可能是图标下载、字体处理、图片生成等小工具费用累计起来也会到几十美元。4.2 哪些地方最容易浪费钱根据实际使用经验有四个常见的浪费点。第一让模型反复重写同一个文件。每次重写都会把整个文件当输入token消耗按几百甚至几千来算。正确做法是让模型只输出变更的代码块或者用补丁形式修改。第二把大型任务放进长对话里。比如从头到尾只用一个会话对话超过十轮后每次发消息都会带着前面全部历史费用持续增加。第三并行请求太多导致失败重试。AI编程场景中频繁并发不一定提升质量反而会因为接口限流或超时产生更多重试请求。第四没有设置输出长度限制。默认让模型自由生成容易生成超长内容但很多内容其实用不上。建议在请求参数里设置max_tokens比如代码类任务800到1500就够用。4.3 控制成本的替代方案如果不想在第一天就花掉266美元可以先采用更省钱的方式。优先用网页版AI对话生成代码而不是全部走API。简单任务用便宜的小模型复杂收尾再调用GLM-5.3这类能力更强的模型。数据结构、功能清单这类文本任务用本地小模型也可以完成。把外部资源改成本地文件减少网络请求和调试成本。这些调整会把成本从一天两百多美元降到几十美元但代价是多花一点人工时间。对于个人学习项目用时间换预算完全是划算的。另外不要忘记记录每一轮调用的token消耗。很多平台有控制台可以查用量跑完一个阶段就去看一眼哪个环节耗了多少心里有数。这样超预算之前就能发现而不是月底收到账单才惊讶。5. 容易翻车的问题与排查顺序5.1 先看现象再拆分问题边界当应用跑不起来时最忌讳的是直接根据猜想去改代码。比如白屏可能由十几种原因造成你改成组件结构如果原因其实是API跨域那就会白忙一场。我通常会按这个顺序排查当前能复现的准确步骤是什么是打开页面就白屏还是点击某个按钮后才白屏。开发者工具Console有没有报错报错信息指向哪一个文件。网络请求是否正常接口有没有返回错误状态码。代码里是否引用了未定义函数或不存在的模块。最后再去看模型的上下文或提示词有没有给错约束。这个顺序能帮你在绝大多数情况下快速定位问题而不是到处乱试。5.2 AI幻觉和格式错误怎么识别AI幻觉在这个项目里通常表现为“代码里的功能根本不存在”。比如界面加载后会调用一个window.townEngine但项目里根本没有定义这个东西。排查时搜索代码里新增的全局变量或API调用如果找不到定义基本就是幻觉。格式错误也很常见尤其是让模型输出JSON时。比如多了一个逗号、少了引号、嵌套层级不对。处理这个问题可以在提示词里写“只输出JSON不要代码块标记不要解释”但即便如此解析仍然可能失败。更好的方式是让模型先输出一个合法示例再基于示例补充实际数据。如果反复出现格式错误建议换一种方式让模型输出JavaScript对象字面量而不是JSON字符串代码里直接写const data {...}这样可以绕过JSON解析。缺点是安全性略低但在本地项目里可以接受。5.3 上下文丢失导致旧问题复活多阶段开发很容易出现“A模型修好了问题B模型又把它改回来”。原因是每个模型只看到自己的输入不知道其他模型之前做了什么。解决方法是建立一份项目约束文档每完成一个阶段就把当前结论写进文档然后作为下一阶段的输入。这份文档至少要包含项目文件结构数据模型字段定义已实现且不再变动的功能当前已知问题和下一个待办这样每个AI模型看到的不是原始聊天历史而是当前版本快照。GLM-5.3 在收尾时也正是依赖这种快照才能把分散代码拼接起来。5.4 平板端特有的兼容性问题平板浏览器和桌面浏览器不完全一致。最常见的问题是touch事件和click事件混淆、100vh在移动浏览器上计算错误、键盘弹出后页面变形。如果你发现桌面正常、平板异常优先检查这三项。另外如果应用需要访问摄像头、麦克风、存储等权限还要在打包配置里声明权限。对于AI小镇这个项目一般只需要网络权限但如果你加了语音输入就要在平板设置里允许麦克风访问。还有一点容易被忽略平板的浏览器如果比较老很多新的JavaScript语法不支持。遇到这种问题要么换用兼容写法要么确认用户使用的浏览器版本。原型阶段不用覆盖太多版本但至少要保证自己的测试平板能跑。6. 多模型协作开发的边界与建议6.1 优势快速验证想法节省前期设计时间用四个AI模型辅助开发的本质是把“从需求到原型”的时间压缩到一天。它不是替代完整工程而是帮你尽早看到产品轮廓。对于个人开发者尤其是想做独立小应用的人这是一种低成本验证想法的方式。如果你有一个想法但不确定值不值得做用这套方式花一天时间做一个可交互原型比写十几页需求文档更有效。你可以拿着原型给朋友或潜在用户看反馈会真实很多。6.2 劣势缺少工程质量扩展能力弱多模型生成代码不会替你考虑模块拆分、依赖管理、单元测试。当你的功能从三个增加到三十个代码会越来越难维护。更安全的选择是在原型验证通过后把核心逻辑重写一遍或者让AI先生成项目结构和接口再逐步填充。如果项目要长期迭代建议把版本管理、自动化测试、CI/CD这些工具补上。AI生成代码可以成为初稿但要进入交付阶段人工审查和工程流程不能省。6.3 我建议的最小落地组合如果看完这些内容你打算复现一次我建议从最小的组合开始不需要一上来就找四个模型一个需求拆解模型把想法变成功能清单。一个前端代码模型生成页面和交互代码。一个收尾模型例如GLM-5.3负责集成和最终修复。三个模型已经能覆盖大部分流程。第四个模型如果只是做测试可以用你自己的自查清单替代。省下这一步成本也省下模型之间的交接时间。第一轮先把最小闭环跑通再考虑要不要把整个流程自动化。很多人一开始就搭了复杂的模型调用框架结果项目本身还没写几行。我更愿意先把一次手动流程跑顺再逐步让它高效。回到那个标题“266美元和四个AI模型”听起来像噱头但拆开看其实就是一次目标明确、边界清晰的AI辅助开发练习。GLM-5.3 能一天完成收尾不是因为它比其他模型更适合做产品而是前面所有步骤已经把问题收敛到了可处理范围。如果你也想复现建议先从单页开始老老实实记录每个阶段的输入输出。整个过程最值钱的部分不是那266美元花了多少钱而是你终于知道让AI帮我写应用应该在哪里用力。
返回列表