awesome-claude-design

Name: awesome-claude-design
Author: VoltAgent

Verified

Awesome Claude Design: 68 ready-to-use design system inspirations in DESIGN.md format. Drop one in, scaffold a full UI in one shot.

3,627stars

406forks

Added 4/19/2026

Installation

# Add to your Claude Code skills
git clone https://github.com/VoltAgent/awesome-claude-design

Getting Started

Guides for using ai agents skills like awesome-claude-design.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

Security ReportVerified

Last scanned: 4/27/2026

{
  "issues": [],
  "status": "PASSED",
  "scannedAt": "2026-04-27T06:27:24.452Z",
  "semgrepRan": false,
  "npmAuditRan": true,
  "pipAuditRan": true
}

README.md

Frequently Asked Questions

What is awesome-claude-design?

awesome-claude-design is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by 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. It has 3,627 GitHub stars.

Is awesome-claude-design safe to use?

Yes. awesome-claude-design passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install awesome-claude-design?

Clone the repository with "git clone https://github.com/VoltAgent/awesome-claude-design" and add it to your Claude Code skills directory (see the Installation section above).

Are there alternatives to awesome-claude-design?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh awesome-claude-design against similar tools.

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

ECC

by affaan-m

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

246,566

cc-sdd md2wechat-skill

⚠️ Third-Party Software Notice

This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.

Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.

Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.

Read the Terms of Service

Awesome Claude Design

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

Skip the blank-page design brief, grab a design system inspiration that matches the feel you want, and let Claude Design do the scaffolding.

What is Claude Design?

Claude Design 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.

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

What is DESIGN.md?

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.

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.

File	Who reads it	What it defines
`AGENTS.md`	Coding agents	How to build the project
`DESIGN.md`	Design agents (Claude Design, Stitch …)	How the project should look and feel

Claude Design can use DESIGN.md as its source of truth. Hand it one, and the full starter package falls out the other side.

How it works

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.
Open Claude Design. You've got two ways to feed it the file:

Option A. Start from a design system

Go to claude.ai/design/#org, click Create new design system, and on the Set up your design system screen, upload the DESIGN.md under Add assets.

setup-a

Option B. Start from a prototype

Go to dashboard, create a new prototype, attach the DESIGN.md in the chat, and type: "Create a design system from this DESIGN.md"

Either way, Claude produces a full starter package in minutes:

README.md with brand context, voice, and visual foundations
colors_and_type.css with CSS variables, type scale, utility classes
Google Fonts substitutes when the brand font is proprietary
preview/ cards for colors, type, spacing, components, and brand
A working UI kit (index.html + components) applying the system to a real marketing page
SKILL.md, a portable skill file for future projects

One markdown file → production-ready design package. No boilerplate, no manual setup.

Collection

AI & LLM Platforms

Claude - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout
Cohere - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
ElevenLabs - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
Minimax - AI model provider. Bold dark interface with neon accents
Mistral AI - Open-weight LLM provider. French-engineered minimalism, purple-toned
Ollama - Run LLMs locally. Terminal-first, monochrome simplicity
OpenCode AI - AI coding platform. Developer-centric dark theme
Replicate - Run ML models via API. Clean white canvas, code-forward
RunwayML - AI video generation. Cinematic dark UI, media-rich layout
Together AI - Open-source AI infrastructure. Technical, blueprint-style design
VoltAgent - AI agent framework. Void-black canvas, emerald accent, terminal-native
xAI - Elon Musk's AI lab. Stark monochrome, futuristic minimalism

Developer Tools & IDEs

Cursor - AI-first code editor. Sleek dark interface, gradient accents
Expo - React Native platform. Dark theme, tight letter-spacing, code-centric
Lovable - AI full-stack builder. Playful gradients, friendly dev aesthetic
Raycast - Productivity launcher. Sleek dark chrome, vibrant gradient accents
Superhuman - Fast email client. Premium dark UI, keyboard-first, purple glow
Vercel - Frontend deployment platform. Black and white precision, Geist font
Warp - Modern terminal. Dark IDE-like interface, block-based command UI

Backend, Database & DevOps

ClickHouse - Fast analytics database. Yellow-accented, technical documentation style
Composio - Tool integration platform. Modern dark with colorful integration icons
HashiCorp - Infrastructure automation. Enterprise-clean, black and white
MongoDB - Document database. Green leaf branding, developer documentation focus
PostHog - Product analytics. Playful hedgehog branding, developer-friendly dark UI
Sanity - Headless CMS. Red accent, content-first editorial layout
Sentry - Error monitoring. Dark dashboard, data-dense, pink-purple accent
Supabase - Open-source Firebase alternative. Dark emerald theme, code-first

Productivity & SaaS

Cal.com - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
Intercom - Customer messaging. Friendly blue palette, conversational UI patterns
Linear - Project management for engineers. Ultra-minimal, precise, purple accent
Mintlify - Documentation platform. Clean, green-accented, reading-optimized
Notion - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
Resend - Email API for developers. Minimal dark theme, monospace accents
Zapier - Automation platform. Warm orange, friendly illustration-driven

Design & Creative Tools

Airtable - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
Clay - Creative agency. Organic shapes, soft gradients, art-directed layout
Figma - Collaborative design tool. Vibrant multi-color, playful yet professional
Framer - Website builder. Bold black and blue, motion-first, design-forward
Miro - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
Webflow - Visual web builder. Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Binance - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency
[Coinbase](https://getdesign.md/coinbase