[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"project-6a643b990f9016d810607453":12,"projects-adjacent":28},{"siteName":4,"siteDescription":5,"authorName":6,"copyright":7,"logoSymbol":8,"createdAt":9,"updatedAt":10,"id":11},"DICE","前端工程师的技术日志，记录 AI 探索与独立开发的思考","dice","Copyright © 2026 Dice. All rights reserved.","https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Fb263d41b758729f8a32abdfeed19f620b85b22e9f4e2a126b2bd016f88a4df41",1782794723207,1783653454363,"6a4349e3ab9e79d68cae07a4",{"id":13,"title":14,"summary":15,"content":16,"cover":17,"category":18,"technologies":19,"stars":-1,"updatedAt":24,"status":25,"featured":-1,"repoUrl":-1,"demoUrl":-1,"maintained":26,"startedAt":27},"6a643b990f9016d810607453","微信小程序-牌聚","闲暇时与朋友们娱乐打牌，经常使用打牌记账的微信小程序，使用过程中产生许多痛点，决定从0到1开发一款更好用的打牌记账微信小程序。","## 背景\n 闲暇时间会与朋友们一起娱乐玩桌游，避免不了有时候需要使用计分，但是线下计分太麻烦，所以会经常使用微信小程序计分工具，例如：打牌记账。\n\n使用久了，就会发现其实挺多痛点，所以我决定从0到1开发一款用户体验更好的的计分工具。\n\n## 痛点\n这里以“打牌记账”的计分工具为例。\n\n### 痛点一：加入房间不够便捷\n\n这款微信小程序需要由创建人创建房间后，弹出加入房间的二维码，进入房间的有两种，要么直接扫码加入，要么由创建人转发出去。这里其实就存在痛点了，其一二维码：大家不在很近的距离，需要走到创建人的旁边去扫这个二维码，这时有人会说了，那可以转发呀。这就是其二：确实可以转发，如果一起玩游戏的朋友不是一个群聊的，那么需要一个个转发，稍显麻烦。\n\n我并不觉得这两个是不好的功能，反而我觉得可以扩展的更方便。所以我在这基础上扩充了两个**新功能**，更加方便快速的加入房间。\n\n1. **功能一**：**房间号加入房间**，发起人创建房间后，可以告诉其他人房间号，其他人填入房间号快速加入房间，这里一开始我设计了6位数，后面感觉太长了，所以我缩减为四位数，增加回收机制，增加用户体验。\n2. **功能二**：**邀请好友加入**，那么这个功能其实我是参考一些游戏app里的邀请好友机制。一起玩过游戏的朋友，彼此会成为好友，当发起人创建房间后，可以快速邀请好友。好友打开微信小程序就会出现弹窗邀请的动态，点击加入就能快速加入房间。\n\n\n### 痛点二：分数转换不够全面。\n\n1. **分数无法撤回**：有时候在转分给朋友的时候，发现有时候会转错，这时手机已经放下了，又要重新拿起来操作一遍，简单来说没有撤回挽回的功能。\n2. **房费无法直接参与**：与朋友们玩桌游除了在家玩，也会出去玩。出去玩避免不了AA房费的情况，那么就需要一个东西来承接这笔费用，那么就是虚拟席位：”茶水“。目前的小程序的茶水只支持了手动转入和百分比扣除。\n\n针对这两个问题：\n\n1. **撤回功能**：参考微信的发消息撤回，直接让转错分数的用户能够直接点撤回。\n2. **茶水席新增固定分数**： 房主开房时或者快要结束时，计算每人需要支持的AA的费用，设置茶水费用，直接从每人的分数里自动扣除并且新加入的成员自动扣除。\n\n以上的痛点优化之后可以极大的提升用户体验。\n\n## UI设计\n\n这期间我用了很多AI去画原型，给我的效果都不理想或者说都是不好看的，设计出来的基本都是紫色或者渐变效果的UI图。其中有两个设计的效果出奇的不错：\n\n- **Codex Image2**：一开始我是让codex以html的形式制作UI图，输出的简直还不如我自己做的。后面改用image2去制作UI图片，出来的效果只能说 符合我的要求。缺点就是无法直接使用。\n- **Figma AI**：figma是专门用来制作UI设计图的，所以我尝试使用它们的AI去制作UI图，出来的效果也很不错，基本能看，布局排版都合理。\n\n最后我是让Codex先制作UI的草图，也就是基本的排版布局的html的草图，排版布局我觉得没问题就使用Image2去按照这个排版布局不动的情况下按照iphone6的尺寸比例去设计UI，并且将UI其中的背景、icon等拆出来，颜色色号标记出来。出来的效果能达到我90%的要求，但还需要进一步的优化提示词，后续能完全输出的时候，我会制作成Skill分享出来。\n\n首页（figma基础功能生成）：\n![figma-首页](https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Fbc1f3133c9f30064f90863e0fca720b5d3a4dcc936776ed8b44a74bf484e0428)\n\n首页-优化（codex基于figma生成的首页进一步优化）：\n![封面图](https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Fb052e720572c530928ff07f735bbf6338a271533a727891177388a0bb6385973)\n\n\n详情页-草图（codex基本线条框架）：\n![草图](https:\u002F\u002Fstatic.diceio.com\u002Ff\u002F3f66d807fd15069f70f110037e5f0c42bea67e42130e4b7ba22ef3a4ba2ee6fd)\n\n详情页-高保真（codex提示词调整后）：\n![详情-2](https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Faa65a1abc5ea5110f63c44f8f515182a5127d2235844d7709a2fb19e38117b0d)\n\n\n## 技术栈\n\n- 前端：**Taro4 + Typescript + Webpack +Taroify。** 本来打算使用tailwindcss，足够方便、快捷，单一职责。懒得封装组件了就采用taroify UI库，taroify的库也挺小的。\n- 后端： Nest.js。学习使用新的框架，但多半都是让AI协助写的，还没完全熟悉，后续会自己单独写一些demo熟悉这个框架。\n- 数据库：Mongodb。\n- 数据缓存： Redis。\n- 数据交互：Websock。\n\n## 总结\n\n这个小程序我是采用speck-kit和open-spec协同开发，让我从“一句话编程”到”规范流程编程“，体验上给我的感觉又回到了熟悉的开发步骤，虽然可能比“一句话编程”慢了一些，但是能让整个项目的代码更加规范规整，不会变成一坨屎上，并且AI不会魔改。\n\n小程序扫码体验：\n\n![小程序二维码-记账](https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Febf824a07ea45eddd0981854c3d039386e5f5596355c52ea82f43664f8c77705)\n\n\n\n\n","https:\u002F\u002Fstatic.diceio.com\u002Ff\u002Fb052e720572c530928ff07f735bbf6338a271533a727891177388a0bb6385973","personal",[20,21,22,23],"Taro3","React","Nest.js","Mongodb",1785295872153,"published",true,1782835200000,[29,32],{"id":13,"title":14,"summary":15,"content":-1,"cover":17,"category":18,"technologies":30,"stars":-1,"updatedAt":31,"status":25,"featured":-1,"repoUrl":-1,"demoUrl":-1,"maintained":26,"startedAt":27},[20,21,22,23],"",{"id":33,"title":34,"summary":35,"content":-1,"cover":36,"category":18,"technologies":37,"stars":-1,"updatedAt":31,"status":25,"featured":-1,"repoUrl":-1,"demoUrl":-1,"maintained":26,"startedAt":40},"6a437bebab9e79d68cae0956","个人博客 —— 从零到上线的全栈实践","Dice是一个基于 Monorepo 架构的全栈个人博客系统，包含前台展示、内容管理后台、后端 API 和独立文件存储服务，从开发到部署全程自建。","\u002Fcovers\u002Fproj-0.webp",[38,39,21,23],"Nux.js","Koa2",1778342400000]