[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-674":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},674,"awesome-claude-design","VoltAgent\u002Fawesome-claude-design","VoltAgent","Awesome Claude Design: 68 ready-to-use design system inspirations in DESIGN.md format. Drop one in, scaffold a full UI in one shot.","",null,2628,287,17,1,0,53,141,510,159,29.38,"MIT License",false,"main",[25,26,27,28,29],"claude-code","claude-design","design-md","design-system","figma","2026-06-12 02:00:17","\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fvoltagent\">\n\u003Cimg width=\"1500\"  alt=\"claude-design\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc679bd35-ba7e-4d6f-834d-3f4b6e5a35e4\" \u002F>\n\u003C\u002Fa>\n\n\u003Cbr\u002F>\n\u003Cbr\u002F>\n\n\n\u003Cdiv align=\"center\">\n    \u003Cstrong>A collection of ready-to-use \u003Ccode>DESIGN.md\u003C\u002Fcode> files that Claude Design expands into a full UI scaffold with one drop.\u003C\u002Fstrong>\n    \u003Cbr \u002F>\n    \u003Cbr \u002F>\n\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n\n[![Awesome](https:\u002F\u002Fawesome.re\u002Fbadge.svg)](https:\u002F\u002Fawesome.re)\n![DESIGN.md Count](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDESIGN.md%20count-68-10b981?style=classic)\n[![Last Update](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flast-commit\u002FVoltAgent\u002Fawesome-claude-design?label=Last%20update&style=classic)](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-claude-design)\n[![Discord](https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https:\u002F\u002Fs.voltagent.dev\u002Fdiscord)\n\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\n# Awesome Claude Design\n\nUpload any `DESIGN.md` to Claude Design and it scaffolds a full design system (colors, type, components, preview cards, and a working UI kit) in a single shot. \n\nSkip the blank-page design brief, grab a design system inspiration that matches the feel you want, and let Claude Design do the scaffolding.\n\n\n## What is Claude Design?\n\n[Claude Design](https:\u002F\u002Fclaude.ai\u002Fdesign) is Anthropic's new design-focused workspace. Instead of generating one-off screens in a chat window, it holds a persistent **design system** for your project: tokens, components, and preview assets you can actually ship, not just swatches in a chat window.\n\nYou give it a starting point (an aesthetic, a vibe, or a `DESIGN.md`), and it scaffolds the system: color tokens, type scale, buttons, cards, nav, and a working UI kit. The output lands in the project's Design System review tab, organized and inspectable, so every new screen you request stays on-system.\n\n## What is DESIGN.md?\n\n[`DESIGN.md`](https:\u002F\u002Fgetdesign.md\u002Fwhat-is-design-md) is a single plain-text markdown file that describes a brand's visual language in a format AI agents can actually act on. The concept was first introduced by Google Stitch and built into a real, comparable collection by at 🎨[**getdesign.md**](https:\u002F\u002Fgetdesign.md\u002F). \n\n> The core idea: keep **token, rule, and rationale in the same file**. A Figma export tells you *what* to use but skips *why*. A brand guideline PDF talks to humans (\"approachable yet premium\") but is too loose for an agent. `DESIGN.md` sits in the middle. Specific enough for the agent to make its next decision, and carrying the *why* so it can stay on-system when it hits a case the file never covered.\n\n| File | Who reads it | What it defines |\n|------|-------------|-----------------|\n| `AGENTS.md` | Coding agents | How to build the project |\n| `DESIGN.md` | Design agents (Claude Design, Stitch …) | How the project should look and feel |\n\nClaude Design can use `DESIGN.md` as its source of truth. Hand it one, and the full starter package falls out the other side.\n\n## How it works\n\n\n\n1. Pick a design system inspiration from the list below, click through to its preview page to inspect the system in detail, then download its `DESIGN.md`.\n2. Open [Claude Design](https:\u002F\u002Fclaude.ai\u002Fdesign). You've got **two ways** to feed it the file:\n\n### Option A. Start from a design system\n\n   Go to [claude.ai\u002Fdesign\u002F#org](https:\u002F\u002Fclaude.ai\u002Fdesign\u002F#org), click **Create new design system**, and on the *Set up your design system* screen, upload the `DESIGN.md` under **Add assets**.\n\n![setup-a](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F93846ec2-c159-4459-b434-8acb7ac5fcfe)\n\n\n\u003Cbr\u002F>\n\n### Option B. Start from a prototype\n   Go to dashboard, create a new prototype, attach the `DESIGN.md` in the chat, and type: **\"Create a design system from this DESIGN.md\"**\n\n\n\u003Cimg width=\"848\" height=\"480\" alt=\"option-b\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc7e3c22c-fd3d-41a2-a6d0-1a50b40e22c9\" \u002F>\n\n\n\n\nEither way, Claude produces a full starter package in minutes:\n\n- `README.md` with brand context, voice, and visual foundations\n- `colors_and_type.css` with CSS variables, type scale, utility classes\n- Google Fonts substitutes when the brand font is proprietary\n- `preview\u002F` cards for colors, type, spacing, components, and brand\n- A working UI kit (`index.html` + components) applying the system to a real marketing page\n- `SKILL.md`, a portable skill file for future projects\n\nOne markdown file → production-ready design package. No boilerplate, no manual setup.\n\n\n## Collection\n\n### AI & LLM Platforms\n\n- [**Claude**](https:\u002F\u002Fgetdesign.md\u002Fclaude\u002Fdesign-md) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout\n- [**Cohere**](https:\u002F\u002Fgetdesign.md\u002Fcohere\u002Fdesign-md) - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic\n- [**ElevenLabs**](https:\u002F\u002Fgetdesign.md\u002Felevenlabs\u002Fdesign-md) - AI voice platform. Dark cinematic UI, audio-waveform aesthetics\n- [**Minimax**](https:\u002F\u002Fgetdesign.md\u002Fminimax\u002Fdesign-md) - AI model provider. Bold dark interface with neon accents\n- [**Mistral AI**](https:\u002F\u002Fgetdesign.md\u002Fmistral.ai\u002Fdesign-md) - Open-weight LLM provider. French-engineered minimalism, purple-toned\n- [**Ollama**](https:\u002F\u002Fgetdesign.md\u002Follama\u002Fdesign-md) - Run LLMs locally. Terminal-first, monochrome simplicity\n- [**OpenCode AI**](https:\u002F\u002Fgetdesign.md\u002Fopencode.ai\u002Fdesign-md) - AI coding platform. Developer-centric dark theme\n- [**Replicate**](https:\u002F\u002Fgetdesign.md\u002Freplicate\u002Fdesign-md) - Run ML models via API. Clean white canvas, code-forward\n- [**RunwayML**](https:\u002F\u002Fgetdesign.md\u002Frunwayml\u002Fdesign-md) - AI video generation. Cinematic dark UI, media-rich layout\n- [**Together AI**](https:\u002F\u002Fgetdesign.md\u002Ftogether.ai\u002Fdesign-md) - Open-source AI infrastructure. Technical, blueprint-style design\n- [**VoltAgent**](https:\u002F\u002Fgetdesign.md\u002Fvoltagent\u002Fdesign-md) - AI agent framework. Void-black canvas, emerald accent, terminal-native\n- [**xAI**](https:\u002F\u002Fgetdesign.md\u002Fx.ai\u002Fdesign-md) - Elon Musk's AI lab. Stark monochrome, futuristic minimalism\n\n### Developer Tools & IDEs\n\n- [**Cursor**](https:\u002F\u002Fgetdesign.md\u002Fcursor\u002Fdesign-md) - AI-first code editor. Sleek dark interface, gradient accents\n- [**Expo**](https:\u002F\u002Fgetdesign.md\u002Fexpo\u002Fdesign-md) - React Native platform. Dark theme, tight letter-spacing, code-centric\n- [**Lovable**](https:\u002F\u002Fgetdesign.md\u002Flovable\u002Fdesign-md) - AI full-stack builder. Playful gradients, friendly dev aesthetic\n- [**Raycast**](https:\u002F\u002Fgetdesign.md\u002Fraycast\u002Fdesign-md) - Productivity launcher. Sleek dark chrome, vibrant gradient accents\n- [**Superhuman**](https:\u002F\u002Fgetdesign.md\u002Fsuperhuman\u002Fdesign-md) - Fast email client. Premium dark UI, keyboard-first, purple glow\n- [**Vercel**](https:\u002F\u002Fgetdesign.md\u002Fvercel\u002Fdesign-md) - Frontend deployment platform. Black and white precision, Geist font\n- [**Warp**](https:\u002F\u002Fgetdesign.md\u002Fwarp\u002Fdesign-md) - Modern terminal. Dark IDE-like interface, block-based command UI\n\n### Backend, Database & DevOps\n\n- [**ClickHouse**](https:\u002F\u002Fgetdesign.md\u002Fclickhouse\u002Fdesign-md) - Fast analytics database. Yellow-accented, technical documentation style\n- [**Composio**](https:\u002F\u002Fgetdesign.md\u002Fcomposio\u002Fdesign-md) - Tool integration platform. Modern dark with colorful integration icons\n- [**HashiCorp**](https:\u002F\u002Fgetdesign.md\u002Fhashicorp\u002Fdesign-md) - Infrastructure automation. Enterprise-clean, black and white\n- [**MongoDB**](https:\u002F\u002Fgetdesign.md\u002Fmongodb\u002Fdesign-md) - Document database. Green leaf branding, developer documentation focus\n- [**PostHog**](https:\u002F\u002Fgetdesign.md\u002Fposthog\u002Fdesign-md) - Product analytics. Playful hedgehog branding, developer-friendly dark UI\n- [**Sanity**](https:\u002F\u002Fgetdesign.md\u002Fsanity\u002Fdesign-md) - Headless CMS. Red accent, content-first editorial layout\n- [**Sentry**](https:\u002F\u002Fgetdesign.md\u002Fsentry\u002Fdesign-md) - Error monitoring. Dark dashboard, data-dense, pink-purple accent\n- [**Supabase**](https:\u002F\u002Fgetdesign.md\u002Fsupabase\u002Fdesign-md) - Open-source Firebase alternative. Dark emerald theme, code-first\n\n### Productivity & SaaS\n\n- [**Cal.com**](https:\u002F\u002Fgetdesign.md\u002Fcal\u002Fdesign-md) - Open-source scheduling. Clean neutral UI, developer-oriented simplicity\n- [**Intercom**](https:\u002F\u002Fgetdesign.md\u002Fintercom\u002Fdesign-md) - Customer messaging. Friendly blue palette, conversational UI patterns\n- [**Linear**](https:\u002F\u002Fgetdesign.md\u002Flinear.app\u002Fdesign-md) - Project management for engineers. Ultra-minimal, precise, purple accent\n- [**Mintlify**](https:\u002F\u002Fgetdesign.md\u002Fmintlify\u002Fdesign-md) - Documentation platform. Clean, green-accented, reading-optimized\n- [**Notion**](https:\u002F\u002Fgetdesign.md\u002Fnotion\u002Fdesign-md) - All-in-one workspace. Warm minimalism, serif headings, soft surfaces\n- [**Resend**](https:\u002F\u002Fgetdesign.md\u002Fresend\u002Fdesign-md) - Email API for developers. Minimal dark theme, monospace accents\n- [**Zapier**](https:\u002F\u002Fgetdesign.md\u002Fzapier\u002Fdesign-md) - Automation platform. Warm orange, friendly illustration-driven\n\n### Design & Creative Tools\n\n- [**Airtable**](https:\u002F\u002Fgetdesign.md\u002Fairtable\u002Fdesign-md) - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic\n- [**Clay**](https:\u002F\u002Fgetdesign.md\u002Fclay\u002Fdesign-md) - Creative agency. Organic shapes, soft gradients, art-directed layout\n- [**Figma**](https:\u002F\u002Fgetdesign.md\u002Ffigma\u002Fdesign-md) - Collaborative design tool. Vibrant multi-color, playful yet professional\n- [**Framer**](https:\u002F\u002Fgetdesign.md\u002Fframer\u002Fdesign-md) - Website builder. Bold black and blue, motion-first, design-forward\n- [**Miro**](https:\u002F\u002Fgetdesign.md\u002Fmiro\u002Fdesign-md) - Visual collaboration. Bright yellow accent, infinite canvas aesthetic\n- [**Webflow**](https:\u002F\u002Fgetdesign.md\u002Fwebflow\u002Fdesign-md) - Visual web builder. Blue-accented, polished marketing site aesthetic\n\n### Fintech & Crypto\n\n- [**Binance**](https:\u002F\u002Fgetdesign.md\u002Fbinance\u002Fdesign-md) - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency\n- [**Coinbase**](https:\u002F\u002Fgetdesign.md\u002Fcoinbase\u002Fdesign-md) - Crypto exchange. Clean blue identity, trust-focused, institutional feel\n- [**Kraken**](https:\u002F\u002Fgetdesign.md\u002Fkraken\u002Fdesign-md) - Crypto trading platform. Purple-accented dark UI, data-dense dashboards\n- [**Mastercard**](https:\u002F\u002Fgetdesign.md\u002Fmastercard\u002Fdesign-md) - Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth\n- [**Revolut**](https:\u002F\u002Fgetdesign.md\u002Frevolut\u002Fdesign-md) - Digital banking. Sleek dark interface, gradient cards, fintech precision\n- [**Stripe**](https:\u002F\u002Fgetdesign.md\u002Fstripe\u002Fdesign-md) - Payment infrastructure. Signature purple gradients, weight-300 elegance\n- [**Wise**](https:\u002F\u002Fgetdesign.md\u002Fwise\u002Fdesign-md) - International money transfer. Bright green accent, friendly and clear\n\n### E-commerce & Retail\n\n- [**Airbnb**](https:\u002F\u002Fgetdesign.md\u002Fairbnb\u002Fdesign-md) - Travel marketplace. Warm coral accent, photography-driven, rounded UI\n- [**Meta**](https:\u002F\u002Fgetdesign.md\u002Fmeta\u002Fdesign-md) - Tech retail store. Photography-first, binary light\u002Fdark surfaces, Meta Blue CTAs\n- [**Nike**](https:\u002F\u002Fgetdesign.md\u002Fnike\u002Fdesign-md) - Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography\n- [**Shopify**](https:\u002F\u002Fgetdesign.md\u002Fshopify\u002Fdesign-md) - E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type\n\n### Media & Consumer Tech\n\n- [**Apple**](https:\u002F\u002Fgetdesign.md\u002Fapple\u002Fdesign-md) - Consumer electronics. Premium white space, SF Pro, cinematic imagery\n- [**IBM**](https:\u002F\u002Fgetdesign.md\u002Fibm\u002Fdesign-md) - Enterprise technology. Carbon design system, structured blue palette\n- [**NVIDIA**](https:\u002F\u002Fgetdesign.md\u002Fnvidia\u002Fdesign-md) - GPU computing. Green-black energy, technical power aesthetic\n- [**Pinterest**](https:\u002F\u002Fgetdesign.md\u002Fpinterest\u002Fdesign-md) - Visual discovery platform. Red accent, masonry grid, image-first\n- [**PlayStation**](https:\u002F\u002Fgetdesign.md\u002Fplaystation\u002Fdesign-md) - Gaming console retail. Three-surface channel layout, cyan hover-scale interaction\n- [**SpaceX**](https:\u002F\u002Fgetdesign.md\u002Fspacex\u002Fdesign-md) - Space technology. Stark black and white, full-bleed imagery, futuristic\n- [**Spotify**](https:\u002F\u002Fgetdesign.md\u002Fspotify\u002Fdesign-md) - Music streaming. Vibrant green on dark, bold type, album-art-driven\n- [**The Verge**](https:\u002F\u002Fgetdesign.md\u002Ftheverge\u002Fdesign-md) - Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type\n- [**Uber**](https:\u002F\u002Fgetdesign.md\u002Fuber\u002Fdesign-md) - Mobility platform. Bold black and white, tight type, urban energy\n- [**Vodafone**](https:\u002F\u002Fgetdesign.md\u002Fvodafone\u002Fdesign-md) - Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands\n- [**WIRED**](https:\u002F\u002Fgetdesign.md\u002Fwired\u002Fdesign-md) - Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links\n\n### Automotive\n\n- [**BMW**](https:\u002F\u002Fgetdesign.md\u002Fbmw\u002Fdesign-md) - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic\n- [**Bugatti**](https:\u002F\u002Fgetdesign.md\u002Fbugatti\u002Fdesign-md) - Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type\n- [**Ferrari**](https:\u002F\u002Fgetdesign.md\u002Fferrari\u002Fdesign-md) - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness\n- [**Lamborghini**](https:\u002F\u002Fgetdesign.md\u002Flamborghini\u002Fdesign-md) - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk\n- [**Renault**](https:\u002F\u002Fgetdesign.md\u002Frenault\u002Fdesign-md) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons\n- [**Tesla**](https:\u002F\u002Fgetdesign.md\u002Ftesla\u002Fdesign-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans\n\n\n## What Claude produces from a DESIGN.md\n\nEach file gives Claude enough structured context to generate a complete, opinionated system, not a loose color grab. The 9 sections every `DESIGN.md` follows:\n\n| # | Section | What Claude reads it for |\n|---|---------|--------------------------|\n| 1 | Visual Theme & Atmosphere | Setting tone, density, and mood of the scaffold |\n| 2 | Color Palette & Roles | Emitting CSS variables with semantic names + hex |\n| 3 | Typography Rules | Building the type scale and picking Google Fonts fallbacks |\n| 4 | Component Stylings | Generating buttons, inputs, cards, nav with states |\n| 5 | Layout Principles | Spacing scale, grid, whitespace rhythm |\n| 6 | Depth & Elevation | Shadow tokens and surface hierarchy |\n| 7 | Do's and Don'ts | Guardrails Claude respects when generating new screens |\n| 8 | Responsive Behavior | Breakpoints, touch targets, collapse behavior |\n| 9 | Agent Prompt Guide | Reusable prompts Claude embeds into the generated `SKILL.md` |\n\n## Tips for getting better output\n\n- **Start in a fresh project.** Claude Design anchors the system to the project it was scaffolded in. Mixing brands mid-project muddles the tokens.\n- **Keep asking for screens.** Once the system is scaffolded, prompts like *\"now build a pricing page\"* or *\"add an empty state\"* stay on-brand automatically.\n- **Request variants.** Ask for light\u002Fdark, compact\u002Fcomfortable, or marketing\u002Fapp variants. Claude branches cleanly from the base tokens.\n- **Export the `SKILL.md`.** Save it to your own skills folder and you can re-summon the same aesthetic in any future Claude project without re-uploading.\n\n\n\n## License & disclaimer\n\nThe repository itself is MIT licensed, see [LICENSE](LICENSE).\n\nThe `DESIGN.md` files linked from this repo are **curated starting points inspired by publicly observable design patterns** on the referenced websites. They are not official design systems and are not affiliated with, endorsed by, or sponsored by the companies named. All trademarks, brand names, logos, and proprietary typefaces belong to their respective owners, and this repo makes no claim of ownership over any brand's visual identity.\n\nThese documents exist for educational and development purposes — to give AI agents like Claude Design enough structured context to generate consistent UI. Users are responsible for ensuring their own downstream usage complies with the trademark, copyright, and brand-usage policies of the originating companies. When in doubt, use a `DESIGN.md` as inspiration for an original system rather than a 1:1 clone.\n","Awesome Claude Design 是一个提供了68个即用型设计系统灵感的项目，这些灵感以DESIGN.md格式呈现。其核心功能在于能够将单个DESIGN.md文件一键转换成完整的UI框架，包括颜色、字体、组件以及预览卡片等元素。该项目特别适合需要快速搭建界面设计方案或寻找设计灵感的场景使用，无论是初创团队还是成熟企业，在面对设计空白页时都可以通过选取合适的设计风格并利用Claude Design自动生成的基础设计系统来加速开发流程。",2,"2026-06-11 02:38:34","CREATED_QUERY"]