← AI Library
Websites · Claude CodeDesign Inspiration

Rebuild a Website You Love With Claude Code

Use a screenshot for visual direction, then rebuild the idea with your own brand, content, and layout choices.

Todd Kelley · Rewritten field guide from a public Cindy Zhu source

WebsitesClaude CodeDesign
  1. Capture a full-page screenshot of the site you like.
  2. Pull out the useful design ingredients: color, spacing, typography mood, section rhythm, and interaction ideas.
  3. Ask Claude Code to rebuild an inspired version using your copy and brand, not a pixel clone.
  4. Have Claude screenshot its result, compare it to the reference, and fix the visible gaps.
Website Inspiration Prompt
Here is a full-page screenshot of a website I want to use as design inspiration.

Rebuild the feeling as a clean, responsive website using my brand and my content.
Do not copy the original pixel-for-pixel, wording, logos, or imagery.

After the first build, take a screenshot of your result, compare it to the reference, list the visible differences, and fix the important ones. Repeat until the page feels close in quality and rhythm.

Legal/taste line: borrow the design lesson, not the protected expression. Your version needs its own copy, assets, brand, and final composition.

Original Source

Adapted from Cindy Zhu's guide: Rebuild any website you love with Claude Code.