Skillget

awesome-claude-design

skill
Guvenlik Denetimi
Uyari
Health Gecti
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 268 GitHub stars
Code Uyari
  • Code scan incomplete — No supported source files were scanned during light audit
Permissions Gecti
  • Permissions — No dangerous permissions requested

Bu listing icin henuz AI raporu yok.

SUMMARY

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

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

Anthropic official curated community open source new remix hype skeptic

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

Tags are SVGs under /assets/tags/ — fork and remix.

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.

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

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-14 The Information leaks Opus 4.7 + design tool r/singularity +889
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-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

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 · terminal/ollama.md · editorial/linear.md · data-dense/clickhouse.md · cinematic/runway.md · playful/figma.md · glass/arc.md · brutalist/the-verge.md · indie/granola.md · remix/linear-x-claude.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

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

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

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

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

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.

Skills & Plugins

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

Install via SkillKit: npx skillkit install design-shotgun

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

mascot

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.

Showcase

Submit via PR — live URL, the DESIGN.md used, 2–3 screenshots, one-paragraph story.

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

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."

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.

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

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.

Yorumlar (0)

Sonuc bulunamadi