我用AI一天搭了一个完整网站,中间把AI骂了三次

我做的第一版网站，用Three.js做了个3D宇宙场景，2000个粒子做星尘，8个彩色星球，还有飞船飞来飞去。跑起来一看，图片和信息乱对应，视频一个没用上，190多张作品图堆在那像杂货铺，排版一塌糊涂。

我心理只想说：做的太他妈垃圾了，简直就是屎。

这是我第一次骂AI。不是最后一次。

◆ 从3D宇宙到推倒重来

事情是这样的。我想做一个个人网站，能展示我的AI艺术作品，能让访客跟我实时聊天。用Next.js加Supabase。

第一版AI给了一个3D宇宙沉浸式方案，深红背景、星球浏览、飞船飞过每个作品。听起来很酷对吧？

做出来之后就是开头说的那个样子。3D效果简陋得像教学demo，星球就是基础球体贴了张图，飞船是个简单几何体，粒子效果毫无美感。

我的190张作品图没有正经展示，个人信息也丢了一半。

我骂完之后AI说要重做。做了第二版，分页式浏览，10个页面，每个作品一个星球。我又骂了一次。第三版它说去找更好的3D参考，做出来还是不行。

三次”垃圾”之后，我放弃了3D方案。

这个教训挺也告诉我的：AI能实现一个效果，不代表它能把效果做好看。技术方案和技术品味是两码事。

◆ 换了条路，终于对了

放弃3D之后换了个完全不同的方向,纯暗黑风格，不用Three.js，用纯CSS动画和视觉特效来做。

纯黑背景，金色主色调，10种视觉特效：粒子背景、视差滚动、文字渐显、数字计数、打字机效果、自定义光标、毛玻璃卡片……

这个方向是对了。至少视觉上是有质感的，不再是那种”AI做的”塑料感。

190张AI艺术作品横向画廊展示，丝滑流动，点击放大看原图。

6个视频，水墨风春夏秋冬、贵州、城市、海底、门、自创角色PV，终于全放进去了。9张Dandelion APP截图、8张知识库截图、2张个人照片。

◆ 一个按钮改了五版

网站主体做完之后加聊天功能，右下角要放一个”联系作者”的按钮。就这个东西，改了至少五版。

第一版，AI做了一个金色圆形按钮，带脉冲发光动画。我说联系作者那做的太简陋了有点突兀，位置也怪怪的，圆形按钮不够优雅，也让人不知道那是什么。

第二版，AI改成半透明金边小圆点。结果放在纯黑背景上几乎看不见，和背景融为一体了，这不等于没有吗。

第三版，实底金色胶囊形。还是胶囊，觉得普通没特色。

第四版，我说做成蒲公英种子形吧，毕竟我的品牌叫DANDELION。

AI做了一个上宽下尖的不对称形状。丑到离谱，还不如直接一个圆。

第五版，直接做一朵蒲公英。金色SVG，中心球体加15根放射绒毛加顶端小圆点加一根茎，没有背景没有框，直接飘在右下角，带飘浮动画。

就一朵蒲公英，飘在那。

后来又觉得蒲公英太小，放大了一轮。导航栏也加了聊天入口，桌面端和手机端都有。

五版。一个按钮改了五版。这就是跟AI协作的真实状态，它不会一次做对，你得一轮一轮告诉它哪里不对。重要的不是AI做得多快，是你知不知道你要什么。

◆ 邮件通知：查了半天的bug是一个字母

聊天系统加上之后，我想让访客发消息时我收到邮件通知。用163邮箱SMTP发邮件，代码写完部署上去，一直报535认证失败。

我反复检查代码，没问题。检查Supabase配置，没问题。检查端口465，没错。检查secure设置true，没错。查了半天，最后发现是Vercel环境变量里SMTP_USER手动填错了。

就一个字母的事。雷霆的

这种低级错误最可怕的地方在于：你越觉得”这种基础的东西不会错”，它就越容易卡住你。因为你潜意识里已经排除了它。

◆ 做了又删的功能

邮件通知做好之后，我又想了一个”完美闭环”：访客发消息我收到邮件，我直接在邮件里回复，回复内容自动同步回网站聊天窗口。

用imapflow库连163的IMAP，每小时同步一次。

功能做完了，能用。

然后我发现：同步间隔一小时，意味着我回复邮件之后最快一小时才会在网站显示出来。

访客可能早走了。而且我最终还是得打开网站确认消息有没有同步成功。

如果间隔一分钟查询一次我感觉也不好，

那我为什么不直接去网站回复？

直接删了整个邮件回复同步功能。

这件事后来成了我常说的：技术上能实现和实际值不值得做是两码事。不是所有优雅的技术方案都适合真实使用场景。做减法比做加法难。

◆ 部署：Cloudflare还是Vercel

部署的时候遇到了一个之前没想过的问题。一开始我想用Cloudflare Pages，便宜，全球边缘节点三百多个。发现项目用了nodemailer发邮件，这东西需要Node.js的net和tls模块做TCP直连SMTP服务器。

Cloudflare Workers和Pages跑的是V8 isolate，就是Chrome浏览器里的JS沙箱，不是完整的Node.js环境。没有net、tls、fs、child_process这些模块，nodemailer跑不起来。

只能换Vercel，因为它给的是完整Node.js runtime。

后来我专门查了一下这两家到底各能跑什么不能跑什么。Cloudflare跑不了的远不止发邮件：数据库TCP直连、文件系统读写、原生C++模块、子进程执行、WebSocket服务端、CPU密集运算、gRPC、FTP/SFTP这些全不行。

但Cloudflare的优势也很明显：边缘节点全球覆盖、自带DDoS防护和WAF、便宜。

静态直接选cloudflare，还能套全球CDN

本质就是一个取舍，要完整Node.js能力选Vercel，要便宜快全球边缘选Cloudflare。

我又想了想，如果哪天把发邮件从SMTP换成Resend那种HTTP API方式，不走TCP直连，理论上就能上Cloudflare了。所以不是绝对的，取决于你怎么设计架构。

◆ 图片压缩：Q75还是Q80

190张作品图全要压缩转WebP。AI建议Quality 75、最大宽度1200px。

我说这太狠了不会影响画质吗？反复讨论，最后定了Quality 80、最大1600px。

中途就是AI私自删除了我的很多文件和仓库代码

让我明确了一条规则：你在做事情的时候能不能问问我，别自己就定了。还有视频，我之前自己已经压缩过了，差点被AI多此一举再压一遍。

每一条规则都是踩了坑之后才明确的。跟AI协作，你得不停地画边界。

◆ 我问了AI这些问题

做网站的过程中我问了不少看起来跟网站没关系的问题。

比如DDoS防护需不需要配，结果发现域名走Cloudflare代理已经自带了基础防护，个人站完全够用。

比如Vercel免费额度有多少，带宽100GB每月，函数调用没硬性次数限制，根本用不完。

比如作为Supabase管理员能不能看到用户注册的密码，答案是数学上不可能。

Supabase用bcrypt哈希存储密码，哈希是单向的不是加密，数据库里存的是乱码，没有任何人能还原出原始密码，包括Supabase官方都不行。

这就是为什么”忘记密码”是给你重新设一个密码，不是告诉你原来的，因为系统里根本不存在原始密码。

感觉在这个过程中学真的效果非常不错

◆ 一些数字

整个过程从5月2号到5月4号。190张作品图压缩成WebP。聊天按钮改了5版。邮件通知的bug查了半天是一个字母填错。邮件回复同步功能做了又删。Git仓库因为1GB图片历史重建。画廊自动播放从跳着滑改成丝滑流动。域名SSL模式改成Full。

技术栈：Next.js 16、Supabase、Tailwind CSS、163 SMTP、Vercel部署、Cloudflare DNS。

◆ 最后想说的话

整个做下来最大的感受就是，跟AI协作做项目，不是你告诉它”帮我做个网站”然后等着收货。

它跟真人协作一样，需求要一次次澄清，方案要一轮轮推翻重来，细节要反复打磨。

那个蒲公英按钮就是最好的例子。我一开始也不知道自己想要什么，说了”加一些小巧思”，AI给了种子形，我说丑，它说行那你要什么，我说直接一朵蒲公英。五轮对话才定稿。

AI不是魔法，它是一个特别快但需要你明确指挥的协作者。

你的判断力、审美、对使用场景的理解，这些它替代不了。

它能做的是把你脑子里的想法快速变成可运行的东西，然后你看着不对再改。

踩过的坑才是真正留在脑子里的东西。嗯

网站在这里：mm.050134.xyz

如果你也要这样的想法，希望对你有帮助，我是杜涛，我们下次再见~

             欢迎一起链接交流学习