本文讲述了一位 90 后如何利用 AI 工具，仅用 4 个小时就将童年记忆中的铁皮文具盒还原成一个可交互的网站。从创意构思到最终上线，作者详细分享了整个过程，包括设计交互、生成图片、构建原型、精调工程以及添加彩蛋等环节。

还记得小学时那个装满宝贝的铁皮文具盒吗？

英雄钢笔、香味橡皮、还珠格格贴纸…

每一样都承载着我们最纯真的回忆。

上周末我用AI工具，纯自然语言对话，花了4个小时，把这份童年记忆做成了一个可交互的网站

体验链接：https://www.youware.com/project/l9hwo5rqi8

今天这篇文章我来分享这个网站从创意到上线的完整过程，以及过程中的被AI惊艳到的瞬间。

一、背景

上周youware（一个无代码编程的社区）发起了一项复古挑战，你可以做任何你觉得【复古】的内容。

这种搞创意的活动我可太喜欢了。

受到如下图复古拍立得的启发

我心生一念：不如做个小学用的文具盒吧！

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

尤其是那种带点铁锈的文具盒，充满了童年的回忆。

二、思路拆解及工具选型

那么类似上面那样的效果应该怎么做呢？

把网站截图丢给AI，然后对实现路径进行探讨，梳理得到以下4个关键步骤：

1. 设计交互

我希望这是个有氛围感的复古文具盒网站，文具盒可以打开，里面的物件可以点击查看。

同时要有回忆向风格的BGM，第一时间想到了还珠格格里的配乐《真心不假（笛子版）》。

2. 设计文具盒图片

为了实现上述交互效果，至少需要「关闭状态」和「打开状态」下的2张精美文具盒图片。

且「打开状态」下的文具盒图片中要有钢笔，纸条，修正液，贴纸等物件。

3. 设计文案

这一块不需要借助AI，因为这些东西自己再熟悉不过了——90后的都用过。

4. 添加彩蛋

为了增加趣味性，我还在探索过程中增加了一个小彩蛋：小浣熊水浒卡片，且彩蛋出现的卡片人物是随机的。

有了以上的思路，工具选型就呼之欲出了：

– 文具盒图片制作：Sora

– 原型初构：Lovable

– 工程精调：Cursor

三、实操过程

1. 图片制作

这里分2个环节：

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官方的肯定！

感谢你的阅读！如果觉得有趣，欢迎点击下方链接体验，帮我冲击1000浏览量～

https://www.youware.com/project/l9hwo5rqi8

建议用电脑访问，体验更佳。

也可以点击下方链接访问

http://pencilcase.aiben.cc/

就这样，下期见~