npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
```markdown
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
---
name: awesome-claude-design
description: Use 68 ready-to-use DESIGN.md files to scaffold full UI design systems with Claude Design in one shot
triggers:
- set up a design system with Claude Design
- use a DESIGN.md file for my project
- scaffold a UI from a design system
- pick a design inspiration for Claude Design
- create a design system from DESIGN.md
- drop a DESIGN.md into Claude Design
- generate a UI kit with Claude Design
- find a design system template for my app
---
# Awesome Claude Design
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
A curated collection of 68 ready-to-use `DESIGN.md` files covering AI platforms, developer tools, fintech, e-commerce, and more. Drop one into [Claude Design](https://claude.ai/design) and get a full design system scaffold — color tokens, type scale, components, preview cards, and a working UI kit — in a single shot.
---
## What This Project Does
`awesome-claude-design` gives you a library of pre-written `DESIGN.md` files, each describing a well-known brand's visual language (colors, typography, spacing, voice, component patterns) in a structured markdown format that Claude Design can act on directly.
**Input:** One `DESIGN.md` file
**Output (from Claude Design):**
- `README.md` — brand context, voice, visual foundations
- `colors_and_type.css` — CSS custom properties, type scale, utility classes
- `preview/` — cards for colors, type, spacing, components, and brand
- `index.html` — working UI kit / marketing page applying the system
- `SKILL.md` — portable skill file for future projects
---
## Understanding DESIGN.md
A `DESIGN.md` file is a single plain-text markdown document that encodes a brand's visual language so AI agents can make consistent decisions — not just *what* to use, but *why*.
### Minimal DESIGN.md structure
```markdown
# Brand Name Design System
## Overview
Brief brand description and personality.
## Color Palette
- **Primary:** #10B981 — Emerald; used for CTAs, active states, highlights
- **Background:** #0A0A0A — Void black; base canvas
- **Surface:** #111111 — Slightly lifted surface for cards
- **Text Primary:** #F5F5F5 — Near-white body copy
- **Text Muted:** #6B7280 — Secondary labels and captions
- **Accent:** #34D399 — Hover states, borders, focus rings
## Typography
- **Display:** Inter, 700–900 weight, tight tracking (-0.02em)
- **Body:** Inter, 400–500 weight, 1.6 line-height
- **Mono:** JetBrains Mono, used for code, terminals, data labels
- **Scale:** 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64px
## Spacing
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px
## Border Radius
- Small: 4px (inputs, badges)
- Medium: 8px (cards, buttons)
- Large: 16px (modals, panels)
- Full: 9999px (pills, avatars)
## Shadows
- Subtle: 0 1px 3px rgba(0,0,0,0.4)
- Card: 0 4px 16px rgba(0,0,0,0.6)
- Glow: 0 0 24px rgba(16,185,129,0.3)
## Voice & Tone
Direct, technical, never corporate. Short sentences. Active verbs.
## Component Patterns
- **Buttons:** Filled primary (emerald bg), ghost (border only), destructive (red)
- **Cards:** Dark surface, 1px border, subtle hover lift with glow shadow
- **Navigation:** Top bar, logo left, links center, CTA right
- **Code blocks:** Monospace font, syntax-highlighted, copy button top-right
## Do / Don't
- ✅ Dark backgrounds with high contrast text
- ✅ Emerald for interactive elements only
- ❌ Light mode variants
- ❌ Rounded corners above 16px on cards
All 68 design systems are hosted at getdesign.md. Each has a preview page where you can inspect the full system before downloading.
https://getdesign.md/{brand-slug}/design-md
https://getdesign.md/vercel/design-md # Black/white precision, Geist font
https://getdesign.md/stripe/design-md # Purple gradients, weight-300 elegance
https://getdesign.md/linear.app/design-md # Ultra-minimal, purple accent
https://getdesign.md/supabase/design-md # Dark emerald, code-first
https://getdesign.md/voltagent/design-md # Void-black, emerald, terminal-native
https://getdesign.md/figma/design-md # Vibrant multi-color, playful
https://getdesign.md/notion/design-md # Warm minimalism, serif headings
https://getdesign.md/spotify/design-md # Dark canvas, neon green
DESIGN.md under Add assetsDESIGN.md in the chat inputCreate a design system from this DESIGN.md
Generate a SaaS dashboard page using this design system
Build a pricing page with 3 tiers using the established tokens
Create a login/signup flow consistent with this system
Add a data table component following the component patterns
Build a mobile navigation drawer using existing tokens
| You want… | Use this DESIGN.md |
|---|---|
| Minimal dark + precise | vercel, linear.app, ollama |
| Warm, editorial, light | notion, apple, airbnb |
| Cinematic dark + neon | shopify, elevenlabs, runwayml |
| Bold + high-contrast | nike, spacex, xai |
| Colorful + playful | figma, lovable, airtable |
| Enterprise + trustworthy | ibm, hashicorp, coinbase |
| Purple gradient premium | stripe, superhuman, kraken |
| Developer terminal-native | voltagent, warp, cursor |
| Green brand | supabase, mongodb, wise |
| Building… | Inspiration |
|---|---|
| SaaS dashboard | linear.app, posthog, sentry |
| Developer docs | mintlify, supabase, vercel |
| Marketing site | stripe, framer, webflow |
| E-commerce | shopify, airbnb, nike |
| Fintech app | stripe, revolut, wise |
| AI product | claude, cohere, mistral.ai |
| Productivity tool | notion, linear.app, cal |
If none of the 68 presets match your brand, create your own:
# MyApp Design System
## Overview
[2–3 sentences: what the product is, who uses it, personality]
## Color Palette
- **Primary:** #HEX — Name; usage note
- **Background:** #HEX — Name; usage note
- **Surface:** #HEX — Name; usage note
- **Text Primary:** #HEX
- **Text Muted:** #HEX
- **Accent:** #HEX
- **Destructive:** #HEX
- **Success:** #HEX
## Typography
- **Display font:** [Font name], [weights], [tracking]
- **Body font:** [Font name], [weights], [line-height]
- **Mono font:** [Font name]
- **Scale:** [list of px sizes]
## Spacing
[Base unit and scale]
## Border Radius
[Named sizes with px values and when to use each]
## Shadows
[Named shadow levels]
## Voice & Tone
[3–5 bullet adjectives + one "we sound like X, not Y"]
## Component Patterns
- **Buttons:** [variants and usage]
- **Cards:** [structure and feel]
- **Navigation:** [layout pattern]
- **Forms:** [input style]
## Do / Don't
- ✅ [rule]
- ❌ [rule]
After Claude Design processes your DESIGN.md, expect this file structure:
design-system/
├── README.md # Brand overview, usage guide
├── colors_and_type.css # All CSS custom properties
├── index.html # Working UI kit / marketing page
├── SKILL.md # Portable skill for future use
└── preview/
├── colors.html # Color swatch cards
├── typography.html # Type scale showcase
├── spacing.html # Spacing scale visual
├── components.html # Button, card, input previews
└── brand.html # Full brand overview card
/* colors_and_type.css — generated from DESIGN.md */
:root {
/* Colors */
--color-primary: #10B981;
--color-background: #0A0A0A;
--color-surface: #111111;
--color-surface-raised: #1A1A1A;
--color-text-primary: #F5F5F5;
--color-text-muted: #6B7280;
--color-accent: #34D399;
--color-destructive: #EF4444;
--color-success: #10B981;
--color-border: rgba(255,255,255,0.08);
/* Typography */
--font-display: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Type scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 3rem; /* 48px */
--text-4xl: 4rem; /* 64px */
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-32: 128px;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Shadows */
--shadow-subtle: 0 1px 3px rgba(0,0,0,0.4);
--shadow-card: 0 4px 16px rgba(0,0,0,0.6);
--shadow-glow: 0 0 24px rgba(16,185,129,0.3);
}
# Generate specific pages
Build a landing page hero section using this design system
Create a user settings page following the established component patterns
Design a 404 error page consistent with the brand voice
# Extend the system
Add a notification/toast component to this design system
Create a data visualization color palette extension
Design dark and light mode variants of the card component
# Export for frameworks
Convert the CSS variables to Tailwind CSS config format
Generate a shadcn/ui theme config from this design system
Create a Figma-ready color token JSON from the palette
# Apply to real UI
Build a complete SaaS onboarding flow (3 steps) using this system
Create a pricing page with monthly/annual toggle
Design a dashboard sidebar navigation component
Take the CSS variables from colors_and_type.css and generate a complete
tailwind.config.js that maps all color tokens, font families, spacing,
border radius, and box shadows to Tailwind theme extensions.
I have this React component [paste component]. Refactor it to use the
CSS custom properties from colors_and_type.css. Keep the same structure
but replace all hardcoded colors, fonts, and spacing with token references.
claude · cohere · elevenlabs · minimax · mistral.ai · ollama · opencode.ai · replicate · runwayml · together.ai · voltagent · x.ai
cursor · expo · lovable · raycast · superhuman · vercel · warp
clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase
cal · intercom · linear.app · mintlify · notion · resend · zapier
airtable · clay · figma · framer · miro · webflow
binance · coinbase · kraken · mastercard · revolut · stripe · wise
airbnb · meta · nike · shopify
apple · ibm · nvidia · pinterest · playstation · spacex · spotify · …
DESIGN.md + COMPONENTS.md if needed## for sections, ### for subsections)#10B981 for all interactive elements" rather than "use green"#F97316Inter 400, 500, 700, 900.md (UTF-8, no BOM)DESIGN.md exactly (case-sensitive on some systems)