一款面向备孕—怀孕—分娩—育儿全阶段的轻量答题学习小程序，用更有情绪的动效与反馈，把枯燥知识变成“每天刷一刷”的陪伴式练习。

这是我一次脱离Figma，在代码侧去做的界面设计 与 前端动效～

为什么做这个呀？

去年12月，前阵子同事和我说想做一个「爸爸备孕」的答题小程序，本来是想自己设计界面，但实在太懒了，一拖再拖，然后看到大家分享了很多用Gemini3生成的案例，视觉效果确实不错，就想着偷个懒试试～

整个小程序，没有出设计图，前端页面是下午用了几个小时的时候纯话聊，聊出来的界面和动效。 在AI studio把前端主页面样式搭好之后，我就导出到IDE里转为继续完善了（界面都写好后，同事转为uniapp继续开发）

主要亮点

• 分阶段答题学习：按人生阶段拆题库，适合碎片化刷题
• 邀请伴侣 & 排行挑战：支持伴侣加入、榜单激励，提高参与感
• 沉浸式答题反馈：正确/错误会触发状态驱动的 视觉 + 动效 + 音效（例如卡片震动等），让反馈更“有感”
• 伴侣绑定的主题变色：从灰调切到“CP”模式，出现心跳连接的氛围效果
• 首页 Bento 卡片动效：卡片“发牌式”入场、曲线延迟，让首页更像一个轻量工作台
• 人物碎碎念气泡：自动轮播的“呼吸式弹出”小气泡，增强陪伴感与趣味性

我与AI沟通动效的几种方式

• Playground：让 AI 一次出几种效果,挑一个再迭代
• 提供参考代码：https://www.reactbits.dev/
• 类比已知模式：「像 iOS 弹回」等等，AI可以直接搜到的范式
• 截图+批注：例如，某元素 hover 时从这里飞到那里（给相对参照物）