企业官网建设流程全解析

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

1. 启用思考模式（首次使用忘记及时启用计划模式，用的accept edits模式生成）。
2. cc完成初始化工程结构和实现基本功能，但是存在部分bug。

@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.5 功能迭代

• 使用plan mode 输入提示词

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

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

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

3.6 制作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.7 编译安卓APP

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

方法一：使用 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 问题记录

• 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从而导致启动多个进程和端口占用问题。
  

5 相关链接

• 本次app安卓体验下载地址：
  https://pan.quark.cn/s/20a45067c793?pwd=mkjG