From Screenshot to Your OhhWells Site

The big idea

Every design you admire is really just a small set of decisions: a few colours, two fonts, a button style, and an overall feeling (airy? bold? warm?). Once you write those decisions down, you can apply them to your own site.

In OhhWells, your site's look is controlled from one place — your Brand Kit (your logo, colours, and fonts). Set it once, and every page and section follows it automatically. So the whole trick is:

1. Screenshot a design you love
2. Ask Claude (a free AI assistant) to turn the screenshot into a simple brand sheet
3. Apply the brand sheet inside OhhWells
4. Polish with the AI prompt bar, then publish

Step 1 — Capture your reference

Screenshot the design whose style you want. Tips:

• Capture a full page, not just the top — you want headings, body text, and buttons all visible
• More than one reference is fine (e.g. a website + an Instagram feed)
• Crisp beats blurry — zoom in before you snap

A quick word on ethics: you're borrowing the style — colours, fonts, feeling. Never copy another business's logo, words, photos, or exact layout. Inspiration, not imitation.

Step 2 — Turn the screenshot into a brand sheet

Go to claude.ai (free account works), upload your screenshot, and paste this prompt — just fill in the brackets:

I'm attaching a screenshot of a design I love. I build my website

on OhhWells, where I can set brand colours, fonts, and use an AI

prompt bar to restyle sections.

Turn this design into a simple brand sheet I can apply:

1. COLOURS — the 4–5 key colours as hex codes, each labelled by

   job: background, main text, primary/accent (buttons & links),

   and any supporting tones

2. FONTS — the heading font and body font. If they're not free,

   suggest the closest free Google Fonts equivalents.

3. BUTTONS — rounded or square? Filled or outlined?

4. THE VIBE — 3 words that capture the feeling, plus the 3 details

   that make this design distinctive (e.g. thin divider lines,

   lots of white space, oversized headings)

5. A short, ready-to-paste instruction I can give an AI website

   editor to restyle my sections in this style — without copying

   the original's content or layout.

My business: [WHAT YOU DO, e.g. a pilates studio in Bangsar]

In under a minute you'll have your brand sheet: exact hex codes, font names, and a ready-made styling instruction.

Why ask for Google Fonts equivalents? Many designs use paid fonts. Free lookalikes get you 95% of the feeling at 0% of the cost — and they're the fonts available in your builder.

Step 3 — Apply the brand in OhhWells

Open your site in the OhhWells editor and give it your brand:

• Logo — upload yours (this alone makes the site feel like yours)
• Colours and fonts — hand over your brand sheet from Step 2

Before anything changes, OhhWells shows you a confirmation card: "Update brand"

How to read the confirmation card

This card is your safety checkpoint — it lists exactly what's about to be applied, so check it against your reference screenshot:

• Primary (swatch + hex code) — your main brand colour: buttons, links, highlights
• Background — the colour behind everything on the page
• Text — the colour of your headings and paragraphs
• Accent — the supporting colour for subtle highlights and touches
• Headings — the font for titles and headlines
• Body — the font for paragraphs and everything else

Three things to know before you tap Update brand:

• Check the swatches, not just the codes. Hold your reference screenshot next to the card — do the little colour squares look like your reference? That's a faster check than reading hex codes.
• It restyles the whole site at once. That's the point — one confirmation, every page updates. No section-by-section repainting.
• You can undo it. If the result isn't right, undo and try again. Nothing is permanent, so it's safe to experiment.
  If something looks off (say, the Primary colour picked up the wrong blue), hit Cancel, fix the value, and apply again. Ten seconds of checking here saves twenty minutes of fixing later.

Because your brand cascades across your whole site, this is the single highest-impact minute of the whole process.

Tip: OhhWells also lets you swap styles freely (they don't cost anything). Before fine-tuning, try a couple of styles to find the one whose bones are closest to your reference — starting close means less work in Step 4.

Step 4 — Polish with the AI prompt bar

Now use the prompt bar in the editor with the "vibe" instruction from your brand sheet. For example:

Restyle my hero section: airy and editorial — lots of breathing room, oversized headline, thin divider line under the heading, outlined button.

Then iterate like you're directing a designer:

• "More white space between sections"
• "Make the booking button bigger and filled, not outlined"
• "The headline should feel calmer — less bold"

Credit-smart tip: AI prompts use credits, so batch your requests. One rich prompt ("do these 4 things...") beats four tiny ones. Manual edits with the toolbar are always free — use the AI for restyling, and your hands for small text tweaks.

Point at the signatures. Every design has 2–3 details that make it feel like that design (thin lines, a special button shape, tiny spaced-out labels). If your result feels "close but off," name those details explicitly — that's usually the missing piece.

Step 5 — Check mobile, then publish

Most of your visitors will see your site on a phone first. Switch to mobile preview and check:

• Headline readable without zooming
• Button easy to tap
• Nothing overlapping or cut off

Happy? Hit Publish. Your site is live — share the link.

The one-page cheat sheet

• Step 1 — Screenshot a design you love.
  Where: your browser.
• Step 2 — Get your brand sheet (prompt above).
  Where: claude.ai (free).
• Step 3 — Apply brand → check the "Update your site's brand?" card → Update brand.
  Where: OhhWells editor.
• Step 4 — Restyle sections with the vibe instruction.
  Where: AI prompt bar.
• Step 5 — Mobile check → Publish.
  Where: OhhWells editor.

Golden rules: the brand cascade does the heavy lifting — set it first · always eyeball the confirmation card before tapping Update brand (it's undoable, but checking is faster) · try free style swaps before spending credits · batch your AI prompts · name the signature details · style is inspiration, content is yours.