convert-figma-to-code
Fetches 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.
LABSCO SUMMARY
A design handoff and a theme, both in Flowbite's own conventions.
convert-figma-to-code goes through the Figma API rather than an exported image, which is why it needs the token and a node URL rather than a file you drag in. generate-theme is the more unusual of the two: it takes one colour and a sentence about the aesthetic and produces the full variable set, including shades and variations — the part that is normally hand-tuned.
What it is
Two Flowbite tools: a Figma-node-to-code converter and a theme generator that writes a CSS file.
What you get
- convert-figma-to-code, which fetches a Figma node and its rendered image from the Figma API and returns a code block
- generate-theme, which writes a Flowbite theme CSS file from a brand colour in hex and free-text instructions, moving border radius, spacing, colours and typography together rather than one variable at a time
- A fileName argument on the generated theme, so the output lands where you want it
Requirements
A Figma access token in FIGMA_ACCESS_TOKEN — convert-figma-to-code names it as a requirement — and the URL of the Figma node you want converted.
Setup effort
One command plus a key — npx flowbite-mcp, then supply credentials
USE CASES
01
Turning a handed-over Figma frame into markup
Give it the Figma node URL: the node and its rendered image are fetched through the Figma API and come back as a code block you can drop into the project.
02
Getting Flowbite to match a brand palette
Pass the brand colour as hex plus a sentence on the look you want, and the theme file is written for you with radius, spacing, colour and typography variables set together rather than one at a time.
2 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
generate-theme
Generates 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.
BEFORE YOU INSTALL
What to know first
Tools you get
2 tools when we connected. The 60+ UI components are resources, not tools. A Figma personal access token is needed only for convert-figma-to-code; generate-theme and the component resources work without one.
Requires
- npx on PATH
- FIGMA_ACCESS_TOKEN in your environment
Where it runs
All 3 documented clients run the server on your machine.
CONTEXT COST
Light Standing cost
Rated by the size of the 2 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
npx flowbite-mcpMCP Clients
Claude Desktop, Cursor, Windsurf
JSON
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "<YOUR_FIGMA_ACCESS_TOKEN>"
}
}
}
}
