故事要从一堆手机相册里的半成品说起…… 灵感凌晨三点的手账债务作为一个宝妈你是不是也这样——宝宝第一次翻身拍了第一次叫妈妈录了第一次吃辅食连拍20张…… 然后呢然后就没有然后了。照片躺在相册里像一笔还不清的手账债务。每次想整理成手账打开排版软件选模板、调字体、加贴纸…… 半小时过去了孩子哭了手账下次吧。下次复下次下次何其多。我就在想能不能拍张照AI就把手账给我写了于是就有了「懒人手账」—— 一个让懒人也能坚持记录生活的小程序。 设计思路把简单做到极致核心理念三步完成一篇手账传统手账APP的问题是什么太复杂了。打开APP → 选择模板 → 上传图片 → 排版 → 写文案 → 加滤镜 → 选贴纸 → 调字体…… 等你弄完娃都睡了一觉了。懒人手账的逻辑刚好反过来选个风格日常/亲子/美食/旅行/探索/工作6种随便挑拍张照或者从相册选最多100张任性传点保存AI自动写文案、打标签、配表情就三步。多一步都算我输。六大风格覆盖生活全场景风格适用场景代表emoji 日常打卡写日记、自律打卡 ✅ ✨ 亲子遛娃宝宝成长、遛娃日常 ️ 美食记录探店打卡、DIY美食️ ☕ ️ 短途旅行周边游、露营、citywalk️ ✈️ ️ ️️ 探索新世界解锁新地点、体验新事物️ ✨ 工作学习打工人日记、学习打卡 ☕ 每种风格下还有N个快速模板点一下就自动填入正文标签连标题都给你想好了。 技术实现单文件HTML的快乐你没看错整个项目就是一个HTML文件。为什么用单文件因为——TRAE改起来方便所有代码在一个文件里AI一眼就能看懂上下文部署零成本扔到任何静态服务器都能跑甚至本地双击打开就行原型迭代快想到什么新功能马上就能改了看效果技术栈一览纯前端三件套HTML CSS JavaScript 数据存储localStorage浏览器本地存储 UI风格微信小程序风 梦幻紫粉配色 动画效果CSS transition 一点点小心机核心架构AppState 一把梭没有Redux没有Vuex就一个朴素的AppState对象管全局constAppState{user:null,// 用户信息handbooks:[...],// 手账列表activeTab:home,// 当前TabactiveView:home,// 当前页面theme:default,// 主题checkin:{},// 签到记录cloudBindings:{},// 云存储绑定// ... 等等等等};渲染就靠一个render()函数状态变了就重新渲染整个页面。什么虚拟DOM、diff算法…… 咱这页面小直接全量重绘也快得很。简单的项目用简单的方法。别搞复杂了。✨ 那些花了心思的小细节1. 智能emoji系统日历上每天显示的小图标不是瞎选的是根据记录风格智能匹配的functiongetSmartEmoji(handbook){// 有自定义emoji用它if(handbook.emojihandbook.emoji!)returnhandbook.emoji;// 按风格随机选conststyleEmojis{parenting:[,,,,],food:[️,,☕,,],// ...};if(styleEmojis[handbook.styleId]){return随机选一个;}// 实在没有就默认return;}为什么是随机因为生活需要一点小惊喜嘛。2. 上传图片的变形记新建手账页面的上传区域有两种形态没传图时占半屏的大框框引导你上传传了图后缩成一行滚动的小缩略图末尾一个号正文区域扩大就像这样[ 大大的上传框 ] → [图1][图2][图3][] [ 流程说明文字 ] [ 标题输入框 ] [ 正文大文本框 ]为什么这么设计因为没传图的时候用户需要明确的引导传了图之后重点就变成写内容了上传区域就该退居二线。3. 成就勋章给坚持一点仪式感光记录多无聊加点游戏化元素✍️记录达人累计写满10/50/100篇解锁铜/银/金摄影收藏家上传图片达到一定数量连续打卡连续记录7/30/100天全能选手体验过所有记录风格分享达人分享手账达到次数小小的勋章大大的成就感。4. 手账广场让记录被看见写了手账没人看那多寂寞。热榜TOP5按点赞浏览量排序看看大家都在看什么新榜TOP5按发布时间排序新鲜出炉的手账公开/私密切换想分享就公开想自留就私密全凭你心情 踩坑实录那些让我挠头的Bug做项目哪有不踩坑的说几个印象深刻的——坑1返回按钮神秘消失事件症状点击置顶、切换主题、签到…… 各种操作后页首的返回按钮就没了。排查过程第一次以为是CSS问题调了半天z-index第二次以为是DOM结构问题查了半天元素第三次打开控制台一看——红了哦原来renderDetail()里有一行$(#editBtn).onclick()...但是HTML里根本没有ideditBtn这个按钮JS报错了后面的renderNavBar()就没执行……修复加上缺失的编辑按钮保证JS不报错。心得页面出问题先看控制台90%的Bug都在报错信息里。坑2textarea高度不听话症状我把正文框的min-height改成320px了怎么还是那么矮原因HTML里写了内联样式stylemin-height:100px;内联样式优先级比类选择器高CSS被覆盖了。修复把内联样式删掉统一用CSS控制。心得CSS优先级是个好东西内联样式少用为妙。坑3日历图标叠罗汉症状同一天有多篇手账时emoji叠在一起还溢出格子了。修复用new Set()去重相同的emoji只显示一个最多显示1个多了显示N给格子加overflow: hidden防止溢出心得列表展示永远要考虑多了怎么办。 云备份给数据多一层安全感做记录类产品用户最担心的是什么数据丢了。所以我加了个快速备份到云功能支持三个选项☁️巨量云免费10GB极速传输百度云2TB大空间智能备份️私有NAS数据自己掌控隐私无忧点击后弹出仿微信授权风格的弹窗点同意授权就绑定成功了。虽然是模拟的但该有的仪式感一点不少——真实产品中这一块得接真实的SDK不过原型嘛模拟一下意思到了就行。 四套主题换个心情换个色做了四套配色方案总有一款适合你主题风格主色调主色调紫粉橙渐变 · 梦幻 #9D5BFF可爱活泼天蓝薄荷粉橙 · 少女 #FF8A83暖阳温馨橙黄黑白 · 温暖 #FF7530赛博朋克黄紫天蓝 · 霓虹 #F5E200点一下就切换瞬间换个心情。实现原理就是CSS变量 一个applyTheme()函数简单得很。 iPhone 17 Pro 外壳让原型更有那味儿为了让演示更有小程序内味儿我还加了个手机外壳模拟灵动岛侧边音量键、电源键底部Home Indicator圆角边框放在电脑上演示的时候一眼就能看出哦这是个小程序原型。 开发心得用TRAE做原型有多爽这次全程用TRAE开发最大的感受就是——快。快在哪里需求到原型一步到位把需求文档扔给TRAE它直接就能理解并生成代码。不用自己从零搭架子。改UI特别高效“按钮往左挪一点”、“颜色调淡一点”、“加个动画”—— 说人话就行TRAE秒改。Bug排查快遇到问题直接描述现象TRAE帮你分析原因、给出解决方案。不用查文档什么CSS属性、JS API记不住没关系TRAE都记得住。一些小建议如果你也想用TRAE做项目✅先想清楚再动手需求越清晰AI做出来的东西越符合预期✅小步快跑迭代一次改一个功能别一口气提一大堆需求✅多看图多对比有参考图的话效果会好很多✅别急着重构原型阶段能用就行代码整洁度往后放 写在最后做这个项目的初衷其实很简单我就是想让记录这件事变得更容易一点。我们这代人手机里存着成千上万张照片却很少有时间回头看。那些开心的、难过的、值得纪念的瞬间就静静地躺在相册里慢慢被遗忘。如果有一个工具能让你花10秒钟就能把那一刻的心情记录下来多年后翻到的时候还能想起当时的温暖—— 那就够了。生活值得被记录哪怕是用最懒的方式。项目地址lazy-handbook如何体验前往github 下载index.html直接预览报名帖TRAE AI创造力大赛 -初赛- 懒人手账如果觉得有意思欢迎点个Star ⭐ 有什么想法也欢迎在评论区交流 愿你也能找到属于自己的懒人记录法。