Better Design

What Better Design does

Better Design MCP server gives AI coding agents access to design resources while they build interfaces. It connects the agent to the Better Design service, where the agent can work with design systems, design principles, icon sets, and UI review checks.

A project can use an existing design system selected from the catalog, or create a custom system from a written description or an existing site. The selected system can provide components for the agent to install. The service also returns icon sets as React components, avoiding a runtime CDN dependency for those icons.

The available design guidance covers visual design, user experience flows, forms, onboarding, interface copy, and references for React Native, SwiftUI, Three.js, and Shopify themes. Review checks address accessibility, copy clarity, and measured spacing in the screens an agent produces.

How it works

The repository contains the plugin package rather than the hosted design systems themselves. Its contents include manifests, the MCP server entry, and two skills:

• build-with-better-design helps choose a design system with the user, install it, and build against it.
• review-ui-with-better-design evaluates a screen for accessibility, visual design, copy clarity, and spacing.

The plugin connects to the remote MCP endpoint at https://better-design.com/api/mcp. On the first connection, Better Design opens a sign-in flow. The README states that a free account can be used.

Setup and configuration

Gemini CLI users can install the extension with:

gemini extensions install https://github.com/better-designs/better-design-plugin

Claude Code users can add the marketplace and install the plugin with /plugin marketplace add better-designs/better-design-plugin, followed by /plugin install better-design@better-design. Claude Code can also add only the MCP connection with:

claude mcp add --transport http better-design https://better-design.com/api/mcp

For a skills-compatible client, use npx skills add better-designs/better-design-plugin. Other MCP clients can add the remote endpoint directly. No environment variables are specified in the provided material.

Tools and capabilities

The Better Design MCP server supports these agent tasks:

• Find and preview a design system that fits a product.
• Generate a custom design system from a description or website.
• Install components from a selected system.
• Apply guidance for visual design, UX flows, forms, onboarding, and interface copy.
• Use framework references for React Native, SwiftUI, Three.js, and Shopify themes.
• Retrieve owned icon sets as React components.
• Review interfaces for accessibility, copy clarity, visual design, and spacing.

Limitations and notes

The repository is a plugin wrapper and does not contain the hosted design systems. Use of the remote service is governed by Better Design’s privacy policy and terms. A Better Design account is required at first connection, although the README identifies a free account option. Support is provided at info@better-design.com.