clone-website

# 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. ## 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. ## 1. Capture the rendered page 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, ...