2天手搓商业级App！开源GLM-5.2+Image2太绝了～【附教程】

大家好，我是袋鼠帝。

如果你家的猫狗真的能说话，它们开口第一句会说什么？

作为一个家里养了10几只猫+一只狗子的铲屎官，我在很多时候都在想，要是我能听懂它们说话，它们也能听懂我说话就好了。

说真的，只要这个做好了，没有一个铲屎官会不心动的。

我当时就有预感，宠物翻译，可能会是下一个AI消费级机会..

2025年10月，我忍不住把这个想法记了下来：宠物AI翻译应用（硬件+软件）。

但这里面最难的点在于宠物翻译本身，需要大量的宠物声音样本作为语料，单独微调甚至训练一个专用模型出来，短时间很难搞定。

于是我决定先从一个MVP应用起步：

用户录下宠物声音，AI给出一个可能的情绪判断和解释文案。前期不一定要替代真正的宠物行为学，但至少可以让人和宠物之间多一个温柔的理解入口。

当然，除了宠物翻译，宠物周边的一些功能也不能少。

这次我主要用到Image2生成视觉素材，然后用新鲜发布的GLM-5.2完成整个方案制定、产品设计、界面实现、交互迭代和前后端逻辑。

先看成品，它已经是个小产品了

支持三端访问网址：电脑端、手机端、商家后台

手机端App，面向宠物家长们，质感非常棒，还有很多动效。

这次就是冲着要做一个商业产品去的，没想到GLM-5.2+Image2真的做到了，远超出了我的预期！

包含宠物声音翻译、宠物档案、商城、消息、我的页面。功能齐全～

PC端页面（网页）也做得很nice，这个之前在短视频刷到的贼好玩的登录页交互效果也做出来了。

包含录音翻译、宠物动图、最近翻译记录、商城和个人信息。

当然，商家后台也得有，面向宠物商品商家，包含商品管理、订单管理、库存统计、销售数据、消息推送和客服对话。

都是借助GLM-5.2，完全跟后端、数据库打通了的。

已经有了比较完整的产品闭环：

用户可以录音，后端能返回翻译结果，宠物档案可以切换当前宠物，商城能展示商品，用户可以加入购物车和下单，商家后台能管理商品和订单。perfect！

这个产品能做到这个完整度，GLM-5.2功不可没。而且通过这次的开发，我感觉GLM-5.2的前端审美提升很大。

顺便提一嘴，GLM-5.2是智谱刚刚开源的大模型，在Code Arena上拿下了全球可用模型第一。

Code Arena是全球百万用户参与盲测的前端开发评估系统，能在上面排第一，代码能力必须过硬。

再加上支持1M无损上下文，还是用的MIT开源协议，无地域限制，技术平权无国界。我只能说相当respect🫡！

接下来，我给大家拆解一下这次的开发过程，结合GLM-5.2+Image2这个组合来做App，真是太夯了～ 希望对大家有所启发。

对了，GLM-5.2和Image2都是接入Claude Code使用的。

Image2负责门面、素材

这次工作流里，Image2和GLM-5.2的分工明确。Image2负责生成视觉资产，帮我生成了一堆宠物相关素材：

有黑色小猫、小狗形象

各种姿态的宠物形象素材，以及各种图标。

这些素材决定了产品第一眼的气质。

生成这些素材的提示词很简单，就跟接入GLM-5.2的Claude Code说：根据产品PRD和UI风格，生成一份xxx图标即可。

这确实方便太多了，以前手敲代码的时代还要去网上找合适的图标，找到之后还要手动放到对应的位置。

但只有图片还不够。后面更有难度的事情是：怎么把这些视觉素材融入进一个能交互、能切换状态、能留存数据、能跨端复用的产品。这就是GLM-5.2的活了。

GLM-5.2是超强大脑，执行力也是Max

我一开始是给了GLM-5.2一份完整详细的PRD（产品需求文档）

扔需求过去，它会先进入Plan模式，把整个任务拆成细小的可执行的步骤规划，然后逐步推进。

做着做着，我经常会有一些新想法随时会加进去，它都能很好的接住。

后面，我把Image2生成的所有素材文件直接丢给它。

不用我一个个解释哪个图是什么、打算放在哪里，它自己全看懂了，能判断出每个素材的用途。

有个可惜的点是，GLM-5.2虽然代码能力很强了，但还是没支持视觉理解(┬＿┬)。

所以一开始生成图片的时候就要让它把图片命名做好，后面它才分得清图片。

要不就是安装智谱提供的视觉理解MCP。

然后过程中肯定有一些调整和优化，我会描述我想要的效果，这个过程里让我印象最深的是，它对模糊需求的理解能力。

比如我简单说了一句"商品卡片太大了"，它不是只改个长宽就完事，它能判断出应该同时调整图片尺寸、卡片布局、网格排列和按钮大小，一次性给我改到位了。

而且它对Skill的调用也很丝滑。在需要用到特定能力的时候，不用我手动提示，它自己就能自主选择合适的Skill来处理。

同时，这个项目里有不少状态联动的场景：比如用户切换宠物档案的时候，翻译页面、商城推荐、消息列表都需要跟着变。

我以前开发的时候最怕改这种场景了，很容易改漏，或者改错一个公共方法，就容易牵一发而动全身。。

但这种多模块联动的逻辑，它理得挺清楚，没有出现"改了A忘了B"的情况。

这应该是得益于它的1M无损上下文理解能力。

最让我意外的是跨端迁移能力。

最开始这个项目只要求做手机端，后来我临时起意想加个PC端。我都做好了折腾半天的心理准备。

结果GLM-5.2直接基于已有的手机端项目，很顺利的就把整个产品完完整整地移植到了PC端React版本。

样式适配、交互逻辑、数据结构，基本全都接上了。这个迁移的工程量不小，但它愣是一口气花了30多分钟给我干完了。

在成果交付之前，它还会自己主动跑一遍验证，检查功能有没有遗漏、有没有新的bug。

然后，搞定～

最后a端、b端、c端的联调验证，以及部署流程，它都能很好的完成。

登录页超有意思的鼠标跟随效果

宠物类App如果没有动效，就没有灵魂，就会显得很呆。

可以让它给一些动画的方案。给方案的同时，甚至还会画简易图来展示这个动画的大致效果，这就很棒～

我在登录页和首页都设计了一些动效。

登录页里有四只用纯代码绘制的小动物。它们从页面底部探出头来，眼睛还会跟随鼠标转动，根据鼠标点击的不同的地方都会给不同的反馈，非常有意思。

Prompt：一套登录页卡通宠物吉祥物动画，扁平矢量 kawaii 风，圆润治愈，荧光黄绿(#c8ff3d)品牌主色。四只宠物从画面底部台子探出头，只露脑袋和前爪，水平排成一排：

 ① **黑炭猫**（居中、最大、主角）：炭黑色圆方脑袋，两只三角尖耳，亮黄色大圆眼（黑瞳孔带白点高光），灰色小鼻，嘴角弧线，两侧各三根白胡须；② **深棕狗**（最左、略小）：深棕黑脑袋，两只粉色长垂耳耷拉两侧，荧光绿大眼，粉鼻；③ **米白兔**（中右）：奶白圆脑袋，两根超长竖直圆筒耳（耳内粉），荧光绿大眼，粉鼻；④ **棕熊**（最右、最小）：棕色脑袋，头顶两侧两只小圆耳，口鼻部一块浅米色斑，亮黄大眼，深褐鼻。

场景：圆角白底卡片，叠荧光绿+暖黄径向光晕和淡绿网格，底部两个半埋的淡绿同心圆环，宠物脚下一条绿色波形条像音频可视化循环跳动。

动作逻辑：待机时四只宠物错峰上下呼吸浮动、眼睛跟随光标；输手机号时集体扭头看右下；切到注册页整排探得更高更鲜艳；输昵称时升高、张嘴笑、举右爪挥手、轻弹跳；**输密码时中间的黑炭猫用两只前爪捂住眼睛（眯成一条缝），其他三只照常探头**；**点"显示密码"时黑炭猫用左爪扒开一条缝、露出一只放大的眼睛偷瞄**；登录失败时四只左右摇晃、嘴翻成哭脸；登录成功时波形条加速跳动、宠物向上弹跳张嘴大笑。整体节奏轻快有弹性（spring 缓动），治愈可爱，透明背景或柔和渐变背景。

不过，这次动画不是一次做成的。

GLM-5.2根据我的反馈做了多轮调整（主要是我的想法变来变去的..）

这些交互是状态驱动的UI动画。

GLM-5.2拆成了React状态管理、CSS变量、CSS动画、输入框的focus/blur事件监听、鼠标位置计算、不同mood对应不同动作，每一层都做得很顺。

「最后」

最近我发现市面上其实已经有了一款搭配硬件的宠物翻译App，叫PettiChat。

说明我有这个想法的时候，别人也同样洞察到了，而且已经率先做出来了。

想到这里确实有点懊恼，2025年10月我就记下了这个需求，一直拖到现在才动手。

但转念想想，现在也不算晚。宠物市场这么大，一家肯定吃不下的。而且我手里已经有了一套能跑的MVP，后面要继续推进宠物翻译那块，把它真正做到精准。

另外，这次开发给我最大的感受是：Coding的门槛又又又降低了，而做出来的东西的上限也在同步拉高。

过去几个月，AI Coding快速开发出来的产品，即便功能完善，但仔细看起来大多还是比较粗糙的。

这次用GLM-5.2做完之后，我明显感觉产品的整体质感上了一个台阶。

Image2让我快速拿到了产品的视觉资产，GLM-5.2则把这些视觉想法推进成了一个完整的系统。一个负责门面，一个负责逻辑开发。

整个三端的开发，包含电脑端、手机端、商家后台，只花了2天就差不多搞定了。

一个想法到一个产品之间的距离，又一次被大幅压缩。过去卡住你的那些环节，视觉设计、前端实现、后端逻辑、多端适配、部署上线，现在可以一个人更顺利的串起来了。

回到开头那个问题：如果你家的猫狗能说话，它们第一句会说什么？

我现在觉得，也许用不了多久，我们真的能听到答案了 🐱

我觉得AI时代，有想法就尽快大胆的去做，现在试错成本真的是越来越低了。

如果你也看好这个宠物翻译产品，欢迎来找我聊聊，或许我们可以合作。我非常希望把它继续完善，做成一个商业化产品。

文章来自于"袋鼠帝AI客栈"，作者 "袋鼠帝、小t"。