Star 历史趋势
数据来源: GitHub API · 生成自 Stargazers.cn
README.md

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

FeatureClaude DesignFigma MakeLovablev0StitchSuperDesign
Prompt → hi-fiYesYesYesYesYesYes
DESIGN.md nativeYesNoPartialNoOriginatedYes
Screenshot → systemYesNoPartialNoYesYes
Figma .fig importYesNativeYesPartialNoNo
Web capture on live siteNativeNoPartialNoNoPartial
Inline comments / knobsYesYesNoNoNoNo
Persistent per-project tokensYesYesPartialNoNoYes
Org-scoped collab + group chatYesYesNoNoNoNo
Export pathsCanva/PDF/PPTX/HTMLFigmaFull-stack appReactHTMLLocal files
Multi-system per teamYesYesNoNoNoYes
Open sourceNoNoNoNoNoYes (MIT)
Runs in your IDENoNoNoNoNoYes
Underlying modelOpus 4.7GPT-basedClaude/GPTGPT + ClaudeGeminiBYO
PricingPro/Max/Team/Ent.Figma Pro add-onFreemiumFreemiumFree betaFree

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

CapabilityDetail
Brand onboardingClaude reads codebase + design files, builds system automatically on first run
Web captureGrab live elements from your site so prototypes match production
File importsDOCX, PPTX, XLSX, images, Figma .fig, repo URL, text
Inline commentsComment on specific elements the way you would in Figma
Adjustment knobsLive sliders for spacing, color, layout — apply across the design
Design-system coverageColors, typography, components, preview cards, working UI kit, exportable SKILL.md
CollaborationOrg-scoped sharing — private, view-only, edit access with group Claude chat
ExportCanva, PDF, PPTX, standalone HTML, shareable internal URL, saved folder
Code handoffBundle → Claude Code with one instruction (CSS vars + component stubs)
Frontier featuresVoice, video, shaders, 3D, built-in AI outputs
VideosPer @petergyang: "creates beautiful videos, more so than slides"

Launch Timeline

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

HandleAngleQuoteLink
@claudeaiOfficial"Introducing Claude Design by Anthropic Labs. Powered by Claude Opus 4.7, our most capable vision model."Tweet
@petergyangHands-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
@brewmarketsMarkets"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.

BrandSwatchTypeExternal reference
Linear#fff / #0f0f14 / #5e6ad2Inter / Söhnelinear.app
Stripe#fff / #0a2540 / #635bffSohne / Camphorstripe.com
Vercel#fff / #000 / single grayscale rampGeistvercel.com
Mintlify#fff / #0c0c0e / green accentInter reading-optimizedmintlify.com

2. Terminal-Core

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

BrandSwatchTypeExternal reference
Ollama#000 / #fff / no accentMonoollama.com
Warp#0b0d14 / #16d5e6 / #ff7a59Roobert + JetBrains Monowarp.dev
Raycast#1d1d1f / #ff6363 / whiteCustom sans + monoraycast.com
OpenCode#080808 / #d2d2d2 / greenIBM Plex Monoopencode.ai

3. Warm Editorial

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

BrandSwatchTypeExternal reference
Claude / Anthropic#f4f3ee / #c96442 / #191817Styrene / Tiemposanthropic.com
Notion#fff / #37352f / warm graysSegoe + Lyon serifnotion.so
Resend#0a0a0a / #fff / mono accentsSöhne + GT America Monoresend.com
Substack#fff / #1a1a1a / #ff6719Spectral + SF Prosubstack.com

4. Data-Dense Pro

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

BrandSwatchTypeExternal reference
ClickHouse#181818 / #faff69 / magentaInter tabularclickhouse.com
PostHog#1d4aff / #f9bd2b / #000Matter + Monoposthog.com
Grafana#111217 / #f47c1b / multi-seriesIntergrafana.com
Sentry#362d59 / #f6827d / #584774Rubiksentry.io
Supabase#171717 / #3ecf8eCustom + monosupabase.com
MongoDB#001e2b / #00ed64 / #00684aEuclid Circular A + Source Code Promongodb.com

5. Cinematic Dark

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

BrandSwatchTypeExternal reference
RunwayML#000 / saturated magenta + cyanCustom grotesquerunwayml.com
ElevenLabs#0a0a0a / electric blue / wave motifsInterelevenlabs.io
Minimax#000 / neon lime on charcoalCustom + monominimax.ai
Midjourney#000 / earth tones + lilacEditorial serifmidjourney.com
NVIDIA#000 / #76b900 signature green / #ffffffNVIDIA Sans / Helvetica Neuenvidia.com
BMW#fff / #1c69d4 corporate blue / M-gradientBMW Type Next Web + Helvetica Neuebmw.com
Ferrari#000 / #fff / #eb2323 Rosso CorsaFerrariSansferrari.com
Lamborghini#000 / #ffc000 warm gold / hex motifLamboType + Robotolamborghini.com
Renault#fff / aurora yellow→magenta→cyan / #efdf00 + #e91630NouvelRrenault.fr

6. Playful Color

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

BrandSwatchTypeExternal reference
Figma#0acf83 / #f24e1e / #a259ff / #ff7262 / #1abcfeInter + Whytefigma.com
Clay#f6e9c9 / organic shapes / soft gradientsSöhneclay.com
Duolingo#58cc02 / #fff / #ff4b4bDIN Roundedduolingo.com
Mailchimp#ffe01b / #000Cooper Hewitt + GT Americamailchimp.com
Cal.com#292929 / #fff / single accentIntercal.com
Toss#fff / #3182f6 Toss Blue / #191f28Toss Product Sans + Noto Sans KRtoss.im

7. Glass / Soft-Futurism

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

BrandSwatchTypeExternal reference
Apple#fff / #1d1d1f / system colorsSF Proapple.com
Arc Browser#fff / radial pastel gradientsCustomarc.net
Airbnb#fff / #ff385c / #222Cerealairbnb.com
Granola#faf8f2 / warm glassEditorial serifgranola.ai
Spotify#000 / #1db954Circularspotify.com

8. Neon Brutalist

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

BrandSwatchTypeExternal reference
Bugatti#0d1321 / electric blue / chromeCustom + GT Americabugatti.com
PlayStation#000 / full-spectrum prismSSTplaystation.com
The Verge#ff6600 / #000 / #fffPolysans + editorial seriftheverge.com
Pitchfork#fff / #000 / #ff5d1fEditorial serifpitchfork.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.

BrandWhyExternal reference
Thesephist / Ink & SwitchResearch-publication aestheticthesephist.com
ParadigmCrypto-firm minimal serifparadigm.xyz
Criterion CollectionFilm archive editorialcriterion.com
A24Cinema brand-as-artifacta24films.com
LetterboxdDark cinephile socialletterboxd.com
ProPublicaInvestigative journalism densitypropublica.org
Dimension.devDev-tool soft-gradientdimension.dev
GranolaAI notetaker warmthgranola.ai
SuperhumanPremium email minimalismsuperhuman.com
ObsidianPersonal-knowledge darkobsidian.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.

NameRecipeFeel
Linear × ClaudeLinear's typography + Claude's terracotta accent + warm neutralsEditorial SaaS with a soul
Warp × SentryWarp's mono grid + Sentry's lilac → purpleDeveloper-tool dashboard that doesn't feel cold
Stripe × A24Stripe's layout discipline + A24's poster boldnessFintech pitch deck with personality
Vercel × PitchforkVercel's grayscale ramp + Pitchfork's orangeEditorial docs site
Granola × CriterionGranola's warmth + Criterion's editorial rigorPremium note app with gravitas
Ollama × ElevenLabsTerminal mono + cinematic dark gradientsCLI tool landing page
Notion × DuolingoNotion's neutrals + Duolingo's greensFriendly education SaaS
Mercury × LinearMercury's cream + indigo + Linear's surgical densityFintech 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.

PackPurposeFile
brand-to-design-mdURL → full DESIGN.md with 9 canonical sections/prompts/brand-to-design-md.md
audit-live-siteURL → scored audit (hierarchy, spacing, a11y, AI-slop) + punch list/prompts/audit-live-site.md
3-designer-debateThree-voice critique with synthesis + minority reports/prompts/3-designer-debate.md
remix-two-brandsCombine two DESIGN.md files with explicit token arbitration/prompts/remix-two-brands.md
family-picker3 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.

FingerprintWhat it looks likeCounter-rule
Teal accent everywhereThe default #16d5e6-adjacent action color appears on CTA, headline accent, focus rings, and chart fillPick a brand-specific accent in your DESIGN.md before the first generation
Blinking status dotAnimated green/lime dot top-right of nav, signals "live"/"AI" by reflexReject in your prompt: "no animated status indicators"
Container soupPills wrapping cards wrapping cards wrapping content; padding stacking 24/24/24Cap nesting depth: "containers nest at most 2 levels"
Default serif headlineTiempos- or Source-Serif-adjacent serif paired with sans body — reads like the Anthropic brand's leftoversSpecify font stack with explicit weight + tracking, not a vibe
Accent bar left of every card4px coloured rule on every card, regardless of semantic meaningReserve left-rule for one role (e.g. severity) — never as decoration
Three-column feature grid in heroAlmost every landing the model produces has the same section-2 layoutBrief: "no three-column feature grid; choose marquee, alternating-row, or single-column instead"
Lucide icon stackDefault icon set across nav, buttons, empty statesEither commit to a single icon family (Phosphor / Heroicons / custom) or ship type-only
Generative hero in product palette ignoredImage generator picks colors that "look right" but ignore the DESIGN.md tokensConstrain 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

TitleAuthorURLValue
Claude Design is hereDepartment of Productdepartmentofproduct.substack.com5 examples + GitHub mock setup + chat-vs-comments split — most tactical first-hour guide
Claude DesignRuben Hassidruben.substack.comAdmin-toggle setup steps + advanced workflow
Founder's PlaybookLinas Beliūnaslinas.substack.comEight workflows, 7-step logo flow, master prompts; cites Mercury 90% inference
How to Actually Use Claude DesignAI For Developersaifordevelopers.substack.comThe subdirectory-not-monorepo tip in full
Claude for Designers Ultimate GuideSorted Pixels (nervegna)nervegna.substack.comThree-tier model: novice / practitioner / orchestrator
Solopreneur Initial Guidesolopreneurcodesolopreneurcode.substack.comSolo-founder-shaped scope, no agency assumptions
Everything You Need to Knowgetpushtoprodgetpushtoprod.substack.comFour-template workflow: Prototype / Slide / Template / Other
I Tested It On Launch Dayaifromthefieldaifromthefield.substack.comDay-one hands-on, before the takes consolidated
What Claude Design is actually good forLenny's Newsletterlennysnewsletter.comLanding page + slides + "unhinged redesign" stress tests

Medium

TitleAuthorURLValue
I Spent a Day With It — Here's What Actually HappensLalindra (Pen With Paper)medium.com/pen-with-paperSurfaces the Canva Design Engine partnership; non-designer POV
What Claude Design actually changes for designersFannymedium.com/design-bootcampBrief → Claude Code pipeline collapse, designer POV
What's New, What You Can Build, How to Use ItAi Studiomedium.com/the-ai-studioSurface scan covering all three product surfaces
The Non-Designer's WalkthroughAlex P.medium.com/@0xmegaSix export paths, end-to-end
Designer's First WalkthroughAbhi Chatterjeedesignsystemscollective.com"50% of weekly allotment burned in one design system + one prototype"
Full BreakdownVictoria Okwuokenyemedium.com/design-bootcampSection-by-section product walkthrough
Google makes DESIGN.md open sourcefernandocometmedium.com/design-bootcampDESIGN.md spec context — useful before adopting

Blog / Other

TitleAuthorURLValue
Hands-on with Anthropic Labs' Claude Design PreviewJohn Voorhees (MacStories)macstories.netApple-press POV — "comment-on-element covered 95% of what's needed"
Claude Design Hands-on ReviewLLMx Blogllmx.tech"First AI design surface that behaves like a designer iterating"
How to Use Claude Design for UX/UIDesignerUpdesignerup.coEducation-house framing for design-curious devs
Getting StartedMuzlimuz.li/blogDesigner-newsletter intro, low-friction onboarding
Good Enough for Professional Websites?BSWENdocs.bswen.comQuality bar honest assessment, mostly skeptical
The Visual Layer Claude Code Was MissingMejba Ahmedmejba.meEngineer-positive read; pairs with Claude Code workflow
15 Minutes to a Design SystemOcasio Consultingocasioconsulting.comDirect ask to Anthropic for a flat design-seat fee
Complete GuideTosea.aitosea.ai/blogReference-doc shape; useful as deep-link target
First ImpressionsBananibanani.co/blogCompetitor's review — read with that in mind
Anthropic's Answer to Lovable / v0Aurora Designsaurora-designs.caPositions Claude Design in the AI builder field
Complete 2026 Guideagence-scrollagence-scroll.comAgency-side adoption framing
Complete Guide for Non-DesignersBuildFastWithAIbuildfastwithai.comExplicit non-designer scaffolding
2026 Business GuideSpicy Advisoryspicyadvisory.comWorkflows for SMB / consulting context
Features + PricingALM Corpalmcorp.comPlain 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

SourceURLValueLang
La Revue Techlarevuetech.frPrompt-to-prototype framing with the Canva/Code handoff angleFR
IT SOCIALitsocial.frEnterprise-IT POV — opening visual prototyping to non-creative professionalsFR

Spanish

SourceURLValueLang
Web Reactivawebreactiva.comSpanish-language hands-on; tested the Claude Code export pathES

Italian

SourceURLValueLang
Pasquale Pillitteri — Vibe Coding 2026 comparisonpasqualepillitteri.itDetailed AI app-builder comparison incl. Claude Design pricing controversyIT (EN translation)
Pasquale Pillitteri — CD vs Stitch crash analysispasqualepillitteri.itItalian analysis of the Figma stock crash + Stitch positioningIT (EN translation)
Pasquale Pillitteri — Stitch MCP walkthroughpasqualepillitteri.itStitch MCP Server + Claude Code design-to-code flow in 23 minutesIT (EN translation)

Japanese

SourceURLValueLang
金 成奎 (seikei_kin) on Xx.com/seikei_kinMarie-Claire Dean 63-skills writeup translated and amplified for the Japanese audienceJA

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

RepoStarsWhat
superdesigndev/superdesignOpen-source AI design agent in the IDE, MIT
jonthebeef/superdesign-mcp-claude-codeSuperDesign as Claude Code MCP, no API key
Owl-Listener/designer-skillsDesigner Skills Collection by MC Dean, MIT
Owl-Listener/designpowersSpecialist design agents, Direct + Auto modes, MIT
VoltAgent/awesome-claude-designBrand DESIGN.md catalog, industry-sorted
VoltAgent/awesome-design-mdStitch-format DESIGN.md collection
VoltAgent/awesome-agent-skillsSkills incl. design-md, shadcn-ui, react-components
saifyxpro/ui-ux-design-pro-skillStyles, palettes, fonts, CLI
nextlevelbuilder/ui-ux-pro-max-skillMulti-platform UI/UX skill
alirezarezvani/claude-skillsSkills across engineering, product, marketing
daymade/claude-code-skillsClaude Code skills marketplace
abhishekray07/claude-md-templatesCLAUDE.md + rules best practices
smartwhale8/claude-playbookProduction .claude/ GitHub template
NicholasSpisak gistThree-designer debate prompt
anthropics/claude-cookbooksOfficial Anthropic notebooks
rohitg00/awesome-claude-pluginsClaude Code plugin ecosystem
rohitg00/awesome-claude-code-toolkitHooks, skills, slash commands
rohitg00/skillkitUniversal CLI for skills across many agents
hesreallyhim/awesome-claude-codeGeneral Claude Code resources
github.com/topics/claude-designLive 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.
ai-designanthropicawesomeawesome-listclaude-codeclaude-designclaude-skillsdesign-mddesign-system

语言 Languages

提交活跃度 Commit Activity

代码提交热力图
过去 52 周的开发活跃度
39
Total Commits
峰值: 36次/周
Less
More

核心贡献者 Contributors