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