【Code with SOLO】我是怎么用一个周末,把育儿痛点变成一个Web应用

我是怎么用一个周末,把育儿痛点变成一个奖励打卡应用

一个不会写代码的家长,靠AI把一个Excel表格变成了一个打卡激励系统。全程记录,供想自己动手的你参考。


先来看看目前的成果吧

一、故事的起点:当妈的那些崩溃瞬间

先说说我为什么要搞这个东西。

我家娃今年上小学,跟很多家长一样,我每天最头疼的不是辅导作业,而是怎么让他养成好习惯。

每天早上像打仗:

  • 叫起床叫三遍才肯动

  • 刷牙敷衍了事,30秒完事

  • 穿衣服磨磨蹭蹭,出门前总要催十遍"快点快点"

每天晚上像谈判:

  • “再看一集动画片嘛”——每天必演这一出

  • 说好9点半睡觉,拖到10点还在玩

  • 第二天早上起不来,恶性循环

奖励机制也玩崩过:

  • 一开始说攒够10颗星买玩具,结果他两天就放弃了——太难了

  • 后来降低门槛,攒3颗星就能换零食,结果他天天只想吃零食,别的都不care

  • 奖励执行得断断续续,孩子也疲了

我就在想,能不能有个东西帮我:

  • 把每天该做的事列清楚

  • 自动算好积分,不用我拿计算器按

  • 奖励分级,小目标和大目标都有

  • 最好能导出打印,贴在冰箱上

说白了,我想要一个"傻瓜式"的育儿管理工具。

但市面上找了一圈,要么太复杂,要么功能不全。干脆,我自己做一个。


二、想清楚:我到底需要什么?

动手之前,我花了一个晚上,把需求想清楚。

先列场景

我把平时带娃的场景一条条写下来:

早上出门前:

  • 起床 → 洗漱 → 穿衣 → 早餐 → 整理书包

  • 每完成一项,得一颗星

  • 孩子自己能看到进度条,有成就感

放学回家后:

  • 洗手换衣服 → 写作业 → 练鼓30分钟 → 洗漱 → 睡觉

  • 学习任务要灵活:周一/四/六有英语班,那天就不用在家学英语了

  • 周六有数学班,思维训练也可以省

周末复盘:

  • 这周全勤了吗?课外班迟到几次?

  • 主动做家务了吗?

  • 户外运动够不够?

  • 练鼓累计有4次吗?

奖励怎么设:

  • 小奖励(3-5颗星):零食券、屏幕时间、晚睡20分钟

  • 大奖励(20-50颗星):去动物园、买玩具、邀请朋友来家里玩

再理结构

想清楚场景后,我把内容整理成一份清单:

第一部分:每天该做的事
├── 早晨:起床、洗漱、穿衣、早餐、出门
├── 晚上:洗手、作业、练鼓、洗漱、睡觉
└── 家长必做:看班级通知、跟老师沟通

第二部分:每周学习计划
├── 英语班的日子(周一/四/六),家里不学英语
├── 数学班的日子(周六),家里不练思维
└── 周日程表(自动根据课外班调整)

第三部分:周期性任务
├── 每周:剪指甲、换洗衣服、盘点物资
├── 每月:量身高、查视力、整理衣物
└── 每学期:体检、交学费、跟老师沟通

第四部分:奖励超市
├── 日常小特权(3-5颗星)
└── 终极愿望(20-50颗星)

这份清单就是我后来做产品的业务基础。

经验: 别急着动手,先把需求想清楚。想不清楚就做不出来,就算做出来了也不是你想要的。


三、写PRD:把想法变成文档

清单有了,下一步是把它写成产品需求文档(PRD)。

你可能会问:做个小工具也要写PRD?

我的体会是:写不写PRD,差别巨大。

不写PRD的后果

我之前也试过直接跟AI说"帮我做个打卡应用",结果:

  • AI做了一堆我根本不需要的功能

  • 我要的功能反而没做

  • 改来改去,越改越乱

写了PRD之后

有了PRD,我跟AI沟通就变成了:

"根据PRD第3.1节,实现任务管理功能,要求如下:

  1. 任务分四类:每日/每周/每月/学期

  2. 支持增删改查

  3. 数据存在本地"

AI一下子就懂了,输出的代码基本可用。

我的PRD长什么样

其实很简单,就几个部分:

一句话说清楚产品:

面向家长的儿童日常抚养管理工具,提供任务配置、日程生成、打卡记录、积分奖励。

谁会用:

  • 家长(我):管理任务、查看记录

  • 孩子:打卡、攒星星、换奖励

用户故事(帮助理解场景):

  • 我想添加一个新任务"整理书桌",设2颗星

  • 我想加个奖励"周末露营",要50颗星

  • 周一早上我想看本周安排

  • 晚上孩子完成任务,我帮他勾选

  • 孩子攒了30颗星,想换"好朋友派对"

页面结构:

  • 首页:今天该做什么、当前多少星、本周进度

  • 任务管理:增删改查任务

  • 日程表:周日程表

  • 打卡记录:每天打卡、积分统计

  • 设置:奖励配置、孩子信息

经验: PRD不用写得很正式,但一定要写清楚。你用大白话写都行,关键是逻辑要通。


四、做计划:排优先级,分步来

PRD写好后,我没急着让AI写代码,而是先做了个计划。

哪些功能先做?

我把功能分了个优先级:

必须有的(P0):

  • 任务管理

  • 打卡记录

  • 积分系统

  • 首页概览

应该有的(P1):

  • 日程表生成

  • 奖励配置

  • 响应式设计(手机电脑都能看)

  • 兑换历史

锦上添花的(P2):

  • 数据导出

  • 积分图表

  • 多孩子支持

分几轮做?

第一轮:搭架子

  • 初始化项目

  • 配路由(几个页面)

  • 搭数据管理框架

  • 先塞点假数据,看看效果

第二轮:做核心

  • 任务管理页面

  • 打卡页面

  • 首页仪表盘

第三轮:加功能

  • 日程表生成

  • 奖励兑换

  • 积分计算逻辑

第四轮:调体验

  • 手机、平板、电脑都适配一下

  • 导出功能

  • 细节打磨

第五轮:加点好玩的

  • 幸运转盘

  • 抽奖动画

经验: 别想一口气做完。每轮做完测试一下,能用就行,别追求完美。


五、干活:AI辅助开发的真实体验

我怎么用AI写代码?

说句大实话:我不会写代码。 但我发现,只要你把需求说清楚,AI就能帮你写。

关键就是:把文档变成提示词。

对比一下两种问法

:cross_mark: 失败的问法:

“帮我做一个打卡应用”

结果:AI随便做了个demo,跟我想要的完全不沾边。

:white_check_mark: 成功的问法:

"根据PRD文档,用Vue3实现任务管理功能:

  1. 任务分四类:每日/每周/每月/学期

  2. 每个任务有名称、描述、积分

  3. 支持增删改查

  4. 数据用本地存储"

结果:AI生成的代码基本可用,我只需要调调样式。

一个功能的完整开发流程

以"打卡功能"为例:

第一步:想清楚需求

  • 用户要能勾选已完成的任务

  • 系统自动算积分

  • 能看历史记录

第二步:想数据结构 打卡记录大概长这样:

{
  日期: "2026-05-01",
  完成任务: ["刷牙", "穿衣", "收书包"],
  获得积分: 3
}

第三步:画界面草图 脑子里过一遍:

  • 顶部:日期选择器

  • 中间:任务列表(带勾选框)

  • 底部:当日积分汇总

第四步:告诉AI

"用Vue3做打卡页面:

  1. 顶部日期选择器,能切换看不同日期

  2. 中间显示任务列表,每项有勾选框

  3. 勾选后自动更新积分

  4. 数据存在store里"

第五步:测试调整

  • 切换日期试试

  • 积分算的对不对

  • 样式调一调

就这样,一个功能一个功能地做。

我的Git提交记录

开发过程中,每完成一个阶段就提交一次:

  1. 初始化

搭项目、装依赖、配环境

  1. 调样式

响应式布局、导出功能

  1. 打卡体系

应用改名、日期选择、任务状态

  1. 转盘功能

幸运转盘、抽奖逻辑

  1. 大屏适配

支持超大屏幕、重构周视图

  1. 细节打磨

卡片尺寸、布局优化

  1. 功能完善

打卡交互、导航重构

经验: 每做完一件事就提交一次,写清楚做了什么。万一改坏了,还能回退。


六、产品逻辑复盘

做完了回头看,核心的业务逻辑其实就这几条:

积分怎么算?

每天完成任务 → 得对应星星

周末额外奖励:
  全勤(不迟到不请假) → +3星
  主动做家务2次以上 → +2星
  户外运动达标 → +2星
  练鼓累计4次以上 → +3星

智能减负怎么搞?

当天有英语班(周一/四/六) → 家里不学英语
当天有数学班(周六) → 家里不练思维

奖励怎么兑换?

星星够 → 可以兑换,扣掉相应星星
星星不够 → "星星不够哦,继续加油!"

最重要的原则:只奖不罚

没完成任务?只是今天得不到星星。 绝对不扣已有的星星。

这个是我从血泪教训中学到的。之前试过扣分,娃直接摆烂不干了。


七、踩过的坑

坑1:一开始想得太复杂

最开始我想做用户登录、云端同步、多设备……结果发现,连最基础的打卡功能都没做出来。

教训: 先做最小可用版本,其他的后面再加。

坑2:没想清楚就给AI下指令

前面说了,直接说"帮我做个打卡应用",AI根本不知道你要什么。

教训: 先写文档,再让AI干活。

坑3:一次性改太多

有一次我让AI同时改了打卡逻辑、样式、路由,结果出bug了,排查了半天不知道是哪改的。

教训: 一次只改一件事,改完测试一下,再继续。

坑4:忽视响应式

做完在电脑上看挺好,一用手机发现根本没法用。

教训: 从一开始就要考虑手机端的显示。


八、下一步:后端开发计划

现在的局限

目前数据都存在浏览器里,有几个问题:

  • 换个设备数据就没了

  • 家人想看记录,得用我的电脑

  • 浏览器清缓存,数据全丢

  • 用久了怕存储空间不够

后端要做啥?

用户系统

  • 注册登录

  • 家长账号可以关联孩子账号

  • 一家人都能看

数据存云端

  • 任务、打卡记录都存在服务器

  • 换设备不丢数据

  • 定期自动备份

多孩子支持

  • 一个账号管多个娃

  • 每个孩子独立的任务和积分

  • 孩子视角界面简化(字大一点,操作少一点)

过渡方案

后端开发期间,不影响现在的使用。前端继续用本地存储,后端好了之后切换过来就行。


九、掏心窝子的话

给想自己动手的你

  1. 从真实痛点出发 别为了做产品而做产品。你自己遇到的问题,大概率别人也遇到了。

  2. 先想清楚再动手 花一天想清楚需求,比花一周改来改去效率高多了。

  3. 文档是神器 PRD不用很正式,但一定要写。它是你和AI沟通的桥梁。

  4. 分步走,别贪心 先做最小可用版本,能用就行。后面再慢慢加功能。

  5. AI不是万能的 AI能写代码,但不懂你的用户。业务逻辑、产品方向,得你自己把控。

  6. 别怕犯错 我做的时候也踩了很多坑。踩坑不可怕,可怕的是不敢开始。

总结成一句话

想清楚 → 写下来 → 分步骤 → 逐步做

不需要一开始就想得很完美。先做出来,再慢慢改。AI辅助开发最大的价值是降低实现门槛,但产品思维和需求洞察,始终是你自己的事。


十、写在最后

从一个想法到一个功能完整的应用,前前后后花了不少时间,但做出来的那一刻,成就感满满。

目前前端功能基本完善,下一步准备搞后端,让数据存到云端,真正成为一个全家都能用的工具。

如果你也有类似的痛点,不妨试试自己动手。不会写代码也没关系,现在AI这么强,只要你把需求说清楚,它就能帮你实现。

共勉。

1 个赞