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

themesberg/flowbite-mcp

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

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.

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

convert-figma-to-code

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

Параметры

figmaNodeUrlstringобязательный
The URL of the Figma node (e.g., https://www.figma.com/design/fileKey/fileName?node-id=123-456)

generate-theme

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

Параметры

brandColorstringобязательный
The primary brand color in hex format (e.g., #3B82F6, #FF5733). This will be used as the base for generating all brand color variations.
fileNamestring
Optional filename for the generated theme (e.g., "my-brand-theme.css"). Defaults to "custom-theme.css"
instructionsstringобязательный
Natural language instructions describing the desired theme aesthetic and customizations. The AI will interpret these instructions to modify all relevant theme variables. Examples: "Make it modern and minimalist with soft rounded corners", "Create a luxury feel with gold accents and elegant spacing", "Design for a playful children's app with bright colors", "Professional corporate style with subtle borders", etc.

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

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

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

Нужен npx

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

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

FAQ

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

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

Что он умеет?

Сервер конвертирует Figma-узел по ссылке в готовый код, получает из Figma API узел и его рендер-изображение. Генерирует кастомную тему Flowbite на основе брендового hex-цвета и текстовых инструкций, анализирует их и собирает CSS-файл темы. Также открывает доступ к библиотеке из 60+ компонентов Flowbite: UI-элементы, формы, типографика, плагины. Работает через stdio и HTTP, есть Docker-сборка для продакшена.

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

Номер в рейтинге: #194
Звезд на Github: 41
Форков на Github: 6
Загрузок: 10 578
Язык реализации: JavaScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 07.09 в 01:58
Идентификатор: G6jzYBqBfrfNUkGl
Категории: ИИ и машинное обучение, Инструменты дизайна, Инструменты для разработчиков

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

musepy/genable

Genable — MCP сервер, превращающий текстовый запрос в редактируемые слои Figma: авто-макет, переменные цветов и шрифтов, светлая и темная темы. Полезен дизайнерам и разработчикам для агентных инструментов (Claude Code, Cursor). Совместим с Gemini, Claude, OpenAI.

mhmzdev/Figma-Flutter-MCP

Figma to Flutter MCP Server извлекает дизайн-данные из Figma (компоненты, стили, макеты) и передает их в AI-агент для генерации Flutter-кода. Ускоряет реализацию интерфейсов, работает в Cursor и др...

kenneives/design-token-bridge-mcp

MCP сервер для трансляции дизайн-токенов: извлекает из Tailwind, CSS, Figma или W3C DTCG и генерирует темы под Kotlin, SwiftUI, Tailwind и CSS-переменные. Полезен разработчикам и дизайнерам в пайплайне v0 → Figma → Claude Code.

GLips/Figma-Context-MCP

Framelink MCP для Figma даёт AI-ассистентам вроде Cursor доступ к макетам из Figma. Сервер упрощает данные дизайна, передавая только релевантную информацию о расположении и стилях — так модель точн...

albertnahas/icogenie-mcp

MCP сервер @icogenie/mcp дает AI-агентам генерировать SVG-иконки по тексту. Помогает разработчикам быстро создавать иконки для интерфейсов в Claude. Поддерживает пакетную работу, библиотеку и ежедневные кредиты.

vkhanhqui/figma-mcp-go

Открытый Figma MCP-сервер с полным доступом на чтение и запись через плагин. Не требует API и не имеет лимитов — подходит дизайнерам и разработчикам. Работает с AI-инструментами. Управляйте стилями...