Why Claude's websites look generic
Ask Claude for “a modern landing page” and it gives you the average of every landing page it has seen. That average is competent and forgettable: a centred headline over a soft gradient, three feature cards with icons, a purple accent, rounded everything, copy that says “elevate” and “seamless”. Anthropic's own front-end design skill exists to push Claude away from exactly these defaults, which tells you how strong the pull is.
None of this is a coding problem. The code is usually fine. What's missing is what a designer brings: a point of view, a system, real material and a critical look at the result.
The fix, in five steps
- Write a direction, not a promptWho the site is for, how it should feel in three words, and two or three real sites you would show a client. “Quiet, editorial, coastal; like a good hotel's printed menu” beats “clean and modern”.
- Give it a system to work insideA type scale, a spacing scale, a palette and a short list of what never appears (no gradients, no emoji icons, one typeface pairing). Claude follows a system well. It doesn't invent a good one.
- Use the business's own materialReal words, real photographs, the real offer. Generic copy is the fastest way to a generic site.
- Check it in a real browserScreenshots at desktop and phone width, console errors, contrast, sideways scroll on a phone. Ask Claude to look at the screenshots against your direction and fix only what fails.
- Publish and hand overSomewhere the client can see it, comment on it and approve it.
You can do all of this by hand in Claude Code: a design brief file, a CSS token file, Playwright for screenshots, a host of your choice. It works. It's also an afternoon of setup per project, and the system is only as good as the one you write.
Doing it with Sonder
Sonder, the website MCP for designers, is that workflow as a connector. Claude still does the thinking: it reads the brief, chooses and writes. Sonder supplies the parts Claude is weakest at.
| The step | By hand in Claude Code | With Sonder |
|---|---|---|
| Direction | You write the brief and find references. | Claude asks the client's vibe and references one question at a time; or picks from looks that fit the business. |
| System | You write tokens and rules. | 23 whole-site looks, each a complete designed site with its own type, spacing, colour and motion. |
| Material | You paste copy and photos in. | Sonder reads their current site: pages, photos, colours, fonts, logo. |
| Check | You set up screenshots and look. | Every page checked in a real browser at 1440 and 390, including the tells of generated copy. |
| Publish | You pick a host and deploy. | A Sonder link, or the client's domain on a paid plan, plus a review link for comments and approval. |
What Sonder doesn't do: it isn't a visual editor, and there's no CMS for your client to log into. Changes come from asking Claude (“make the hero quieter”, “use their new photo”), or from the code itself once you export it on a paid plan.
Skills, templates and Claude Design
Design skills for Claude Code (Anthropic's front-end design skill and community ones) are worth using: they change Claude's defaults with instructions. They don't give it a designed system, a check in a browser or hosting, which is where a connector helps. Claude Design is good for exploring and prototyping; when the result has to become a client's live site, it still needs the finish, the checks and somewhere to live.
Starting
claude mcp add --transport http sonder https://app.trysonder.dev/mcp
Run that once, type /mcp in Claude Code and choose Sonder. In Claude on the web, desktop or phone, add https://app.trysonder.dev/mcp as a custom connector. Then: “Use Sonder to make a new site for acme.com.” Every agent's steps are on the connect page.
Questions
Is Claude good for website design?
It's good at building websites and, with direction, at designing them. Without direction its sites look alike. Give it a brief, a designed system, the business's real material and a check in a real browser.
What's the best Claude Code skill for website design?
Anthropic's front-end design skill is the common starting point, and community skills build on it. Skills change Claude's instructions; Sonder adds what instructions can't: whole-site looks, browser checks and hosting. Many designers use both.
Can Claude build a whole website and put it online?
Claude can write every page. To put it online you need a host. Sonder publishes it on a Sonder link on the free trial, or on the client's own domain on a paid plan.
Does Sonder replace Claude?
No. Sonder runs inside Claude (or ChatGPT, Cursor and other agents) and never calls a model itself. Claude does the thinking and the writing; Sonder supplies the looks, the checks, the before and afters and the hosting.
How much does it cost?
Your first client project is free. Then Solo is $39 a month, Studio $99, Team $299, with 23% off yearly. See pricing.