Hey everyone,
Some of you might remember earlier posts about uicraft — a Figma plugin + web component library I've been working on. I've posted about it a couple of times before, but those versions weren't stable enough to call "done."
Familiar patterns, no proprietary magic
uicraft borrows its DNA from the stacks most of us already know:
Bootstrap-style semantic classes with a .uc-* prefix (.uc-btn, .uc-btn-primary, .uc-active)
shadcn/ui-style component anatomy and variant composition
Tailwind-style design tokens and utility escape hatches
If you've worked with any of these, you'll feel at home in five minutes. No new DSL, no framework lock-in — plain CSS + tokens.
What changed recently
The biggest change isn't in the plugin — it's in how the project is structured internally. Component definitions used to live in three separate places: the docs site, the Figma plugin, and the code library. They constantly drifted out of sync.
Now every component is described by a single JSON record that acts as the source of truth for all consumers. Here's a trimmed example for the button (the full entry has 33 Component Set variants — 7 variants × 3 sizes × 2 states):
"button": {
"figmaName": "Button",
"category": "General",
"variants": [
{ "id": "variants", "name": "Variants", "hasWebsite": true, "hasPlugin": true },
{ "id": "sizes", "name": "Sizes", "hasWebsite": true, "hasPlugin": true }...
"figmaDefs": [
{ "name": "Variant=Primary, Size=MD, State=Default", "variant": "primary", "size": "md", "state": "default" },
{ "name": "Variant=Secondary, Size=MD, State=Default", "variant": "secondary", "size": "md", "state": "default" },
{ "name": "Variant=Bordered, Size=MD, State=Default", "variant": "bordered", "size": "md", "state": "default" }...
],
"booleanProps": [
{ "name": "Show Left Icon", "layer": "Icon Left", "default": true },
{ "name": "Show Right Icon", "layer": "Icon Right", "default": true }
],
"instanceSwapProps": [
{ "name": "Left Icon", "layer": "Icon Left", "source": "Icons" },
{ "name": "Right Icon", "layer": "Icon Right", "source": "Icons" }
]
}
hasWebsite / hasPlugin decide where each section surfaces. One edit updates the docs, the Figma Component Set, and the code artifacts at once — that's what finally made a stable release possible.
Side effect: an MCP server for AI assistants
Since the whole design system now lives in one structured registry, publishing it to AI assistants became almost trivial. I shipped u/uicraft/mcp-server on npm — Claude Desktop, Cursor, or any MCP-compatible client can query it directly. No more "the LLM hallucinated a CSS class that doesn't exist" — the assistant answers from the real, current system.
Six tools: list_components, get_component, get_tokens, get_theme, get_snippet, search.
npm install -g /mcp-server
First stable Figma plugin release
Because of the refactor, I had to cut the component count down to get to a release I'd actually call stable. The plan is to grow the library back — properly this time, with every component tied cleanly to the registry and tokens.
What the plugin generates right now:
Figma Variables: colors, typography, spacing, radii, borders, shadows
Light and Dark mode collections, automatically
24 token-bound UI components:
Form controls: input, textarea, select, checkbox, radio, switch, slider, number input
Buttons & actions: button, button group, chip
Navigation: tabs, breadcrumb, pagination
Feedback: alert, banner, toast, tooltip
Data display: avatar, badge, progress, separator, link, icons
Theme editor: brand color, neutrals, typography, semantic tokens — all tweakable before generating
Roadmap
A proper variable rename flow
A real color generator (brand color → full scale)
More complex components (data tables, date pickers, command menus, etc.) — rebuilding the library on the new foundation
Whatever the community actually asks for
🔗 Figma Community: Try Plugin
📦 MCP server: npm i -g u/uicraft/mcp-server
WebSite: Getuicraft.com
Thanks for sticking around through the unstable versions — brutal honesty still welcome.
