Clone a website

Recreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.

1. Map the work

Read project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.

Record a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use src/app/, src/components/sites/<site>/, public/sites/<site>/, and docs/research/<site>/. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.

• A first root clone may replace the untouched template homepage.
• Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.
• Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.
• When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.
• Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.
• Escape literal URL segments that conflict with framework syntax (_, @, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.

Existing clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.