起因

去年春天的一个晚上，我又一次因为写作业的事跟女儿陷入拉锯。

“先写作业再看动画片。”
“等一下嘛，就五分钟。”

这个对话每天循环播放。市面上不缺儿童自律软件，我下载了一圈之后发现几个共性问题：

1. 广告太多。打开APP先弹广告，孩子拿着手机乱点，不知道会跳到哪里去。
2. 规则写死。什么行为给几分、换什么奖励，产品经理替你定好了。
3. 没有孩子视角。大部分工具是给家长看的看板，孩子没有独立的操作界面。

既然找不到合适的，干脆自己写一个吧。前后端都会，一个周末应该能出个原型。

结果这个"周末原型"做了一年。从最简单的两个功能（家长布置任务、孩子勾掉完成），慢慢具备了完整的功能。

现在它有任务墙、习惯打卡、家庭银行、奖章系统、多孩管理，支持微信小程序和安卓APP。女儿用它安排每天的作业和阅读，还会自己去家庭银行看看利息到账了没有。

我把APP公开后，发现不少陌生用户也在用。于是搭了个官方网站，把完整的用户使用说明书放上去，方便大家查阅。

---

技术选型

官网采用纯静态方案：

• Tailwind CSS 3：Utility-first 框架，快速出样式
• 纯 HTML：无前端框架，无构建步骤（除了 Tailwind）
• 内联 JSON-LD：结构化数据直接写在 HTML 中
• 部署：直接上传到 Nginx 服务器

没有用 React/Vue，因为官网是内容型网站，不需要交互逻辑。纯 HTML 加载更快，对 SEO 更友好。

---

CSS 构建流水线

官网所有页面共用同一套 Tailwind 主题色：

// tailwind.config.js
module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {
      colors: {
        primary: '#4F7A6B',
        secondary: '#F3EFE6',
        neutral: '#FCFAF7',
        dark: '#333333'
      }
    }
  }
}

用 Tailwind CLI 构建，产物只有 17KB：

npm run tw:build
# tailwindcss -i ./src/input.css -o ./css/tailwind.css --minify

对比之前用 CDN 加载（约 3MB 的 JS），体积减少 99.4%，而且去掉了 JS 依赖。爬虫抓取时能直接看到完整样式。

---

结构化数据与 SEO

官网被百度和大模型发现的概率，很大程度上取决于结构化数据是否完整。所有页面都嵌入了对应的 JSON-LD：

页面	结构化数据类型
首页	SoftwareApplication（含 alternateName）
博客文章	Article（含 datePublished、dateModified、mainEntityOfPage）
常见问题	FAQPage（10组问答）
安装教程	HowTo（4步安装流程）
使用说明书	Book + SoftwareApplication.documentation

搜索"自律APP"或者"儿童自律"时，这些结构化数据能让搜索引擎在结果页直接展示更丰富的信息。

另外在网站根目录放了一个 llms.txt 文件，这是最近兴起的一个标准，专门帮助大模型爬虫快速了解网站内容和结构。

---

关于"计划"功能的一个前端设计

APP里有一个我觉得比较有意思的设计，值得单独说说。

"计划"功能是这样的：家长设置一个长期规则（比如"每日阅读30分钟"），系统每天零点自动在孩子的任务墙上生成当天的任务。

但生成的任务没有固定开始时间。

技术上实现起来很简单——任务表里 start_time 字段留空就行。但这个空字段承载了一个教育目的：

孩子打开任务墙，看到待分配时间的任务，需要自己决定：下午四点做还是晚上七点做？

当他设定了执行时间，这个任务就从 “别人安排的事” 变成了 “我承诺要做的事”。一次简单的 select 操作，一次从被动到主动的转换。

这就是产品设计里常说的"affordance"——界面暗示用户应该做什么。一个空的时间选择器，比一百句"你要学会时间管理"都管用。

---

家庭银行：一个独立的记账系统

家庭银行是 APP 里跟积分系统完全独立的模块。它用真实金额（元），不是积分。

这个模块后端是一个独立的账本系统：活期账户、定期存单、理财产品。家长存入压岁钱，孩子可以操作转定期，观察利息增长。

有用户反馈说孩子为了看利息到账，每周都会打开 APP 查看。对于一个二年级的孩子来说，"被动储蓄"的概念就这样建立起来了。

设计这个模块时，我刻意把两套系统做了解耦。积分系统管行为激励，银行系统管金钱教育——各自独立，互不越界。这是从后端架构的 “关注点分离” 原则抄来的思路。

---

欢迎体验

• 体验地址：https://www.treehome.top

---

项目开源

官方网站的全部源码已开源在 GitHub。

• 官网页面GitHub 开源：https://github.com/JumpX24/treehome.git
  如果你也在做类似的项目，或者对某个功能的设计思路感兴趣，欢迎交流，下一步我将开源APP代码。