圣经打卡应用，从需求设计到部署上线

Table of contents

需求设计

我在打八段锦的时候想到了这个想法，我还在逐渐恢复读经的习惯，微读圣经等 APP 都提供读经打卡功能，但是强限制导致打卡断断续续，拖延上几天就不想再继续了。单纯的努力每天打开读一段又感觉看不到自己的成长，如果有一个 APP 能够做到随时记录我的进度，再书写一点感想就好了。

我知道这个需求不算特别大众，所以不打算花太多的时间去写，这也是为什么我采用 AI 全程 Vibe Coding

首先我和 Deepseek 网页端探讨了一下基本架构，他给出了几个方案。一个是前后端分离，用 FastAPI 做后端，前端用 Vue 写，数据库用 MySQL。另一个是用 Next.js 做全站开发，数据库用 SQLite。最后我决定用 Nuxt.js 开发，因为这样整体技术栈我完全了解，如果今后想要手动做改动，也比抓瞎现学要好

DS 提供了基本的数据库设计方案，感觉还不错。提到了如果真的按照小节而不是章来记录进度，那么数据库将会很庞大。圣经和合本大致有 3000 节。每天读一节然后指望自己能看到进度的这种可能性也不大…所以就这样了

Reasonix 是什么？

reasonix是面向终端的 DeepSeek 原生 AI coding agent。专门为 DS 做了前缀缓存调优，简而言之省钱，提高缓存命中率。

为什么用 DeepSeek？也是为了省钱，二五折太香，中转站不安全

综合用下来，reasonix 下的 DeepSeek 还是不太聪明，只会埋头干活，没有整体工程思维，中途遇到了其他 bug 也会装作没看见。Claude code cli 下的 DS 看起来就聪明的多。但是 Reasonix 仍旧因为省钱而主导了这次开发。一直到项目上线，大概花了 6-7 块钱

Skills 是什么？

一个让你的 AI 变得更聪明，有智能的提示词。

吹的很花，但对于新手，没人和我讲清楚怎么用，怎么马上就用上。

各大知名厂商都有自己的 skills 安装方法，但为了让除了 Claude Code CLI 和 Codex 之外的 CLI 也能用上，我使用了这个工具。之后安装都只需要类似以下这行代码

# 安装frontend-design
npx skills add anthropics/claude-code

各种各样的 Skill 可以在Agent Skills 市场找到

Superpower Skill？

参考：

• 十个顶级 Claude Code Skills，装上就不想卸 - 知乎
• Superpowers 最佳实践指南-从零到精通的实战手册 - 知乎

Superpowers 是一套完整的软件开发方法论，它建立在一组可组合的技能和一些初始指令之上，以确保您的代理能够使用这些技能和指令…简而言之，用更专业的思维来做整体开发

用npx skills安装时会发现 superpowers 拆分成了很多个小 skill，我只安装了五六个

npx skills add obra/superpowers

其中我 12345 都用了。1345 最重要

装完会在当前项目文件夹下新建一个.agent/skills文件夹存放对应的 skills。你打开哪个 CLI 基本都能用他们自己的方式搜到里面的 Skills。Reasonix 的方法是/skill show 输入指示（可不写）。Claude Code CLI 的调用方法是直接口头说你要用哪个…我开始的时候找半天怎么用

/skill brainstorming show 讲述我的圣经打卡网站基本开发理念和技术栈，然后它会给一些选择题，明晰你的需求细节。用这个 agent 最好的一点是（也可能我之前一直用免费的 Gemini CLI 没吃过好的）它会用 HTML 画不同的原型图，然后你可以根据原型图告诉它要调整的方向。一开始它提供了三种原型图方案，一种是以日历视图为主，还有一个是时间线为主。最后我指示它把这两种组合在一起再给我展示，效果以外地很好

确定了技术栈和原型图，就开始撰写方案。/skill writing-plans show让它自动写。写完我审查一遍直接/skill subagent-driven-development让它开始自己写。

正式开发

其实我还是没太弄懂 3 和 4 的顺序问题，理论上用了 3 以后它不会主动写，实际上它写得可欢。最后我下定中途打断它开启 4，让它测试驱动。agent 一开始没想到该如何在没有测试框架的情况下写测试，但最后它通过断言找到了方法（在很多轮开发后）。

很快它就写完了前后端让我过目，不得不说比豆包 Trae 写的好多了，整体界面也保持了一致风格，没有 Element Plus UI 一套到底，写了一套带日历、进度收集、注册登录、路由校验的完整系统。但这还没完

我首先发现它默认使用的打卡方式是自己填写章和节，并且格式很不明晰，这也暴露出我前期的需求分析不足。章和节都可以随意填写，创世纪只有 50 章你可以写读到了第 100 章，但是在数据库中是有插入圣经每一卷书的章节数的，我立即要求它做测试驱动，检查每个接口是否正常并且也需要测试边界值。这一次 AI 很详细地完成了任务，并且根据我的要求将章节的选择改为了数字选择器（或者叫网格选择器）。但是章和节之间的界限仍然不明确。最终我自己明确了需求：在只填写一个章节时，展示一个节范围选择，有≥两个章节时，有两个节选择。不填的情况下默认为整章。AI 完美地完成了这个需求，并且自动添加了不填的情况下默认选择已阅读整章的功能。并且为不同的情况添加了不同的打卡记录卡片样式。

基础功能完成后，我准备先在 Vercel 上线再逐步改进。第一步就遭遇了滑铁卢，SQlite 无法在 Vercel 上动态地增减数据，我必须使用云数据库。在 AI 的推荐下，我使用了Turso，一个和 SQlite 相性很好的云数据库，并且有不错的免费额度，足够我和我可能的兄弟姐妹们使用。

我把这个步骤完全交给了 Vibe Coding，这搞出了不少麻烦。首先 DS 使用的方式和官方推荐的完全不同，导致项目无法被部署上线，等到它修到可以上线时，尝试登录又会遭遇 Server Error，通过 Vercel 的后台报错可以查看到是接口报错，然后又是好一番修，我一度以为 AI 使用的可能是过时的老方法，但最终它确实把接口跑了起来，我可以正常注册和登录了。

这里要提到我为什么不在自己的服务器上上线，那简单的多。原因是我不希望在没有准备好的情况下把我的服务器暴露在公网上。而且我也还没有买对应的域名，Vercel、Github 或者 Cloudflare 都会提供一个带 HTTPS 证书的免费域名，而在服务器上部署就没那么好运了。

随后发现输入章节名时报错，让 AI 修了一下，这个时候发现它把所有的请求都改成了异步，也就是之前都不是…能跑起来也很厉害了。

暗黑模式之殇

本来到这里就结束了，结果我想做一个暗黑模式，这样晚上看没那么瞎眼，没想到这居然难住了 DS，它总是无法将所有的东西都暗掉，比如日历、输入框、进度条等各种小组件，在经过至少四五次无效且浪费 token 的重试后，我撤回了全部操作（感谢 Git）并且让 Gemini 重操旧业替我分析一下该如何做暗黑模式，随后将 Gemini 提供的细节再提供给 Claude Code CLI，这回暗黑模式终于完工，只再改了一下日历的颜色。

再一次让我知道了工程思维的重要性，即使是对于 AI 的，如果不是最终改变思维方向，真就卡这了

总结

不省钱还是用 CC 吧，CC + DS 也成，还是聪明多了。