Building the web with Claude

The anti-slop checklist: distinctive fonts (not Inter/Roboto/Arial); a dominant color with a sharp accent, not a timid even palette; intentional layout (asymmetry, overlap, grid-breaks) not three identical cards; real texture/atmosphere not flat white; one well-orchestrated motion moment over scattered micro-animations.

02AI slop vs. intentional — the same page, twice

The clearest way to see the difference is side by side. Same content, same components — one built on autopilot, one built with a point of view.

Nothing technical separates these — both are a kicker, headline, two lines and a button. The right-hand one simply chose: a face with character, a color that means something for the subject, copy that sounds like a person. That choice is the whole game.

03The style spectrum — 24 directions, illustrated

Claude isn't limited to one look. Below are twenty-four distinct directions, each shown as a live mini-mockup of its type, color and button treatment. Every one is achievable today — the network runs many of them in production.

These are starting points, not a menu to copy verbatim. The best results come from naming a direction and a twist ("art-deco, but in oxblood and brass, for a hot-springs resort").

04Layout patterns — illustrated

Style is the skin; layout is the skeleton. A direction can be poured into many structures — these ten wireframes cover most of what a content or product site needs. Name the one you want and Claude builds to it; mix two for something less expected.

Asymmetric and bento layouts read as "designed" precisely because they break the three-equal-columns reflex. The worksheet/table layout is the WholeTech signature for directories and dashboards — sortable rows that click through to a detail card.

05Color palettes — illustrated

A palette is a decision, not a default. The pattern that almost always works: one dominant background, one ink, and one sharp accent (plus an optional secondary). Timid, evenly-weighted palettes are what make a page feel generic. Ten that earn their keep:

Tell Claude the feeling and a constraint — "warm, earthy, two greens and a clay accent" — and let it choose exact hex values, then refine on the rendered result.

06Typography pairings — illustrated

Type does more for "designed vs. default" than any other single choice. The reliable recipe: a distinctive display face for headlines + a clean, readable face for body. Six pairings that carry real character (all free Google Fonts):

07The component gallery

Most pages are assembled from a small kit of parts. Get these right once and the whole site inherits the quality. Live examples, in this guide's own theme:

Note how much the button treatment alone signals the style — a hard drop-shadow reads brutalist, a glowing outline reads cyber, a full pill reads soft/playful. Components are where a direction becomes concrete.

08Anatomy of a page

A useful mental model before you prompt: the regions every content page tends to have, top to bottom.

09Motion & interaction

Motion is seasoning, not the meal. The highest-impact move is a single, well-orchestrated page-load: elements arrive in a staggered reveal rather than all at once. A few patterns worth asking for by name:

• Staggered load — hero kicker, headline, sub and CTA fade/rise in sequence (animation-delay stepped 80–120ms apart). One orchestrated moment beats ten scattered hovers.
• Scroll-reveal — sections fade up as they enter the viewport (IntersectionObserver). Subtle, 12–20px of travel, not a circus.
• Purposeful hover — a card lifts, a border lights, an arrow nudges. Hover should reward intent, not decorate everything.
• Respect prefers-reduced-motion — gate animation behind the media query; accessibility and taste agree here.

10Responsive design

Design the small screen as a first-class layout, not an afterthought. The same page, three widths:

Ask Claude for "mobile-first, fluid type with clamp(), grid columns collapsing 3→2→1," then screenshot at 1280, 768 and 390px to confirm.

11Reusable theme kits

For a network of sites, don't hand-build each one. The scalable pattern is a kit: a coordinated design language with a handful of switchable color themes, all driven by CSS variables, so one stylesheet dresses many sites and a visitor can flip themes live. WholeTech runs seven kits (Broadsheet, Almanac, Terminal, Showroom, Marquee, Studio, Rugged). One file changes the look of dozens of sites at once.

• CSS variables are the spec: --bg, --text, --accent, --surface, --border + heading/body font vars. Themes are just different variable sets.
• A theme switcher swaps a class on <html> and remembers the choice in localStorage.
• An enforcer layer (high-specificity !important rules) makes the kit win over any page's leftover inline CSS — the difference between "skinned" and "actually restyled."

:root{ --bg:#f6f1e6; --text:#1d1a14; --accent:#155e75; --surface:#fff; --border:#e2dccd;
       --display:'Newsreader',serif; --body:'Libre Franklin',sans-serif }
html.theme-night{ --bg:#0e1320; --text:#eef2f8; --accent:#5fd0a3; --surface:#161b24; --border:#262e3b }

Full write-up of the kit system: wholetech.com/design/skins.

12Emulating a site you admire

One of the most powerful moves: point Claude at a reference and have it rebuild in that spirit. You give Claude either a screenshot (most reliable) or a URL, plus a sentence on what you want carried over, and it analyzes the structure, palette, type and layout, then produces an original page in that style.

How to do it well:

1. Give a screenshot when you can — it captures the actual rendered look better than a URL the agent may not fully see.
2. Say what to carry over: "the type and color, not the layout," or "match the whole vibe but make it ours."
3. Name the subject so the content is yours: "emulate this magazine's look for a hot-springs real-estate site."
4. Iterate from a screenshot of the result — have Claude screenshot what it built and compare to the reference, then refine.

13The build workflow

1. State the direction — aesthetic, audience, one memorable thing it should do.
2. Generate — Claude writes real HTML/CSS/JS (or React), not a wireframe.
3. Screenshot-verify — render the page (headless browser) and look at it; never ship from code alone.
4. Iterate on the screenshot — fix what the eye catches: contrast, rhythm, overlap, motion.
5. Deploy to the server, then verify on the live URL (not the local file).
6. Snapshot first — keep a dated copy of the old version before overwriting, so every change is reversible.

For a whole network, two more layers make changes safe at scale: content blocks wrapped in markers so a section can be edited across every site at once, and a worksheet/cockpit that shows every site's design score, traffic and content depth in one place.

14Copy-paste prompts

Starting points — replace the bracketed parts. The more specific the direction, the less generic the result.

A new page

Build a [landing page / guide / directory] for [subject].
Aesthetic: [steampunk / brutalist / editorial / luxe noir] — commit hard, no AI-slop defaults.
Audience: [who]. The one thing they should remember: [hook].
Distinctive fonts (not Inter/Roboto), a dominant color + one sharp accent,
intentional layout, one orchestrated motion moment. Production-ready HTML/CSS.
Then screenshot it and refine until it's unmistakable.

Emulate a reference

Here's a screenshot of [site] I love. Rebuild [my page] in that spirit —
carry over the [type + color + spacing + mood], keep MY content,
don't copy their text or assets. Show me a screenshot when done.

Pick a direction for me

Here's what the site is about: [subject + audience].
Propose 3 distinct aesthetic directions (name the fonts, palette and one signature move
for each), show me a mini-mockup of each, and recommend one with a reason.

A specific layout

Use a [bento grid / split hero / magazine] layout. [Asymmetric, with one element
breaking the grid.] Mobile-first, fluid type with clamp(), columns collapse 3-2-1.
Screenshot at 1280, 768 and 390px so I can see all three.

A reusable kit / redesign

Turn this into a reusable theme kit: CSS-variable themes ([5] color worlds),
a live theme switcher, an enforcer layer so it beats inline styles.
Apply it to [site] as the proof; snapshot the old design first.

Fix slop on an existing page

This page reads generic. Diagnose why (fonts, palette, layout, spacing),
then redesign with a committed [direction] — same content, real point of view.
Show me before/after screenshots.

15Insider tips & how to prompt

This is the part that doesn't fit in a template — the actual moves that separate a forgettable result from a great one. Everything here is learned from building ~190 sites with Claude.

The words that actually move the model

Vague asks get vague pages. These phrases reliably shift the output, because they name the thing an unguided agent skips:

• "Commit hard to [direction] — no AI-slop defaults." The single most effective instruction. It gives Claude permission to be bold and explicitly forbids the safe path.
• "Name the exact fonts and palette before you code, and justify them." Forces a decision instead of reaching for Inter. You can veto the choice before a line is written.
• "One orchestrated motion moment, not scattered micro-animations." Gets you a tuned page-load reveal instead of everything-twitches.
• "Asymmetric — let one element break the grid." Breaks the three-equal-cards reflex that screams template.
• "Production-ready, semantic HTML — not a wireframe or placeholder." Gets real, shippable code, not lorem-ipsum scaffolding.
• "Make it unmistakable / unforgettable." Raises the bar from "fine" to "memorable" — Claude will reach further.

Give it something to react to

• Drop in a screenshot. A picture of a site you love does more than three paragraphs of description. Claude reads layout, palette and type off the image directly.
• Stack two references. "The type discipline of [A] with the color energy of [B]" produces something that's neither — and therefore original.
• Reference a feeling, not just a look. "Should feel like the opening of a prestige TV drama," "like a well-worn field manual," "like a quiet luxury boutique." Mood words steer palette and pace.
• Give an anti-reference. "Not corporate, not a startup landing page, not another Stripe clone." Telling it what to avoid is as useful as what to chase.

The screenshot loop is the secret weapon

The highest-leverage habit by far. Code can look right and render wrong. Bake the eye into the loop:

• "Screenshot it, then critique your own work harshly before I see it — what looks generic, what's misaligned, what's timid — then fix all of it." This one prompt does the work of three rounds of feedback.
• "Compare your screenshot to the reference and list every difference, then close the gaps." Turns emulation from a guess into a measured process.
• Always verify on the live URL, never the local file — fonts, redirects and caching behave differently in production.

Phrases that rescue a stuck design

When the result is "fine" but flat, don't restart — push:

• "You're playing it safe. Push it 3x further." — the most reliable un-sticker.
• "Double the contrast: bigger headline, louder accent, more negative space." — concrete dials beat "make it pop."
• "This still reads like AI slop. Diagnose exactly why, then fix the root cause." — makes Claude name the fonts/palette/layout problem instead of nudging pixels.
• "Keep the content, throw out the layout, try something I wouldn't expect." — forces a genuinely different structure.
• "Show me three more directions before we commit." — cheap optionality; pick the brave one.

Constraints unlock creativity

Counter-intuitively, limiting Claude produces bolder work than a blank check:

• "Only two fonts and one accent color. No rounded corners. No gradients." — restriction forces craft into type, space and rhythm.
• "Monochrome except for a single accent that appears exactly three times." — discipline that reads as intent.
• "No stock-photo energy — use type, color and shape as the visuals." — avoids the generic-image trap.

Prompting the copy, not just the chrome

A distinctive page with generic words still feels like slop. Steer the voice:

• Give a voice spec: "terse and confident, like a field manual" / "warm and grandmotherly" / "dry, technical, no marketing fluff."
• Ban the tells: "No 'unlock,' 'seamless,' 'elevate,' 'revolutionize,' no exclamation marks." The AI-marketing vocabulary is its own kind of slop.
• Demand specifics: "Use real numbers and concrete nouns, never 'solutions' or 'experiences.'" Vague copy is a smell.

Working at network scale

• "Make this a reusable kit, then prove it on one site." — build the system, not the one-off; roll it to the cluster after.
• "Wrap this section in edit markers so I can change it across every site at once." — the block pattern that lets one edit touch hundreds of pages.
• "Snapshot the old version to a dated folder before you overwrite." — every change reversible; say it once and it becomes habit.
• "Make it idempotent with a dry-run and a rollback." — for anything that touches many files, ask for the safety rails up front.

16Worked case studies

Four real directions on this network, each as a one-line intent → the prompt that set it → the look it produced.

17The quality bar

• Typography — a distinctive display face paired with a readable body; this alone separates "designed" from "default."
• Color — commit to a palette; dominant tones with sharp accents beat timid even spreads.
• Motion — one well-orchestrated load (staggered reveals) delights more than scattered hover effects.
• Layout — asymmetry, overlap, grid-breaks, generous whitespace OR controlled density — intent, not a template.
• Accessibility — real contrast, semantic HTML, keyboard order, alt text, prefers-reduced-motion.
• Performance — system or well-subset fonts, lazy images, minimal JS; fast IS a feature.
• Don't phone it in — every section is first-class; no fabricated specifics, no filler.

18Real examples on this network

Each of these was designed and built this way — point, prompt, screenshot, refine:

The throughline: an AI agent makes the execution cheap, so the scarce, valuable inputs become taste, a clear direction, and the discipline to verify with your eyes. Bring those, and Claude builds the rest.