Maintainer of this skill?
Automated security scan — not a certification.
by marvkr
🎨 Open-source design MCP server + shadcn/ui registry — AI design systems for Claude Code, Cursor, Codex, GitHub Copilot & any MCP client. 31 brand-grade themes (Linear, Stripe, Vercel, Notion, Apple, Supabase, Figma…) + design tokens, UI principles & WCAG rules. Install any component with one command.
# Add to your Claude Code skills
git clone https://github.com/marvkr/better-designGuides for using ai agents skills like better-design.
Last scanned: 6/19/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-06-19T09:05:50.540Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}See how better-design compares with popular alternatives.
better-design is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by marvkr. 🎨 Open-source design MCP server + shadcn/ui registry — AI design systems for Claude Code, Cursor, Codex, GitHub Copilot & any MCP client. 31 brand-grade themes (Linear, Stripe, Vercel, Notion, Apple, Supabase, Figma…) + design tokens, UI principles & WCAG rules. Install any component with one command. It has 545 GitHub stars.
Yes. better-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.
Clone the repository with "git clone https://github.com/marvkr/better-design" and add it to your Claude Code skills directory (see the Installation section above).
better-design is primarily written in TypeScript. It is open-source under marvkr on GitHub, so you can review or fork the full source.
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 better-design against similar tools.
No comments yet. Be the first to share your thoughts!
From $49 · 30 days · terms & refunds
⚠️ 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.
Automated security scan — not a certification.
Give your coding agent design systems, UI and UX guidance, icons, and code reviews through MCP.
Works with Codex, Claude Code, Cursor, VS Code, Devin, Antigravity, and other MCP clients.
Website · Docs · Design systems · Installation guide
Run these commands in your project:
npx skills add marvkr/better-design --skill better-design
npx better-design
The first installs the agent skill. The second connects Better Design to your coding tools and keeps your existing configuration. Restart your agent after setup.
If you have no account, setup creates a free key for you. If something does not work, run npx better-design doctor. It prints the command that fixes each problem.
When your agent builds UI, Better Design gives it what it usually misses:
| Tool | What your agent gets |
|---|---|
find-design-system |
A design system that fits the product you describe |
get-design-system-kit |
That system's tokens and component code, ready to install |
get-ui-principle |
Guidance on hierarchy, spacing, typography, depth, motion and more |
get-ux-principle |
Guidance on flows, forms, navigation, errors and onboarding |
find-icons |
Icons from one library, so the style stays consistent |
get-review-rules |
Accessibility and visual-design checks to fix its own work |
To check UI code yourself, run npx better-design review in your project.
Ask your agent:
Use Better Design to build a settings page with my project's design system, then review it for accessibility and consistency.
Every design system is also a shadcn registry. Browse them at better-design.com/design-systems, then install one component:
npx shadcn@latest add https://better-design.com/registry/<design-system>/<component>.json
For example, the Cashmere button:
npx shadcn@latest add https://better-design.com/registry/cashmere/button.json
Or the full Cashmere theme and components:
npx shadcn@latest add https://better-design.com/registry/cashmere/all.json
This repository holds the agent skill in skills/better-design, and component and registry sources in components/ and registry/.
The transition components come from one source, scripts/transitions-src/. After you edit it, run node scripts/generate-transitions.mjs, then run the tests:
cd tests && bun install && bun run test
MIT