TypeUI

TypeUI

bergsideNOASSERTION
1k звёзд72 форков
TypeUI — MCP-сервер для дизайн-систем, UI-промптов и вариантов макетов. Он превращает ваш AI-ассистент в опытного дизайнера интерфейсов. Сервер хранит проверенные гайдлайны: отступы, цвета, типографику, сетки. Когда вы просите Claude или Cursor нарисовать интерфейс, TypeUI подкладывает им под руку актуальные примеры и паттерны. Это нужно фронтенд-разработчикам и дизайнерам, которые хотят получать от AI готовый код интерфейсов, а не «серые коробки». Вместо случайного стиля AI выдает компоненты, которые соответствуют Material Design, Tailwind или вашей кастомной дизайн-системе.
DesignAi-mlDevelopment
Открыть на GitHubОфициальный сайт

Характеристики

Общее

  • СтатусСообщество
  • Разработчикbergside
  • ЛицензияNOASSERTION

Технологии

  • Языки
    TypeScript
  • Транспорт
    streamable-http

Описание

Возможности

  • Генерация UI-компонентов: кнопки, карточки, формы, таблицы, навигация.
  • Создание нескольких вариантов макета по одному текстовому описанию.
  • Рефакторинг существующего кода под выбранную дизайн-систему (Tailwind, Material, Shadcn).
  • Интеграция с Claude Desktop через стандартный MCP-протокол.
  • Подключение к Cursor и Codex через официальные плагины.
  • Поддержка Grok и OpenCode.
  • Работа с любым AI: все ресурсы хранятся в markdown-файлах.
  • Отзывчивая верстка (responsive): гайды по сеткам и адаптации.
  • Гайды по анимациям и микро-взаимодействиям.
  • Открытый исходный код на GitHub (1031 звезда).

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

Добавьте TypeUI в ваш AI-клиент. Вот пример для Claude Desktop:

1. Установите сервер одной командой:

npx @typeui/mcp

2. Отредактируйте файл конфигурации claude_desktop_config.json:

{ "mcpServers": { "typeui": { "command": "npx", "args": ["@typeui/mcp"] } }}

3. Перезапустите Claude Desktop.

Для Cursor и Codex установите плагины из маркетплейса. Инструкции — на typeui.sh/docs/guides.

Примеры запросов

  • «Создай карточку товара в стиле Tailwind UI. Фото, название, цена, кнопка "В корзину". Сетка 3 колонки».
  • «Покажи три варианта хедера для стартапа. Левый, центрированный и с большим логотипом. На мобильных — бургер-меню».
  • «Отрефактори эту форму входа под Material Design 3. Добавь иконки в поля и подсветку ошибок».
  • «Спроектируй секцию "Наша команда" с фото, именами и описанием. 4 колонки на десктопе, 2 на планшете, 1 на мобилке».
  • «Найди UI-паттерн для списка задач (to-do) и встрой его в текущий проект с адаптивной версткой».

Технические детали

  • Язык: TypeScript
  • Транспорт: Streamable HTTP
  • Лицензия: NOASSERTION (условия не заявлены)
  • Совместимость: Claude Desktop, Cursor, Codex, Grok, OpenCode и любые другие MCP-хосты
  • Разработчик: bergside
  • Звёзды на GitHub: 1031

Поделиться