Claude is a remarkable design partner.

Claude Design — Anthropic's purpose-built design surface.

Anthropic launched Claude Design on April 17, 2026 — a dedicated product for turning prompts into prototypes, slide decks, one-pagers, and mockups. Powered by Opus 4.7. In research preview for Pro, Max, Team, and Enterprise plans.

How it relates to everything else on this page

The recipes and patterns below all work in Claude Design and in plain Artifacts on claude.ai and with the frontend-design plugin in Claude Code. Pick the surface that matches your task — Claude Design for prototype-grade exploration, Artifacts for one-off Q&A, frontend-design for production-grade UI in a real codebase.

Every kind of website Claude can design.

Twenty-three design vocabularies, twenty-three live examples on this network. Each one was built with Claude — Artifacts, Claude Design, or the frontend-design plugin. Click through to see the real thing. Sites are grouped by visual register: editorial & archival, real estate, sports & fan, e-commerce & storefront, content & reference, BBS & terminal, service & landing, guide & magazine.

Want a different vocabulary? Hand Claude a screenshot of any site you admire and ask for “this energy.” The catalog above is just what we’ve shipped — Claude can match almost any visual language you can describe. The most useful pattern is to feed in two reference screenshots (the brand voice you want and the layout you want) and ask Claude to merge their conventions.

Take an existing site and repurpose it.

A whole separate skill: feeding Claude an existing website (yours, a Wayback archive of one that disappeared, or a client's tired 2014 design) and having it study the structure, decide what to keep, redesign what's tired, rebuild the whole thing cleanly, and verify nothing went missing.

Why Claude is good at design

Claude reads images, has internalized a vast catalog of well-designed sites, writes clean HTML/CSS, judges its own output, and iterates instantly. The combination is more useful than any single skill in isolation.

Your toolkit

Four entry points. Pick the one that fits the task and the medium.

The core workflow

There's one rhythm under every recipe in this guide. Learn it once and the rest is variation.

1. Brief in one paragraph. Audience, action you want them to take, mood, brand palette. Don't write a spec — write what you'd say to a freelancer over coffee.
2. Anchor with references. Drop screenshots of sites you like (or don't like). Claude reads them. Specificity beats adjectives — "I want this energy" + image is better than "modern but warm."
3. Generate a draft. Don't tweak yet. Look at the whole thing. Decide what's working and what isn't.
4. Critique then revise. One pass of feedback per round. "The hero is too tall, the type is too small, the green should be cream." Three changes max per round.
5. Stop earlier than you want. Most rounds make it better. After about round five, returns flatten and Claude starts overthinking. Ship round four.

Hero section in 5 minutes

The fastest possible win. Open a fresh chat, paste a brief, get a polished hero you can drop into any page.

1. Open claude.ai, new chat.
2. Paste a brief. Use the template below. Replace the four placeholders.
3. Wait ~30 seconds. An Artifact opens with a live preview.
4. Take one critique pass. Look at the result. Pick the two things that bug you. Say them.
5. Copy the HTML via the copy button on the artifact panel. Paste into your page.

Why this prompt works

• Concrete brand vocabulary (color hex, fonts) anchors the design.
• Negative constraints ("no stock-photo people, no emoji") prevent the most common AI tells.
• Single action tells Claude what the design has to do.
• "Self-contained HTML" means you can copy-paste it without setting up a build.

Full landing page in 30 minutes

Same workflow as the hero, scaled up. Treat each section as its own brief. Don't try to one-shot the whole page — Claude will do it, but the quality drops.

1. Sketch the sections in plain text first. "Hero, three-up value props, social proof, deeper feature with screenshot, FAQ, CTA, footer." This is your outline.
2. Generate the page in one prompt using that outline. Get a draft.
3. Walk top to bottom. For each section, give one round of focused feedback. "The three-up cards need more breathing room." "The FAQ chevron should rotate when open."
4. Ask Claude to critique. "What would a senior designer fix in this draft?" Apply the top two suggestions.
5. Add real content. Replace lorem-ipsum with the actual words. Quality jumps a tier.
6. Final pass: mobile check ("show me how this responds at 375px"), accessibility check ("any contrast or aria issues?"), performance check ("can we drop any unused CSS?").

Screenshot → coded UI

Claude reads images. This is the most under-used capability for design work.

What works

• Screenshots of websites you like. "Build me a page in this spirit, but for a hot springs spa."
• Hand-drawn sketches. Photograph a napkin sketch, drop it in. Claude infers structure.
• Figma exports. Export a frame as PNG, drop it in, get production HTML.
• Old-site screenshots. "Modernize this without losing the editorial feel."

Steps

1. Drop the image into a fresh chat.
2. State the goal one line. "Build the layout from this screenshot in HTML/CSS, with these brand colors and fonts." Or: "Modernize this 2008 site for 2026."
3. Decide what to keep. If the source has an emotional hook (a typeface, a layout move, a color), call it out: "Keep the centered serif headline. Lose everything else."
4. Iterate as in the hero recipe.

Design system from a brand kit

Generate tokens, components, and a sample page that all share one vocabulary. Useful when you have many pages to build and want them to feel like a family.

1. Drop your brand inputs. Logo, primary palette (3-5 hexes), font choices, two reference photos that capture mood. If you don't have these, ask Claude to invent them from a one-paragraph description first.
2. Ask for a tokens file. "Generate a CSS custom-properties file with our colors, type scale, spacing scale, radii, and shadows." Save the result as tokens.css.
3. Ask for components. "Build a button, a card, an input, a nav, and a footer using these tokens. Single HTML file, embedded styles, side-by-side."
4. Ask for one full page. "Build a sample 'About' page using these components and tokens." This page becomes the visual contract for everything else.
5. Reuse on every new page. When you start a new page, paste the tokens file and the sample page in. Tell Claude: "match this vocabulary."

Rebuild a tired site

You have an old site. The bones are fine; the surface is dated. This is the highest-leverage use of Claude on the web today.

1. Capture the source. Screenshot every page; save the HTML if you have it. Drop both in.
2. Set archive policy. Move existing files to /archive-YYYY-MM-DD/. Don't delete anything until the new version is live and verified.
3. Ask Claude to identify the keepers — the few elements that are actually load-bearing for the brand or the SEO.
4. Generate one new page using the recipes above. Use it as the visual contract.
5. Migrate page by page. Each page: paste old content, paste new design contract, tell Claude to compose. Review. Push to a dev URL.
6. Get a real human to look at it before flipping the live site. Claude is good but it's still you signing off.

The frontend-design plugin

A Claude Code plugin from Anthropic that loads a richer "designer brain" the moment you invoke it — better defaults around typography, spacing, color theory, and the small details that tip a page from "AI-generated" to "indistinguishable from human work."

What changes when you use it

• It rejects the AI tells on its own — no rainbow gradients, no emoji-as-icons, no purple-to-pink hero washes.
• It picks better fonts automatically, with appropriate weights and sizes for the medium.
• It sweats the small things — letter-spacing on headlines, optical alignment, weight contrast, generous margins.
• It uses real visual systems — Swiss grid, editorial layout, brutalist, magazine, terminal — instead of generic "card grid."

Steps — install & use

1. Install Claude Code first — see /newby or /newby-mac.
2. Install the plugin via the Claude Code plugin marketplace, or by adding it to ~/.claude/skills/.
3. Run /frontend-design in any session. Brief Claude as you would normally; the plugin shapes the output.
4. For brand-new sites: let it pick the visual system. "Design me a site for a women's basketball reference — frontend-design's call." It will choose intentional design moves that serve the content.

Pairing with image generators

Claude doesn't make raster images. It does, however, write excellent prompts for the tools that do — and orchestrate the whole pipeline. The pattern is: Claude is the art director, the image model is the photographer.

The chain

1. Claude writes the brief for the image — subject, lighting, lens, mood, palette aligned to your tokens.
2. An image model renders it — Midjourney, DALL·E, Imagen, Flux, Stable Diffusion. Claude can call these via MCP servers or you paste the prompt.
3. Claude reviews the result. Drop the image back into the chat. "Does this match the brief? What would you change?"
4. Claude rewrites the prompt based on the critique. Loop until you have the asset.
5. Claude integrates the asset into the page — sizing, treatment, positioning.

SVG & diagrams — Claude direct

For icons, hero shapes, charts, flow diagrams, technical illustrations — Claude writes SVG and Mermaid directly. Often faster and crisper than running an image model. Always ask first: "could this be an SVG?"

Pairing with Google Stitch, Figma, and v0

Each of these tools is excellent at a specific seam. The trick is using them together — Claude as the brain, the others as specialized hands.

The full chain — concrete example

1. Stitch: "design a calm, editorial homepage for a hot springs spa, three-screen flow." Stitch gives you a polished mockup.
2. Export each screen from Stitch as PNG.
3. Claude.ai: drop the PNGs in, paste your tokens.css, and ask "build this in HTML using my tokens. Self-contained file."
4. Claude Code: open the project locally, run the dev server, iterate on the result. Claude edits the file in place; the browser hot-reloads.
5. Deploy. Claude pushes to your host of choice. Verify live.

Iteration patterns that work

One change per round — earlier than you think

The temptation is "tighten the hero, swap the green, fix the FAQ, and shrink the footer." Claude will do all four, but the result drifts. Three changes max per round; one when you're closing in on done.

Anchor on one reference, not many

If you keep saying "more like this site… no wait, more like that one… no, like this third one," Claude blurs them. Pick one anchor and stick with it for a session.

Show the result, don't only describe

Take a screenshot of the current state and drop it back in with your critique. "Here's what I'm seeing — the hero feels short. Make it taller and quieter." Beats describing in words alone.

Ask "what's missing?"

Rather than only "what's wrong?" — Claude is a better critic than its prompt usually invites. Ask it for what isn't there yet.

Save snapshots

Every couple of rounds, save the current HTML to disk. If a later round goes sideways you can return to a known-good state instead of arguing your way back.

Pitfalls to avoid

• The AI-tell aesthetic — purple-pink gradients, emoji icons, generic three-up cards, "Lorem ipsum" copy. If your output looks like every other AI-built site, name what you don't want and use the frontend-design plugin.
• Over-specifying. "Make the H1 48px, line-height 1.1, weight 700, letter-spacing -0.02em…" — fine for production, but for exploration it caps Claude at your vision instead of letting it surprise you. Brief loose first; specify late.
• Trusting the rendered preview blindly. Artifacts render in a sandbox. Real browsers vary. After you ship, open the page in the actual target environment.
• Skipping mobile. Claude designs desktop-first by default. Always ask for a mobile pass before you ship: "show me this at 375px and fix anything that breaks."
• Forgetting to verify live. Deploying a file isn't the same as the file being live. After you push, fetch the URL and confirm the change is visible. Caching, CDN, or sync gremlins can swallow updates.
• Claiming AI helped on public pages when discretion is the better call. For client work, treat your toolchain as a trade secret unless asked.