Design guide · Sources

Where to learn this

A short, opinionated shelf — the references we actually reach for when designing with Claude. Start at the top; each row is worth a bookmark.

Straight from the source Claude

The skills and docs this whole guide is built on.

Claude platform docs
platform.claude.com/docs
Models, pricing, parameters, tool use, MCP. The ground truth — verify anything about a model here rather than trusting memory.
Anthropic Engineering
anthropic.com/engineering
How the teams build agents and tools — the thinking behind skills, prompting, and evaluation.
Claude Code docs
docs.claude.com/…/claude-code
Skills, slash commands, plugins, MCP, settings. Where /frontend-design, /design-sync, and /layout live.
claude.ai/design
claude.ai/design
Your design-system projects — the destination for /design-sync. Manage access with /design.

Plugins to install

Run these once; they load on demand forever after.

frontend-design plugin
/plugin install frontend-design@claude-plugins-official
The core design skill, packaged. Installs the "small-studio design lead" method used across this gallery.
The official marketplace
/plugin marketplace claude-plugins-official
Browse and install every official plugin — grab any that assist web design as they ship.

Galleries & inspiration

To calibrate your eye — and to see what "not templated" looks like at the top end.

Godly
godly.website
Astronomically good web design, tightly curated. The best single feed for frontier layout and motion.
Awwwards
awwwards.com
The long-running showcase of award-winning sites — strong for bold, maximal directions.
Land-book
land-book.com
A huge, filterable library of landing pages — good for studying real, shippable structure.
Typewolf
typewolf.com
Type in the wild, with the fonts identified. The fastest way to build a font-pairing instinct.

Typography

Type carries the personality of a page — spend time here.

Google Fonts
fonts.google.com
Free, fast, everywhere. Every gallery page here draws from it (Fraunces, Newsreader, Fredoka, Archivo…).
Fontpair
fontpair.co
Curated display + body pairings, all Google Fonts — a shortcut to a deliberate type system.
Type Scale
typescale.com
Build a modular type ladder visually and copy the CSS. Turns "pick a few sizes" into real numbers.
Google Fonts Knowledge
fonts.google.com/knowledge
Genuinely good, plain-language essays on type — optical sizing, pairing, rhythm, and why it matters.

Color

Name 4–6 values, spend most on the quiet ones, reserve one for emphasis.

Coolors
coolors.co
Generate, lock, and refine palettes fast; export the hex straight into your token set.
WebAIM Contrast Checker
webaim.org/resources/contrastchecker
The a11y floor: check text contrast against WCAG before you ship. Distinctive and readable, not one or the other.
Realtime Colors
realtimecolors.com
Preview a whole palette live on a real layout — the fastest way to sanity-check a scheme in context.
OKLCH color picker
oklch.com
Modern, perceptually-even color. Great for building tints/shades that stay consistent in light and dark.

Motion & craft

One orchestrated moment beats scattered effects — and always respect reduced motion.

Easings.net
easings.net
Every easing curve, visualized, with copy-ready CSS. Motion feels intentional or it doesn't — this is why.
cubic-bezier.com
cubic-bezier.com
Hand-tune a custom easing curve and watch it play. For when the presets aren't quite the feeling.
Refactoring UI
refactoringui.com
The classic practical playbook for making plain UI look designed — spacing, hierarchy, depth, restraint.
MDN · prefers-reduced-motion
developer.mozilla.org/…/prefers-reduced-motion
The one media query every animated page owes its visitors. Reference and examples.