How to Rebuild a Website You Love to Learn Its Design

Every designer I respect learned by copying. Painters copy paintings in museums, musicians learn songs note by note, and designers rebuild pages they admire until they understand why they work. Claude Code makes that exercise fast. The point of the exercise is what you learn from it. The rebuilt page itself is a study, and it stays in your drawer.

Here is how I run a rebuild study, and how I turn what I learn into something that is fully mine.

Know where the line is before you start

Ideas about layout are shared by everyone. Big type with a lot of white space, a sticky navigation, a three column feature grid, a slow fade on scroll. Nobody owns those.

The site's code, photos, illustrations, copy, logos, icons and paid fonts do belong to someone. So does its brand: the combination of name, colors and visual identity that tells people who they are dealing with. A study can borrow the structure to learn from it. What you publish should use your own words, your own images, your own brand and fonts you have a license for. When in doubt, change more.

Write down what you actually love

"I love this site" is too vague to learn from. Before capturing anything, write three to five specific observations. For example:

• The headline is huge but the body text is small and calm, and the contrast feels confident
• Every section starts with the same amount of space above it
• There are only two colors plus gray, and one of them appears only on buttons
• Images are cropped tight and all share the same aspect ratio

This list is your real deliverable. The rebuild exists to test whether your observations are right.

Capture the reference

Open the site in Chrome at a normal desktop width. Open DevTools, press Cmd+Shift+P (or Ctrl+Shift+P on Windows) to open the command menu, type "screenshot" and choose Capture full size screenshot. That gives you the whole page as one image. Chrome's team has a short video on the screenshot options.

Then collect a few facts by hand in the Elements panel: the font families, the main text sizes, the main colors and the maximum content width. Write them into a text file. You only need the measurements. Leave their stylesheet alone. Do not download their images, logos or font files into your project.

Rebuild it as a study

Create a folder called study, start claude inside it, and paste the screenshot into the prompt (drag the file in, or copy it and press Ctrl+V). Then give it your notes and a prompt like this:

This screenshot is a design reference for a private learning exercise.
Rebuild the layout from scratch as a single responsive HTML and CSS page.

Rules:
- Write all code yourself. Do not fetch or copy the original site's code.
- Use placeholder text and gray boxes instead of their images and logos.
- Use free fonts that are close in feel instead of their fonts.
- Use my measured values from notes.txt for sizes, colors and widths.

When the first version is done, list the spacing scale, type scale
and grid you used, and explain how they create the feel of the reference.

The last paragraph is the important part. You are asking Claude to name the system behind the look, which is exactly what you are here to learn.

Let Claude compare and fix

A rebuild improves fastest when Claude can see its own result. Start Claude Code with claude --chrome and install the Claude in Chrome extension if it asks (the Chrome integration docs cover the setup). Then:

Open study/index.html in the browser at 1440px wide and take a screenshot.
Compare it to the reference screenshot. List the visible differences in
spacing, type size, alignment and color, most important first.
Fix the top five, then compare again. Stop after three rounds.

Capping the rounds keeps it from polishing details that do not teach you anything. Anthropic's best practices recommend this screenshot and compare loop for UI changes, and it works just as well on your own designs.

Turn the study into design notes

Now step back from the page and keep the lessons. Ask Claude to write them down:

Write DESIGN-NOTES.md from this study: the spacing scale, the type scale
with line heights, the grid and max widths, how color is used, and the
five decisions that matter most for the overall feel. No code, only rules
I could apply to a different brand.

Compare the notes with the observations you wrote at the start. Where you were wrong is where you learned something.

Build yours from a blank folder

Start a new project for your own site. Do not copy the study folder into it. Give Claude your notes, your content, your brand colors and your fonts:

Build my site from scratch. Content is in content.md, my brand colors and
fonts are in brand.md. Apply the principles in DESIGN-NOTES.md, but make
every visual decision fit my brand. It should not look like a copy of any
existing site. Where a principle does not fit my content, change it and
tell me why.

This is where the page becomes yours. Your copy changes the rhythm, your photos change the crops, your colors change the mood. If someone who knows the original site would mistake yours for it, keep changing things until they would not.

Pick one site you admire this week and do only the first half: observations, screenshot, study rebuild, notes. Keep the notes file. After three or four studies you will have your own small design system, and you will not need a reference to start.