WeChat Mini Program

Baby Tracker Mini

2026

VIBE CODING UI/UX

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 完成的微信小程序。它记录奶量、吃奶时长、睡眠时间、大便次数以及辅食排敏,把日常育儿变成清晰、可瞥见的数据。

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.

将蔬菜、肉类、水果标记为安全或过敏,并支持自定义食物。

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,以及大而易触的卡片。点击下方标签切换界面。

9:41Yun端育儿记
喂养记录
7月2日 星期三
当前奶量
90 ml
milk
吃奶时间
计时中...
00:12:34
sleep
睡眠时间
按一下开始计时
diaper
大便次数
按一下记录一次
今日数据
复制数据
7月2日 星期三
milk
420ml
吃奶
sleep
3小时
睡眠
diaper
2次
大便
milk
吃奶记录
08:30 - 08:55
25分钟
90ml
编辑
×
12:10 - 12:40
30分钟
120ml
编辑
×
sleep
睡眠记录
13:00 - 16:00
3小时
编辑
×
过往数据
2026年7月1日 周二
milk 90ml
sleep 1次
diaper 2次
+
08:30 - 08:5590ml
13:00 - 16:003小时
09:102次
2026年6月30日 周一
milk 360ml
diaper 1次
+
07:20 - 07:50120ml
11:00 - 11:30120ml
15:00 - 15:30120ml
08:301次
排敏
复制
记录宝宝对食物的适应情况
蔬菜
肉类
水果
过敏源
安全
过敏
菠菜
土豆
西兰花
番茄
添加
记录
今日
过往
排敏

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.

小程序的色板非常克制:近黑表面、炭灰卡片、一个紫色强调色、一个红色危险色。之所以采用暗色调,是为了让妈妈在夜间使用时,不会因为屏幕过亮而吸引宝宝的注意力。

Background #171717

Deep surface that lets cards float.

深色底让卡片浮起来。

Card #252525

Slightly lifted containers for every section.

比背景稍亮的容器,用于每个模块。

Accent #9A4EF0

One purple for primary actions and active states.

唯一的紫色,用于主要操作与激活状态。

Danger #FF3B30

Red reserved for deletion and allergy alerts.

红色仅用于删除与过敏提醒。

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 通过简单的事件总线通信。没有后端,没有复杂构建流程,只有一个快速落地并可用的想法。