我用 AI 做了个网站,下一步想把它挂在包上

0 评论 359 浏览 0 收藏 14 分钟

作者不懂硬件,却想做一个小挂件:能挂在包上,按一下就能抽塔罗、看五行、读一句留给自己的提醒。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协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!