Free guide ยท from the reel

Copy any website style. Claude builds yours.

Pick a website you love, copy its design in one click, and paste it into Claude. You get your own site in that style. No coding. No designer.

โฑ About 15 minutes๐Ÿ‘ฃ 5 steps๐Ÿ’ธ Free to start

What you'll make

Each of these came from one style on Refero and one prompt in Claude.

Apple style page on ReferoApple style
โ†’
Lumo One website built by Claude in the Apple styleLumo One ยท made by Claude
Superhuman style page on ReferoSuperhuman style
โ†’
Tempo website built by Claude in the Superhuman styleTempo ยท made by Claude
Linear style page on ReferoLinear style
โ†’
Forge website built by Claude in the Linear styleForge ยท made by Claude

What you need

๐Ÿ’ฌA Claude accountThe free plan works. Sign up at claude.ai.
๐ŸŒA browserPhone works, but a computer is easier.
โœ๏ธTwo lines about your businessWhat you do, and what you want people to click.

The 5 steps

Do them in order. Each one takes a minute or two.

1

Open Refero Styles

It's a free library of 2,000+ website styles from top companies. Each style is saved as a file called a DESIGN.md. That file tells Claude the colors, fonts, spacing and buttons.

Open styles.refero.design โ†—
Refero Styles home page

The Refero Styles home page.

2

Pick a style you love

  1. Type a brand in the search bar, like Apple.
  2. Click the card to open its style page.
Apple style page on Refero

The Apple style page. Left: what it looks like. Right: the DESIGN.md.

๐Ÿ’กNot sure which one? Clean and calm: Apple. Warm and personal: Superhuman. Dark and techy: Linear.
3

Copy the DESIGN.md

At the top right of the style page, click Copy. That's the whole design, copied in one click.

The Copy button above the DESIGN.md on Refero

Click "Copy". Leave "Extended" selected; it gives Claude more detail.

๐Ÿ’กPrefer a file? Click .md next to Copy to download it. You can drag that file into Claude instead.
4

Paste it into Claude with my prompt

  1. Open claude.ai and start a new chat.
  2. Copy my prompt below and paste it in.
  3. Fill in the parts in [brackets] with your business.
  4. At the bottom, where it says paste the DESIGN.md here, paste what you copied in step 3.
  5. Press send.
The DESIGN.md pasted into Claude with the prompt

Claude reads the style: colors, fonts and shapes.

The finished site built by Claude

Then it builds your site in that style. A preview opens next to the chat.

5

Make it yours, then share it

Ask for changes in normal words, one at a time. For example:

  • "Make the headline bigger."
  • "Change the main color to green."
  • "Add a pricing section with 3 plans."
  • "Use this photo in the top section." (attach your photo)

When you like it, click Publish on the preview to get a link you can share. Or click Download to keep the file.

My exact prompt

Copy it, fill in the [brackets], paste the DESIGN.md at the bottom.

the-prompt.txt
I'm pasting a DESIGN.md below. It describes the design style of a website I love. Build me a one-page website for my business in exactly this style: same colors, fonts, spacing, buttons and overall feel. Important: copy the style only. Do not use their brand name, logo, text or photos. Use mine. My business: [what you do, in one sentence] Business name: [your business name] Main button text: [for example: Book a call] Sections: top section with a big headline, 3 benefits, how it works, reviews, a final call to action, footer. Make it one HTML file that works well on phones. Show me a preview. If I didn't give you images, use simple placeholders. DESIGN.md: [paste the DESIGN.md here]

Download the prompt as a file

If something looks off

It doesn't look like the styleSay: Follow the DESIGN.md more closely. Check the colors and fonts.
It stopped halfwaySay: Continue
I don't see a previewSay: Show it as a preview I can see.
It used their logo or brand nameSay: Remove all of their branding. Use my business name.
It looks bad on my phoneSay: Fix the layout for phones.
โš–๏ธOne rule: copy the style, never the brand. Colors, fonts and layout are fair game. Logos, product photos, names and slogans belong to them. Use your own.