作为一个前端爱好者，一直想自己开发一个健身类APP——既满足自己日常健身打卡、计划管理的需求，也想实操一下全栈开发流程。但之前要么卡在需求梳理没思路，要么被复杂的编码、测试流程劝退，直到尝试用Claude Code接入GLM5.1，才发现“AI辅助开发”能把全流程效率拉满，从零到可用版本，全程没踩太多坑，今天就完整复盘一下我的开发全过程，给同样想入门全栈、开发小应用的朋友避坑参考。

先一句话总结核心逻辑：用ChatGPT梳理需求、生成UI设计提示词，用Pixso生成可视化设计稿并转代码，再用Claude Code接入GLM5.1模型，拆分前后端需求、生成代码，搭配Vue3+Vite+Express+MongoDB技术栈，结合GitHub Actions实现测试驱动开发，最终完成一个可登录、可配置计划、可查看数据的健身APP，后续还计划打包多端、上线服务。

一、前期准备：工具安装与模型配置（5分钟搞定）

开发的第一步，是搞定“AI开发助手”的搭建——核心是Claude Code和GLM5.1的对接，这一步比我想象中简单太多，全程无需复杂的环境配置，跟着步骤来就能快速上手。

首先是安装Claude Code，我用的是npm全局安装方式，终端输入命令npm install -g @anthropic-ai/claude-code，等待安装完成后，输入claude --version，看到版本号≥2.0.33就说明安装成功了。这里要注意，提前确保Node.js版本在18及以上，避免出现兼容性问题。

接下来是关键的一步：将Claude Code的默认模型切换为GLM5.1。GLM5.1是智谱AI推出的新一代旗舰级编程模型，主打复杂系统工程与长程任务处理，而且无需高端本地GPU，通过Ollama云集成就能轻松对接Claude Code，性价比很高，特别适合个人开发者。我直接在Claude Code界面输入/model指令，选择GLM5.1作为默认模型，再输入/status验证，看到“Model: glm-5:cloud”的提示，就说明模型对接成功了，整个过程不到2分钟。

这里补充一个小技巧：如果对接失败，可以先检查Ollama是否正常运行（执行ollama serve），再重新启动Claude Code并指定模型（ollama launch claude --model glm-5:cloud），基本都能解决问题。

二、需求梳理：用ChatGPT破局，搞定UI设计提示词

作为一个“需求小白”，一开始我只知道要做一个健身APP，但具体要包含哪些功能、UI要做成什么样，完全没思路。与其自己瞎琢磨，不如借助ChatGPT帮我梳理需求，还能直接生成可复用的UI设计提示词，省去后续和设计工具的沟通成本。

我给ChatGPT输入的提示词很直接：“我想写一个健身小程序，但是我没什么思路，你帮我思考一下有哪些必要的功能，同时给我一份能粘贴给pixso生成ui的prompt”。这里特意强调了“可粘贴给Pixso”，就是为了让生成的提示词更精准，避免后续还要手动修改。

很快ChatGPT就返回了完整的回复，不仅梳理了健身APP的核心功能，还生成了一份非常详细的Pixso UI设计提示词，直接复制就能用，省去了我自己编写设计需求的麻烦。这份提示词的细节很到位，既明确了整体风格，也拆分了每个页面的具体需求，完全贴合年轻用户的使用习惯，也避开了健身APP常见的功能冗余问题——毕竟我想要的是一个轻量版的健身工具，类似Keep但更简洁，这份提示词刚好命中我的需求。

附上ChatGPT给我的Pixso提示词（直接复制可用）：

设计一个健身类小程序UI，风格简洁现代，类似Keep但更轻量，适用于年轻用户。

整体要求：

• 主题风格：极简 + 健身感（黑白 + 高亮绿色或橙色）

• 圆角卡片设计

• 清晰的信息层级

• 适合移动端小程序（iPhone尺寸）

需要设计以下页面：

0. 首页：顶部用户问候（例如“今天也要加油🔥”）、今日训练卡片（包含训练名称、时长、难度）、一个明显的“开始训练”按钮、打卡状态（连续天数）、激励文案

1. 训练执行页：当前动作名称（大字）、动作演示区域（视频/GIF占位）、倒计时显示、当前组数（例如 2/4）、按钮：完成 / 跳过、底部动作列表（可滑动）

2. 训练计划页：展示一周训练安排（卡片形式）、每天训练内容简要说明、可切换“增肌 / 减脂 / 家庭训练”

3. 数据统计页：折线图（体重变化）、柱状图（训练次数）、连续打卡天数展示、数据卡片风格

4. 我的页面：用户头像 + 昵称、当前目标（例如：减脂中）、成就徽章展示、设置入口

设计要求：

• 使用现代UI组件（卡片、进度条、图表）

• 动效简洁（按钮反馈、加载状态）

• 突出“开始训练”核心按钮

三、UI设计：Pixso一键生成，直接转代码落地

拿到ChatGPT生成的提示词后，下一步就是生成UI设计稿。我选择用Pixso，因为它的研发模式对所有用户免费开放，而且支持“设计到代码”（D2C）功能，能直接将设计稿转化为可复用的代码，省去了设计师和开发的衔接成本，对我这种“不懂设计的开发”太友好了。

操作过程非常简单：打开Pixso，新建一个移动端（iPhone尺寸）项目，将ChatGPT生成的提示词直接粘贴到Pixso的AI设计入口，点击生成，等待1-2分钟，完整的UI设计稿就出来了——从首页到我的页面，5个页面一次性生成，风格和细节完全符合提示词要求，黑白为主色调，搭配高亮橙色，圆角卡片设计，信息层级清晰，“开始训练”按钮也做了突出处理，完全不用我再手动调整。

更惊喜的是，Pixso的研发模式可以直接生成代码。点击设计文件右上角的滑钮进入研发模式，选中任意页面或组件，右侧面板就会自动显示对应的HTML、CSS甚至Vue代码，我直接将这些代码复制下来，保存到本地文件夹，后续开发时直接复用，大大节省了编码时间。生成设计稿后，我也截取了关键页面的截图，留存作为开发参考和后续复盘使用。

这里提醒一句：Pixso生成的代码可以根据自己的技术栈微调，比如我后续用的是Vue3，就将生成的基础代码适配了Vue3的语法，修改起来很简单，不用重新编写整个页面结构。

四、开发落地：Claude Code+GLM5.1主导，全栈开发不踩坑

UI设计稿和基础代码准备好后，就进入核心的开发环节了。这一步我完全交给Claude Code（接入GLM5.1）来主导，通过 /plan 模式从需求拆分、技术选型到代码生成、测试配置，全程用自然语言沟通，不用手动写大量代码，效率直接翻倍。

1. 前置准备：制定全局约束，搭建测试驱动开发工作流

在让Claude Code生成代码之前，我先给它提了一个全局约束要求——毕竟开发不能只追求速度，还要保证代码质量，避免后续出现难以维护的问题。我的核心需求是：利用GitHub Actions完成单元测试、集成测试，构建测试驱动开发（TDD）工作流，把CI结果校验纳入工作验收标准，同时要求避免过度mock和cargo cult（盲目复制代码、不理解逻辑的行为）。

为什么要加这个约束？因为个人开发很容易忽略测试环节，后续出现bug很难排查；而过度mock和cargo cult会导致代码冗余、逻辑混乱，不利于后续迭代。Claude Code很快就理解了我的需求，生成了详细的GitHub Actions配置方案，包括工作流的yaml文件（存储在.github/workflows/目录下），定义了触发条件（push、PR到主分支时触发）、测试步骤（安装依赖、lint检查、单元测试、集成测试），还特意标注了避免过度mock的注意事项，比如只mock必要的外部依赖，保留核心业务逻辑的真实测试场景。

按照Claude Code生成的配置，我快速完成了GitHub Actions的搭建，后续开发过程中，每一次提交代码，都会自动触发测试流程，一旦测试失败，就能及时发现问题并修改，确保代码质量，这也是我第一次真正落地测试驱动开发，体验感拉满。

2. 需求拆分与技术选型

接下来，我将ChatGPT生成的需求说明、Pixso的设计稿截图，以及本地保存的UI代码，一起发给Claude Code，让它帮我拆分前端、后端和数据库的具体需求。GLM5.1的逻辑拆解能力确实很强，很快就给出了清晰的拆分结果：

• 前端：负责页面渲染、用户交互，核心功能包括登录、训练计划展示、训练执行、数据统计、个人信息修改，需要适配移动端；

• 后端：负责接口开发、业务逻辑处理，对接前端请求，与数据库交互，提供用户认证、数据存储与查询等接口；

• 数据库：负责存储用户信息、训练计划、打卡数据、体重变化等核心数据，需要支持高效查询和数据持久化。

基于需求拆分，Claude Code给我推荐了适合个人开发的技术栈：前端用Vue3+Vite（轻量、高效，适配移动端，开发体验好），后端用Express（Node.js框架，简洁易用，适合快速开发），数据库用MongoDB（非关系型数据库，数据结构灵活，无需复杂的表设计，适合存储健身APP的非结构化数据）。这个选型完全符合我的预期，既简单易上手，又能满足核心需求，而且三者的配合度很高，后续开发和维护都比较方便。

3. 多轮迭代：自然语言沟通，生成可用代码

技术选型确定后，我就开始让Claude Code根据需求生成代码，全程用自然语言沟通，遇到不满意的地方，直接提出修改意见，它会快速调整，相当于拥有了一个“随叫随到的全栈助手”。

比如，一开始生成的登录页面，表单验证逻辑不够完善，我就告诉Claude Code：“需要给登录表单添加手机号/邮箱验证、密码长度验证，提交时显示加载状态，验证失败给出明确提示”，不到1分钟，它就修改好了代码，还添加了对应的错误提示样式；再比如，数据统计页的图表渲染不够美观，我提出“折线图和柱状图要贴合UI设计风格，添加 hover 效果，显示具体数值”，它也能快速适配修改。

整个开发过程，我几乎没有手动编写复杂的逻辑代码，大部分工作都是：提出需求→Claude Code生成代码→我测试验证→提出修改意见→迭代优化。GLM5.1的编码能力很靠谱，生成的代码结构清晰、注释完整，而且会自动适配我之前设置的全局约束，比如在生成代码的同时，会同步补充对应的单元测试用例，配合GitHub Actions的测试流程，一边开发一边测试，避免了“开发完再测试，发现大量bug”的尴尬。

最终，经过多轮自然语言修改，我成功得到了一个完整的健身APP版本：支持用户登录（密码加密存储）、配置个性化健身计划（切换增肌/减脂/家庭训练）、查看训练执行过程（动作演示、组数倒计时）、查看数据统计（体重变化、训练次数、打卡天数）、修改个人信息（头像、昵称、健身目标），所有数据都能正常接入MongoDB，实现持久化存储，页面渲染流畅，完全满足我的核心需求。

五、后续计划：多端打包与服务上线，持续迭代优化

目前，健身APP的基础版本已经开发完成，接下来我计划借助Claude Code，完成后续的多端打包和服务上线，让这个APP真正能用起来，同时持续跟进学习，优化功能、提升体验。

第一步，多端打包。我计划用Capacitor将Vue前端代码打包成iOS、Android和Web App，Capacitor是一款非常好用的混合应用工具，允许使用单一代码库在多平台运行，而且能访问丰富的本机设备功能，完全适配我的需求。Claude Code已经给我提供了详细的Capacitor打包步骤，包括安装依赖、构建Web代码、同步到Capacitor、配置原生项目等，后续我只需要按照步骤执行，就能完成多端打包，实现“一套代码，多端运行”。

第二步，服务上线。我会注册一个专属域名，将Express后端服务部署到云服务器，配置MongoDB数据库的线上环境，实现用户数据的云端同步，这样不管是Web端、iOS端还是Android端，用户都能随时随地登录使用，查看自己的训练数据和计划。

第三步，持续迭代。后续我会根据自己的使用体验，以及可能的用户反馈，继续借助Claude Code优化功能，比如添加AI健身建议、训练提醒、饮食搭配等功能，同时优化页面性能、完善测试用例，让这个健身APP变得更实用、更流畅。

六、开发复盘：AI辅助开发，让新手也能快速落地项目

回顾整个开发过程，从工具准备到最终落地，全程不到一周时间，而且我几乎没有踩什么技术坑，这完全得益于Claude Code和GLM5.1的配合，也让我对“AI辅助开发”有了更深刻的理解。

总结几个核心收获，给同样想入门全栈、开发小应用的朋友参考：

1. AI能帮你解决“从0到1”的难题：不管是需求梳理、UI设计，还是代码生成、测试配置，AI都能快速给出解决方案，省去了新手自己瞎琢磨的时间，让你更专注于核心需求；

2. 工具选型要“轻量适配”：个人开发不用追求复杂的技术栈，Vue3+Vite+Express+MongoDB这样的组合，简单易上手，而且能满足大部分小应用的需求，配合Pixso、Capacitor等工具，能进一步提升开发效率；

3. 测试驱动开发很重要：借助GitHub Actions搭建测试工作流，一边开发一边测试，能有效减少bug，提升代码质量，避免后续维护成本过高；

4. 多轮迭代是关键：AI生成的代码不一定完全符合需求，一定要结合自己的实际需求，多轮沟通修改，才能得到满意的结果，同时也能在这个过程中，慢慢理解代码逻辑，提升自己的开发能力。

后续我会持续跟进多端打包和服务上线的过程，也会分享更多开发中的细节和避坑技巧，感兴趣的朋友可以持续关注～ 如果你也想开发一个属于自己的小应用，不妨试试Claude Code+GLM5.1的组合，相信会给你带来不一样的开发体验，让“从零开发”不再是难题。

git地址：https://github.com/evenmaLoveLabubu/FitPro.git
大家感兴趣也可以自己拉下代码看下，pixso生成的代码、claude.md等都在仓库里，可供大家参考，当然要不吝给个star也是可以的欧~~