Claude Code 搭配 GLM-4.6 编码实测：能独立开发一个 APP吗？通过一个真实项目“课迹”家长课程统计

1 环境准备

运行zcf

npx zcf

zcf安装claude code
zcf配置 Claude 全局记忆 - 配置 AI 输出语言和输出风格，风格选择
- 工程师专业版 - 专业的软件工程师，严格遵循SOLID、KISS、DRY、YAGNI原则。
zcf配置常用mcp(实际本次开发过程一个都没用上，验证cc和模型的下限，大家按需安装/启用)
- Context7 文档查询 - 查询最新的库文档和代码示例
- open-websearch - 使用 DuckDuckGo、Bing 和 Brave 搜索引擎进行网页搜索
- Spec 工作流 - 规范化特性开发工作流程，从需求到实现的系统化方法
- Serena 助手 - 提供类似 IDE的语义代码检索与编辑，支持符号级实体提取与关系结构利用；与现有编码代理配合可显著提升标记效率。
- Playwright 浏览器控制 - 直接控制浏览器进行自动化操作 - 使用zcf安装启动claude-code-router，并在 CCR UI中配置GLM4.6思考模式。
- 注意每次完成ccr配置更改，需要点击右上角的保存并重启，防止配置未生效。

2 准备需求文档

将内容保存到requirement.md文件中
PS：使用基于文件的工作流：将内容写入文件并要求 Claude 读取它(原因：Claude Code 可能在处理非常长的粘贴内容时遇到问题)

./docs/requirement.md

# 需求背景
为方便家长统计孩子所报校外课程的上课记录，需要开发一个面向家长的APP。

# 功能
## 注册登录页
- 用户可以自行注册、重置密码、登录，登录状态支持勾选保留一个月有效期。
     
## 首页
1. 支持添加课程，包括名称、课程类型（取值为：次卡、期限卡，默认为次卡），
	- 如果是次卡需要支持维护次卡的总次数和课程到期日，到期日默认为2099年12/31日；
	- 如果是期限卡，支持维护课程的有效开始日期和结束日期。
2. 显示课程列表
	- 支持分标签显示筛选课程，包括全部、有效、失效，失效包含过期课程和次数耗尽的课程。
	- 针对次卡课程同时显示已使用次数和次卡总数，支持增加和减少已使用次数；
	- 针对期限卡，如果已过期则显示课程已过期。
	- 点击课程进入课程详情页。	
3. 课程详情页
	- 显示当前上课概要
		- 次卡：显示“已上次数/总次数”。
		- 期限卡：显示“已上次数/到期日”。
	- 提供便捷记录当天上课记录并自动更新统计信息，期望一个按钮动作完成。
	- 支持显示最近5条上课记录，提供更多按钮点击跳转到筛选上课详情页，课程默认为当前课程。
4. 上课详情页
	- 提供课程选择、上课日期起止时间段的筛选条件。
	- 显示筛选结果。	  
	

# 要求
1. 技术栈：Expo,React Native, react-native-elements,React Navigation, Zustand,react-native-camera,axios，sqlite, 如果还不够用自行选择匹配的库。

3 开发过程

3.1 从0到1

注意启用思考模式+计划模式（汗：首次使用忘记启用计划模式，用的accept edits模式生成，懒得重来，只好将错就错）。
cc完成初始化工程结构和实现基本功能后，别忘记使用/init命令初始化本工程的CLAUDE.md（长期记忆）。

@docs/requiremnt.md 实现需求文档中的内容

3.2 修复bug

1. 优先使用accept edits 模式。 2. 如果bug没有修复， - 尝试提供更多上下文信息，比如指定要修复的代码文件或者函数方法名 - 有些时候会陷入死循环，及时中断会话，做好/clear清理会话，调整提示词后再重试。

# 修复以下问题
1. ERROR [TypeError: date.getFullYear is not a function (it is undefined)]
2. 过期课程不能记录上课记录。
3. 期限卡的截止日期以23:59:59截止，不是00:00:00。

3.3 调整样式

使用accept edits 模式有时候效果一般，容易遗漏；
- 建议启用plan mode制定完方案后再使用accept edits调整代码。

添加新课程页面：
1. 保存课程按钮请设置为蓝色，灰色太难看 
2. 相关表单灰色背景也很难看，保持白色底即可。 
3. 课程名称/总次数的输入框文字往上偏了，修正它。

- 发现实现有问题，启用ultrathink模式让cc继续改

第一个和第3个问题并没有修复 ultrathink

3.4 功能迭代

使用plan mode 输入提示词

1. 课程详情页提供删除课程功能
1.1. 删除前弹框要求输入课程名称进行删除确认。
1.2. 需要联动删除上课记录。
2. 课程详情提供编辑功能
2.1. 可以编辑课程名称
2.2. 如果是次卡可以编辑总次数
2.3. 如果是期限卡可以编辑有效期
3. 课程详情页和上课记录页提供编辑上课记录功能，支持修改上课时间。

- CC 扫描代码->制定实现计划->询问关键问题澄清实现方案

提交相关问题答案后，CC询问要不要切到accept edits 模式，点击yes，CC开始修改代码，代码修改代码，并在完成后自动输出功能实现总结

3.5 制作logo

使用DeepSeek 生成生图的提示词

1. 我在制作一个APP，应用名叫“课迹”，主要功能是为方便家长统计孩子所报校外课程的上课记录和剩余课时。2. 现在需要制作符合上述主题的3张图片adaptive-icon.png，icon.png和splash.png用于APP上3. 帮我生成3张图片的生成提示词用于Nano Banana

输出如下，选用一组自己觉得好的一组提示词，再使用Nano Banana进行抽卡。

好的，这是一个非常实用的APP想法。为了制作一套风格统一、主题明确的图标和启动图，我为你设计了以下三组提示词，它们都围绕“课程足迹”和“成长记录”的核心概念展开，同时符合现代简约的设计趋势，非常适合在Nano Banana等AI绘画工具中生成。

设计核心理念
主题：“课迹” = 课程 + 足迹/轨迹/印记。

关键元素：抽象的路径/轨迹、代表成长萌芽的绿叶、象征记录的书本或日历、代表课堂的简笔教室。

风格：扁平化、简约、矢量感、明亮友好、略带渐变，以确保在设备上有良好的辨识度。

色彩建议：主色调使用活力蓝或成长绿，搭配辅助色如橙色或黄色，营造积极、可信赖的感觉。

1. Adaptive Icon (自适应图标) - adaptive-icon.png
这是最重要的图标，会被系统裁切成各种形状（圆角方形、圆形等）。因此，设计必须简洁、居中、核心元素突出。

提示词：

A minimalist app icon for an educational parent app, named “Keji”. The design features a stylized leaf sprouting from an open book, with a dotted line or a gentle arc emerging from the leaf, symbolizing growth and tracking. The style is flat vector, with soft gradients. Main colors are fresh green and calm blue, on a clean background. The composition is perfectly centered and balanced, with no fine details that would get lost at small sizes.

中文翻译/要点：

一个极简的教育类家长应用图标，名为“课迹”。设计特色是一片风格化的叶子从一本打开的书本中发芽，叶子中延伸出一条虚线或柔和的弧线，象征着成长和追踪。风格为扁平矢量，带有柔和渐变。主色调为清新的绿色和宁静的蓝色，背景干净。构图完全居中且平衡，没有任何在小尺寸下会丢失的细节。

2. Main App Icon (主图标) - icon.png
这个图标通常与Adaptive Icon一致，或在细节上更丰富一些。为了保持统一，我们可以使用与Adaptive Icon高度相似但可能更具象一点的设计。

提示词：

A clean and friendly mobile app icon, called “Class Trace”. The central image is a lightbulb shaped like a house (symbolizing home and learning), with a checkmark list inside and a small plant growing on top. The background has very soft concentric circles suggesting progress. Flat design, using a palette of sky blue, grass green, and warm yellow. High contrast, highly recognizable.

中文翻译/要点：

一个干净友好的移动应用图标，名为“课迹”。中心图案是一个房子形状的灯泡（象征家庭和学习），内部有一个对勾清单，顶部有一株小植物在生长。背景有非常柔和的同心圆，暗示进度。扁平设计，使用天蓝色、草绿色和暖黄色调。高对比度，易于识别。

3. Splash Screen (启动屏) - splash.png
启动屏是打开APP时首先看到的画面，应传达APP的核心价值，并有一定的场景感，但依然要保持简洁，避免信息过载。

提示词：

A serene and hopeful splash screen for a parental educational app. On the left side, a parent and a child’s hand together pointing at a simplified calendar on a tablet screen, with glowing dots marking dates. From these dots, a trail of footprints or stars leads to the right side where a sapling grows inside a speech bubble. Soft, natural lighting. Color scheme is dominated by soft blue and white, with accents of green and orange. Ample clean space, minimalistic illustration style.

中文翻译/要点：

一个为家长教育应用设计的宁静且充满希望的启动屏。左侧，一位家长和一只孩子的手一起指着平板电脑屏幕上的简易日历，上面有发光的圆点标记着日期。从这些圆点出发，一串脚印或星星的轨迹引向右侧，那里有一株在对话气泡内生长的树苗。柔和、自然的光线。配色以柔和的蓝色和白色为主，用绿色和橙色点缀。大量留白，极简插图风格。

使用建议：
生成顺序：建议先反复生成和调整 adaptive-icon.png 的提示词，直到得到最满意的核心图标。然后可以用类似的元素和风格去生成 icon.png 和 splash.png。

迭代调整：如果生成结果不满意，可以微调关键词：

想更“科技感”：添加 digital, futuristic, glossy

想更“温暖亲和”：添加 hand-drawn, playful, pastel colors

想更“简洁”：添加 monoline, geometric, 2d vector

调整颜色：直接修改颜色词汇，如 primary color is teal and coral。

格式与尺寸：在Nano Banana中生成时，选择正方形（1:1） 比例用于两个图标，选择手机屏幕比例（如9:16） 用于启动屏。输出分辨率尽量调高。

后期处理：AI生成的图片可能需要你用图像工具（如Photoshop、Canva）进行微调，比如统一色值、添加精确的文字（APP名称“课迹”可以酌情添加到启动图上，但图标上通常不加）、调整尺寸以适应开发平台（如Android的mdpi， hdpi， xhdpi等文件夹）。

希望这些提示词能帮助你生成一套完美的APP图片！祝“课迹”开发顺利！

3.6 编译安卓APP

● 使用夸克自带的千问搜索得到的本地编译方法如下

PS：一开始用的es build，由于是免费账号，排队等待太久以及有次数限制。

方法一：使用 Gradle 命令原生打包（通用性强）
这是最传统的本地打包方式，适用于大多数 Expo 项目（尤其是使用 expo-dev-client 或配置了 android 目录的项目）。
1. 准备工作
确保你的电脑已经配置好了 Android 开发环境（JDK、Android SDK、环境变量等）。如果之前没有生成过 android 目录，需要先运行以下命令生成原生代码：
bash
npx expo prebuild
注意：如果你修改了图标或启动图，也需要重新运行这个命令来更新原生资源。
2. 执行打包命令
在项目根目录打开终端，输入以下命令：
bash
cd android
./gradlew assembleRelease
如果是 Windows 系统，建议使用 ./gradlew.bat assembleRelease 或直接在 Android Studio 的 Terminal 中执行。
3. 获取安装包
打包成功后，APK 文件会生成在以下路径：
/android/app/build/outputs/apk/release/app-release.apk
首次打包可能需要下载依赖，耗时较长（约 10-20 分钟），后续打包会快很多

4 耗时说明

在此之前未有过React Native的开发经验，需求中的技术栈也是利用AI搜索出的建议。

以下耗时纯体感，未精确统计。

总耗时1个周末。
- 一半时间用于解决
  - 工程中依赖包的版本对应关系，AI真不擅长。
  - expo开发调试。
  - 编译安卓apk（从es build 云编译到expo prebuild+gradle的探索，含环境问题处理）。
- 另外一半时间耗时
  - 调整样式 > 修bug > 功能迭代。
    - 这其中一半时间处于等待模型输出结果。

5 相关问题

GLM4.6 首次实现的功能大部分还需要经过多次的修复调整才能达到可用，且各页面的布局/样式不是很统一。
GLM4.6 修复bug过程有时候会自己新增不需要的功能
- 解决方式：在提示词中主动加上“仅修改XXbug，不要改变现有功能”来尽量规避。
GLM4.6 无法很好识别父子容器的层级关系，相关容器的样式调整不理想，最后只能人工干预。
ReactNative APP中页面的顶部工具栏和弹框顶部的工具栏属于不同的实现，GLM4.6不能理解，认为二者是相同的，导致弹框的工具栏样式调整不理想，
- 解决方式：二次提醒它调整的样式无效，告诉它弹框和页面的工具栏是不同的控件实现。
采用Expo进行ReactNative APP开发，claude code会自己启动Expo，引发下面问题（解决方式：禁止cc 自己启动expo start 命令，手动启动调试）
由于无法及时采集到控制台输出会发生重复等待动作，消耗大量token
修复部分问题后，cc自己会先尝试kill进程，但是失败（windows下），然后就会使用新端口重新启动expo从而导致启动多个进程和端口占用问题。

6 相关链接

本次app的安卓apk下载地址：pan.quark.cn/s/20a45067c…
ClaudeCode官方文档：code.claude.com/docs/zh-CN
历史对话查看工具：github.com/d-kimuson/c…
- 文中部分对话截图非claude code原生页面，使用的是上面这个工具。

7 名词解释

以下为本文涉及的Claude Code 的重要知识说明。

7.1 记忆管理

启动 Claude Code 时，所有记忆文件都会自动加载到其上下文中。层次结构中较高的文件优先级更高，会首先加载，为更具体的内存提供基础。
Claude Code 在分层结构中提供四个记忆位置，每个位置都有不同的用途：

内存类型	位置	用途	用例示例	共享对象
企业策略	macOS: `/Library/Application Support/ClaudeCode/CLAUDE.md` Linux: `/etc/claude-code/CLAUDE.md` Windows: `C:\ProgramData\ClaudeCode\CLAUDE.md`	由 IT/DevOps 管理的组织范围内的说明	公司编码标准、安全策略、合规要求	组织中的所有用户
项目记忆	`./CLAUDE.md` 或 `./.claude/CLAUDE.md`	项目的团队共享说明	项目架构、编码标准、常见工作流	通过源代码控制的团队成员
用户记忆	`~/.claude/CLAUDE.md`	所有项目的个人偏好设置	代码样式偏好、个人工具快捷方式	仅限您（所有项目）
项目记忆（本地）	./CLAUDE.local.md	当前项目个人特定偏好		仅限您（当前项目）

7.2 权限管理

模式	描述
`default`	标准模式 - 首次使用每个工具时提示权限
`acceptEdits`	自动接受文件编辑权限（会话期间）
`plan`	计划模式 - Claude 只能分析，不能修改文件或执行命令
`bypassPermissions`	跳过所有权限提示（需要安全环境）

切换方式：
- 使用 Shift+Tab 循环切换模式：
  - Normal Mode → Auto-Accept Mode（显示 ⏵⏵ accept edits on）→ Plan Mode（显示 ⏸ plan mode on）
- 启动时指定：claude --permission-mode plan
- 可在 .claude/settings.json 中设置 defaultMode 作为默认值。

7.3 思考模式 (Thinking Mode)

让 Claude 在回答前进行更深入的推理分析，适合复杂问题、架构设计、疑难 Bug 排查。

触发方式：
1. 关键词触发：在提示中加入 think、think harder、ultrathink。
2. 快捷键切换：按 Tab 键（跨会话保持）。
3. 临时禁用：在提示前加 /t，如 /t 快速修复这个 typo。
思考深度级别：
- think：标准思考，适用于一般复杂问题。
- think harder：深度思考，适用于架构设计、复杂算法。
- ultrathink：极深思考，适用于系统级设计、疑难问题。
最佳实践：
- 复杂问题才用深度思考，简单任务用 ultrathink 是浪费。
- 结合具体问题描述，如 think about X 比单独 think 效果更好。
- 观察思考过程，理解 Claude 的推理逻辑。

7.4 计划模式 (Plan Mode)

将任务分为“计划”和“执行”两阶段，Claude 先制定详细计划，获得批准后再执行。适合大型重构、新功能开发。

进入方式：
1. 快捷键：Shift + Tab（连续按两次进入）。
2. 直接请求：“请先制定一个实现用户认证的计划”。
3. 启动时指定：claude --model opusplan（Opus 计划 + Sonnet 执行）。
工作流程：用户提出需求 → Claude 分析并制定分步计划 → 用户审查（批准/拒绝并反馈/手动修改）→ Claude 按计划执行 → 完成后汇报结果。
最佳实践：
- 大型任务必用计划模式，避免方向走偏。
- 提供明确的拒绝理由，帮助 Claude 理解期望。
- 复杂计划可分阶段审查。
- 使用 Opus Plan 模式：计划用 Opus（质量高），执行用 Sonnet（速度快）。