一位前端开发者上周做了个实验：用谷歌Gemini（Gemini，谷歌推出的多模态大模型）当编程助手，1小时内从零搭出一套带3D动画的个人作品集网站。过去这类项目通常需要3-5天。
他的核心挑战只有一个：完全不手写底层代码，纯靠AI生成。
第0-15分钟：用自然语言"画"出骨架
开发者Sripadh Sujith的第一步不是打开IDE，而是直接对Gemini说："给我生成一个Three.js（Three.js，JavaScript 3D库）场景，包含旋转立方体和粒子背景。"
AI在几分钟内吐出了完整代码块，包括相机初始化、渲染循环和基础光照。他复制粘贴到HTML文件，浏览器里已经能看到一个会动的灰色方块。
这个环节他试了3轮提示词调整。第一轮生成的立方体不会自转，第二轮粒子数量太少像"灰尘"，第三轮才达到"星空感"。每次迭代大约2分钟，比查Stack Overflow快一个数量级。
第15-45分钟：让AI"装修"细节
骨架有了，接下来是视觉层。Sujith的提示词变得具体："把立方体换成玻璃材质，加菲涅尔边缘光，背景粒子用蓝紫渐变。"
Gemini生成了基于物理的渲染（PBR）材质代码，还自动补上了鼠标悬停交互——立方体会跟随光标轻微倾斜。他承认这部分代码"我自己写可能要查半天文档"。
最耗时的反而是文字内容。AI生成的项目描述过于通用，他手动替换成了真实案例。这是整个流程里唯一没交给AI的环节。
第45-60分钟：部署比写代码还快
最后15分钟全部花在GitHub Pages上线。创建仓库、推代码、开GitHub Pages开关，三步走完网站已可公开访问。
总耗时58分钟。Sujith在帖子里放了一张截图：浏览器里是一个深空背景下的半透明立方体，粒子缓慢飘动，滚动页面时有视差效果。视觉完成度接近商业模板水准。
「以前这种效果我要先学Three.js基础，再调着色器，现在直接跳过中间步骤。」他在项目说明里写道。
但有个细节他没说透
我点开他的成品链接看了源码。3D核心代码确实由AI生成，但CSS布局和部分响应式断点是手写修复的——Gemini在移动端适配上有明显瑕疵，导航栏在小屏幕上会溢出。
这指向一个更复杂的现实：AI压缩的是"从零到能用"的时间，不是"从能用到好用"的时间。 那个被忽略的45分钟调试提示词、以及最后手动修CSS的环节，在"1小时"叙事里被淡化了。
Sujith自己也承认局限：「复杂状态管理或性能优化，AI目前还会给出低效方案。」他的项目没有后端、没有路由、没有数据层，是一个纯粹的前端展示壳。
但这正是最扎心的部分——对大多数需要作品集的设计师、摄影师、甚至产品经理来说，这种"壳"已经够用。市场不需要每个人都理解矩阵变换或WebGL管线。
GitHub仓库目前已有47个star，评论区最常见的问题是："能换成React版本吗？"以及"怎么接入CMS？" 没人问Three.js原理。
当工具把"做出来"的门槛降到1小时，"做得不一样"的竞争才真正开始——你的3D立方体，凭什么让人记住？
热门跟贴