Дайте свои системы проектирования агентов кодирования, руководство по пользовательскому интерфейсу и UX, значки и обзоры кода через MCP.

Работает с Codex, Claude Code, Cursor, VS Code, Devin, Antigravity и другими клиентами MCP.

Веб-сайт · Документы · Системы проектирования · Руководство по установке

##Установка

Запустите эти команды в своем проекте:

Первый устанавливает мастерство агента. Второй подключает Better Design к вашим инструментам кодирования и сохраняет существующую конфигурацию. Перезагрузите агента после установки.

Если у вас нет учетной записи, настройка создает бесплатный ключ для вас. Если что-то не работает, бегите. Он печатает команду, которая решает каждую проблему.

Что он делает

Когда ваш агент создает пользовательский интерфейс, Better Design дает ему то, что он обычно упускает:

Инструмент Что получает ваш агент

find-design-system | Система проектирования, которая соответствует описанному вами продукту [[Т2]][править править код]] Токены этой системы и код компонентов, готовые к установке | get-ui-principle | Руководство по иерархии, интервалам, типографике, глубине, движению и т.д. [4] | Руководство по потокам, формам, навигации, ошибкам и посадке на борт find-icons | Иконки из одной библиотеки, так что стиль остается последовательным

Better Design

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

Install

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.

What it does

When your agent builds UI, Better Design gives it what it usually misses:

To check UI code yourself, run npx better-design review in your project.

Try it

Ask your agent:

Use Better Design to build a settings page with my project’s design system, then review it for accessibility and consistency.

Install a design system with shadcn

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

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

License

MIT