flowbite-mcp — MCP-сервер для Claude Code: что делает и как установить
Подключает библиотеку Flowbite к ИИ-ассистенту для генерации интерфейсов на Tailwind CSS и перевода макетов Figma в готовый код. Пригодится при быстрой сборке компонентов по дизайн-системе.
claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpЧто делает flowbite-mcp
Сервер открывает ИИ-ассистенту доступ к библиотеке Flowbite из более чем 60 UI-компонентов. Стилизация опирается на Tailwind CSS. В состав входят два инструмента: генератор тем по коду цвета и конвертер макетов Figma в разметку.
Для переноса интерфейса из Figma потребуется токен FIGMA_ACCESS_TOKEN в конфигурации клиента. Без него генерация не сработает. При этом стандартные компоненты и генератор тем остаются доступными без ключей.
Запустить сервер можно локально командой npx flowbite-mcp по протоколу stdio. Для командной работы доступен режим HTTP Streamable в Docker на порту 3000.
Какие задачи решает
- перенести макет из Figma в разметку Tailwind CSS по ссылке на узел
- создать цветовую тему оформления по шестнадцатеричному коду
- добавить готовые UI-компоненты Flowbite в проект
- развернуть общий MCP-сервер интерфейсов в Docker через HTTP
Примеры запросов агенту
- Собери карточку товара на Tailwind CSS по ссылке на узел Figma
<figma-node-url> - Сгенерируй файл темы Flowbite на основе фирменного цвета
#1C64F2 - Добавь форму входа из готовых компонентов Flowbite
Как установить flowbite-mcp
Командой платформы
claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpВместо <…> подставьте свои значения
Командой платформы
codex mcp add flowbite-mcp --env FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcpВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"flowbite-mcp": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"flowbite-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> flowbite-mcp npx -y flowbite-mcpВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о flowbite-mcp
Как установить flowbite-mcp в Claude Code?
Выполните команду claude mcp add flowbite-mcp -e FIGMA_ACCESS_TOKEN=<FIGMA_ACCESS_TOKEN> -- npx -y flowbite-mcp. Вместо <FIGMA_ACCESS_TOKEN> подставьте свой персональный токен Figma.
Что делает flowbite-mcp?
Сервер предоставляет ассистенту доступ к компонентам Flowbite, переводит ссылки на узлы Figma в код на Tailwind CSS и генерирует палитры тем оформления.
Обязательно ли указывать FIGMA_ACCESS_TOKEN для работы flowbite-mcp?
Токен нужен только для инструмента преобразования макетов Figma в разметку. Просмотр готовых компонентов и генерация тем работают без переменной FIGMA_ACCESS_TOKEN.
