90后泪目，我用AI还原了童年的铁皮文具盒

90后泪目，我用AI还原了童年的铁皮文具盒 90后泪目，我用AI还原了童年的铁皮文具盒 Modified September 11, 2025 No access 530 13 00:00 真心不假（笛子版） Unable to preview. Please download the file. Code block Plain Text Copy 卷笔刀（手动削铅笔那种） 还珠格格贴纸 荧光笔（粉黄蓝） 效果如下： 整体UI我觉得不错，由于Lovable免费版只有5次对话机会，我就没有过多纠缠 立马将项目导到github中，再用Cursor打开，准备进入精调抠细节的环节。 3. 工程精调 我在Cursor上的初始指令，就是 让它帮我把这2张文具盒的图放入到网页中，然后设计交互流程 。 有Claude 4的加持，它的完成度很高，并且会帮你把没想到的活都干了。 比如悬浮特效、点击特效，我都没有特意去要求，它都一并进行了设计。 在Cursor上总共用了9轮对话完成了整体的开发，原则就是“哪里不满意就问哪里”。 AI惊艳瞬间 当然在开发过程中，还是遇到了一个难点： 怎么做到点击图片中的物体弹出对应的物品弹窗？ 因为这是一张完整图，并不是一个个独立组件。 结果AI给我的方案真的惊艳到我了！ 它竟然非常贴心地直接做了一个标定工具，让我在图中框选标定各个物品。 如下图，我只需要在物品周围打点，完成后就可以生成所包围的物品多边形的坐标代码。 得到了所有的物品的坐标，然后就可以愉快地进行后续开发了。 彩蛋设计 作为一个重度游戏爱好者，如果我来设计游戏，怎么能少了彩蛋呢？ 于是让AI帮我设计彩蛋，它给了一堆方案，但是触发条件有点苛刻，且少了“探索感” 比如： • 5秒内点击3个物品； • 完成所有物品的点击； • 网站浏览持续停留30s； 最终我决定在文具盒盖子的空白区域，模拟一个夹层效果，当鼠标移到此处就可以探索夹层。 于是就愉快地和Cursor对话，几轮下来完美实现。 No access 530 14 00:00 最后把项目文件打包，提交到youware上一键部署生成公网链接。 四、总结 从创意构思到最后部署上线，累计花了约4个小时。 每个环节的工具和用时如下： • 创意构思：人脑 —— 30分钟 • 交互设计：人脑 —— 10分钟 • 文案生成：人脑 —— 10分钟 • 图片生成：Sora —— 30分钟，生成了多版图片，选择困难症！ • 原型构建：Lovable —— 5分钟 • 工程精调：Cursor —— 2.5小时，一点点抠细节，时间飞逝！ • 部署上线：youware —— 5分钟 不得不说现在基座模型能力增强后，AI工具产出物的质量真的提高不少！ 目前这个【90后文具盒】网站也获得了youware官方的肯定！ No access 530 13 00:00 No access 530 13 00:00 真心不假（笛子版） Unable to preview. Please download the file. 真心不假（笛子版） Unable to preview. Please download the file. 效果如下： 整体UI我觉得不错，由于Lovable免费版只有5次对话机会，我就没有过多纠缠 立马将项目导到github中，再用Cursor打开，准备进入精调抠细节的环节。 3. 工程精调 我在Cursor上的初始指令，就是 让它帮我把这2张文具盒的图放入到网页中，然后设计交互流程 。 有Claude 4的加持，它的完成度很高，并且会帮你把没想到的活都干了。 比如悬浮特效、点击特效，我都没有特意去要求，它都一并进行了设计。 在Cursor上总共用了9轮对话完成了整体的开发，原则就是“哪里不满意就问哪里”。 AI惊艳瞬间 AI惊艳瞬间 当然在开发过程中，还是遇到了一个难点： 怎么做到点击图片中的物体弹出对应的物品弹窗？ 因为这是一张完整图，并不是一个个独立组件。 结果AI给我的方案真的惊艳到我了！ 它竟然非常贴心地直接做了一个标定工具，让我在图中框选标定各个物品。 如下图，我只需要在物品周围打点，完成后就可以生成所包围的物品多边形的坐标代码。 得到了所有的物品的坐标，然后就可以愉快地进行后续开发了。 彩蛋设计 彩蛋设计 作为一个重度游戏爱好者，如果我来设计游戏，怎么能少了彩蛋呢？ 于是让AI帮我设计彩蛋，它给了一堆方案，但是触发条件有点苛刻，且少了“探索感” 比如： • 5秒内点击3个物品； • 完成所有物品的点击； • 网站浏览持续停留30s； 最终我决定在文具盒盖子的空白区域，模拟一个夹层效果，当鼠标移到此处就可以探索夹层。 于是就愉快地和Cursor对话，几轮下来完美实现。 No access 530 14 00:00 No access 530 14 00:00 最后把项目文件打包，提交到youware上一键部署生成公网链接。 四、总结 从创意构思到最后部署上线，累计花了约4个小时。 每个环节的工具和用时如下： • 创意构思：人脑 —— 30分钟 • 交互设计：人脑 —— 10分钟 • 文案生成：人脑 —— 10分钟 • 图片生成：Sora —— 30分钟，生成了多版图片，选择困难症！ • 原型构建：Lovable —— 5分钟 • 工程精调：Cursor —— 2.5小时，一点点抠细节，时间飞逝！ • 部署上线：youware —— 5分钟 不得不说现在基座模型能力增强后，AI工具产出物的质量真的提高不少！ 目前这个【90后文具盒】网站也获得了youware官方的肯定！ 🔗 原文链接： https://mp.weixin.qq.com/s/DPUSJ3Aq... https://mp.weixin.qq.com/s/DPUSJ3Aq... 原创 Ben的AI实验室 Ben的AI实验室2025年05月29日 19:35 浙江 还记得小学时那个装满宝贝的铁皮文具盒吗？ 英雄钢笔、香味橡皮、还珠格格贴纸... 每一样都承载着我们最纯真的回忆。 上周末我用AI工具，纯自然语言对话，花了4个小时，把这份童年记忆做成了一个可交互的网站（链接在文末）。 先上一段视频，展示网站的效果： 今天这篇文章我来分享这个网站从创意到上线的完整过程，以及过程中的被AI惊艳到的瞬间。 一、背景 上周youware（一个无代码编程的社区）发起了一项复古挑战，你可以做任何你觉得【复古】的内容。 这种搞创意的活动我可太喜欢了。 受到如下图复古拍立得的启发 我心生一念：不如做个小学用的文具盒吧！ 尤其是那种带点铁锈的文具盒，充满了童年的回忆。 二、思路拆解及工具选型 那么类似上面那样的效果应该怎么做呢？ 把网站截图丢给AI，然后对实现路径进行探讨，梳理得到以下4个关键步骤： 1. 设计交互 我希望这是个 有氛围感的复古文具盒网站，文具盒可以打开，里面的物件可以点击查看 。 同时要有回忆向风格的BGM，第一时间想到了 还珠格格里的配乐《真心不假（笛子版）》 。 2. 设计文具盒图片 为了实现上述交互效果，至少需要「关闭状态」和「打开状态」下的 2张精美文具盒图片 。 且「打开状态」下的文具盒图片中要有钢笔，纸条，修正液，贴纸等物件。 3. 设计文案 这一块不需要借助AI，因为这些东西自己再熟悉不过了——90后的都用过。 4. 添加彩蛋 为了增加趣味性，我还在探索过程中增加了一个小彩蛋： 小浣熊水浒卡片 ，且彩蛋出现的卡片人物是随机的。 有了以上的思路，工具选型就呼之欲出了： 文具盒图片制作：Sora 原型初构：Lovable 工程精调：Cursor 三、实操过程 1. 图片制作 这里分2个环节： • 先制作关闭状态下的文具盒图片； • 然后基于此图去remix生成开启状态下的文具盒图片。 这样2张图片风格样式能够保持一致，也更符合打开同一个文具盒的感觉。 文具盒 关闭状态 文具盒 关闭状态 提示词： 用Sora试了2次，出来的4张图质感都不错, 最后选了右上角这个最“旧”的。 文具盒 开启状态 文具盒 开启状态 有了关闭状态的文具盒，接下来就需要基于此来remix设计开启状态下的文具盒了。 remix的提示词如下： 整体效果还不错，但是除了右上角的，其他三张的纸片上都有英文，感觉不太符合主题，最后就选了右上角。 同时，右上角这3个人还是比较容易辨识出来是还珠格格的3位女主。 2. 网站原型构建 使用Lovable，输出以下提示词：