我用 AI 做了个网站,下一步想把它挂在包上
作者不懂硬件,却想做一个小挂件:能挂在包上,按一下就能抽塔罗、看五行、读一句留给自己的提醒。AI 建议先把功能做成网站验证,于是有了「拾光」。文章记录了用 AI 找开源项目、反复改交互的完整过程,以及下一步做原型的打算。

前段时间,我在小红书刷到有人做了一个电子宠物。
一个小屏幕、一颗按键,屏幕上是一只像素小猫,还能显示日历。作者说,是把程序部署到 ESP32 上实现的。
我看着它,突然有了一个想法:
如果这个小东西里,装的是塔罗、星座、五行,还有一句想留给自己的提醒呢?
外观做得好看一点,可以挂在包上。遇到事情拿不定主意,或者只是想停下来歇一会儿,就按一下,看看里面的内容。
我平时就喜欢手链、手表这些配饰,也对这些带点仪式感的东西感兴趣。越想越觉得,好像可以自己试着做一个。
但问题来了:我不懂硬件。
开发板买哪种?屏幕怎么选?写好的功能怎么装进去?是不是还需要一台一直开着的电脑?
于是,我开始和 AI 一点点聊。

灵感参考:小红书「满分轩宇💐」《做了一个电子宠物》,图中为原作者作品。
01 先聊清楚,我到底想做什么
刚开始,我想到的功能很多。
五行、星座、塔罗、答案之书,还想过接入 AI,让它根据问题给出更具体的解释。
但随着讨论,我发现有些事情要先确定。
比如,我希望它能挂在包上,看起来有装饰品的感觉;离开手机以后,也能自己按键操作;屏幕里的内容要简单,不能塞一大篇文章进去。
看参考产品时,我也慢慢发现了自己的偏好。
有些圆形产品,我觉得太像运动手表。相比之下,卡牌、票根那样的长方形,更接近我想要的样子。材质也讨论过,皮质看起来有质感,塑料则需要再考虑具体的做法和手感。
我想,可能最先喜欢它的人,应该是本来就对塔罗、星座、五行感兴趣,喜欢这些图案和仪式感的人。
至于它能帮上什么忙,我的想法很简单:
有时候,我们脑子里有很多事情,越想越乱。抽一张牌,读一句话,也许会让自己换个角度想一想。
“原来我纠结的是这个。”
“那我是不是可以先试一小步?”
我希望它能帮助人看清自己的想法,最后自己做决定。
这也是后来给它起名叫「拾光」时,我想保留下来的感觉。
02 AI 建议我:先做个网站,把功能试明白
一开始,我想直接买开发板和屏幕,动手做硬件。
但聊到具体怎么实现时,AI 给了我一个建议:
先把想要的功能做成网站,试试用起来怎么样,再做硬件。
我觉得有道理。
连自己想要什么都还没完全确定,就急着买零件,后面可能要反复折腾。
做成网站以后,我可以直接打开,填资料、抽牌、看解读。哪里不顺手,就截图告诉 AI,再继续改。
等功能和操作方式慢慢确定下来,再考虑怎么放进小屏幕、怎么用按键操作,心里也会更有数。
所以,「拾光」先有了现在这个网站。
它也是我接下来做硬件时,用来参考和验证功能的第一版。将来放到硬件里,还需要根据屏幕大小、按键和性能重新调整。

「拾光」首页:先在网页里,把想做的功能试一遍。
03 一个挺好用的方法:让 AI 帮我找开源项目
这次开发,我经常用到一个方法:
想做一个功能时,先让 AI 去 GitHub 找找,有没有别人已经做过的项目。
GitHub 上有很多公开的代码项目。有的是完整工具,有的只实现了一个小功能,比如卡牌动画、历法计算,或者某种页面效果。
我不一定能读懂这些代码,但可以告诉 AI,我想要什么,让它帮我找、帮我看。
比如塔罗,最初的版本只有一个按钮。点一下,就出现一张牌和一段文字。
我觉得太简单了,就继续问:
“有没有开源的塔罗工具?”
“有没有不需要 AI,也能给出基础解读的?”
“有没有一堆牌展开,然后自己从里面选三张的?”
找到参考以后,我会先看演示。觉得哪部分不错,就让 AI 读那部分代码,看看怎么实现,能不能用到我们的网站里。
一个项目不一定每个地方都适合自己。可能动画不错,但颜色不喜欢;也可能功能很全,但页面太复杂。
我就会继续说:
参考它的牌堆动画,选中的牌放在下面,手机上也要好操作。
这样比只说“帮我做得好看一点”具体得多。
确认可以使用后,再把适合的部分整合进来,改配色、布局、按钮和文案,最后实际用一遍,看看有没有问题。
如果你也想试试,可以这样问 AI:
帮我在 GitHub 找几个实现这个功能的项目,看看哪些部分适合放进我现在的网站,整合后再检查电脑和手机上是否正常。
对我来说,这个方法降低了尝试的门槛。
遇到一个想做的效果,可以先找到一个参考,再让 AI 帮忙理解和修改。自己的精力,就能更多放在体验上:这个功能有没有必要?用起来是不是舒服?是不是接近自己想要的样子?
04 很多修改,都是用过以后才想到的
做网站的过程中,我说得最多的一句话,大概就是:
“这里是不是有点别扭?”
比如,资料页原来有“生成”和“保存”两个按钮。我觉得用户会不清楚该点哪个,就改成了一个:保存资料,然后查看分析。
出生地原来需要输入文字筛选,我觉得不够直观,又改成先选省,再选市,最后选区县。
五行页面一开始有图表、有数字,但我看完还是想问:
“所以我是什么属性?这个图是什么意思?”
后来,我们把顺序调整了。先解释日主是什么,再用一句话总结分布,然后看图,最后把详细的排盘依据收起来,想了解的人再展开。
05 塔罗这一块,改动最明显
最初的塔罗,是点按钮、看结果。
后来,我越来越确定,自己想要的是亲手选牌的过程。
于是,我们找参考、看实现,再一点点加上洗牌、切牌、展开牌堆、选三张牌和逐张翻开。
卡牌背面也重新设计过,希望它和整个网站搭配起来。
同样是抽牌,多了这些过程,用起来的感觉确实不一样。

从点击按钮看结果,到展开牌堆、亲手选牌。对比图根据开发截图排版制作。
实际操作演示:洗牌、选三张,再逐张翻开。
解读文案也改过。
有一版一直在问用户:“你觉得呢?”“你可以想想什么?”
我看完就和 AI 说,我点进来是想看解释,这样读着有点累。
后来改成先给出这组牌的解读,再说明三张牌分别对应什么,最后给一个可以尝试的小行动。
答案之书则保留得很简单:想一个问题,翻开一句话。
有时候一句“给它一点时间”,就能提醒自己先缓一缓。

答案之书:带着问题,翻开一句思考提示。
06 用 AI 开发,不代表里面每个功能都要接 AI
这点我想讲清楚。
AI 帮我完成了开发,但现在网站里的解读,没有调用大模型来现场生成。
五行使用历法计算,星座使用对应的计算方法。塔罗随机抽牌,再根据牌面、正逆位和牌位,展示整理好的解读。
你输入的问题,目前主要用于记录。程序不会像聊天 AI 那样理解这个问题,再给出专门的回答。
讨论以后,我们决定先把基础功能跑通。
先看看大家会不会用,哪些地方有帮助,哪些地方需要更具体的解释,再考虑把 AI 加进去。
当前版本的出生资料,也是在浏览器里计算和保存,不上传云端,不会自动同步到别的设备。

五行、星座和塔罗内容,仅供文化娱乐和自我反思,不代表真实运势或者未来预测。这一点,网站里也有说明。
07 下一步,是做出一个能拿在手里的东西
网站上线以后,我对硬件想做成什么样,也比之前清楚了一些。
目前的设想是一个小挂件:
能挂在包上,尽量薄一点、轻一点;使用彩色屏幕,平时熄屏,按键后亮起;不用一直连着手机,也能完成基础操作。
屏幕上可以是一张牌,也可以是一句自己保存的提醒。
外观方面,已经讨论过形状、材质和配色,也画了几版效果图。
但效果图只是效果图。
装上屏幕和电池以后有多厚,按键放在哪里舒服,续航能有多久,外壳摸起来是什么感觉,都要做出原型才知道。

挂件概念设计,尚未制作成实物;屏幕、结构和材质待原型验证。
我最初希望售价在两三百元,如果成本和体验需要,也可以考虑五百元以内。不过现在还没有最终成本,这只是一个目标。
接下来,我准备先买开发板和屏幕,把基础功能跑起来,再逐步确定外壳。
08 先做出来,再看看有没有人需要
我开始做这件事,一方面是自己喜欢,另一方面,也想借这个机会学学硬件开发。
我当然希望,以后它能成为一个有人愿意购买的产品,带来一些收入。
但现在,我更想知道:
大家会不会愿意再打开一次?
抽牌和解读,有没有帮你整理出一点思路?
如果把它做成一个随身小挂件,你会愿意挂在包上吗?
目前,网站已经上线:moondeerai.com
电脑和手机都可以打开。欢迎试试,也欢迎告诉我哪里不好用、哪里没看懂。
从最初说“我想做一个小挂件”,到 AI 建议先做网站,再到现在真的有一个可以打开的页面,这件事已经比我刚开始想的时候具体了很多。
后面的硬件过程,我也会继续记录。
接下来,就看看能不能把它变成一个真正拿得出来、带得出门的小东西。
作者:月鹿造物 公众号:月鹿造物
本文由 @月鹿造物 原创发布于人人都是产品经理。未经作者许可,禁止转载
题图来自 Unsplash,基于CC0协议
- 目前还没评论,等你发挥!

起点课堂会员权益



