Каталог MCP
themesberg
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.

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.
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.
fileNamestring
Optional filename for the generated theme (e.g., "my-brand-theme.css"). Defaults to "custom-theme.css"

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

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

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

Также themesberg/flowbite-mcp можно установить в Cursor по ссылке автоматически.

FAQ

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

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

Что он умеет?

Сервер конвертирует Figma-узлы в код по ссылке, генерирует кастомные темы и CSS-файлы Flowbite на основе брендового цвета, а также предоставляет доступ к 60+ готовым UI-компонентам, формам, типографике и плагинам Flowbite — всё это для быстрой вёрстки интерфейсов.

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

Номер в рейтинге: #182
Звезд на Github: 38
Форков на Github: 6
Язык реализации: JavaScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.07 в 09:11
Идентификатор: G6jzYBqBfrfNUkGl
Категории: ИИ и машинное обучение, Инструменты дизайна, Инструменты для разработчиков

Другие проверенные MCP-сервера

chrishayuk/mcp-cli

MCP CLI — интерфейс командной строки для взаимодействия с MCP-серверами. Позволяет общаться с LLM, выполнять инструменты, строить исполняемые планы и управлять контекстом через виртуальную память. ...

webscraping-ai/webscraping-ai-mcp-server

официальный

MCP сервер для веб-скрапинга через WebScraping.AI — извлекает текст, HTML и структурированные данные, задаёт вопросы по содержимому страниц. Поддерживает JavaScript-рендеринг, CSS-селекторы, выбор прокси и эмуляцию устройств. Идеален для интеграции с LLM при сборе информации с сайтов.

basicmachines-co/basic-memory

Basic Memory — MCP-сервер для постоянной памяти AI. Хранит заметки в Markdown с графом знаний и семантическим поиском. AI и человек пишут в одни файлы, контекст не теряется. Доступен локально или о...

sooperset/mcp-atlassian

MCP сервер для Atlassian (Confluence и Jira, Cloud и Server/Data Center). AI-агенты используют 72 инструмента: поиск, создание, обновление задач и страниц, комментарии и статусы, ускоряя разработку.

mrkrsl/web-search-mcp

MCP сервер для веб-поиска локальных LLM без API-ключей. Использует Bing, Brave и DuckDuckGo для поиска и извлечения содержимого страниц. Включает три инструмента: глубокий поиск с контентом, быстрые выдержки и загрузку одной страницы. Совместим с LM Studio и LibreChat.

higress-group/higress-ops-mcp-server

официальный

Higress OPS MCP сервер управляет конфигурацией и мониторингом API-шлюза Higress через агентный поток на LangGraph. Помогает DevOps-инженерам автоматизировать работу с Higress Console API.