Flowbite MCP

Flowbite MCP

themesbergMIT
36 звёзд6 форков
Flowbite MCP Server — официальный мост между AI-ассистентами и библиотекой Flowbite. Сервер даёт ChatGPT, Claude и Cursor прямой доступ к компонентам Tailwind CSS: кнопкам, формам, таблицам, модалкам и плагинам. Главная особенность — конвертация дизайнов из Figma в рабочий код. AI получает URL узла и генерирует разметку на Tailwind CSS с классами Flowbite. Вторая функция — генератор тем. Вы указываете один брендовый цвет, сервер рассчитывает всю палитру primary, secondary и серого.
ДизайнFigma
Подключить MCPОткрыть на GitHubОфициальный сайт
Подключение

Подключить Flowbite MCP

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

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

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "flowbite-mcp": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Flowbite MCP

Flowbite MCP относится к Дизайн, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
JavaScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 2.

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

Общее

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

Технологии

  • Языки
    JavaScript
  • Транспорт
    stdio

Описание

Возможности

  • Конвертация Figma в код — скопируйте ссылку на узел в Figma, AI построит компонент Flowbite на Tailwind CSS.
  • Генератор темы — создайте полный файл конфигурации Tailwind из одного HEX-цвета вашего бренда.
  • Поиск и вставка 60+ UI-компонентов: карточки, навигация, кнопки, формы, таблицы.
  • Работа с плагинами Flowbite: датапикеры, тултипы, попапы.
  • Два типа транспорта: stdio для локального использования и HTTP Streamable для серверных решений.
  • Поддержка Docker: готовый образ для продакшена, встроенный мониторинг и health checks.
  • Установка одной командой — npx без глобальной установки пакета.

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

Установка занимает минуту. Вам понадобится Node.js.

  1. Запустите сервер через npx:
    npx -y flowbite-mcp
  2. Добавьте конфигурацию в ваш MCP-клиент. Пример для Claude Desktop (файл claude_desktop_config.json):
    { "mcpServers": { "flowbite": { "command": "npx", "args": ["-y", "flowbite-mcp"], "env": { "FIGMA_ACCESS_TOKEN": "ВАШ_ПЕРСОНАЛЬНЫЙ_ТОКЕН_FIGMA" } } } }
    Переменная FIGMA_ACCESS_TOKEN необязательна. Она нужна только для работы инструмента конвертации Figma в код. Получите токен в настройках Figma.
  3. Для Cursor, Windsurf или VS Code вставьте этот же JSON в соответствующий раздел настроек MCP.
  4. Перезагрузите клиент. В списке инструментов ассистента появятся ресурсы Flowbite и инструмент figma_to_code.

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

  • «Покажи компонент "герой" из Flowbite с заголовком, текстом и двумя кнопками.»
  • «Найди форму обратной связи в библиотеке Flowbite и добавь поля имени, email и сообщения.»
  • «Создай тему для дашборда на основе моего брендового цвета #3366FF. Сгенерируй файл tailwind.config.»
  • «Преобразуй этот Figma-дизайн в код: https://www.figma.com/... Сделай адаптивную версию.»
  • «Добавь навигационную панель Flowbite с логотипом слева и ссылками справа.»

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

  • Разработчик: themesberg (создатели Flowbite)
  • Язык: JavaScript (Node.js)
  • Транспорт: stdio, HTTP Streamable
  • Лицензия: MIT
  • Категории: Figma, Design
  • Совместимые клиенты: Claude Desktop, Cursor, Windsurf, VS Code

Поделиться