用AI开发鸿蒙手表APP(猫咪木鱼)上架啦~(全过程与提示词记录)

华为智能手表应用商城搜索:猫咪木鱼

前言

华为 Watch 5 手表刚出的时候,我就下单买了。无奈应用商城里 APP 数量少得可怜,一直想着自己开发应用自己用,实现完美闭环。但我没搞过这类开发,需要重新学一门开发语言以及整个 APP 体系,还要弄设计,学习成本很高。不过 AI 可以帮我解决这些问题,所以就尝试开发一个 APP。

做猫咪主题的敲木鱼 APP 的原因:本身喜欢猫咪,而且应用商城缺乏这种解压打发时间的敲木鱼应用(后来查华为开发者文档,有明确说明不能开发简单的敲木鱼应用),再结合点小游戏和换肤,就做出了这款 APP。

猫咪木鱼简介

一款 HarmonyOS 手表端的治愈系休闲娱乐应用

  • 轻轻点击屏幕上的木鱼,即可敲击发声、积累功德。每日功德攒满后自动抽取今日签运,获得爱情、事业、健康三个方面的趣味运势解读。签运分为上上签、上签、中签三个等级,每日一签,给生活加点小期待。
  • 功德圆满后进入幸运阶段,幸运值攒满即可参与猫咪抽奖(每天一次),有机会解锁新的猫咪伙伴!(每日重置数值。)功德值与幸运值都满值后,会进入解压模式,不再积攒任何数值,纯解压娱乐。
  • 抓抓猫咪功能:通过抓取指定猫咪,达到一定分数后可以再抽奖一次猫咪,有概率解锁特殊猫咪------彩猫。

AI 工具与资源

用途 工具
开发工具 Claude Code CLI / CC Switch
Skill superpowers: brainstorming
大模型 GLM 5.1(Coding Plan Pro 套餐)
图片素材 豆包(文生图,免费)
素材导出 Photoshop
音效 爱给(可免费下载音效资源)

需求与开发计划

有了大致做什么 APP 的想法后,不要直接就把你想做的事情丢给 Claude Code 开工------大概率 AI 会乱来。要先跟 AI 完善需求,制定开发计划后再动工。

  • 推荐下载 Skill:superpowers,其中的 brainstorming
  • 把 APP 初稿的提示词(下面有第一版提示词参考)提供给 Claude Code
  • Claude Code 会按照你的需求提问,主要涉及技术框架、素材使用、主要逻辑补全,可以按需选择,我选的是推荐的
  • 技术框架选择鸿蒙原生 ArkUI / ArkTS 开发,素材使用 emoji 表情做占位符
  • 之后会启动 Web Server,提供多个 APP 界面预览、主要流程预览的网页供你选择,按照觉得 OK 的选择即可
  • 确认完后,则会生成一个 spec 文档与 plan 开发计划
  • 文档里会详细列出技术选型、项目结构、功能说明、开发阶段等

第一版提示词:

开发一个华为智能手表,兼容 Watch 5 圆形表盘的猫咪敲木鱼应用。 主界面有功德值、爱心值,猫咪和大木鱼以及木鱼棍,还有一个更换猫咪按钮; 点击木鱼,默认是功德值 +1,功德值满为 33;木鱼棍会出现敲击一下木鱼,木鱼需要有对应的反馈和声音,以及冒出功德 +1 的提示在木鱼上方冒出来; 功德值满后,再次敲击,弹出提示抽签层,点击抽签后,从上上签、上签、中签随机出现一种,每种签包含爱情、事业、健康三种签文,每种签文根据签类型随机出现 5 选 1,签文由 AI 生成的佛风文; 再次点击木鱼,出现幸运值 +1,幸运值满为 100;满后,点击木鱼,弹出幸运抽奖层,50% 概率抽中猫咪,优先解锁猫咪,抽中相同则解锁对应猫咪的其余姿势,不中提示明日再来; 抽签和抽奖每天限制 1 次,第二天功德值、幸运值、抽奖、抽签重置。 猫咪图鉴界面,一个横向滑动列表,展示 5 只猫咪(橘猫、白猫、狸花猫、美短、布偶),列表下方公用一个猫咪姿势列表,每只猫咪有 3 个姿势,猫咪和姿势解锁不能选择,图案上出现一个锁的图标; 点击未解锁的,弹层提示未解锁的需要通过每日抽奖获得; 点击选择已经解锁的猫咪和姿势,下方有确认按钮,确认后,返回主界面,主界面猫咪更换为刚才选择猫咪与对应姿势。 数据保存在本地手表中。

开发与调试

开发前,需要先去华为鸿蒙开发者文档下载 DevEco Studio 应用,并打开下载安装好里面的"智能手表"模拟器。

当 spec 与 plan 都生成后确认没问题,Claude Code 会提示你是否要动手。确认后,Claude Code 则会列出 Tasks 列表,多个子 Agent 并行帮你干活。

经过漫长的二三十分钟等待后,APP 开发完毕。Claude Code 会提示你打开 DevEco Studio,导入项目目录,选择手表模拟器,编译运行。

PS:这里一定不会这么顺利,会经历配置文件错误、代码报错、编译报错等多次错误。把错误提示复制给 Claude Code 处理,它要么帮你修复,要么提示你怎么操作可以修复。

至此,初稿 APP 就开发完成了......

PS:这里只是整个项目进度的 20%。

应用设计图生成

AI 吧啦吧啦帮你干了半小时活,你用模拟器打开一看------黑色背景,两行字显示功德值与幸运值,3 个大大的 emoji 表情包。虽然功能逻辑正常,但跟你想象的天差地别,一定不是你想要的样子。

为啥使用豆包来生成设计图?

  1. 国外的 GPT Image 2、Nano Banana 2 这些,国内使用门槛高
  2. 国外的贵,需要多次生成 UI 界面(AI 生图就是抽卡,要多抽),费用扛不住
  3. 国内几家能白嫖额度高的就数豆包、千问这些
  4. 豆包的文生图、文生视频,个人感觉质量比其它家好

初版首页提示词与部分图:

游戏素材,宠物木鱼敲击游戏,卡通 Q 版风格,参考 Q 版猫咪,生成一个华为手表圆形游戏界面;主游戏界面:一个大木鱼,一只猫咪在旁边,一根木鱼棍子敲击木鱼,功德 +1,功德值、幸运值(圆环进度),猫咪上方还需要有个猫爪的按钮。

上面是初版示例的AI图

初版猫咪图鉴提示词与部分图:

游戏素材,宠物木鱼敲击游戏,卡通 Q 版风格,参考 Q 版猫咪,生成一个华为手表圆形游戏界面;猫咪图鉴界面:展示猫咪列表,目前 5 只,分别是白猫、狸花、美短、布偶、橘猫,未解锁需要把猫咪图案置灰并且覆盖一把锁,解锁后猫咪图案下方出现 3 个坐姿可以进行切换。

上面是初版示例的AI图

素材文件抽离

在豆包中生成你看中的界面设计图后,怎么把对应的元素、背景图都抠出来?

单独抽离背景图

选中图片,点击"智能编辑",输入提示词:只保留背景图,其它元素都去掉,包括手表外观。

PS:这个不一定能一次成功,需要多次操作。如果遗漏了什么,继续让 AI 帮你去除即可。

导出图片,拖进 Photoshop 里,裁剪成圆形的 PNG 图,记得把右下角的豆包水印也删掉,图片大小为 900×900 即可。

单独抽离按钮元素

提示词用:背景图透明,只保留确认按钮,其它都不要,然后用 Photoshop 把图标抠出来即可。

多种猫咪与姿势生成

在豆包中生成出喜欢的猫咪形象后,点击"智能编辑",输入提示词:猫咪换成橘白猫 或 猫咪换成舔毛的动作。

边框、背景色这类能用代码实现的

不需要使用素材文件,直接把需求给 Claude Code 即可。

提示词类似:猫咪列表容器使用 #fff 背景,#ddd 颜色的 25% 圆角边框 2px。

如果对测量颜色和写提示词不擅长,也可以使用抽离背景图的方式来操作。

真机调试

素材使用 Claude Code 和豆包替换完毕后,APP 界面和交互就好看了很多,基本达到了想要的样子。这时候就需要进一步用真的华为 Watch 5 来测试。

手表开启调试模式

  1. 手表需要与电脑连着同一个 Wi-Fi
  2. 手表切换到"全能模式",打开 设置 → 关于手表
  3. 连续 7 次 点击 软件版本,会提示"开启开发者模式"
  4. 打开 设置 → 系统 → 开发者模式
  5. 滑动到最底部,点击 更多调试,则会显示"开启 Wi-Fi 调试"
  6. 点击后,就会出现一个 IP 地址,类似:192.168.1.2:44322

电脑连接手表

  1. DevEco Studio → 工具 → IP 连接
  2. 输入手表中 Wi-Fi 调试的 IP 地址
  3. 确认后,主界面中 设备 里就会出现对应 IP 地址的手表设备
  4. 编译运行,稍等片刻,APP 则会打包进手表中

打正式包体

发布上架需要提供正式包体,正式包体涉及 APP ID、证书、Profile 文件等。

  • 前往华为开发者网站 developer.huawei.com/ 注册账号
  • 在 DevEco Studio → 构建 → 生成私钥和证书,按照提示生成两个文件
  • 在开发者网站,新建 APP ID,分类要选"应用"
  • 在开发者网站,新增证书 ,选择之前生成的 .csr 文件,新增成功后,把对应的 .cer 文件下载保存到本地
  • 在开发者网站,新增 Profile ,类型选"发布",证书选刚新增的,然后把对应的 .p7b 文件下载保存
  • DevEco Studio → 文件 → 项目结构 → 项目
  • 在 签名配置 中,新增一个名为 release 的配置,把之前生成的 .p12 文件以及下载的 .p7b、.cer 文件填入对应路径,设置好密码,点确认
  • 修改项目根目录下 build-profile.json5,将 products 下 signingConfig 的值改为 release,保存后点击"同步配置文件"
  • 点击 构建 → 编译 APP(s),在项目根目录 build/outputs/default/xxxx-default-signed.app 找到最终包体,也是上架用的包

审核注意事项

在提交上架发布之前,有几个要注意的地方,避免被打回重新过审。每次等待就几天,很耗费时间。

  • 应用类型:如果选择"游戏",则需要提交软著与游戏版号;选"应用"类型则不需要,可以直接提交
  • 应用介绍:类型是"应用"时,应用介绍中一定不能出现"游戏"相关字眼,否则会被打回
  • 隐私政策:隐私政策网址的内容,也不能出现"游戏"相关字眼
  • 功能 Bug:APP 中明显的 Bug 务必在提交之前自行测试并解决,评审人员会测试
  • 交互反馈:APP 中各种按钮、可点击的元素都需要有反馈,即使因某些原因不能点,也要弹层提示用户
  • 多语言:界面中主要显示元素若使用了非中文,需要手表切换语言时也跟着切换,所以尽可能使用中文
  • 动画暂停:存在循环展示的动画时,需要处理 APP 切换到后台(失焦)时动画暂停,APP 获取焦点后再继续运行
  • 表冠操作:界面中存在可上下滑动的列表时,需要考虑表冠的操作

提交上架

到了最后一步,提交资料和截图后,就可以耐心等待过审上架了。

  • 新建发布,设备要勾选"手表"
  • 修改"应用信息",把 APP 相关的图标、类型、标签、开发者信息补充齐全,图标可以让豆包帮你生成
  • "软件包管理",上传 APP 包
  • "版本信息",选择刚才上传的包体,国家选择"中国大陆",应用介绍可以 让 Claude Code 分析项目并给出 200 字的应用介绍
  • "版权信息"可以跳过不选择

结语

一开始 30 分钟 AI 写出来的只是初版 Demo,需要多次与 AI 沟通完善功能、添加更多交互。AI 在很多交互逻辑和细节上是注意不到的,需要自己多体验 APP 来发现和完善。

APP 从想法出现,到落地开发完成,最后上架第一版,大概总耗时 5 天。(不要盲目相信 AI 能 10 分钟开发完 APP 然后就能上架的夸大言论。)

相关推荐
小虎AI生活35 分钟前
老干妈靠AI闷赚54亿,你的AI还在写文案?
aigc·ai编程
Sunny_GMF1 小时前
Markdown 导出 HTML 实战:2.6MB 编辑器快照如何瘦身 71%(DOM 净化 + CSSOM 运行时裁剪)
编辑器·html·ai编程·harmonyos
爬楼的猪2 小时前
一个轻量化的Codex Web UI
人工智能·ui·chatgpt·ai编程
Captaincc2 小时前
Juejin Usage v0.1.14更新:看清 AI 用量和订阅额度
ai编程
枯木◊靠推文躺平版3 小时前
2026最新6款AI编程工具基础版免费实测合集
ai编程
四七伵4 小时前
Codex 每轮到底消耗多少 Token?我给 Hook 加了个新功能
gpt·ai编程·vibecoding
Rain的Java大神之路4 小时前
Java 工程师做 AI,核心机会在「落地」而非「训练」
java·后端·ai编程
坊钰4 小时前
【LangGraph框架入门级】4. 支持联网搜索的智能代理系统
python·ai编程·langgraph
Rain的Java大神实战圈4 小时前
Java 工程师做 AI,核心机会在「落地」而非「训练」
ai编程
吴佳浩 Alben5 小时前
一文讲透推理引擎性能指标:TTFT、TPOT、KV命中率、并发,到底对应 vLLM / SGLang 的哪个参数?
人工智能·python·语言模型·架构·ai编程·vllm·sglang