Convert Figma layers to code in Tailwind CSS with Flowbite MCP

In this guide you will learn how to install the Flowbite MCP server and convert Figma design files in your MCP client such as Cursor, Windsurf or Claude and generate code in Tailwind CSS and based on the Flowbite Design System.

Short demo before getting into the guide:

Step 1: Select Figma layer

Step 2: Tell the AI to convert it to code using Flowbite MCP

Step 3: Add the code to your Tailwind CSS + Flowbite project

You can create this development flow yourself by creating a Flowbite project with Tailwind CSS installed and follow this MCP guide.

Introduction

MCP (Model-Context-Protocol) is a new way to structure a communication protocol between MCP servers (Flowbite MCP) and MCP clients (ie. Windsurf, Cursor). It enables adding additional context to your AI development workflow by integrating resources and tools specific to your project.

Flowbite MCP is an open-source server that adds the right amount of context to the LLM providers which improves the quality of UI generation in code - whether it's HTML, React, Svelte, or other frameworks.

Additionally, we also developed tools to convert Figma layers to code relevant to your codebase using Flowbite and Tailwind CSS and also other tools such as generating theme files based on branded colors.

Install Flowbite MCP

The easiest way to install the Flowbite MCP is using NPX:

npx flowbite-mcp

You can also run npx flowbite-mcp --help to show a list of helpful options.

Requirements

If you want to use the Figma to code converter tool, you need to get a personal access token from Figma and set it as an environment variable. Otherwise, Flowbite MCP is specifically built for a project that would use Tailwind CSS, Flowbite and optionally Figma for prototyping.

Configuring MCP client

An MCP client is a software tool such as Cursor, Windsurf or Claude Code that you use for AI development.

Most of these tools supports MCP servers out of the box and you need to update a JSON file that contains the configuration for the MCP servers.

Cursor

Install in Cursor

Cursor is one of the most popular IDEs for AI development for software engineers and web development.

To set up Flowbite MCP with Cursor, open the mcp.json and add the following configuration:

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

Windsurf

Windsurf is the second most popular IDE for AI development and the configuration is similar to Cursor.

Update the mcp_config.json file with the following configuration:

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

Claude Code

To install Flowbite MCP in Claude Desktop you need to configure the claude_desktop_config.json file:

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

If you'd like to request a new integration or have any questions, please open an issue on our GitHub repository.

Flowbite MCP tools

Use the tools from Flowbite MCP to enhance your AI development workflow.

Convert Figma to code

With Flowbite MCP you can now convert Figma layers to code by prompting any AI provider.

Currently, we recommend either Gemini 3, GPT 5 or Sonnet 4.5 for the highest quality code conversions and based on the complexity of the designs, you need to follow up with "reparation prompts".

Here's a prompt example that you can use to convert Figma design to code:

use flowbite mcp to convert this figma <FIGMA_NODE_LINK> to code

Note: to get the node link from Figma, all you need to do is:

1. Select the Figma layer in your project
2. Right click and select Copy/paste as
3. Select Copy link to selection

We recommend using the offical Flowbite Design System as a solid foundation for your UI generation.

Generate theme file

Since we released theming support for Flowbite by providing a better way to customize UI using variables we also built a tool in Flowbite MCP to generate a theme file based on a brand color and a general description of the UI that you'd like to use in your project.

Here's a prompt example that you can use:

use flowbite mcp to generate a theme file using the "#0000FF" brand color
and create a professional, enterprise, clean looking UI (ie. Jira, Facebook)

Local development

If you'd like to extend Flowbite MCP or contribute to the project, you can run it locally as a server.

We recommend cloning the repository from GitHub, installing the dependencies, building and then running the server.

Using the native MCP inspector tool can also be a great way to debug and test the server.

# Clone the repository
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in stdio mode (for Claude Desktop, Cursor)
npm start

# Run inspector
npm run start inspector

Transport modes

Flowbite MCP supports both stdio and http transport modes if you want to run it locally as a server.

Use the --mode option to set either http or stdio transport mode.

# Run in HTTP server mode for production
npx flowbite-mcp --mode http --port 3000

Additionally, you can also set the --port option to choose a different port for the HTTP server.

Docker configuration

Flowbite MCP also has a Docker configuration file that you can use to run it as a container.

# Build and run with Docker Compose (recommended)
docker-compose up -d

# Check health
curl http://localhost:3000/health

# View logs
docker-compose logs -f

# Stop
docker-compose down

Contributing

Flowbite MCP is open-source under the MIT license and contributions are more than welcome to the project.