⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
better-design
Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
Better Design: Open source Claude Design
Turn your AI coding IDE into a design engineer. Better Design works with MCP-compatible agents and editors like Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, and claude.ai. It is a design MCP server, AI design-system registry, and UI review layer for generating polished product interfaces from prompts.
Website · Design systems · Setup · Contributing
What is Better Design?
Better Design gives AI coding agents the design context they usually miss: design tokens, component code, UI principles, icon direction, accessibility checks, and visual-design review rules.
Think of it as a Claude Design-style workflow for your own codebase:
- Pick the product direction: Linear, Supabase, Vercel, Airbnb, Stripe, Apple, Notion, Figma, or another curated design system.
- Feed your AI agent the right
globals.css, semantic tokens, component overrides, icon set, spacing, typography, shadows, radius, and motion language. - Ask Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, claude.ai, or another MCP-compatible coding agent to build the interface.
- Have the MCP review the output against accessibility and design principles before you ship it.
Instead of "AI-looking UI," you get interfaces that look like they were built from a real product design system.
Why Better Design?
- Claude Design-style workflow, open MCP. Bring the artifact-first design loop people expect from Claude Design into Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop, claude.ai, and any MCP-compatible client.
- Design systems, not vague vibes. Each system includes semantic CSS tokens plus production component code, so generated UI uses real implementation details instead of guessed colors.
- AI UI generation with guardrails. The MCP can load principles for hierarchy, spacing, typography, depth, motion, forms, and accessibility exactly when the agent needs them.
- Self-review before handoff.
get-review-rulesgives your agent a WCAG and visual-design checklist so it can catch missing focus states, weak hierarchy, bad contrast, and inconsistent spacing.
How it works
Better Design has two layers: an always-on Design Intelligence layer and an on-demand Scaffold layer.
Design Intelligence — always active for UI work
When your agent builds UI, Better Design loads the relevant product-design principles and review rules automatically:
You: "Add a settings page with a form"
AI: calls get-ui-principle("spacing") + get-ui-principle("hierarchy")
→ writes the page
→ calls get-review-rules("accessibility") + get-review-rules("visual-design")
→ fixes contrast, labels, focus states, spacing, and hierarchy
Scaffold — design-system matching for new UI
When starting a product, page, or component set, say "use better-design" and the MCP finds a matching design system:
You: "Build a fintech dashboard in the style of Stripe. use better-design"
AI: calls resolve-design-system("fintech dashboard, Stripe")
→ loads design-system docs, CSS tokens, and component code
→ resolves a matching icon library
→ builds with semantic tokens instead of raw colors
What the MCP gives your agent
| Tool | What it does | Why it matters |
|---|---|---|
resolve-design-system | Semantically matches the right design system for a prompt | Stops agents from guessing a visual direction |
get-design-system-docs | Loads tokens, components, usage notes, and install context | Gives the agent implementation-ready design context |
get-ui-principle | Fetches focused guidance for hierarchy, spacing, typography, depth, motion, forms, and more | Makes UI decisions principled instead of random |
get-review-rules | Returns accessibility and visual-design review checklists | Helps the agent critique and fix its own output |
resolve-icon-library | Picks an icon family that matches the design personality | Keeps icon style consistent with the UI |
search-icons | Finds specific icons through Iconify | Speeds up implementation without mixing icon styles |
Available Design Systems
31 open-source design systems for shadcn/ui. Browse and preview them all at better-design.com.
| System | Theme | Vibe | Best For |
|---|---|---|---|
| Linear | Dark | Minimal, professional, purple accents | Developer tools, productivity apps |
| Linear Quality | Dark | Precision-crafted, multi-layer shadows | High-polish developer tools |
| Supabase | Dark | Technical, modern, green accents | Backend dashboards, dev portals |
| Vercel | Dark | Pure black, Geist font, minimal | Deployment, developer platforms |
| Airbnb | Light | Warm, friendly, coral primary | Marketplaces, consumer apps |
| Notion | Light | Minimal, flat blue, rgba shadow | Productivity, note-taking apps |
| Stripe | Light | Fintech, indigo accents, premium shadows | Payments, financial products |
| Apple | Light | Premium, SF Pro, pill buttons | Consumer apps, marketing sites |
| Figma | Light | Design tool, electric violet, purple glow | Design/creative tooling |
| Light Marketplace | Light | Charcoal buttons, flat cards, no shadows | E-commerce, listings |
| Precision Light | Light | Charcoal primary, precision layered shadows | B2B SaaS, enterprise |
| Minimal Light | Light | Black primary, no shadows, border-only cards | Clean utilities, productivity |
| Dark Orange | Dark | Brand orange, 10px radius, layered shadows | Modern SaaS, dashboards |
| Vibrant Dark | Dark | Vibrant blue, color-bloom shadows | Consumer apps, social |
| Neutral Monochrome | Dark | White on near-black, no color | Understated, data-heavy tools |
| Cinematic Dark | Dark | Ultra-dark, content-first media | Streaming, media platforms |
| Editorial Dark | Dark | Serif display, flat, content-first | Publishing, editorial |
| Corporate Fintech | Light | Blue accents, data-dense layouts | Banking, enterprise, fintech |
| Beam Custom | Dark | Custom beam aesthetic | Custom applications |
| Beam Lib | Dark | Library-style beam theme | Component libraries |
| [Glassmorphic Dark](https://better-design. |
// HOW IT'S BUILT
KEY FILES