手把手教你， AI 生成超高品质网站

我们官网基本上就是这样调出来的， 大佬们 PC 访问 http://lazycat.cloud 看效果， 移动端这周上线。

我分享下调教 AI 方法：

1. 尽量找业内最好网站的截图让 AI 生成页面， 因为截图比嘴说抽象的前端细节， 效果好一万倍， 因为人理解的前端、 好看和 AI 理解的非常不一样

2. 让 AI 生成 HTML 单文件， 这样马上就可以浏览器看效果， 生成 HTML 效果全部 OK 后再让 AI 转 Vue 组件， 你直接上组件， 会导致看效果之前还要整合到项目中， 效率太低

3. AI 生成的 HTML 后要细节微调， 比如， 文案改成什么苹果高冷风， 图片跟文案搭配自己网上找图（不说 AI 会因为版权搞占位符， 布局是乱的）， 图标用 SVG 图标（这样后期你可以自己找合适的让 AI 精确换）， 动效平滑点有加速度， 哪个 div 的样式要微调一下（这个浏览器开发工具定位）

4. 第三步搞的差不多以后， 基本上可以实现 80% 的效果， 让 AI 从 HTML 转换成 Vue 组件， 这时候针对不合适的图标直接复制你网上找好的 svg 图标代码给他让它替换， 因为 AI 现在对抽象图标的理解不够， 比如一个小火箭图标你靠嘴说 AI 会给你画成七巧板这种让你哭笑不得的效果。 但是你直接给他一个 svg 代码让它替换后线条调细一点就很 nice

5. 到这一步基本上可以获得一个完整的 Vue 组件， 直接 copy 至你的项目， 就可以持续集成了， 不要让 AI 集成整个网站， 网站大了上下文不够， sonnect 200k 刚好适合生成一个完美的 Vue 页面

6. 基本上做到这里， 你抄袭的网站可以还原到 80%， 但是不要再花心思指挥 AI 到 100% 的效果， 因为做不到， 简单来说再往下就是画蛇添足浪费时间， 不要问我为什么知道。 这时候把 Demo 交给专业前端工程师微调即可

上面就是完整的 AI 建站攻略， 时间分布： 基本上我找各种网站好看截图花了 3 天时间， 完整 15 个 Vue 页面靠说中文花了 5 天， 前端专业工程师微调 100% 细节花了 5 天， 云端资源静态化 CDN 部署 1 天。

http://lazycat.cloud PC 版本这样质量的网站， 全程 14 人日， 恐怖吧？

个人觉得， 最先失业的就是低级前端工程师， 有审美的产品经理和高级前端工程师不会失业。