[AI书房] 第13章 网站克隆与定制
Claude Code完全掌握
Claude Code完全掌握
第13章 网站克隆与定制
金京镇
通过截图分析参考网站
屏幕上打开了一个法语社区网站。配色考究，布局比例恰到好处。脑海中浮现出自己想做的网站的完成形态，手不自觉地伸向键盘，这是再自然不过的反应。但在写下哪怕一行代码之前，有一件事必须先做：准确掌握参考网站的结构。
向Claude Code提出建站请求时，口头描述和提供视觉素材之间，成品质量的差距相当明显。如果只说「照着苹果官网的风格做」，AI会从训练数据中提取对苹果网站的笼统印象。但如果直接递上参考网站的截图（screenshot），情况就不一样了。
因为AI可以从视觉信息中具体读取色值、边距比例、按钮位置，以及字体（typography）之间的大小关系。
实际工作中，分析参考网站的流程如下。
先获取参考网站的整页截图。使用浏览器的全页面截图功能，可以把滚动区域以下隐藏的内容也一并收入一张图中。这张截图将成为Claude Code识别「目标状态」的基准。
接着准备品牌素材（brand asset）。整理好Logo文件、主要色值（主色、辅色、背景色、强调色）以及要使用的字体名称。因为我们要借鉴参考网站的布局，但品牌识别必须替换为自己的。
[图 13-1] 同时提供参考网站截图和品牌素材的提示词构成示例
然后给Claude Code写提示词。「请参照这张截图的布局和结构，套用我们的品牌颜色和Logo来制作网站。文字全部用英文撰写，内容要贴合我们社区的语境。」这样请求之后，Claude Code会沿用法语原站的结构，但颜色、字体和内容全部换成全新的。
有一点需要注意。「复制」参考网站和「参考」参考网站是两码事。我们不是照搬HTML源代码，而是把设计模式和布局流向当作学习素材。最终成品中应该承载自己的内容、自己的颜色、自己的信息。
截图循环：构建→截图→比较→修正的迭代策略
第一轮构建结束，网站在本地服务器（localhost）上显示出来了。颜色按指定的来了，Logo也在该在的位置。可是英雄区块（hero section）的留白比参考网站宽，卡片布局的对齐也有微妙的偏差。怎样才能缩小这种差距？
截图循环（screenshot loop）这个策略就在这里登场。它的核心思路是：让AI亲眼查看自己的产出，与参考图逐区对比，然后自行修正差异，如此反复。
运作方式是这样的。
Claude Code先编写网站代码，启动本地服务器后自动截取屏幕。再将截图与参考截图逐区块对比，列出不一致的地方，修改代码，重新截图比对。这个过程至少重复两轮之后，才把结果呈现给用户。
[图 13-2] 截图循环流程图：构建 → 截图 → 比较 → 修正 → 再截图
这个循环之所以有效，是因为AI不只看代码，而是以渲染后的视觉结果作为判断依据。CSS里写了 margin-top: 2rem，但这段留白在屏幕上到底给人什么感觉，光看代码无从得知。有了截图，就能做出「这里比参考网站大概宽了20像素」这样的判断。
不过截图循环也有局限，问题出在动态元素上。
背景动画或基于滚动的特效，这类静态画面无法捕捉的元素，截图要么只拍到部分状态，要么干脆一片空白。这时Claude Code会误判为「还没实现好」，然后对原本运行正常的代码过度修改，陷入恶性循环。
遇到这种情况，正确做法是主动关闭截图循环。在提示词中写明：「这是动画背景，请不要使用截图工具，直接编写代码即可。如果需要修改，我自己看过之后会告诉你。」相当于暂时收回AI的视觉自检权限。
反过来，对于以静态布局为主的落地页，应该充分利用截图循环。把循环次数设为三轮以上时，第一轮和第三轮的产出之间会出现肉眼可辨的质量差异。
[图 13-3] 截图循环第1轮 vs 第3轮成果对比
使用21st.dev组件库
整体布局已经令人满意，但英雄区块的按钮看上去寡淡。一个圆角蓝色按钮孤零零地摆在那里。如果能把它换成边框流动着彩虹光效的按钮，整个网站的观感就会截然不同。
21st.dev是一个汇集网页独立组件（component）的库。按钮、背景动画、导航栏、卡片UI、开关按钮等各种元素都已预先编码。用户只需挑选想要的组件，以提示词形式复制，再交给Claude Code即可。
工作流程是这样的。
进入21st.dev网站，浏览各个类别。按钮、背景、英雄区块、着色器（shader）特效等分类一应俱全。选中想要的组件后，系统会生成该组件的提示词代码，将其复制。
回到Claude Code，编写提示词。「请把这个背景元素应用到英雄文字后面」，然后粘贴刚才复制的代码。Claude Code会解析这段代码的结构，结合现有项目的上下文进行整合。
[图 13-4] 在21st.dev中选择背景动画组件的界面
这种方式的好处在于，不必从单一参考来源获取全部内容，而是可以将多个来源的独立元素自由组合。按钮灵感来自A网站，背景用21st.dev的波浪动画，卡片布局参考B网站的结构。不是整站照搬，而是像策展一样，精选各处元素，拼出独一无二的成品。
有一点要留意。从21st.dev拉取的组件中，相当一部分包含动画。正如前面在截图循环的局限性中谈到的，添加动态元素时，关闭截图对比更为稳妥。需要同时附上这样的指令：「这是动画背景，请不要用截图工具进行比较，直接编写代码，我自己来确认。」
否则Claude Code会在静态画面中只捕捉到动画的某一帧，判定「实现不完整」，从而反复进行过度修改。
组件应用之后，必然需要反复进行微调。「背景动画太花哨了，请在英雄文字后面加一层半透明底色来提高可读性。把'Earn More'文字的颜色从橙色改成蓝色。」像这样逐条传达修改意见、逐步打磨的过程，决定了最终的完成度。
[图 13-5] 组件应用前后英雄区块对比
跳过权限模式与自主构建的利弊
Claude Code正在写代码，突然停了下来。屏幕弹出一句「可以执行这条命令吗？」的授权请求。创建文件要批准，安装依赖包要批准，启动服务器也要批准。设计上是安全的，但在建站过程中，这种中断重复几十次，工作节奏就碎了。
跳过权限模式（bypass permissions mode）就是用来消除这些中断的设置。在VS Code的设置中搜索「Claude Code」，启用「Allow Dangerously Skip Permissions」选项后，Claude Code便无需逐条请求批准，直接连续执行命令。
这个模式的优势很明显。截图循环的全过程可以自动运转：编写代码、启动服务器、截取屏幕、对比、修改、重启，六个步骤无需用户介入，一气呵成。Claude Code会建一份待办清单，逐项勾选，末尾只将完成的成品展示给用户。
但这个模式名字里带着「Dangerously」，不是没有原因的。它意味着Claude Code可以执行任何命令。删除文件、修改系统设置、发起外部网络请求，都可能在没有授权的情况下发生。
从实用角度出发，风险管理的方法如下。
开启跳过权限模式后工作时，原则上不要完全离开屏幕。一边做别的事，一边时不时瞄一眼Claude Code的进展就够了。让它整夜自主构建然后去睡觉，不是个好主意。
还有更精细的办法。与其使用跳过权限模式，不如在权限配置（permissions configuration）中，把安全的命令加入允许列表（allow list），危险的命令放进拒绝列表（deny list）。比如允许创建和读取文件，但屏蔽 rm -rf 之类的删除命令。
拒绝列表中的命令优先级高于允许列表，可以防止误执行危险操作。采用这种方式，能获得与跳过权限模式几乎相同的速度，同时保留安全网。
[图 13-6] 跳过权限模式 vs 选择性权限配置对照表
网站初次搭建阶段通常不涉及敏感数据，此时使用跳过权限模式的实际风险并不大。但一旦项目中开始出现API密钥或数据库连接信息，切换到选择性权限配置才是明智的选择。
完成的网站已经在我的本地主机上流畅运行。配色和布局令人满意，动画效果也很自然。现在不能把成果锁在自己电脑里了，得把它部署到别人也能访问的地方。在这个过程中，我们需要一个工具来安全管理代码的变更历史。
人工智能专家 金京镇律师
AI法律政策专家 · 前国会议员 · 著作等身
如果这本书曾在您身边停留片刻，请支持我们，让下一个故事得以问世。
（自愿赞助账户：农协 302-1096-0948-81 户名：金京镇）