Overview
A tiny companion for new parents
Baby Tracker Mini is a WeChat Mini Program built through vibe coding. It tracks feeding volume, nursing duration, sleep time, diaper changes, and food-allergy introductions — turning daily baby care into calm, glanceable data.
《云端育儿记》是一款通过 vibe coding 完成的微信小程序。它记录奶量、吃奶时长、睡眠时间、大便次数以及辅食排敏,把日常育儿变成清晰、可瞥见的数据。
Features
Four screens, one flow
Record
One-tap timers for nursing and sleep, plus adjustable milk volume from 30 to 300 ml.
一键计时喂养与睡眠,奶量可在 30–300 ml 间调节。
Today
Daily totals at a glance, with editable records and a one-tap copy report.
今日总量一目了然,可编辑记录并一键复制日报。
Past
Collapsible day cards group past milk, sleep, and diaper data by date.
按日期折叠的历史卡片,汇总往日吃奶、睡眠与大便记录。
Allergy
Tag vegetables, meats, and fruits as safe or allergic, with a custom-food list.
将蔬菜、肉类、水果标记为安全或过敏,并支持自定义食物。
Interface
Dark, quiet, and thumb-friendly
The interface mirrors the WeChat Mini Program almost pixel for pixel: a deep charcoal canvas, a single purple accent, floating capsule tab bar, and large tappable cards. Tap the tabs below to switch screens.
界面几乎一比一还原了微信小程序:深炭黑画布、单一紫色强调色、悬浮胶囊 tab bar,以及大而易触的卡片。点击下方标签切换界面。
360ml
1次Design System
Tokens extracted from the source
The Mini Program keeps its palette tight: near-black surfaces, charcoal cards, one purple accent, and a red for danger. The dark tone was chosen so mothers can use it at night without a bright screen attracting the baby's attention.
小程序的色板非常克制:近黑表面、炭灰卡片、一个紫色强调色、一个红色危险色。之所以采用暗色调,是为了让妈妈在夜间使用时,不会因为屏幕过亮而吸引宝宝的注意力。
Deep surface that lets cards float.
深色底让卡片浮起来。
Slightly lifted containers for every section.
比背景稍亮的容器,用于每个模块。
One purple for primary actions and active states.
唯一的紫色,用于主要操作与激活状态。
Red reserved for deletion and allergy alerts.
红色仅用于删除与过敏提醒。
Vibe Coding
Built by iterating, not architecting
The whole app was built with Taro 4, React 18, and TypeScript in a single, conversational dev loop. State lives in local storage. The custom tab bar communicates through a simple event bus. No backend, no build pipeline, just a working idea shipped fast.
整个应用用 Taro 4、React 18 和 TypeScript 在一次对话式开发循环中完成。状态存在本地存储,自定义 tab bar 通过简单的事件总线通信。没有后端,没有复杂构建流程,只有一个快速落地并可用的想法。
1次