clone-website

精确克隆网站

一键克隆工具只能做出一个相似版本：它看起来像原页面，但整个过程中从未检查过是否与原页面一致。这项技能产出的结果则不同——所有值都可追溯至源页面，并且会生成一份差异报告，指出仍有哪些问题。

唯一准则：如果页面写明了某个值，就读取它。如果页面没有写明，只有这时才自行决定。 按这种方式重建，直到差异为空才算完成；你可以检查差异是否为空，而不是凭感觉判断它看起来差不多，因为没人能做到后者。

只有重建步骤需要考虑目标是 Figma、Penpot 还是代码库。其他步骤都一样。

截取前先做决定

• 设计目标是两种宽度：移动端为 390，桌面端为 1440。真实设备会以其他比例打开同一页面，所以这两种宽度是设计时要针对的目标，而不是你实际会看到的宽度。
• 遵循浅色和深色偏好设置的网站会渲染出两个不同的页面。请同时截取两种模式，或说明你复制的是哪一种。
• IP、地区设置、同意状态和 A/B 分支都会在你访问之前影响网站，因此，你截取的是一位访客所看到的内容，而不是整个页面。信任价格或文案之前，请从第二个位置进行检查。

1. 截取渲染后的页面

驱动真实浏览器，同时获取四项内容：两种宽度下的整页截图、渲染后的 DOM、每个区块的计算样式，以及页面请求的资源 URL。对于客户端渲染的页面，这是唯一能捕获到任何内容的方式。

渲染状态才是规范，而不是服务器发送的文件。

2. 同时获取原始源代码

标记会原样保留文本，并列出所有资源 URL，无需在此过程中截图。

wget -r -l 3 -k -p -E -nc https://example.com/page

刻意不处理跨主机资源：CDN 资源不会被获取，它们的 URL 位于标记中，会在第 4 步直接下载。wget 不会运行 JavaScript，所以它是第二种截取方式，而不是第一种。

3. 测量设计值

直接从在线页面读取设计令牌，而不是从图片上估算——字体比例、调色板和间距都已声明。使用 [[extract-design]] 提取；--design-md 会生成一份简报，可直接交给重建步骤使用。

4. 从截取内容中获取文本和图片

从 DOM 中解析标题、正文文案、数字、列表、链接和页脚，然后下载每个引用的资源。绝不重新输入字符串，也绝不推断源页面已经写明的值。不重新输入，就不会产生偏差。

5. 按区块逐一构建

一次构建一个区块——页眉、主视觉区、功能行、表格、媒体、用户评价、常见问题、页脚——使用自动布局或实际布局容器，绝不使用固定坐标。逐一截取每个区块并进行比较，再继续下一步。只在最后评估重建结果，就只能评估一次，而且通常会做得很糟。

6. 比较三项内容，而非一项

检查项	问题
视觉	在每种宽度下看起来都一样吗？
结构	是否由合理的容器构建，而非使用绝对定位？
语义	文案、链接、数字和变体是否与源页面所述一致？

人们最容易忽略第三项，但它也最重要。视觉上完美的副本也可能包含错误数据，而对它进行的所有截图比较都会通过。

令牌级验证无需成本：提取原页面的令牌，提取重建结果的令牌，然后比较两组令牌。差异就是剩余工作，它会以清单的形式呈现，而非只是一种感觉。

7. 修复截取内容无法揭示的问题

有些问题源于结构盲区，而非内容失真，并且都不会显得像问题：

• 主视觉区使用了错误的图片，因为真正的图片是 CSS 背景。
• 轮播图或视频项目的顺序错误。
• 两张卡片的值因变体而异，却从彼此复制。

无法确认的内容应如实说明，而不是猜测。

8. 字体：先用替代字体，再替换

授权铸造厂提供的字体通常无法在自动化环境中加载，而视觉上相似的字体并不是正确选择，因为它会改变你即将核验的每一处换行。先使用字宽兼容的替代字体进行构建，最后通过一次查找和替换换成真正的字体。

9. 用有针对性的提示词修复，而不是重新运行

剩下的错误都是局部问题，因此指令也必须具体到局部：指出相应部分、错误所在，以及源值。为了修复一张卡片而重新运行整个构建，会再次耗上一小时，还会让错误出现在新的位置。

如果修复取决于判断而非某个值，就为那一部分生成两到三个版本，并询问哪个才对——还要问为什么。把这个原因写成一句话，用于处理下一部分，而不是靠猜。

10. 丢弃脚手架

导入内容已移除，暂存资源也已移除。剩下的只有两个画框、命名图层，以及作为矢量图形而非绝对定位元素的图标。如果导入内容还在文件里，那这个文件就仍是草稿。

这适用于什么场景

复刻页面是一种研究：用于拆解分析、重新设计的基准、迁移参考，以及针对自有网站的回归检查。最容易被低估的是最后一种——要了解线上版本是否仍符合其设计系统，最快的方法就是提取并进行比较。

把他人的布局、文案或品牌当作自己的内容发布，是另一回事；流程再快，也不代表这样做就更妥当。请遵守 robots.txt 和服务条款。

相关内容

• [[extract-design]] — 测量步骤与核验流程
• [[generate-ui-from-brand]] — 目标是打造符合某品牌风格的新 UI，而非复制
• [[authentic-product-representation]] — 确保重建的内容真实可信