Helps convert Figma designs into code using Flowbite, the Tailwind CSS based UI component library.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add flowbite --env FIGMA_ACCESS_TOKEN='<FIGMA_ACCESS_TOKEN>' -- npx -y flowbite-mcp~/.codex/config.toml
[mcp_servers.flowbite]
command = "npx"
args = ["-y", "flowbite-mcp"]
env = { FIGMA_ACCESS_TOKEN = "<FIGMA_ACCESS_TOKEN>" }
# codex mcp add flowbite --env FIGMA_ACCESS_TOKEN='<FIGMA_ACCESS_TOKEN>' -- npx -y flowbite-mcp~/.cursor/mcp.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"flowbite": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}claude_desktop_config.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<FIGMA_ACCESS_TOKEN>"
}
}
}
}Environment variables
FIGMA_ACCESS_TOKEN
Replace the placeholders with your own credentials and keep them out of version control.