Skip to content

rohitg00/awesome-claude-design

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
.github/ISSUE_TEMPLATE
.github/ISSUE_TEMPLATE
 
 
assets
assets
 
 
design-md
design-md
 
 
prompts
prompts
 
 
recipes
recipes
 
 
showcase
showcase
 
 
.gitignore
.gitignore
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

Awesome Claude Design

Claude Design — Anthropic Labs' AI design workspace. DESIGN.md files grouped by aesthetic family, remix recipes, prompt packs with example outputs, skills, video teardowns, and launch-week community signal.

Awesome Claude Design — DESIGN.md prompts, skills, cookbooks, teardowns, remix recipes

Dancing palette-knight mascot

Awesome Stars Forks Last commit Launched Opus 4.7 License

editorial minimalism terminal-core warm editorial data-dense pro cinematic dark playful color glass / soft-futurism neon brutalist cult · indie picks

Claude Design shipped April 17, 2026. Figma closed −4.26% the same day. YouTube split between "RIP frontend developers" and "another slop feature." This repo collects both.

Heads up — typo-squat alert. A repo named anthropic-claude-design/claude-design claiming to "download Claude Design" is NOT affiliated with Anthropic. The real product lives at claude.ai/design behind a Pro/Max/Team/Enterprise login. No download exists. Report the typo-squat.

Preview Gallery

What each aesthetic family actually looks like in production. Thumbnails are static screenshots of the public homepage of one representative brand per family. Click the image to open the live site, click the caption to open the working DESIGN.md in this repo.

Linear — editorial minimalism
Linear · editorial
#fff / #0f0f14 / #5e6ad2 		Ollama — terminal-core
Ollama · terminal
#000 / #fff / mono 		Anthropic / Claude — warm editorial
Claude · warm
#f4f3ee / #c96442 / #191817
ClickHouse — data-dense pro
ClickHouse · data-dense
#181818 / #faff69 / magenta 		RunwayML — cinematic dark
Runway · cinematic
#000 / magenta + cyan 		Figma — playful color
Figma · playful
#0acf83 / #f24e1e / #a259ff
Arc Browser — glass / soft-futurism
Arc · glass
#fff / radial pastel 		The Verge — neon brutalist
The Verge · brutalist
#ff6600 / #000 / #fff 		Granola — cult / indie
Granola · indie
#faf8f2 / warm glass

Screenshots are public-homepage stills used for editorial reference. Trademarks remain with their respective owners. See ATTRIBUTION.md for source URLs and refresh policy.

Contents

What Is Claude Design

Anthropic Labs product. Conversation-to-artifact loop for prototypes, design systems, slides, one-pagers, landing pages, marketing graphics, brand videos. Powered by Claude Opus 4.7 (vision model). Research preview on Pro, Max, Team, Enterprise plans. Rolling out throughout launch day.

Three surfaces:

  • Prototypes — from text, screenshot, Figma .fig, repo URL, or scraped live site
  • Design systems — persistent per-project tokens/components via DESIGN.md; teams hold multiple
  • Collateral — pitch decks, marketing pages, carousels, one-time posts, brand videos

Video Teardowns

Click thumbnail. View counts refresh live via shields.io.


Malewicz

Skeptical senior-designer teardown
02ui · Murat Bayral

vs Lovable head-to-head
WorldofAI

Hype walkthrough
Ray Fernando

Live blog redesign

Vivek Mishra

Launch-day walkthrough
AI for Work

System from prompt
Greg Isenberg

Hands-on edges
Ramanpal Singh

Beginner tutorial

Comparisons

Feature Claude Design Figma Make Lovable v0 Stitch SuperDesign
Prompt → hi-fi Yes Yes Yes Yes Yes Yes
DESIGN.md native Yes No Partial No Originated Yes
Screenshot → system Yes No Partial No Yes Yes
Figma .fig import Yes Native Yes Partial No No
Web capture on live site Native No Partial No No Partial
Inline comments / knobs Yes Yes No No No No
Persistent per-project tokens Yes Yes Partial No No Yes
Org-scoped collab + group chat Yes Yes No No No No
Export paths Canva/PDF/PPTX/HTML Figma Full-stack app React HTML Local files
Multi-system per team Yes Yes No No No Yes
Open source No No No No No Yes (MIT)
Runs in your IDE No No No No No Yes
Underlying model Opus 4.7 GPT-based Claude/GPT GPT + Claude Gemini BYO
Pricing Pro/Max/Team/Ent. Figma Pro add-on Freemium Freemium Free beta Free

Launch-week consensus: Claude Design wins design-system coherence, web capture, collaboration. Lovable wins full-stack shipping. Figma Make is safest for Figma teams. Stitch is strongest for pure token generation. SuperDesign is the only open-source option that lives inside the IDE.

More launch-week comparisons

Showcase

Real builds shipped with Claude Design — launch-week seed of 10 cards (Tom's Guide pizza brand in 30 min, Peter Yang's 16-min everything build, Mercury's 90% inference, Brilliant 20→2 prompts, Datadog week→1-conversation, and more).

See showcase/README.md. Submit your own via the Showcase Submission issue template or PR.

Community Takes

Hype

"Would suck to be Figma right now." — r/ClaudeAI launch thread

"After 29 years of being a designer, this is the only better way of working." — AI for Work

"The design system integration feels best in class for AI." — @petergyang

Pushback

"Just tested it. This is only hype for people that never worked with real UX/UI designers. Another slop feature that will burn tokens." — r/ClaudeAI

"Anthropic is saying 'look at this hand, see the coin?' — I'm going to open the hand, and the coin is not there. But it was never there. The whole goal was so you're not looking at the other hand while they're taking your subscription money." — Malewicz

"Was Google Stitch or Microsoft Designer or Template Monster the quality of a mid-level designer? No. Is this?" — Malewicz, same video

"Stickley wouldn't have stained pine to look like oak. Truth to materials means the interface should reveal what built it, not pretend to be hand-drawn when it was assembled." — Sam Henri Gold, Tavus designer, framing Claude Design through Arts-and-Crafts and predicting a CD↔Claude Code two-way feedback loop

"Anthropic debuts Claude Design — because who needs designers?" — The Register, launch-day headline

"If your job was the comps, your job was always going to go. The design was never the comps." — Christopher Noessel, IxDA author, after Claude Design dumped a dozen screens on him in one sitting

"The designers it replaces are not the designers you were worried about replacing." — Malewicz — Will Claude Design replace designers?, companion long-form piece to the YouTube teardown

The market

Figma (NYSE: FIG) closed −4.26% on launch day. Intraday low ~−7% per r/FigmaDesign. Adobe unchanged.

The fine print

"Fun but burns through usage quickly." — @petergyang

Early Opus 4.7 hallucination reports on long tasks: r/ClaudeCode thread — "$120 of API credits, by god is it bad."

Forum Pulse

Engineer-class community takes from Hacker News — three threads, three angles.

Feature Map

Capability Detail
Brand onboarding Claude reads codebase + design files, builds system automatically on first run
Web capture Grab live elements from your site so prototypes match production
File imports DOCX, PPTX, XLSX, images, Figma .fig, repo URL, text
Inline comments Comment on specific elements the way you would in Figma
Adjustment knobs Live sliders for spacing, color, layout — apply across the design
Design-system coverage Colors, typography, components, preview cards, working UI kit, exportable SKILL.md
Collaboration Org-scoped sharing — private, view-only, edit access with group Claude chat
Export Canva, PDF, PPTX, standalone HTML, shareable internal URL, saved folder
Code handoff Bundle → Claude Code with one instruction (CSS vars + component stubs)
Frontier features Voice, video, shaders, 3D, built-in AI outputs
Videos Per @petergyang: "creates beautiful videos, more so than slides"

Launch Timeline

Date Event Source
2026-04-10 Canva announces Anthropic collaboration (Canva Foundation Design Model partnership) at Canva Create LA Canva newsroom · Morningstar / BusinessWire
2026-04-14 The Information leaks Opus 4.7 + design tool r/singularity +889
2026-04-14 Mike Krieger (Anthropic CPO) steps off Figma board — pre-launch signal Martin Alderson
2026-04-17 Claude Design + Opus 4.7 ship in research preview anthropic.com
2026-04-17 Official launch tweet @claudeai
2026-04-17 r/ClaudeAI launch thread hits 2,293 upvotes Reddit
2026-04-17 Figma closes −4.26% (second thread 1,763 upvotes) Reddit · @brewmarkets
2026-04-17 r/FigmaDesign reports ~7% intraday dip Reddit
2026-04-17 Mainstream press wave — TechCrunch, VentureBeat, Adweek frame the launch TechCrunch · VentureBeat · Adweek
2026-04-17 Austin Lau (Anthropic growth marketer) — first-party Tweaks-panel demo + Claude Cowork landing-page recreation @helloitsaustin
2026-04-18 Teardown wave: Isenberg, Malewicz, 02ui, Ray Fernando, WorldofAI, Vivek Mishra, AI for Work See Video Teardowns
2026-04-18 @petergyang 16-min build: video + slides + website + app + design system Tweet
2026-04-18 Sam Henri Gold publishes "Stickley joinery" framing post samhenri.gold
2026-04-18 Brilliant + Datadog case studies surface in Anthropic launch post anthropic.com
2026-04-18 MacStories hands-on by John Voorhees — Apple-press POV; "comment-on-element covered 95% of what's needed" macstories.net
2026-04-19 Ryan Mather publishes 7-tip thread (system-first, comments-not-chat, connectors) @Flomerboy
2026-04-19 ADPList community surfaces "10x designer with Claude Design" framing — /packages/ui subdirectory pro-tip adplist.substack.com
2026-04-20 Follow-on coverage — "hits Figma where it hurts" / "rattles design giants" Web And IT News · Storyboard18
2026-04-21 Pricing controversy — Pro tier loses Claude Code access Pasquale Pillitteri
2026-04-21 DESIGN.md spec open-sourced by Google (Stitch / Google Labs) blog.google
2026-04-22 Anthropic publishes Claude Design subscription usage + pricing doc support.claude.com
2026-04-22 Post-launch coverage consolidates — Lenny mini-episode + Quasa.io tips + Anthropic pricing doc Lenny's Newsletter · Quasa.io · support.claude.com

Quotas & Token Budget

Quota burn is the #2 community complaint after AI-slop fingerprints. Here's the math + the recipe so you don't lose a week to a single prompt.

  • Separate meter from chat. Claude Design has its own usage meter, distinct from regular Claude.ai chat — per the Anthropic pricing doc.
  • Per-user, not pooled. Weekly allowance is per-seat — teams cannot share a pool — per the Anthropic pricing doc.
  • One-time promotional credit. Roughly 20 typical prompts, expiring 2026-07-17 — per the Anthropic pricing doc. Spend it on experiments, save weekly allowance for production.
  • Vision tokens cost ~3x text. Opus 4.7 vision pricing is broadly cited; every screenshot, .fig, or web-capture inflates the bill.
  • Pro can exhaust in 2–3 prompts. Multiple reports on the r/ClaudeAI launch thread of two prompts eating 95% of a weekly limit.
  • 30 minutes → locked out for a week. PCWorld review burned the full allowance in one sitting.
  • 50% of weekly allotment for one design system + one prototype. Designer field report from Abhi Chatterjee.
  • "Rationing creativity goes against the spirit." Ocasio Consulting calls directly for a flat design-seat fee.
  • Concrete USD costs on Max-5x: $3 landing / $4 video / $7 deck. CopyRocket AI tested on a real brand and burned 90% of weekly allowance in 4–5 prompts. Definitive token-budget reference.
  • Image generation is "powered in part by Canva." Lalindra (Pen With Paper) surfaces that Claude Design's image generation routes through the Canva Design Engine partnership — explains some of the quota dynamics around visual exports.

Recommended sequence: recipes/token-budget-claude-design.md — scaffold once, cap reference screens at 4, switch to inline comments for iteration, branch for variants, bundle to Claude Code in one shot.

Full pricing reference: Claude Design subscription usage and pricing — support.claude.com.

Official Resources

X Signal

Launch-week reactions with receipts.

Handle Angle Quote Link
@claudeai Official "Introducing Claude Design by Anthropic Labs. Powered by Claude Opus 4.7, our most capable vision model." Tweet
@petergyang Hands-on PM "Design system integration feels best in class for AI. Creates beautiful videos, more so than slides. Fun but burns through usage quickly." Tweet
@brewmarkets Markets "Figma stock is tumbling after Anthropic introduces Claude Design." Tweet

Submit more: handle, verbatim quote ≤280 chars, tweet URL, engagement numbers.

mascot

DESIGN.md by Aesthetic Family

Not sorted by industry. Sorted by visual character — because that's how designers actually pick. Each family links to (1) a working DESIGN.md in /design-md/<family>/, (2) canonical external references, (3) a one-line swatch + type spec so you can eyeball fit before cloning.

Shipped samples in this repo: warm/claude.md · warm/mercury.md · terminal/ollama.md · terminal/warp.md · terminal/opencode.md · editorial/linear.md · editorial/vercel.md · data-dense/clickhouse.md · data-dense/posthog.md · data-dense/datadog.md · data-dense/mongodb.md · cinematic/runway.md · cinematic/tavus.md · cinematic/cohere.md · cinematic/nvidia.md · cinematic/minimax.md · cinematic/bmw.md · cinematic/ferrari.md · cinematic/lamborghini.md · cinematic/renault.md · playful/figma.md · playful/canva.md · playful/toss.md · glass/arc.md · glass/apple.md · brutalist/the-verge.md · indie/granola.md · remix/linear-x-claude.md · remix/warp-x-sentry.md · remix/stripe-x-a24.md · remix/vercel-x-pitchfork.md · remix/granola-x-criterion.md · remix/ollama-x-elevenlabs.md · remix/notion-x-duolingo.md · remix/mercury-x-linear.md

1. Editorial Minimalism

Calm neutrals, serif or narrow-grotesque headlines, generous line-height, single accent. Built for reading, pricing pages, docs.

Brand Swatch Type External reference
Linear #fff / #0f0f14 / #5e6ad2 Inter / Söhne linear.app
Stripe #fff / #0a2540 / #635bff Sohne / Camphor stripe.com
Vercel #fff / #000 / single grayscale ramp Geist vercel.com
Mintlify #fff / #0c0c0e / green accent Inter reading-optimized mintlify.com

2. Terminal-Core

Monospace everywhere, phosphor-green or amber on near-black, hard edges, CLI metaphors.

Brand Swatch Type External reference
Ollama #000 / #fff / no accent Mono ollama.com
Warp #0b0d14 / #16d5e6 / #ff7a59 Roobert + JetBrains Mono warp.dev
Raycast #1d1d1f / #ff6363 / white Custom sans + mono raycast.com
OpenCode #080808 / #d2d2d2 / green IBM Plex Mono opencode.ai

3. Warm Editorial

Terracotta, cream, clay. Serif body, approachable, human. Claude's own brand sits here.

Brand Swatch Type External reference
Claude / Anthropic #f4f3ee / #c96442 / #191817 Styrene / Tiempos anthropic.com
Notion #fff / #37352f / warm grays Segoe + Lyon serif notion.so
Resend #0a0a0a / #fff / mono accents Söhne + GT America Mono resend.com
Substack #fff / #1a1a1a / #ff6719 Spectral + SF Pro substack.com

4. Data-Dense Pro

Charts are the hero. Tight spacing, saturated categorical palette, fixed-width numerals, dark-first dashboards.

Brand Swatch Type External reference
ClickHouse #181818 / #faff69 / magenta Inter tabular clickhouse.com
PostHog #1d4aff / #f9bd2b / #000 Matter + Mono posthog.com
Grafana #111217 / #f47c1b / multi-series Inter grafana.com
Sentry #362d59 / #f6827d / #584774 Rubik sentry.io
Supabase #171717 / #3ecf8e Custom + mono supabase.com
MongoDB #001e2b / #00ed64 / #00684a Euclid Circular A + Source Code Pro mongodb.com

5. Cinematic Dark

Film-grade gradients, oversized type, motion-forward, media-heavy hero. Built for AI products and creator tools.

Brand Swatch Type External reference
RunwayML #000 / saturated magenta + cyan Custom grotesque runwayml.com
ElevenLabs #0a0a0a / electric blue / wave motifs Inter elevenlabs.io
Minimax #000 / neon lime on charcoal Custom + mono minimax.ai
Midjourney #000 / earth tones + lilac Editorial serif midjourney.com
NVIDIA #000 / #76b900 signature green / #ffffff NVIDIA Sans / Helvetica Neue nvidia.com
BMW #fff / #1c69d4 corporate blue / M-gradient BMW Type Next Web + Helvetica Neue bmw.com
Ferrari #000 / #fff / #eb2323 Rosso Corsa FerrariSans ferrari.com
Lamborghini #000 / #ffc000 warm gold / hex motif LamboType + Roboto lamborghini.com
Renault #fff / aurora yellow→magenta→cyan / #efdf00 + #e91630 NouvelR renault.fr

6. Playful Color

High-saturation, illustrated accents, rounded corners, decorative shapes. Consumer-friendly.

Brand Swatch Type External reference
Figma #0acf83 / #f24e1e / #a259ff / #ff7262 / #1abcfe Inter + Whyte figma.com
Clay #f6e9c9 / organic shapes / soft gradients Söhne clay.com
Duolingo #58cc02 / #fff / #ff4b4b DIN Rounded duolingo.com
Mailchimp #ffe01b / #000 Cooper Hewitt + GT America mailchimp.com
Cal.com #292929 / #fff / single accent Inter cal.com
Toss #fff / #3182f6 Toss Blue / #191f28 Toss Product Sans + Noto Sans KR toss.im

7. Glass / Soft-Futurism

Frosted blur, layered translucency, soft gradients, Apple-adjacent. Premium consumer feel.

Brand Swatch Type External reference
Apple #fff / #1d1d1f / system colors SF Pro apple.com
Arc Browser #fff / radial pastel gradients Custom arc.net
Airbnb #fff / #ff385c / #222 Cereal airbnb.com
Granola #faf8f2 / warm glass Editorial serif granola.ai
Spotify #000 / #1db954 Circular spotify.com

8. Neon Brutalist

Hard edges, deliberate-ugly type mixing, oversized numerals, saturated single hue. Statement pieces.

Brand Swatch Type External reference
Bugatti #0d1321 / electric blue / chrome Custom + GT America bugatti.com
PlayStation #000 / full-spectrum prism SST playstation.com
The Verge #ff6600 / #000 / #fff Polysans + editorial serif theverge.com
Pitchfork #fff / #000 / #ff5d1f Editorial serif pitchfork.com

9. Cult / Indie Picks (non-Fortune-500)

Brands VoltAgent's catalog does NOT cover — indie SaaS, cult tools, magazines, museums, game studios. Maintainer bias: these are the ones worth cloning.

Brand Why External reference
Thesephist / Ink & Switch Research-publication aesthetic thesephist.com
Paradigm Crypto-firm minimal serif paradigm.xyz
Criterion Collection Film archive editorial criterion.com
A24 Cinema brand-as-artifact a24films.com
Letterboxd Dark cinephile social letterboxd.com
ProPublica Investigative journalism density propublica.org
Dimension.dev Dev-tool soft-gradient dimension.dev
Granola AI notetaker warmth granola.ai
Superhuman Premium email minimalism superhuman.com
Obsidian Personal-knowledge dark obsidian.md

External catalogs

The DESIGN.md ecosystem is bigger than this repo. We catalog only what others don't — these are the upstreams, mirrors, sibling lists, and origin-spec sources worth bookmarking.

DESIGN.md ecosystem

Topic hubs

Awesome-Claude meta-lists

Tooling & extractors

  • yuvrajangadsingh/brandmd — npx brandmd https://linear.app produces DESIGN.md / CSS custom properties / Tailwind v4 / dark-mode overrides; no LLM calls; ships as an Agent Skill across 30+ platforms
  • bitjaru/styleseed — 69 design rules + 48 shadcn components + Toss/Stripe/Linear/Vercel/Notion brand skins; teaches LLMs how designers think rather than just what brands look like
  • Muluk-m/design-distill — Stitch-compatible DESIGN.md generator with pre-bundled github / linear / notion / stripe / vercel snapshots; works with Codex, Claude Code, and any AI client
  • bergside/design-md-chrome — Chrome / Firefox / Edge extension that extracts DESIGN.md + SKILL.md from any site in TypeUI format (Chrome Web Store listing); designer-friendly path with no terminal required

Background reading

divider

Remix Recipes

Single-brand clones get generic fast. Mix tokens across families for novel looks.

Name Recipe Feel
Linear × Claude Linear's typography + Claude's terracotta accent + warm neutrals Editorial SaaS with a soul
Warp × Sentry Warp's mono grid + Sentry's lilac → purple Developer-tool dashboard that doesn't feel cold
Stripe × A24 Stripe's layout discipline + A24's poster boldness Fintech pitch deck with personality
Vercel × Pitchfork Vercel's grayscale ramp + Pitchfork's orange Editorial docs site
Granola × Criterion Granola's warmth + Criterion's editorial rigor Premium note app with gravitas
Ollama × ElevenLabs Terminal mono + cinematic dark gradients CLI tool landing page
Notion × Duolingo Notion's neutrals + Duolingo's greens Friendly education SaaS
Mercury × Linear Mercury's cream + indigo + Linear's surgical density Fintech dashboard with editorial warmth

Ship your remix: /design-md/remix/<name>.md + screenshot. PR it.

Picker: What Should I Use

Three questions. Pick a family.

  1. Is your product read-heavy or scan-heavy?

  2. Who's the user?

  3. Does the brand need to feel like it took courage?

Prompts & Cookbooks

Official (Anthropic)

Community gists & prompt repos

Prompt packs shipped here (/prompts)

Every pack includes the full prompt, an example run with expected output, quality checks, and variations.

Pack Purpose File
brand-to-design-md URL → full DESIGN.md with 9 canonical sections /prompts/brand-to-design-md.md
audit-live-site URL → scored audit (hierarchy, spacing, a11y, AI-slop) + punch list /prompts/audit-live-site.md
3-designer-debate Three-voice critique with synthesis + minority reports /prompts/3-designer-debate.md
remix-two-brands Combine two DESIGN.md files with explicit token arbitration /prompts/remix-two-brands.md
family-picker 3 questions → recommended family + 2 reference DESIGN.md files /prompts/family-picker.md

Index: /prompts/README.md

Anti-Slop Kit

Drop this fragment into Claude Design's system prompt or any Claude Code project. Sourced from Anthropic's frontend aesthetics cookbook:

NEVER use generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Cliched color schemes (purple gradients on white or dark backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character

DO use:
- Unique fonts chosen for the brand, not defaults
- Cohesive colors and themes grounded in the product's story
- Animations for effects and micro-interactions
- Context-specific character in every component

Malewicz's teardown opens by flagging Claude Design's own logo as "generic, color palette" — exactly the trap this prompt is built to avoid.

Claude Design's default fingerprints (avoid)

The single biggest community complaint: every Claude Design output looks the same. Catalogued from launch-week Reddit threads, the Sam Henri Gold blog post, the Banani review, and The Neuron Daily round-up.

Fingerprint What it looks like Counter-rule
Teal accent everywhere The default #16d5e6-adjacent action color appears on CTA, headline accent, focus rings, and chart fill Pick a brand-specific accent in your DESIGN.md before the first generation
Blinking status dot Animated green/lime dot top-right of nav, signals "live"/"AI" by reflex Reject in your prompt: "no animated status indicators"
Container soup Pills wrapping cards wrapping cards wrapping content; padding stacking 24/24/24 Cap nesting depth: "containers nest at most 2 levels"
Default serif headline Tiempos- or Source-Serif-adjacent serif paired with sans body — reads like the Anthropic brand's leftovers Specify font stack with explicit weight + tracking, not a vibe
Accent bar left of every card 4px coloured rule on every card, regardless of semantic meaning Reserve left-rule for one role (e.g. severity) — never as decoration
Three-column feature grid in hero Almost every landing the model produces has the same section-2 layout Brief: "no three-column feature grid; choose marquee, alternating-row, or single-column instead"
Lucide icon stack Default icon set across nav, buttons, empty states Either commit to a single icon family (Phosphor / Heroicons / custom) or ship type-only
Generative hero in product palette ignored Image generator picks colors that "look right" but ignore the DESIGN.md tokens Constrain the image: "regenerate hero using only --bg, --accent, --text"

Use the dedicated prompt pack prompts/break-default-aesthetic.md to neutralize these in one paste.

How the defaults got there

Claude Design routes through Anthropic's open-source frontend-design skill — the same skill Claude Code auto-loads for UI work. The skill's defaults bias toward "production-quality first pass" which, in the absence of a DESIGN.md, lands on the same look every time.

Two related Anthropic resources worth bookmarking:

  • frontend-aesthetics cookbook — Anthropic's own anti-slop primer; the source quoted above
  • skills PR #210 — clarity revision of the frontend-design skill; 75% win rate across model tiers, biggest lift on Haiku

Anthropic acknowledges the problem in the cookbook: "You tend to converge toward generic, 'on distribution' outputs. In frontend design, this creates what users call the 'AI slop' aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight."

Community anti-slop tools

Beyond Anthropic's own materials, the community has shipped a growing set of skills, plugins, and review workflows specifically aimed at the slop fingerprints catalogued above. Drop-in alternatives or complements to the prompt fragment.

  • Leonxlnx/taste-skill — frontend taste skill: premium UI generation, redesign audits, GSAP motion, brutalist/minimalist/soft variants, 3-dial parameterization (variance, motion, density)
  • Dammyjay93/interface-design — design engineering for Claude Code (formerly claude-design-engineer): persistent design system file, slash commands for init/audit/extract, enforces token consistency between sessions
  • coleam00/excalidraw-diagram-skill — diagram skill that argues visually instead of slapping boxes-and-arrows; Playwright render-validate loop catches overlap, misalignment, bad spacing
  • OneRedOak/claude-code-workflows — design-review — Patrick Ellis's UI/UX review workflow: subagents + /design-review slash command + CLAUDE.md memory integration + accessibility coverage via Playwright MCP
  • ComposioHQ/awesome-claude-skills — canvas-design — design philosophy expressed visually: two-phase (philosophy → artifact), 90% visual / 10% essential text, anti-template by construction
  • Marie Claire Dean — 63 design skills (repo ) — 63 skills + 27 commands across research, systems, strategy, UI, interaction, prototyping, ops; teaches Claude what design actually is beyond image generation. MIT

Leaked system prompts

What Claude Design's frontend-design skill actually says, sourced from community reverse-engineering. Read these before tuning your DESIGN.md — every counter-rule above maps back to a default in this prompt.

  • GordenSun gist — extracted Claude Design system prompt — full extracted prompt; frames Claude as "an expert designer working with the user as a manager," routes through the Frontend design skill, and instructs the model to "understand visual vocabulary first." Primary anti-slop reference: explains exactly why outputs default to the teal-aesthetic fingerprints catalogued above.
  • hqman gist — alternate system prompt extraction — second leaked extraction; cross-reference for divergence between sessions / model tiers. Useful for spotting which directives are stable defaults vs. session-injected variations.

Skills & Plugins

Claude Code skills and SkillKit plugins that pair with Claude Design.

Install via SkillKit: npx skillkit install design-shotgun

Community installs

The same anti-slop tools listed above, with explicit install commands. Mix and match — most chain cleanly with the SkillKit packs above.

Integrations

MCP servers, plugins, and IDE adapters that pair with Claude Design or extend it via Claude Code handoff. Most live outside the product surface — wire them up once, then route Claude Design's exports through them.

MCP servers

Curated MCP roundups

Frontier features

Claude Design ships built-in AI outputs that previously needed separate tools — Voice, Video, 3D, and Shaders are all generated inline (per the Anthropic launch post). Connectors (Slack, Drive, internal docs) plug into the design loop without extra MCP wiring; high-leverage but burns quota fast.

Stitch + Claude Design via MCP

Canva integration

Enterprise / Cowork admin

Limitations to know

  • Figma export not yet available at launch — round-trip back into Figma is manual; use the Figma MCP server above for token sync
  • No live-cursor multiplayer — Figma-style co-editing is not in the product
  • Sharing is org-scoped URL with view/edit only — no public links, no per-element permissions
  • Inferred design system can mis-deduce edge cases — auto-extracted tokens drift on outliers; review before locking (agence-scroll guide)

Workflows & Recipes

End-to-end flows in /recipes/<name>.md.

  1. Landing page in 20 minutes — DESIGN.md → Claude Design → Claude Code → Vercel
  2. Figma file → DESIGN.md — drag .fig in chat, extract tokens, reuse
  3. Existing repo → design system — point Claude at your CSS, get canonical DESIGN.md back
  4. Wireframe → hi-fi — low-fi sketch to pixel-perfect comp
  5. Pitch deck from README — 12-slide deck from a project README
  6. Brand extraction — URL → DESIGN.md describing a competitor's system
  7. Design-system governance — lock tokens as SKILL.md for every future project
  8. Web capture → prototype — use the native capture tool on your live site
  9. 16-minute everything build — per @petergyang: video + slides + website + app + initial system
  10. Two-brand remix — combine tokens from two DESIGN.md files coherently
  11. Claude Design → Canva export — designer collaboration pathway
  12. Org-wide design-system sharing — view-only URL, group-chat edit mode
  13. Token budget for Claude Design — ship a project on a single Pro plan in a week without burning quota
  14. Frontier 3D / shaders / voice / video — build with Claude Design's native generation surfaces; cites Anthropic launch + Ileana Marcut's 3D Helix portfolio
  15. Tweaks panel — no-regen iteration — reorder sections and swap variants without burning chat tokens; Austin Lau's sidebar workflow
  16. Comment-paste workaround — paste the would-be chat prompt as an inline comment; the MacStories "95%" pattern
  17. Speaker notes from a pitch deck — extract delivery-ready notes from a generated deck; pairs with pitch-deck-from-readme

mascot

Long-Form Tutorials

The writing worth reading after the launch dust settled. Grouped by platform.

Substack

Title Author URL Value
Claude Design is here Department of Product departmentofproduct.substack.com 5 examples + GitHub mock setup + chat-vs-comments split — most tactical first-hour guide
Claude Design Ruben Hassid ruben.substack.com Admin-toggle setup steps + advanced workflow
Founder's Playbook Linas Beliūnas linas.substack.com Eight workflows, 7-step logo flow, master prompts; cites Mercury 90% inference
How to Actually Use Claude Design AI For Developers aifordevelopers.substack.com The subdirectory-not-monorepo tip in full
Claude for Designers Ultimate Guide Sorted Pixels (nervegna) nervegna.substack.com Three-tier model: novice / practitioner / orchestrator
Solopreneur Initial Guide solopreneurcode solopreneurcode.substack.com Solo-founder-shaped scope, no agency assumptions
Everything You Need to Know getpushtoprod getpushtoprod.substack.com Four-template workflow: Prototype / Slide / Template / Other
I Tested It On Launch Day aifromthefield aifromthefield.substack.com Day-one hands-on, before the takes consolidated
What Claude Design is actually good for Lenny's Newsletter lennysnewsletter.com Landing page + slides + "unhinged redesign" stress tests

Medium

Title Author URL Value
I Spent a Day With It — Here's What Actually Happens Lalindra (Pen With Paper) medium.com/pen-with-paper Surfaces the Canva Design Engine partnership; non-designer POV
What Claude Design actually changes for designers Fanny medium.com/design-bootcamp Brief → Claude Code pipeline collapse, designer POV
What's New, What You Can Build, How to Use It Ai Studio medium.com/the-ai-studio Surface scan covering all three product surfaces
The Non-Designer's Walkthrough Alex P. medium.com/@0xmega Six export paths, end-to-end
Designer's First Walkthrough Abhi Chatterjee designsystemscollective.com "50% of weekly allotment burned in one design system + one prototype"
Full Breakdown Victoria Okwuokenye medium.com/design-bootcamp Section-by-section product walkthrough
Google makes DESIGN.md open source fernandocomet medium.com/design-bootcamp DESIGN.md spec context — useful before adopting

Blog / Other

Title Author URL Value
Hands-on with Anthropic Labs' Claude Design Preview John Voorhees (MacStories) macstories.net Apple-press POV — "comment-on-element covered 95% of what's needed"
Claude Design Hands-on Review LLMx Blog llmx.tech "First AI design surface that behaves like a designer iterating"
How to Use Claude Design for UX/UI DesignerUp designerup.co Education-house framing for design-curious devs
Getting Started Muzli muz.li/blog Designer-newsletter intro, low-friction onboarding
Good Enough for Professional Websites? BSWEN docs.bswen.com Quality bar honest assessment, mostly skeptical
The Visual Layer Claude Code Was Missing Mejba Ahmed mejba.me Engineer-positive read; pairs with Claude Code workflow
15 Minutes to a Design System Ocasio Consulting ocasioconsulting.com Direct ask to Anthropic for a flat design-seat fee
Complete Guide Tosea.ai tosea.ai/blog Reference-doc shape; useful as deep-link target
First Impressions Banani banani.co/blog Competitor's review — read with that in mind
Anthropic's Answer to Lovable / v0 Aurora Designs aurora-designs.ca Positions Claude Design in the AI builder field
Complete 2026 Guide agence-scroll agence-scroll.com Agency-side adoption framing
Complete Guide for Non-Designers BuildFastWithAI buildfastwithai.com Explicit non-designer scaffolding
2026 Business Guide Spicy Advisory spicyadvisory.com Workflows for SMB / consulting context
Features + Pricing ALM Corp almcorp.com Plain pricing/features summary, low fluff

International Coverage

Non-English coverage worth tracking. Different angles, different audiences — useful both for translation reach and because regional press often surfaces angles the US-centric wave misses.

French

Source URL Value Lang
La Revue Tech larevuetech.fr Prompt-to-prototype framing with the Canva/Code handoff angle FR
IT SOCIAL itsocial.fr Enterprise-IT POV — opening visual prototyping to non-creative professionals FR

Spanish

Source URL Value Lang
Web Reactiva webreactiva.com Spanish-language hands-on; tested the Claude Code export path ES

Italian

Source URL Value Lang
Pasquale Pillitteri — Vibe Coding 2026 comparison pasqualepillitteri.it Detailed AI app-builder comparison incl. Claude Design pricing controversy IT (EN translation)
Pasquale Pillitteri — CD vs Stitch crash analysis pasqualepillitteri.it Italian analysis of the Figma stock crash + Stitch positioning IT (EN translation)
Pasquale Pillitteri — Stitch MCP walkthrough pasqualepillitteri.it Stitch MCP Server + Claude Code design-to-code flow in 23 minutes IT (EN translation)

Japanese

Source URL Value Lang
金 成奎 (seikei_kin) on X x.com/seikei_kin Marie-Claire Dean 63-skills writeup translated and amplified for the Japanese audience JA

PRs adding more international sources welcome — Korean, Chinese, German, Portuguese, and other regional coverage are gaps we'd like to fill. Open an issue or PR with the URL, language tag, and one-line value.

Tips & Tricks

High-leverage tactics from creators who actually shipped with it. Attribution on every claim.

Ryan Mather's 7 tips (thread · Skills explainer)

Anthropic insider, posted day two of launch.

  1. System-first. Build the design system before any prototype — Claude reuses tokens across every later artifact.
  2. Comment, don't chat. Inline comments on the canvas cost less and target faster than a new chat turn.
  3. Demo with video. Drop screen recordings into context; Claude follows motion intent better than written specs.
  4. Connectors to Slack and docs. Wire up your knowledge sources so brand voice and copy stay consistent (burns quota fast — see weekly allowance note below).
  5. Build custom one-off tools. Claude can spin a small utility for the exact micro-task instead of you wrestling a generic one.
  6. Slow down at the moments that matter. Hero, pricing, empty states — let Claude take more passes there, less elsewhere.
  7. Skillify it. Bundle the working DESIGN.md as a SKILL.md for cross-project reuse — see the Skills explainer thread for what that unlocks.

Builder examples worth studying

Token economics

Workflow callouts

  • Connectors to Slack and docs are the single highest-leverage integration for brand consistency, but also the fastest way to burn weekly allowance. Wire them only on production projects, not exploration.
  • Subdirectory, not monorepo. Per AI For Developers, point Claude Design at one subdirectory per project — full-monorepo context is slow and noisy. One DESIGN.md per app, linked from the subdirectory.

Podcast Coverage

The audio coverage worth queueing. Insider interviews, launch-week reactions, and adjacent context from the v0 / generative-web orbit.

FAQ

Does Claude Design replace Figma? Not today. Replaces the first-draft stage (wireframes, comps, pitch decks). Teams still round-trip through Figma for collab, dev handoff, plugins.

Opus 4.7 required? Bundled at launch. Sonnet 4.6 works, produces weaker systems. Long-task hallucination reports are real.

Figma file import? Yes — drag .fig in chat. Single pages work well; multi-file libraries hit-or-miss at launch.

Price? Bundled in Pro / Max / Team / Enterprise. Per-seat Team pricing not yet published.

Will I burn through my Pro quota? Almost certainly, if you chat-prompt every change. Reddit reports of "two prompts ate 95% of my weekly limit" are real — Opus 4.7 vision tokens cost roughly 3x equivalent text. Use the token-budget-claude-design recipe: scaffold once, cap at 4 reference screens, switch to inline comments for iteration, branch for variants, bundle to Claude Code in one shot. Claude Design has its own quota separate from chat — but if you also use Claude Code, that quota is shared.

Data training? Per Anthropic's policy: no, not by default for paid tiers. Verify on anthropic.com/legal/privacy before shipping sensitive work.

Videos? Yes. Per @petergyang, "creates beautiful videos, more so than slides." Greg Isenberg less impressed. Try and decide.

Open-source alternative? SuperDesign — runs in your IDE, MIT, BYO model.

Is anthropic-claude-design/claude-design on GitHub real? No. Typo-squat. Claude Design lives at claude.ai/design behind a paid login. No download exists.

Related OSS Projects

Repo Stars What
superdesigndev/superdesign Open-source AI design agent in the IDE, MIT
jonthebeef/superdesign-mcp-claude-code SuperDesign as Claude Code MCP, no API key
Owl-Listener/designer-skills Designer Skills Collection by MC Dean, MIT
Owl-Listener/designpowers Specialist design agents, Direct + Auto modes, MIT
VoltAgent/awesome-claude-design Brand DESIGN.md catalog, industry-sorted
VoltAgent/awesome-design-md Stitch-format DESIGN.md collection
VoltAgent/awesome-agent-skills Skills incl. design-md, shadcn-ui, react-components
saifyxpro/ui-ux-design-pro-skill Styles, palettes, fonts, CLI
nextlevelbuilder/ui-ux-pro-max-skill Multi-platform UI/UX skill
alirezarezvani/claude-skills Skills across engineering, product, marketing
daymade/claude-code-skills Claude Code skills marketplace
abhishekray07/claude-md-templates CLAUDE.md + rules best practices
smartwhale8/claude-playbook Production .claude/ GitHub template
NicholasSpisak gist — Three-designer debate prompt
anthropics/claude-cookbooks Official Anthropic notebooks
rohitg00/awesome-claude-plugins Claude Code plugin ecosystem
rohitg00/awesome-claude-code-toolkit Hooks, skills, slash commands
rohitg00/skillkit Universal CLI for skills across many agents
hesreallyhim/awesome-claude-code General Claude Code resources
github.com/topics/claude-design — Live topic feed

Tag System

Inline tag badges used across DESIGN.md, prompt packs, recipes, and remix files. Fork and remix freely — sources under /assets/tags/.

Anthropic official curated community open source new remix hype skeptic

Contributing

Bar: would a working designer or engineer find this useful in the next 48 hours?

Accepted: original DESIGN.md files in any aesthetic family · remix recipes (two-brand combos) · prompt packs with before/after screenshots · workflow recipes you actually ran · video teardowns > 2K views OR with substantive critique · comparison data with receipts · X-handle quotes with links + engagement · screenshots/GIFs of real output.

Rejected: affiliate links · screenshots without reproducible prompts · "cool thing!" with no context · re-packaged VoltAgent entries (link upstream) · slop · emoji-heavy headers · typo-squat repos.

PR template: title [family] brand — one-line value. Body = swatch + type + reference link + reproducibility notes.

See CONTRIBUTING.md.

License

MIT. Use, fork, remix, ship.

Not affiliated with Anthropic. "Claude" and "Claude Design" are trademarks of Anthropic PBC. Brand names in referenced DESIGN.md files belong to their respective owners — included for educational commentary only.

divider

mascot

Maintained by @rohitg00. PRs welcome.

About

Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signal, honest community takes.

Topics

awesome awesome-list design-system ai-design anthropic claude-code claude-skills design-md claude-design

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

704 stars

Watchers

6 watching

Forks

80 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors