Repolode
Submit
marvkr

marvkr/better-design

An MCP server and shadcn/ui registry that gives coding agents design systems, UI/UX guidance, icons and accessibility review rules.

Open-source alternative to:Figma

View on GitHubWebsite
Stars
556
Forks
34
Open issues
1
Last commit
12 days ago

What is it?

Better Design is an MCP server that supplies coding agents such as Claude Code, Cursor, Codex and VS Code with design context they often lack. It exposes tools to find a design system that fits a described product, retrieve that system's tokens and component code, and look up UI and UX principles covering hierarchy, spacing, typography, forms, navigation and error handling.

The project also offers icons from a single library to keep visual style consistent, and review rules for accessibility and visual design that an agent can apply to its own output. A command-line check runs the same review on UI code in a project. Installation is done with two npx commands that set up an agent skill and connect the MCP server to existing tool configuration.

Every design system is additionally published as a shadcn registry, so individual components or a full theme can be added with the shadcn CLI.

Key features

  • 01Finds a design system that matches a described product.
  • 02Returns design tokens and component code for installation.
  • 03Provides UI and UX principles on layout, typography, forms and navigation.
  • 04Supplies icons from one library for consistent styling.
  • 05Runs accessibility and visual-design review rules on UI code.

Use cases

  • Having an AI coding agent build a settings page that follows a consistent design system.
  • Adding individual shadcn components from a chosen brand-style theme to a React project.
  • Checking generated UI code for accessibility issues before committing.
  • Keeping icon style consistent across an agent-built interface.

Quick start

  1. 1

    Install the agent skill in your project

    npx skills add marvkr/better-design --skill better-design
  2. 2

    Connect Better Design to your coding tools and restart your agent

    npx better-design
  3. 3

    If something does not work, check the setup

    npx better-design doctor

Things to know

  • Setup creates a free key for you when you have no account, so it depends on the hosted service at better-design.com.

In collections

UI design skills for AI coding agentsMCP servers for Claude CodeClaude Code tools, skills & pluginsAI coding assistants & agentsMCP serversFrontend frameworks & UI components

Topics

#mcp#design-systems#shadcn-ui#tailwindcss#ui-components#design-tokens#ai-coding#accessibility#ai-design#claude-code

FAQ

What is better-design?
An MCP server and shadcn/ui registry that gives coding agents design systems, UI/UX guidance, icons and accessibility review rules. Better Design is an MCP server that supplies coding agents such as Claude Code, Cursor, Codex and VS Code with design context they often lack. It exposes tools to find a design system that fits a described product, retrieve that system's tokens and component code, and look up UI and UX principles covering hierarchy, spacing, typography, forms, navigation and error handling.
Is better-design free to use? What license does it have?
better-design is open source under the MIT license. Check the license terms before using it in commercial products.
Is better-design still maintained?
Actively maintained. The last commit to better-design was on Oct 25, 2026.
What can I use better-design for?
Having an AI coding agent build a settings page that follows a consistent design system. Adding individual shadcn components from a chosen brand-style theme to a React project. Checking generated UI code for accessibility issues before committing. Keeping icon style consistent across an agent-built interface.
How do I install better-design?
Install the agent skill in your project: npx skills add marvkr/better-design --skill better-design Connect Better Design to your coding tools and restart your agent: npx better-design If something does not work, check the setup: npx better-design doctor
Where can I get better-design?
The source code and installation instructions are on GitHub: https://github.com/marvkr/better-design

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects