一、事情的起因
一切要从 9 月 22 日晚上九点多说起。
那天，朋友给我发了一段视频，里面是两个 Q 版小人在电脑桌面上聊天。我直接就是一个瞳孔地震，（内心OS：我去！这是什么！），曾经幻想过一个类似原理的游戏，很惊喜有人做出来了。她告诉我是 Steam 上的一款游戏叫《角色屋：桌面夥伴》。当时游戏还处于 Demo 阶段，而目前我已经玩了有一段时间了，确实很喜欢这种形式。
时间来到 10 月 13 日下午三点多，官方在 QQ 群里发布公告，宣布自定义功能上线。虽然游戏正式版还没推出，但这么强大的功能已经免费开放给玩家体验，着实让人兴奋。
有了自定义功能，大家自然会想要更多素材，尝试不同的角色搭配。当天下午六点左右，我突然冒出了一个想法：不如自己做一个素材分享网站，方便自己，也方便其他玩家。
想法确定后，我就直接开干了。
二、三天，把想法变成现实
由于每天都有课程，开发只能利用课余时间进行。为了提高效率，我专门整了个geminiPRO套餐，从项目搭建到功能实现，整个过程都借助 Gemini3.8high 辅助完成。
从 10 月 13 日傍晚开始，到 10 月 16 日晚上八点半，经过多轮开发、调整和调试，一个能够正常运行的网站平台终于搭建完成了。
这次开发涉及的不只是几个简单的页面，而是从整体架构、功能设计到用户系统、素材存储等多个部分。期间还需要不断调整页面布局、修改功能逻辑，确保各个模块能够正常配合。
除了代码开发，我还让 AI 帮忙绘制了一些矢量图，最终的视觉效果还挺不错，不禁再次感叹ai的强大。
回头看，从产生想法到网站真正跑起来，整个过程只有三天左右。对于一个需要处理前端页面、数据库、服务端接口和云端文件存储的平台来说，这个效率确实让我自己也有些意外。
三、这个网站能做什么？
我把这个平台命名为 OC POProom，也就是 OC 泡泡屋。
它主要面向《角色屋：桌面夥伴》的玩家和 OC 创作者，希望提供一个方便查找素材、搭配角色和分享作品的地方。
目前，网站已经实现了以下功能：
- 素材浏览与筛选： 按照部件类型和颜色查找需要的素材。
- 图纸拆解与打包： 预览透明 PNG 图纸，并将多个部件打包成 ZIP，方便下载和导入游戏。
- 灵感搭配衣橱： 将喜欢的素材整理成不同的搭配方案。
- 创作者投稿： 上传自己的作品，通过专属编号区分不同素材。
- 用户系统： 支持注册、登录和创作者资料管理。
- 明暗主题与响应式布局： 适配不同设备，提供更舒适的浏览体验。
技术方面，我使用了 React、TypeScript、Vite 和 Tailwind CSS 搭建前端，使用 Supabase 处理用户认证和数据库相关功能，通过 Vercel 提供服务端接口，并使用 Cloudflare R2 存储和分发素材文件。
图纸的拆解与 ZIP 打包则主要由前端的 Canvas 和 JSZip 实现。
这些功能组合起来，构成了一个可以在线访问、使用和分享素材的网站平台。
四、借助 AI 开发，也是一种学习
这次项目让我对 AI 辅助编程有了更进一步的认识。
AI 确实帮我节省了大量时间，但整个项目并不是简单地输入几句话，然后等待 AI 自动生成结果。
从网站的整体构思、功能逻辑，到页面结构、UI 排版和整体画风，都是我自己一手规划和调整的。AI 主要负责协助实现想法，而具体要做成什么样、功能应该如何运作，仍然需要我自己判断。
开发过程中，我也逐渐对完整 Web 平台的架构有了更清晰的认识。虽然我目前还不一定能看懂每一处细节代码，但至少已经能够理解网站由哪些部分组成，以及前端、数据库、服务端和云存储之间大致是如何协作的。
以前整博客的时候稀里糊涂的，可能更多是站在使用者的角度看一个网站，现在则开始尝试完全从开发者的角度理解它。
我觉得，这也是这次开发带来的一个重要收获。即使暂时还没有掌握所有技术，也可以通过实际项目积累经验，在解决问题的过程中逐步建立自己的认知。
五、写在最后
OC POProom 的诞生，其实没有什么复杂的商业计划，只是因为喜欢一款游戏，恰好又有了一个自己觉得值得尝试的想法，于是就动手做了。
从 10 月 13 日傍晚开始，到 10 月 16 日晚上八点半，我利用每天的课余时间，借助 AI 完成了整个网站平台的搭建与调试。
这次经历让我发现，有想法之后，真正动手去做，往往比一直停留在想象中更有意义。过程中肯定会遇到问题，但只要愿意不断尝试，就有机会把一个原本只是脑海中的构想变成实际可用的东西。
接下来，我也会继续维护和完善 OC POProom，希望它能真正帮助到《角色屋：桌面夥伴》的玩家和 OC 创作者。
项目名称： OC POProom 泡泡屋
开发时间： 2026 年 10 月 13 日—10 月 16 日
技术栈： React、TypeScript、Vite、Tailwind CSS、Supabase、Vercel、Cloudflare R2
开发方式： 个人独立开发，AI 辅助编程与视觉设计。
