摘要
最近用 TRAE SOLO 做了个好玩的小项目「时光相框」,一款沉浸式拍立得风格的 Web 应用。核心功能不是单纯为了搞一个拍照软件,而是想还原拍立得相机那种「按下快门,摇晃显影」的仪式感![]()
除此之外,还加入了”时光机“、”盲盒照片“等有意思的功能,还做了多种滤镜和相框,算是把拍立得的趣味和数字工具的便捷做了一个结合,给大家带来一些小乐趣。比如:在家带娃时,可以跟宝贝选不同主题,拍一面幸福满满的照片墙,然后还可以保存分享,乐趣满满~
关于「时光相框」
我们日常的拍照流程:拿出手机、打开相机、按下快门、修图、发朋友圈或小红书,这已经成为了我们的一种生活习惯。但有时候,很多朋友还是喜欢背着自己的相机外出取景,这也是一种个人习惯。
当然很多人可能就是单纯的喜欢相机拿在手里的质感和按键按下的声音,也有很多人,是怀念小时候玩拍立得的那种感觉:按下快门后,看着相纸慢慢显影,尤其是拿在手里甩一甩,然后享受那种等待和惊喜的过程,这是数字拍照永远替代不了的情绪体验。
所以我做了这个「时光相框」,我的目标不是做一个功能齐全的拍照工具,而是想把那种咔嚓声、时光感、摇晃显影的仪式感找回来。按下快门后,摇一摇(或甩一甩)让照片慢慢清晰,重现拍立得的经典体验。
我为什么会做这个项目
作为一枚产品,平时正经工作外,就是喜欢捣鼓一些”不正经“的事儿了
这次正好借着 TRAE SOLO 的 Agent Code 能力,看看借助它把自己想法落地后的样子,究竟是怎样的。
之所以做拍照,其实最初的想法就是复刻拍立得的拍照体验,尤其是显影过程是个很好的切入点——它既有视觉上的变化,又有交互上的参与感。我想通过 Web 技术还原这个过程,同时加入一些现代元素,比如主题模式、滤镜选择等,让整体体验更有意思。
当然很多功能有已经规划完了,但是还没有落地,最近可能没有足够的时间来完善这款小工具,所以文末把github开原地址分享给大家,感兴趣的朋友可以和我一起共创![]()
我的设计思路
我给「时光相框」的定位是:拍立得经典复刻,既有传统拍照仪式感,又有一定的创新和乐趣。
围绕这个定位,我设计了几个核心功能:
-
摇一摇显影:模拟拍立得的显影过程,用户需要通过摇晃手机(或鼠标晃动)让照片慢慢清晰
-
主题拍照模式:预设不同场景的主题,一键切换滤镜和相框组合
-
丰富的滤镜和相框:提供多种风格选择,满足不同场景需求
-
好玩的交互:按下快门,随着咔嚓一声,照片飞到”墙上“,你可以铺满整个”墙面“
-
时光机:随机加入年代水印,给你的照片增加一些年代感
我是怎么用 SOLO 做出来的
整个项目实际上我之前已经有了一个基础版了,只不过很多待完成的需求一直没做,这次正好借助 TRAE SOLO 把很多功能继续优化,并新增了一些功能。对我来说,SOLO 最有价值的地方,不是单纯的代码生成,而是它能帮我快速验证创意、解决技术问题,让我把更多精力放在产品体验上。
而且最最最最有意思的是,当我把当前这个demo版最初来之后,我顺手就让 TRAE SOLO 帮我写一篇稿子,如下图
哈哈,怎么样,最近使用 TRAE SOLO 后我发现,它真的是集「需求-调研-开发-测试-运营」于一体![]()
当然了,它写出来的东西难免还是过于AI,所以结构上我采用了它的初稿,但是具体内容我基本还是重新修改和补充了的。
开发过程中的几个关键环节
第一步:确定核心交互 最开始,我花了不少时间思考如何实现「摇一摇显影」的效果。SOLO 不仅帮我生成了基础代码,还提供了不同设备的适配方案——移动端用 DeviceMotion API,桌面端用鼠标晃动检测。这让我少走了很多弯路。
第二步:设计视觉风格 我希望界面能有真实相机的质感,SOLO 帮我优化了初始的 CSS 样式,我在此基础上做了调整,添加了阴影、渐变等效果,让相机界面看起来更有立体感。
第三步:实现主题模式 为了让应用更有趣,我想添加主题拍照模式。SOLO 帮我快速实现了主题选择器的界面和逻辑,让用户可以一键切换不同风格。
第四步:优化用户体验 在开发过程中,我发现摇一摇的灵敏度需要调整,SOLO 帮我分析了不同设备的差异,优化了检测算法,让体验更加流畅。
遇到的坑和解决方案
1,设备兼容性问题 一开始,我发现不同设备的摇一摇检测效果差异很大,特别是桌面端的鼠标晃动检测。SOLO 建议我使用统一的加速度计算方法,并添加了降级方案,确保在不同设备上都能有良好的体验。
2,性能优化 照片显影过程需要实时计算和渲染,在低配置设备上可能会卡顿。SOLO 帮我优化了 Canvas 绘制逻辑,减少了不必要的计算,提升了性能。
3,存储管理 照片存储在 localStorage 中,可能会遇到空间限制。SOLO 帮我实现了图片压缩和自动清理机制,确保应用能稳定运行。(所以这款web工具拍的照片只会存在你本地缓存里,不用担心隐私问题)
做完这个项目后的思考
这次用 SOLO 完成「时光相框」后,我有几个深刻的感受:
-
AI 不是替代开发者,而是放大开发者的创意 SOLO 帮我处理了很多重复性的代码工作,让我能更专注于创意和用户体验的设计。这不是让我变得更懒,而是让我有更多时间思考产品的本质。
-
传统体验的数字化重构 很多传统的、有仪式感的体验,在数字化时代被简化了。但通过技术手段,我们可以重新赋予这些体验新的生命力,让用户在便捷的同时,也能感受到传统的魅力。
-
小而美的项目也有价值 不一定需要做复杂的大型应用,一个有创意、有温度的小项目,同样能带来很多乐趣和启发。
关于开源、已实现功能和后续计划
-
中英文:支持,只不过英文状态下个别组件有适配问题,暂时隐藏了切换入口,代码保留了
-
移动端兼容:兼容,手机端摇一摇显影,web端通过鼠标按住摇一摇显影
-
更多功能:在「关于」和「设置」里,有很多待完成功能,有的其实已经包含在代码里了,大家感兴趣可以”打开“,或自己DIY
关于我
我是产品一枚,业余时间比较喜欢阅读和体验AI相关的内容和产品,也比较喜欢借助AI探索一些创意类的小玩意儿。最近几个月一直在体验和实践字节跳动的 AI 产品,这次用 TRAE SOLO 做「时光相框」,就是一次很有意思的体验。
我相信,技术的价值不仅在于解决问题,更在于创造美好的体验。希望「时光相框」能给大家带来一些小乐趣,也希望能与更多志同道合的开发者交流学习![]()





