A plain-language, end-to-end guide to designing genuinely distinctive pages with Claude — every design skill and command, how each model designs differently, and advanced ideas made simple. With six fully worked examples you can open, read, and steal from.
frontend-design, teaches a method for making deliberate, non-templated choices — it even names the looks AI defaults to and tells you to avoid them. The gallery below is six design directions we built with that method, labeled so you can learn from each — not official presets.Every card links a complete, self-contained page telling one Aesop fable — the same kind of content, six utterly different visual worlds. Open any of them and scroll to the bottom: each ends with the designer's notes explaining exactly why it looks the way it does.
The rest of this directory is a working design bench — sources to learn from, videos to watch, prompts to build with, and a scorecard for the network.
A skill is just packaged expertise Claude loads on demand. You invoke one by typing its slash-command, or simply by describing a task that matches it — Claude reaches for the right one.
The core skill. Everything in this guide grows out of it.
Turns Claude into "the design lead at a small studio" whose whole job is a look that could not be mistaken for anyone else's. It works in passes: brainstorm a token system (palette, type, layout, one signature element), critique that plan against the brief to strip out anything generic, then build. Invoke it before building or reshaping any page.
Design fundamentals tuned for shareable, single-file Artifacts.
When you ask Claude to "make me a page / dashboard / tool" and it publishes an Artifact (a private web page hosted on claude.ai you can share), this skill calibrates how much design effort the request deserves and keeps the result self-contained, responsive, and theme-aware in light and dark.
The one to reach for the moment a chart, dashboard, or stat tile appears.
A design system for data: a form heuristic (which chart for which question), a color formula with a runnable validator so series stay distinct and accessible, and specs for legends, axes, tooltips, sparklines and KPI tiles — coherent in both light and dark. Read it before writing the first line of chart code, in any library.
Beyond one-off pages, Claude can keep a shared design-system project on claude.ai/design — a living library of your components that your team and future sessions design against. Four commands run that loop:
The permission switch. Grants or revokes a Claude agent's access to your Design projects on claude.ai. Nothing reads or writes your design system until you've allowed it here.
Authorizes design-system access for a session that isn't already signed in through your claude.ai login — the one-time handshake that lets /design-sync talk to your project.
Pushes a React design system up to claude.ai/design. It runs a converter that renders your components to preview cards, then syncs them into the project incrementally — one component at a time, never a wholesale replace — so the library grows without clobbering. It always shows you the exact write/delete plan before touching anything.
Hands the current session off to Claude Desktop — handy when you want to keep designing in the desktop app's fuller visual surface without losing your place.
Design is a loop: build → look → fix. A picture is worth a thousand tokens, so give Claude eyes.
Screenshots a live site at desktop (1366×900) and mobile (390×844), plus an above-the-fold hero, then actually reads the images back and reports concrete problems — overlaps, cut-off text, broken tiles, weak contrast, anything that looks generic — and proposes fixes. Your fastest "does it really render?" check.
Drives your real Chrome — navigate, click, fill forms, read the console, and capture screenshots or even a GIF of a flow. Use it to critique a page in situ or record a walkthrough. (The /layout route above is the quick, headless version.)
A two-way bridge between code and design. Pull a Figma frame into code, push a page you built into Figma, or build/extend a design system and its tokens — all from the same conversation. Trips automatically whenever you mention Figma or paste a figma.com URL.
Not design skills — but the craft floor around a design.
/run launches the app so you can see a change working; /verify drives the changed flow end-to-end; /code-review catches the CSS-specificity traps that quietly cancel your styles; /simplify trims the cruft. A beautiful page that doesn't render isn't a design — it's a screenshot.
artifact-design, and returns a private claude.ai URL you can choose to share. For a page that lives on your own domain (like this one), Claude writes the file straight into your site.The skill is the same across models; the taste, ambition, and stamina differ. Bigger models hold a complex vision together across a long page and take braver, better-justified risks. Faster models are superb for a focused restyle but lean toward safe defaults if you don't steer them. Pick the model to fit the design job — and your usage budget.
Rule of thumb: design the direction with Opus (or Fable for the flagship), then let Sonnet/Haiku apply and maintain it. Whichever model, invoke frontend-design and give it a real subject — the method matters more than the horsepower.
These are the concepts designers reach for. Each one is stated plainly, then in a sentence you can act on.
Instead of scattering #1f7a6b through the file, define --accent once and refer to it everywhere. Change the brand in one line; keep the whole page consistent. Every example in the gallery is built from a 5-color, 2-typeface token set — that's why each feels like one coherent world.
Don't freehand font sizes. Choose a small ladder (body → h3 → h2 → h1) and jump between rungs. "Optical sizing" (the opsz axis in fonts like Fraunces) means the letters are redrawn to look right large vs. small — the storybook page pushes opsz to its max for warmth; a data table would pull it down for clarity.
"Warm and friendly" is a wish; #f4d9a6 / #f2b134 / #3f8f6b / #e0623b / #c23e5a is a decision. Spend most of the palette on quiet, supporting tones and reserve one for emphasis — then use that one sparingly.
The ribbon on Storybook, the constellation on Midnight, the misregistered overprint on Risograph. Spend your boldness in a single place; discipline everywhere else makes that one move land. (Coco Chanel's rule: before you leave, take one accessory off.)
Big 01 / 02 / 03 markers are fine if the content is genuinely a sequence. On a page that isn't, they're decoration pretending to be meaning. The Botanical page uses a two-column "sheet + catalog card" grid because the herbarium metaphor is real — the layout means something.
prefers-reduced-motionThe Midnight stars twinkle and the moon drifts, but both stop for anyone who's set "reduce motion" in their OS. Ambient atmosphere, not a fireworks show; excess animation is one of the strongest tells that a design was generated on autopilot.
A class like .section p can silently override .cta p and eat your spacing. It's the single most common way an AI-built page "looks off" for no obvious reason. Keep selectors flat, and run /code-review — it's tuned to catch exactly this.
Distinctive and accessible aren't a trade — they're both just "done well." Every gallery page reflows to a phone, keeps focus visible, and respects reduced motion. Build to that floor without making a show of it.
Claude designs far better when it can see its output. Use /layout or claude-in-chrome to shoot the page, read it back, and fix what the eye catches that the code review won't. This loop is where good becomes memorable.
The frontend-design skill calls these out by name. Each is legitimate for some brief — but they show up regardless of subject, which is the tell. If the brief leaves an axis free, don't spend that freedom on one of these.
Near-#F4F1EA background, a high-contrast serif display, a single terracotta accent. Elegant — and everywhere.
Almost-black canvas with one bright acid-green or vermilion pop. Reads "modern" by reflex.
Hairline rules, zero border-radius, dense newspaper columns. Fine for an editorial brief; a default for everything else.
frontend-design lead — or type /frontend-design. Have it draft a token system first: palette, type, layout, and one signature element./layout yourdomain.com, read the screenshots, fix what the eye catches. Run /code-review for the specificity traps.claude.ai/design with /design-login then /design-sync, so every future page designs against it.Want the exact prompts? The Act page has copy-ready ones for adding a direction, running a critique, and shipping a skin. To see how the network measures up, open the design scorecard.