Day 1：我让AI帮我建项目，结果把3D洗衣机"拆"了

袁锐钦 · AI编程实践者

昨天立了Flag，今天动手。

按照14天计划，Day 1的任务很简单：搭个项目骨架出来，然后把3D洗衣机的原型跑起来。

听起来是不是半小时就能搞定的事？

嗯，确实应该半小时搞定。但我花了大半天。

不是因为难，是因为——我做了一个重要的技术决策，推翻了原来的方案。

这个故事值得讲给你听。因为做出海站、做产品，最值钱的不是代码本身，而是你为什么选择A而不是B。

第一步：搭骨架（这部分很无聊但必须做）

先说快的部分。

我用 AI 帮我创建了一个 Next.js 项目。几条指令下去：

• • Next.js 15（最新版）
• • TypeScript（类型安全）
• • Tailwind CSS v4（样式框架）
• • Google Gemini API（图片生成用的）

AI 帮我把页面结构搭好了：

npm run build 一跑，编译通过。骨架搭完了。

耗时：很快。

真正的时间花在了后面——那台该死的洗衣机。

第二步：原本计划用 3D 洗衣机

按照产品规划文档（上一篇写的那个），Picboil 的核心视觉是一台卡通风格的3D洗衣机。

用户打开网站，看到一台可爱的洗衣机。把图片或提示词扔进去，看着它转动，然后出图。

原计划用什么技术实现？

React Three Fiber。

听过吗？没听过没关系，你只需要知道一件事：这是一个专门在网页上渲染3D效果的库。

AI 帮我装了一堆依赖包：

three                    ← 3D引擎本体
@react-three/fiber       ← React版的3D渲染器
@react-three/drei        ← 3D常用组件库（灯光、相机、控制器等）
zustand                  ← 状态管理
framer-motion            ← 动画库

6个包。 光这三个相关的包就不小。

洗衣机做出来了——金属质感的滚筒、可以开合的门、旋转的内桶……效果确实炫酷。AI 甚至还加了物理惯性效果，滚筒转起来有那种慢慢停下来的真实感。

然后问题来了。

第三步：发现问题

问题一：太重了

首屏加载的时候，我能明显感觉到卡顿。

不是那种打不开的卡，是点进去之后要等一下，3D模型才加载出来。在我自己的电脑上测试都这样，换到用户的手机上呢？海外用户网速参差不齐，有人还在用4G甚至慢速WiFi。

出海站的第一印象就是命。 用户等3秒没看到东西，就关掉了。

问题二：依赖太多

6个第三方包，意味着什么？

• • 包体积大 → 加载慢
• • 未来升级可能有兼容性问题
• • 调试困难（出了bug不知道是哪个包的问题）
• • 构建时间长

对于一个MVP阶段的产品来说，这不是必要的复杂度。

问题三：维护成本

我不会 Three.js。AI 写的代码我能看懂大概逻辑，但如果以后要改动画效果、调整材质、优化性能……每次都得重新问 AI，而且 AI 生成的 3D 代码通常很长，改一个小细节可能牵一发动全身。

我问了自己一个问题：

Picboil 的核心卖点是"有趣"，不是"3D效果有多逼真"。用户记住的是"这个网站好玩"，而不是"这个网站用了WebGL渲染"。

如果能用更简单的方式达到差不多的视觉效果，为什么要选最复杂的方案？

第四步：决定——拆掉 3D，用纯 CSS 重写

这个决定做得很快。

原因很简单：我看过 PNG 部落的教训。

做 PNG 部落的时候，我也用过各种花哨的技术方案，后来发现用户根本不在意你用了什么技术，他们在意的是好不好用、快不快、有没有意思。

所以我的决策逻辑是：

结论：CSS 方案赢在"够用+好维护"。

MVP 阶段不需要完美，需要的是快速验证。等以后用户多了、有钱了、有团队了，再请专业的 3D 设计师做高质量模型也不迟。

第五步：纯 CSS 洗衣机是怎么做出来的

说"纯CSS"可能觉得很神奇，其实原理一点都不复杂。我给你拆解一下：

核心思路：同心圆 + 渐变 + 动画

洗衣机的外壳 —— 就是一个圆形的 div，加上金属渐变色（从亮灰到暗灰），让它看起来像不锈钢。

/* 大概是这个意思 */
background: linear-gradient(135deg, #c0c0c0, #808080);
border-radius: 50%;  /* 圆形 */
box-shadow: 内阴影 + 外阴影;  /* 立体感 */

滚筒 —— 再套一个稍小的圆形 div，深色背景，模拟洗衣机内部的黑暗空间。

门（玻璃窗） —— 又一个圆形，半透明 + 高光效果，模拟玻璃的反光。

旋转动画 —— CSS 的 animation + rotate，让内桶转起来。

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.drum {
  animation: spin 2s linear infinite;
}

就这几行。没有3D引擎，没有 WebGL，就是初中几何 + CSS 动画。

门的开合效果

这个稍微有点技巧。洗衣机门打开的时候，不能只是平移消失，要有3D翻转的感觉：

transform: rotateY(-85deg);  /* 绕Y轴翻转85度 */
perspective: 1200px;         /* 透视距离，让翻转看起来有3D感 */

注意这里是 -85度，不是 -90 或 -110。为什么？

因为我试过 -110 度——门直接消失了。 翻转角度太大，门转到背面去了，而且超出了可视范围。调了好几次才找到 -85 这个最佳角度：门明显打开了，但还能看见门的边缘。

音效也用原生 API

开门声、关门声、滚筒转动声、完成提示音——这些全用 Web Audio API 合成。

不需要音频文件。浏览器自己能发出声音：

// 大概思路：用浏览器音频API合成音效
const audioCtx = new AudioContext();
// 开门："咔哒"短音
// 滚筒：低频循环音
// 完成：上升的提示音

零外部依赖，浏览器自带的能力。

第六步：踩过的坑（干货来了）

光说成功经验不说是怎么踩坑的，那就是耍流氓。Day 1 我遇到了这些问题：

坑1：洗衣机变形了

现象： 洗衣机变成椭圆形，不像圆的。

原因： 父容器用了 flex 横向布局，把圆形挤压了。

解决： 改成纵向排列 flex flex-col items-center，让洗衣机保持正圆。

教训： CSS 布局永远是第一优先级，视觉效果再好，布局错了全都白搭。

坑2：洗衣机直接消失了

现象： 刷新页面后洗衣机不见了，只剩空白。

原因： Next.js 有个缓存机制 .next 目录，有时候代码改了但缓存没更新，导致显示异常。

解决：npx rimraf .next 清掉缓存，重新构建就好了。

教训： 遇到"明明代码对了但不显示"，先清缓存。

坑3：金属纹理看不到

现象： 给洗衣机加了金属渐变，但看起来就是一片灰色，没有质感。

原因： Tailwind CSS 的工具类会自动加 position: relative，把我手动设的 position: absolute 覆盖掉了。绝对定位失效，层次关系乱了。

解决： 不用 Tailwind 类名，直接用 inline style style={{ position: 'absolute' }} 提升优先级。

教训： CSS 框架的默认样式会悄悄覆盖你的自定义样式，出了问题先检查优先级。

坑4：门打开后不见了

前面说了，rotateY(-110deg) 角度太大，门翻到背后去了。改成 -85deg 解决。

坑5：端口冲突

现象： 启动项目报错 "Port 3000 is already in use"。

原因： 之前启动的项目进程没关干净，端口还被占着。

解决： 在启动脚本里加了自动杀进程的逻辑：

lsof -ti:3000 | xargs kill -9  # 杀掉占用3000端口的进程

以后再也不会忘了。

第七步：清理战场

把 Three.js 相关的 6 个包全部卸载，项目变得非常干净：

从 6 个额外依赖 → 0 依赖。

全站文案也从中文改成英文了（毕竟是出海站）。

顺手清理了 14 张调试截图，.gitignore 补了几条规则防止垃圾文件提交。

Day 1 总结

今天完成了什么

✅ 项目骨架搭建完成（Next.js 15 + TS + Tailwind） ✅ 3D 洗衣机原型 → 纯 CSS 洗衣机（关键决策） ✅ 文生图 / 图生图两个房间的页面框架 ✅ 便签纸输入区（淡黄色便签纸样式，挺可爱的） ✅ 底部历史图片画廊 ✅ 标签切换导航（Text to Image / Image to Image） ✅ Gemini API 接通，能真正生成图片了 ✅ 全站中译英

今天的花费

一个重要的体会

做产品，最容易犯的错误就是"过度工程化"。

我刚上手就想搞 3D、搞物理引擎、搞逼真效果。这没错，但对于 MVP 来说，这些都是锦上添花，不是雪中送炭。

用户要的是什么？

打开网站 → 看到有趣的东西 → 输入提示词 → 得到一张图 → 觉得挺好玩的 → 分享给朋友。

这个链路里，3D 不是必需品。CSS 能做到 80 分的效果，开发成本只有 3D 方案的 20%。这笔账很好算。

而且 CSS 方案有一个意外的好处：我自己能看懂、能改。 不用每次调整动画效果都去问 AI。这对于后续迭代速度的影响是巨大的。

MVP 的核心原则：先用最快的方式验证假设，证明有人愿意用之后，再投入资源打磨体验。 我今天做的就是这个决定。

明天做什么（Day 2 计划）

Day 2 的重点是从"能看"进化到"能用"：

1. 1. 数据库设计 —— 用户表、积分表、任务表、图片表
2. 2. 认证系统 —— 让用户能注册和登录（邮箱 + Google OAuth）
3. 3. 洗衣机交互完善 —— 便签纸飞进洗衣机的动画序列、滚筒转动与AI生成的衔接

按计划 Day 1-3 是基础搭建阶段。今天算把 Day 1 和半个 Day 3 的活一起干了（3D原型提前完成了），明天继续推进数据库和认证。

如果你在做 AI 辅助开发或者正在考虑做出海站，有任何问题欢迎交流。

一个人走得快，一群人走得远。💪

我是袁锐钦，明天继续更新 Day 2 实录。