clone-website

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Clone a Website, Accurately

准确复刻网站

One-click cloners return a lookalike: it resembles the page, and nothing in the process ever checked whether it matches it. This skill produces a different artifact — values traceable to the source, and a diff that says what is still wrong.

The one rule: if the page states a value, read it. If it does not, and only then, decide it. A rebuild done that way is finished when the diff is empty, which you can check, rather than when it looks about right, which nobody can.

Only the rebuild step cares whether the target is Figma, Penpot or a codebase. Everything else is the same job.

一键式克隆工具只能产出相似的页面：看起来像，但整个过程从未检查过它是否真正一致。这个 skill 会产出一种不同的成果——所有数值都可追溯至源页面，并给出一份 diff，明确指出仍有哪些问题。

唯一规则：如果页面明确给出了某个值，就读取它。如果页面没有给出，且只有这种情况下，才由你决定。 按这种方式完成的重建，以 diff 为空作为完成标准——这是可以检验的；而不是以“看起来差不多”为准——后者谁也无法检验。

只有重建这一步需要关心目标是 Figma、Penpot 还是代码库。其他所有环节都是同一项工作。

Decide before you capture

采集前先做决定

Two widths are the design target, 390 mobile and 1440 desktop. Real devices open the same page at other ratios, so these are what you design to, not what you will see.
A site that follows the light and dark preference renders two different pages. Capture both, or say which one you copied.
The IP, locale, consent state and A/B branch reach the site before you do, so what you capture is one visitor's view, not the page. Check from a second location before trusting prices or copy.

两个宽度是设计目标：390 移动端和 1440 桌面端。真实设备会以其他比例打开同一个页面，所以应以这两个宽度为设计目标，而不是将你所看到的尺寸当作目标。
遵循浅色和深色偏好设置的站点会呈现两个不同的页面。两种都要采集，或者说明你复刻的是哪一种。
IP、locale、consent state 和 A/B branch 在你访问之前就已作用于站点，因此你采集到的是一种访问者看到的视图，而不是页面本身。在信任价格或文案之前，请从另一访问位置进行检查。

1. Capture the rendered page

1. 采集渲染后的页面

Drive a real browser and take four things at once: full-page screenshots at both widths, the rendered DOM, the computed styles of each section, and the asset URLs the page requested. On a client-rendered page this is the only capture that contains anything at all.

Rendered state is the specification, not the file the server sent.

驱动真实浏览器，一次采集四类内容：两个宽度下的全页面截图、渲染后的 DOM、各个区块的 computed styles，以及页面请求的 asset URLs。对于客户端渲染的页面，只有这种采集方式才包含实际内容。

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

2. Take the raw source as well

2. 同时采集原始源码

Markup carries text verbatim and names every asset URL without a screenshot in the loop.

bash

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

Host-spanning is left out on purpose: CDN assets stay unfetched, their URLs are in the markup, and they get downloaded directly at step 4.

wget

does not run JavaScript, which is why it is the second capture and not the first.

标记代码会逐字保留文本，并列出每个资源 URL，无需让截图参与流程。

bash

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

刻意不跨主机：CDN 资源不会被抓取，其 URL 已在标记代码中列出，并会在第 4 步直接下载。wget 不会运行 JavaScript，因此它是第二次采集，而不是第一次。

3. Measure the design values

3. 测量设计值

Read the tokens off the live page rather than off a picture — the type scale, palette and spacing are already declared. Use [[extract-design]] for the extraction;

--design-md

gives you a brief you can hand straight to the rebuild step.

从实时页面而非图片中读取 token——字号层级、调色板和间距都已经声明好了。使用 [[extract-design]] 完成提取；

--design-md

会生成一份可直接交给重建步骤的简报。

4. Take content and images from the capture

4. 从采集结果中获取内容和图片

Parse headings, body copy, numbers, lists, links and the footer out of the DOM, then download every referenced asset. Never retype a string and never infer a value the source states. Nothing retyped means nothing drifts.

从 DOM 中解析标题、正文、数字、列表、链接和页脚，然后下载每一个被引用的资源。绝不手动重新输入字符串，也绝不推断源页面已明确给出的值。没有需要重新输入的内容，就不会发生漂移。

5. Build section by section

5. 逐个区块构建

One section at a time — header, hero, feature rows, tables, media, testimonials, FAQ, footer — in auto layout or real layout containers, never pinned coordinates. Screenshot each section and compare it before moving on. A rebuild judged only at the end gets judged once, badly.

一次处理一个区块——header、hero、feature rows、tables、media、testimonials、FAQ、footer——使用 Auto Layout 或真正的布局容器，绝不使用固定坐标。对每个区块截图，并在继续之前进行比较。只在最后才评判的重建，只会得到一次糟糕的评判。

6. Compare three things, not one

6. 比较三个维度，而不只比较一个

Check	Question
Visual	Does it look the same at each width?
Structural	Is it built from sane containers rather than absolute positions?
Semantic	Are the words, links, numbers and variants the ones the source states?

The third is the one people drop, and it is the one that matters most. A perfect visual copy can carry wrong data, and it will pass every screenshot comparison you run against it.

Token-level verification is free: extract the original, extract the rebuild, compare the two token sets. The difference is your remaining work, stated as a list instead of a feeling.

检查项	问题
视觉	在每个宽度下，它看起来都一样吗？
结构	它是否由合理的容器构建，而不是依赖绝对定位？
语义	文案、链接、数字和变体是否都与源页面明确给出的内容一致？

第三项最容易被人遗漏，却最重要。视觉上完全一致的副本仍可能包含错误数据，并且会通过你运行的每一次截图对比。

token 级别的验证零成本：分别提取原始页面和重建页面的 token，比较两组 token。差异就是剩余工作，它会明确列出来，而不是只凭感觉判断。

7. Fix what the capture could not see

7. 修复采集无法看到的问题

Some errors are structural blindness, not degradation, and none of them look like errors:

A hero using the wrong image because the real one is a CSS background.
Carousel or video items in the wrong order.
Two cards whose values differ by variant, copied from each other.

Report what you could not resolve rather than guessing.

有些错误源于结构性盲区，而不是性能衰减，并且它们看起来都不像错误：

hero 使用了错误的图片，因为正确图片实际上是 CSS background。
轮播或视频项目的顺序错误。
两张卡片的值因变体而异，却被相互照抄。

报告无法解决的内容，不要猜测。

8. Fonts: stand in, then swap

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

Licensed foundry fonts usually cannot be loaded in an automated environment, and a visual lookalike is the wrong answer because it moves every line break you are about to verify. Build on a metric-compatible stand-in, then swap to the real face at the end with one find and replace.

获得商业授权的字体通常无法在自动化环境中加载，而视觉上的相似替代品是错误的答案，因为这会改变你接下来要验证的每一处换行。先使用 metric-compatible 的替代字体构建，最后再通过一次查找替换换成真实字体。

9. Fix by targeted prompt, not by rerunning

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

Every remaining error is local, so the instruction has to be local too: name the section, name what is wrong, name the source value. Rerunning the whole rebuild to fix one card costs the hour again and moves the errors somewhere new.

Where the fix is a judgement call rather than a value, produce two or three versions of that one section and ask which is right — and ask what made it right. That sentence is what gets applied to the next section instead of a guess.

每个遗留错误都是局部的，因此指令也必须局部化：指出 section，指出哪里不对，指出源值。为了修复一张卡片而重新运行整个重建流程，不仅会再花掉一小时，还会把错误挪到别处。

如果某项修复取决于判断而不是明确值，就为那个 section 生成两到三个版本，并询问哪个是正确的——同时询问它为什么正确。那句话会被应用到下一个 section，而不是靠猜测。

10. Throw the scaffolding away

10. 丢弃脚手架

Import gone, staging assets gone. What is left is the two frames, named layers, icons as vectors, not one absolutely positioned element. If the import is still in the file, the file is still a draft.

导入内容已清除，暂存资源已清除。剩下的应该是两个 Frame、命名图层和矢量图标，而不是单个绝对定位元素。如果导入内容还留在文件里，这个文件就仍然只是草稿。

What this is for

适用范围

Reproducing a page is research: teardowns, redesign baselines, migration references, and regression checks against your own site. The last is the most undervalued — the fastest way to learn whether production still matches its design system is to extract it and compare.

Shipping someone else's layout, copy or brand as your own is a different act, and the pipeline being fast does not make it a better idea. Respect robots.txt and terms of service.

复刻页面是一项研究工作：页面拆解、重设计基准、迁移参考，以及针对你自己站点的回归检查。最后一项最被低估——要快速判断生产环境是否仍与设计系统一致，方法就是提取并比较。

将别人的布局、文案或品牌当作自己的来发布，是另一种行为；流程再快也不会让这种做法变得更好。请遵守 robots.txt 和服务条款。