昨天在调研信息的时候，发现一个非常欧美风格的网站，那种简约的页面布局我实在是有点喜欢。
看似页面上的元素很少，但基本所有信息要素都有，做的非常自然且看上去很舒服。
于是想着能不能照着这个网站复刻出一个版本出来，那后续我再搭建类似这种业务的网站时，便可以用这套风格的页面设计了。
我的思路很简单，先收集这个目标站点的基础信息，包括各个部分的字体字号与配色，以及页面宽度内外边距等等数据。
有了这部分信息之后，便可以将其同步给 AI 模型让我协助我干活了。
这里我要说明的是，因为我不是做专门程序开发工作的，所有我使用的是 Claude Sonnet 4.6 这款模型的 API，没有用 Cursor 之类的集成编程环境。
第一步非常简单，直接用大白话告诉 AI 模型，我的参考站点是哪个、我现在收集到了哪些信息、哪些部分是我必须要的、我期望使用的技术栈是什么，以及具体的输出要求是什么。
一般这个步骤做完，基本的 HTML 页面结构便出来了，直接将代码拷贝下来并保存到本地。
而且只要这个步骤没什么大的问题，整体项目网站的克隆便成功了一大半了，毕竟所有的页面标准都定义好了。
剩下就是一个模块一个模块去复刻了。
比如这个 Hero Banner 区域，我想要上图这样的样式。
那我会直接打开浏览器的开发者工具，复制这个区块的完整 HTML 代码，并将其作为分析素材同步给 AI 让其消化。
且素材发送过去之后，我会要求 AI 参考这部分素材，用我所要求的技术栈与页面标准来输出新的代码。
在这种明确要求，这种高级模型出来起来会非常高效，且做出来的东西基本一次过，一点拖沓都没哟。
按照这种方式，一个区块一个区块做下来，三个小时左右（需要我自己手动整理代码）便基本将那个目标网站复刻完了。
其实到这个步骤，整个克隆的环节便都做完了，且做出来的初版大体也能用。
但出了项目健壮性的考虑，我自己又新开了一个对话框，用同样的模型去重新审查我的工作成果。
这个环节的主要目的就是代码检查，看看是不是统一的技术标准，看看有没有哪里需要额外优化的。
所以昨天晚上我差不多花了 5 个小时，完成了这个目标站点的前端页面的整体克隆，完全能达到「开箱即用」的标准。
所以这一套 AI 工作流体验下来，就不得不感慨 AI 模型在处理这些流水化任务时的能力之强悍。
相较于传统的页面开发模式，AI 真的是降维打击。
毕竟整体才消耗了 20 美金的 Token，一个人一晚上时间（如果使用 Cursor 之类的集成开发环境的话肯定会更快），便完成了过去一个团队需要一两个星期才能做完的事情。
而且整个过程基本不需要你有什么技术开发水平，只要懂基本概念是什么意思便可以了。
