claudeers.

🔓 unclaimed — this page was auto-generated from GitHub. Are you the creator?

Claim this page →
// Claude Skills

awesome-claude-design

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

// Claude Skills[ cli ][ api ][ web ][ mobile ][ claude ]#claude#ai-design#anthropic#awesome#awesome-list#claude-code#claude-design#claude-skills#skillsMIT$open-sourceupdated 15 days ago
Slowing down
79/100
last commit 3 months ago
last release none
releases 0
open issues 0
// install
git clone https://github.com/rohitg00/awesome-claude-design

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

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.

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.

awesome-claude-design
Malewicz

Skeptical senior-designer teardown
awesome-claude-design
02ui · Murat Bayral

vs Lovable head-to-head
awesome-claude-design
WorldofAI

Hype walkthrough
awesome-claude-design
Ray Fernando

Live blog redesign
awesome-claude-design
Vivek Mishra

Launch-day walkthrough
awesome-claude-design
AI for Work

System from prompt
awesome-claude-design
Greg Isenberg

Hands-on edges
awesome-claude-design
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

view the full README on GitHub.

// compatibility

Platformscli, api, web, mobile
Operating systems
AI compatibilityclaude
LicenseMIT
Pricingopen-source
Language

// faq

What is awesome-claude-design?

Claude Design DESIGN.md prompts by aesthetic family, remix recipes, skills, video teardowns, X signal, honest community takes.. It is open-source on GitHub.

Is awesome-claude-design free to use?

awesome-claude-design is open-source under the MIT license, so it is free to use.

What category does awesome-claude-design belong to?

awesome-claude-design is listed under skills in the Claudeers registry of Claude-compatible tools.

0 views
837 stars
unclaimed
updated 15 days ago

// embed badge

awesome-claude-design on Claudeers
[![Claudeers](https://claudeers.com/api/badge/awesome-claude-design.svg)](https://claudeers.com/awesome-claude-design)

// retro hit counter

awesome-claude-design hit counter
[![Hits](https://claudeers.com/api/counter/awesome-claude-design.svg)](https://claudeers.com/awesome-claude-design)

// reviews

// guestbook

0/500

// related in Claude Skills

🔓

An agentic skills framework & software development methodology that works.

// skillsobra/Shell249,840MIT[ claude ]
🔓

💫 Toolkit to help you get started with Spec-Driven Development

// skillsgithub/Python117,790MIT[ claude ]
🔓

Public repository for Agent Skills

// skillsanthropics/Python159,495[ claude ]
🔓

AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…

// skillsGraphify-Labs/Python77,228MIT[ claude ]
Ecosystem hubone of the most connected projects in the claude ecosystem · 30 connections
→ see how awesome-claude-design connects across the ecosystem