A side-by-side look at the Figma MCP Server and Flowbite MCP MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Figma MCP Server for architecture & design work over a hosted endpoint; choose Flowbite MCP for architecture & design as a local process. You can also run both side by side in one mcpServers block.
FIGMA_ACCESS_TOKEN.FIGMA_ACCESS_TOKEN, MCP_TRANSPORT_MODE, MCP_PORT, MCP_HOST, MCP_CORS_ORIGINS.convert-figma-to-code, generate-theme.Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 36/100 · Fair | 61/100 · Good |
| Install command | Confirmed | Confirmed |
| Transport | Remote HTTP/SSE | Local subprocess (stdio) |
| Auth | Not declared | API key required |
| Pricing | Not declared | Free |
| Required env vars | FIGMA_ACCESS_TOKEN | FIGMA_ACCESS_TOKENMCP_TRANSPORT_MODEMCP_PORTMCP_HOSTMCP_CORS_ORIGINS |
| Verified owner | Community listing | Community listing |
| GitHub stars | 1 | 42 |
| Directory activity | 1 views 0 installs 0 upvotes | 3 views 0 installs 0 upvotes |
| Tools | Not listed | 2 |
| Full listing | View Figma MCP Server | View Flowbite MCP |
No tool names declared yet. Check the project README from the listing page.
convert-figma-to-codeFetches a Figma node and its rendered image from the Figma API and converts it to a code block. Requires FIGMA_ACCESS_TOKEN environment variable to be set.generate-themeGenerates a custom Flowbite theme CSS file based on a brand color (hex format) and user instructions. The AI will intelligently analyze the instructions and customize ALL theme variables (border radius, spacing, colors, typography, etc.) to match the desired aesthetic. This tool creates color shades and variations, adapting the entire theme system to match your brand identity.Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
{
"mcpServers": {
"figma-mcp-server-2": {
"url": "https://api.figma.com/v1/oauth/token"
}
}
}
{
"mcpServers": {
"themesberg-flowbite-mcp": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN_HERE",
"MCP_TRANSPORT_MODE": "YOUR_MCP_TRANSPORT_MODE_HERE",
"MCP_PORT": "YOUR_MCP_PORT_HERE",
"MCP_HOST": "YOUR_MCP_HOST_HERE",
"MCP_CORS_ORIGINS": "YOUR_MCP_CORS_ORIGINS_HERE"
}
}
}
}