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