一、前言

• 在本专栏的上一篇文章中，我仅指定了简单的基本功能模块划分及技术选型，后端由IDEA+ClaudeCode+国产大模型自动实现，然后再让AI生成后端的模块规范文档，交由前端DevEcoStudio+DevEcoCode+GLM大模型自动实现前端APP。但是最终实现的APP，根本入不了我的眼，感觉远远达不到商用标准。
• 在本篇文章中，我将吸取上次的经验教训，将设计进行细化后，再交由AI进行功能实现。观察本次实现效果。
  • 输出详细的功能设计
  • 使用 Pixso AI 输出UI设计
  • 将功能设计 + UI设计，给到编码AIAgent，进行前后端代码实现
  • 真机调测APP，达到最终预期目标

二、零花钱管理APP的设计

2.1、项目总体约束

• 不对接真正的钱，本质只是个记账APP，只不过是零花钱专项记账APP
• 功能要收敛、简单易用，童趣化，站在小朋友的视角，设计该零花钱APP
• 核心功能：通过语音，便捷记录家庭成员的零花钱收支数额及缘由；家庭成员零花钱排行榜；注册家庭，添加家庭成员，登录家庭；本机APP会话记忆能力
• 界面风格：类似多邻国的设计风格，充满童趣，又突出重点

2.2、功能设计

• 手机首次访问APP：
  • 自动触发注册功能
    • 家庭号：默认生成5位数的数字，序列生成，序列起始值为10000
    • 家庭名称：默认美满家庭+家庭号
    • 家庭密码：默认为家庭号+一位随机数
    • 家庭成员列表：默认为 爸爸、妈妈、宝宝，最多允许添加20个家庭成员，允许设置家庭成员姓名、家庭角色。
    • 家庭角色：默认为 妈妈
• 登录
  • 触发动作：用户在我的里面，点击 登出 后，回到登录界面
  • 登录功能：界面展示 家庭号（默认回显当前APP的家庭号，允许用户修改）、 家庭密码，家庭密码输入后密文显示，点击小眼睛可明文展示。用户可以选择家庭角色（根据家庭号加载出来的下拉列表） 或者 手动输入家庭角色。点击登录按钮，进行登录。同一个家庭号，允许在多个设备上登录，不做约束。
  • 登录界面风格：类似多邻国APP、蛋仔派对的卡通风格，童趣满满
  • 后置动作：登录成功后，进入APP主界面
• 我的
  我的 是一个tabbar，在底部，图案要卡通
  • 触发动作：用户在APP主界面，点击底部的tabbar的 我的家庭 进入我的家庭设置界面
  • 我的 功能：
    • 家庭号回显（5位数的数字），不允许修改
    • 家庭名称 美满家庭+5位数的 随机的字母或数字。允许修改
    • 家庭密码 6位数的数字 密文显示，允许擦亮。允许修改
    • 家庭成员列表：默认为 爸爸、妈妈、宝宝，最多允许添加最多20个家庭成员，添加家庭成员时，允许设置家庭成员姓名、家庭成员角色。
    • 家庭角色：默认为 妈妈
    • 切换登录账号 按钮
  • 切换登录账号：
    点击需要二次确认，提示用户先记住当前账号的密码是多少，避免用户下次登录忘记了
    执行 退出登录、回到登录界面 的功能
• 首页
  家庭成员（成员姓名、角色、零花钱数额） 按照零花钱的多少，排序展示。
  点击家庭成员图标，弹出语音框,输入语音后转文字，用户也可以手动输入文字，可以对该成员进行零花钱的增加或者减少。

2.3、界面设计

• 选择这个AI界面设计网站，进行界面设计
  Pixso AI（Paico）

• 通过这个AI对话的方式，这个网站直接设计出来，这个效果我还是很满意的
  
  
  
  

• 通过右上角的导出按钮，将设计的ui的代码导出为代码
  

2.4、后端服务设计

后端服务能力，我们依然使用 IDEA+ClaudeCode+ccSwitch+国产大模型，进行设计及实现

2.4.1、 创建后端服务工程

2.4.2、 打开ClaudeCode，输入功能设计。要求ClaudeCode输出详细设计文档

• IDEA中如何集成ClaudeCode，ClaudeCode如何接入国产大模型，详情可参见本专栏的姐妹篇：IDEA搭建ClaudeCode本地环境，对接国产大模型实操指导（IDEA+ClaudeCode+ccSwitch+Qwen）

• 今天使用 deepseek-v4-pro-0813、deepseek-v4-flash-0731。
  https://bailian.console.aliyun.com/cn-beijing?switchAgent=ws-7ghkdcozudy6ll9o&tab=plan#/efm/subscription/token-plan/personal
  

• 打开ClaudeCode。可以看到大模型是 D。由于这里用的是阿里云百炼的tokenPlan套餐（主要是上次订阅的还没用完。现在如果再买token，我肯定是优选deepseek的按量计费，闲时使用半折）
  

• 输入上面 2.2的功能设计。补充基本的技术选型。切换到PlanMode模式。
  

• 输出效果检查
  

2.4.3、编码实施

• 输出pom文件，但是注意提示不要自动构建，否则会很烧token
• 接着直接告诉ClaudeCode，全量实施。不再按照roadmap逐阶段实施。从基础框架搭建，到17个接口实现，大概1~2个小时完成。
  

2.4.4、token使用量

从这个情况看，使用deepseek的大模型，在忙时使用的，这个token用量，我还是很能接受的

2.5 前端服务实现

2.5.1、创建前端工程

2.5.2、将视觉设计和后端设计，复制到前端工程中

• 将2.3视觉设计输出的UI代码，复制到创建的前端工程中
  

• 将2.4输出的设计文档，复制到前端工程中
  

2.5.3、告诉devecoCode，参考视觉设计demo及后端设计文档，输出前端mission.md、tech-stack.md、roadmap.md、详细设计文档

• devecoCode的相关配置及大模型选择，参考上篇博客的详情描述：【ArcTs+AI零花钱项目鸿蒙APP】鸿蒙APP实现及成品展示（DevEcoStudio+DevEcoCode+GLM5.1+前后端自动部署，真机调测）
• 提示词：参考视觉设计demo及后端设计文档，输出前端mission.md、tech-stack.md、roadmap.md、详细设计文档
• 输出文档：
  

2.5.4、告诉devecoCode，实施代码

• 告诉 DevecoCode ，根据输出的详细设计文档，进行相关代码实现。耗时大概在2个小时左右
  

• 从效果上看，基本能够达到视觉demo设计的效果。但是细节还不太满意。后面有花了大概3个小时，对细节进行微调。当然这个微调依然是告诉devecoCode我想要的效果，由它去修改代码。
  看，我们已经不需要写代码了，只需要告诉AIAgent，我想要什么。

• 调整后的效果：
  
  
  
  

三、感悟

• 该APP从设计到编码部署完成，耗时满打满算，仅为1.5天。
  • 人起到的作用是：告诉AI，自己想要的产品是什么样的。
  • 全程用人类文字沟通，未写一行代码。
• 从最近的VibeCoding的体验看，我最大的感受是，编码已经不再需要人工了
  人最需要做的是告诉AI，我要什么，做好需求、架构设计、视觉设计，至于编码打包部署测试，都可以让AI去完成。甚至需求、架构设计、视觉设计实际上也会借助AI能力去进行完成。
• 所以AI时代，技术终将变成了全员通识。
  就像文字，在古代只有少数人掌握，而现代全员从小培养一样。
• 越来越感觉人其实就是个训练的很好的AI
  而现代的AI会比人越来越聪明，因为AI的body几乎可以视为是无限的、永生的，而人类的身体是有局限的、生命是有限的。