TL;DR
Most people still build sites from scratch - you do not have to. Screenshot a site you love, hand Claude the URL, and its frontend-design skill maps the layout into clean, editable code. Swap the copy and colors, push to Vercel, and a weekend build collapses into an evening. Steal the structure, never the brand.
Why start from a reference
The slowest part of building a site is deciding how it should look and be laid out. A site you already love has solved that - the spacing, the hierarchy, the flow. Starting from that structure and swapping in your own content is dramatically faster than a blank page, and the result looks intentional because it is based on something that works.
The steps
- 1Pick a reference site whose layout you admire. Take a clean full-page screenshot and note the URL.
- 2Hand both to Claude and ask it to recreate the layout as editable code, using its frontend-design skill to map the structure - sections, hierarchy, spacing.
- 3Swap in your content: your copy, your images, your colors and fonts. This is where it becomes yours, not a copy.
- 4Push to Vercel (or similar) to get a live URL you can share and keep editing.
Why the design skill matters
Asking a model to 'build a site' gives you generic output. Its frontend-design skill reads the reference and translates real layout decisions - the grid, the rhythm, the component structure - into clean code you can actually edit, instead of a pile of markup you have to untangle. That is the difference between a starting point and a mess.
Then make it real
- Change the copy first - it is what makes the page yours and what visitors read.
- Set your colors and type so it stops looking like the reference.
- Deploy early and iterate live, rather than perfecting locally before anyone sees it.
Common questions
Is cloning a website legal?
Learning from and recreating a layout structure is normal practice; copying a brand is not. Take the structure and mechanics, then replace all of it - logo, copy, images, name, colors - with your own. Steal the shape, never the identity.
Do I need to know how to code?
No to start. Claude produces the editable code and you direct the changes in plain language - swap this copy, change these colors, move this section. Knowing some basics helps you go further, but you can ship a real page without it.
What is the frontend-design skill doing here?
It reads the reference and maps its real layout decisions - grid, hierarchy, spacing, components - into clean editable code, instead of the generic markup you get from a bare 'build a site' prompt. It turns a screenshot into a proper starting point.
How do I put it online?
Push the code to a host like Vercel and you get a live URL in minutes, with easy re-deploys as you edit. Deploy early so you can iterate on the real thing instead of perfecting it locally.
Want the step-by-step clone guide with the prompts?
Get 650+ plug-and-play skills, MCPs & prompts, plus 5,000+ builders - $9/mo, cancel anytime.
Join the Club