Better Design

A design harness for AI coding agents.

От сообществаРаботаетБез входаГлобальныйБесплатноМожет изменять данные

Что умеет

  • Find Design: Search the Better Design catalog for an existing design system and return its ID. For building an app, prefer create-design-system to generate the user's own brand.
  • Get Design System Docs: Scaffolds a design system into the user's project. Returns the complete styling, tokens, and themed components for a chosen design system.
  • Get Ui Principle: Load UI design principles and guidelines into context on-demand. Use when you need guidance on visual hierarchy, typography, color, spacing, depth, or interactions.

Какие данные видит

Нужен ли аккаунт

Не нужен: сервер работает без входа

A design harness for AI coding agents. Better Design gives your agent design systems, UI and UX principles, icons and UI review. Describe your product and it shows design systems that fit, or creates a custom one from a description or your website, then installs the components. It explains how sign-up, forms, onboarding and error messages should work, and reviews finished screens for hard-to-read text, hard-to-find buttons and unclear copy.

Sign in with a free Better Design account (OAuth). Custom design systems use credits.

Как подключить

Как подключить Better Design к Claude

Адрес сервера, который нужно вставить в настройках Claude:

https://better-design--marvinkr.run.tools

  1. Откройте Claude (сайт claude.ai или приложение для компьютера).
  2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
  3. Нажмите Добавить пользовательский коннектор (Add custom connector).
  4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
  5. В чате нажмите + → Коннекторы и включите новый коннектор.

Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

Авторизация

После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

Как подключить Better Design к ChatGPT

Адрес сервера, который нужно вставить в настройках ChatGPT:

https://better-design--marvinkr.run.tools

  1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
  2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
  3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
  4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
  5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
  6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

Авторизация

При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

Как подключить Better Design к Cursor

Адрес сервера, который нужно вставить в настройках Cursor:

https://better-design--marvinkr.run.tools

Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

Вручную:

  1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
  2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
  3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

Авторизация

Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

Список инструментов сервера (8)

Технические названия из tools/list. Нужны только разработчикам.

find-designSearch the Better Design catalog for an existing design system and return its ID. For building an app, prefer create-design-system to generate the user's own brand.
get-design-system-docsScaffolds a design system into the user's project. Returns the complete styling, tokens, and themed components for a chosen design system.
get-ui-principleLoad UI design principles and guidelines into context on-demand. Use when you need guidance on visual hierarchy, typography, color, spacing, depth, or interactions.
resolve-icon-librarySearch for icon libraries matching a design style or personality using semantic search.
search-iconsSearch for specific icons within an icon library by name or semantic concept.
get-review-rulesRetrieves accessibility (WCAG 2.1), visual design, animation, content, comprehension, and AI feature review rules for analyzing code.
check-comprehensionChecks a finished interface against the mom test, the 15 second test, and the screenshot test, so copy that only makes sense inside the team is caught before the screen is presented.
extract-design-systemDistill an oklch-normalized semantic token set out of a project's existing CSS so new components match the app the user already built. Paste the contents of globals.css (or a Tailwind v4 @theme block).