Для чего этот сервер?

Этот MCP-сервер подключает AI-ассистентов к библиотеке готовых компонентов Flowbite для Tailwind CSS. Он позволяет быстро подбирать и вставлять UI-элементы, создавать кастомные темы из брендовых цветов и конвертировать макеты из Figma в код. Разработчику не приходится вручную копировать компоненты или настраивать стили — AI делает это сам, опираясь на актуальную библиотеку.

Что он умеет?

Конвертирует макеты из Figma в код: берёт ссылку на узел, получает его из API Figma и возвращает готовый код. Генерирует кастомные CSS-темы Flowbite по фирменному цвету в формате hex, добавляя детали по инструкциям пользователя. Даёт доступ к библиотеке из 60+ UI-компонентов Flowbite на Tailwind CSS, элементам интерфейса, формам и типографике.

Каталог MCP
themesberg/flowbite-mcp

themesberg/flowbite-mcp

от themesberg

MCP сервер для работы с компонентами Flowbite на Tailwind CSS. Даёт доступ к 60+ UI-элементам, умеет генерировать тему по hex-цвету и превращать Figma-макет в код. Помогает разработчикам быстрее создавать интерфейсы.

Github NPM Сайт сервера

README

2 инструмента

Версии

Установить сервер

Flowbite - Tailwind CSS components
Official MCP server for Flowbite to leverage AI for UI creation and theme generation

An MCP server that enables AI assistants to access the Flowbite library of Tailwind CSS components—including UI elements, forms, typography, and plugins—while offering an intelligent theme generator for creating custom branded designs within AI-driven development environments.

MCP Features

Tools:

🎨 [NEW] Figma to code - Copy the Figma node url and generate code (video demo)
🎯 Theme file generator - Create custom branded themes from any branded hex color

Resources:

📦 60+ UI components - Complete access to the Flowbite UI components

Server:

🌐 Dual transport support - Standard I/O (stdio) for CLI or HTTP Streamable for server deployments
⚡ Production ready - Docker support with health checks and monitoring

Quickstart

Using NPX

The simplest way to use Flowbite MCP Server:

npx flowbite-mcp

Environment variables

Currently you only need the Figma personal access token if you want to enable the Figma to code generation tool.

Часто задаваемые вопросы

Инструменты были проиндексированы: 18.10.2026

convert-figma-to-code

Получает узел Figma и его отрендеренное изображение из Figma API и преобразует их в блок кода. Требует установки переменной окружения FIGMA_ACCESS_TOKEN.

Параметры

figmaNodeUrlstringобязательный
URL узла Figma (например, https://www.figma.com/design/fileKey/fileName?node-id=123-456)

generate-theme

Генерирует пользовательский файл CSS-темы Flowbite на основе фирменного цвета (hex-формат) и инструкций пользователя. AI интеллектуально анализирует инструкции и настраивает ВСЕ переменные темы (радиус границы, отступы, цвета, типографику и т.д.) в соответствии с желаемой эстетикой. Этот инструмент создает цветовые оттенки и вариации, адаптируя всю систему темы под вашу фирменную идентичность.

Параметры

brandColorstringобязательный
Извините, но я не вижу текст для перевода. Пожалуйста, отправьте текст, который нужно перевести.
fileNamestring
Необязательное имя файла для сгенерированной темы (например, "my-brand-theme.css"). По умолчанию используется "custom-theme.css"
instructionsstringобязательный
Инструкции на естественном языке, описывающие желаемую эстетику темы и настройки. ИИ интерпретирует эти инструкции, чтобы изменить все соответствующие переменные темы. Примеры: «Сделай современно и минималистично с мягкими скруглёнными углами», «Создай ощущение роскоши с золотыми акцентами и элегантными отступами», «Разработай для игривого детского приложения с яркими цветами», «Профессиональный корпоративный стиль с деликатными рамками» и т.д.

`1.1.5`основная	04.01.2026
`1.1.3`	10.12.2025
`1.1.2`	10.12.2025
`1.1.1`	08.12.2025
`1.1.0`	05.12.2025
`1.0.0`	02.12.2025

Выберите клиент, чтобы установить themesberg/flowbite-mcp:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

{
  "mcpServers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Cursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

{
  "mcpServers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"themesberg-flowbite-mcp-84js71919q\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"-y\",\"flowbite-mcp\"],\"env\":{\"FIGMA_ACCESS_TOKEN\":\"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"}}"

Claude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

{
  "mcpServers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Claude Code

Добавьте сервер одной командой в терминале:

claude mcp add themesberg-flowbite-mcp-84js71919q --env FIGMA_ACCESS_TOKEN=YOUR_PERSONAL_FIGMA_ACCESS_TOKEN -- npx -y flowbite-mcp

Либо через JSON-конфиг:

claude mcp add-json themesberg-flowbite-mcp-84js71919q "{\"command\":\"npx\",\"args\":[\"-y\",\"flowbite-mcp\"],\"env\":{\"FIGMA_ACCESS_TOKEN\":\"YOUR_PERSONAL_FIGMA_ACCESS_TOKEN\"}}"

Codex

Добавьте сервер командой в терминале:

codex mcp add themesberg-flowbite-mcp-84js71919q --env FIGMA_ACCESS_TOKEN=YOUR_PERSONAL_FIGMA_ACCESS_TOKEN -- npx -y flowbite-mcp

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.themesberg-flowbite-mcp-84js71919q]
command = "npx"
args = ["-y", "flowbite-mcp"]

[mcp_servers.themesberg-flowbite-mcp-84js71919q.env]
FIGMA_ACCESS_TOKEN = "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"

Perplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

Откройте Настройки аккаунта → Connectors.
Установите вспомогательное приложение PerplexityXPC (один раз).
Нажмите Add Connector → вкладка Simple.
В поле Server Name укажите themesberg/flowbite-mcp, а в поле команды запуска — строку ниже:

npx -y flowbite-mcp

Нажмите Save и дождитесь статуса Running.

Windsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Cline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

Continue

Создайте файл в .continue/mcpServers/ (например themesberg-flowbite-mcp-84js71919q.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: themesberg-flowbite-mcp-84js71919q
    command: npx
    args:
      - "-y"
      - "flowbite-mcp"
    env:
      FIGMA_ACCESS_TOKEN: YOUR_PERSONAL_FIGMA_ACCESS_TOKEN

Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "themesberg-flowbite-mcp-84js71919q": {
      "command": "npx",
      "args": [
        "-y",
        "flowbite-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Конфиг для установки сервера

{
  "command": "npx",
  "args": [
    "-y",
    "flowbite-mcp"
  ],
  "env": {
    "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
  }
}

Нужен npx

Сервер запускается через npx
Без него ничего работать не будет.

Как установить npx

Информация о сервере

Номер в рейтинге: #193
Звезд на Github: 42
Форков на Github: 7
Загрузок: 11 336
Язык реализации: JavaScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.10 в 08:21
Идентификатор: G6jzYBqBfrfNUkGl
Категории: Инструменты дизайна, Инструменты для разработчиков

themesberg/flowbite-mcp

MCP Features

Tools:

Resources:

Server:

Quickstart

Using NPX

Environment variables

Часто задаваемые вопросы

Похожие MCP-сервера

kenneives/design-token-bridge-mcp

musepy/genable

GLips/Figma-Context-MCP

albertnahas/icogenie-mcp

vkhanhqui/figma-mcp-go

ethbak/icon-composer-mcp