One source of truth for Figma, code, and AI.
One theme.json that Figma, your code, and your AI agent all read from —
plus 63 free components to start today.
npm install @uicraft/core
theme.json
source of truth
"brand": "213 87% 49%", "radius": 10, "font": "Inter"
theme.json → AI agent
The design system your AI agent reads directly
Point your AI assistant at the uicraft MCP server and it stops guessing markup. It pulls your real components, tokens and themes — and builds UIs that match your design system on the first try.
-
6 tools, live source
get_component,get_tokens,get_theme,get_snippet,search— straight from your system, not the model's memory. -
Same tokens as Figma & code The agent reads the very
theme.jsonyour designers and CSS use — no drift between what's designed, shipped and generated. -
One command to connect Works with any MCP-capable client — Claude, Cursor and more.
claude mcp add uicraft -- npx -y @uicraft/mcp-server
uc-card + brand token:
Team plan
PopularSwap one file. Re-skin everything.
Multi-brand and white-label are usually days of work. With uicraft you change one theme.json —
and Figma, your code, and your AI agent all re-skin to match. Minutes, not days.
theme.jsonPick a brand — every target below follows.
On a copy-paste library, every brand is a manual re-theme in two places. Here it's one source, three targets.
63 free components
Production-ready primitives, all wired to the same tokens. Copy, paste, ship.
Team plan
Popular
theme.json → your browser
Make it yours — live, right here
Drag the controls and watch real uicraft components restyle in real time — the same tokens you'd ship. This isn't a screenshot: it's the design system reacting to one source.
-
Real-time tokens Color, radius and font flow straight into the components — nothing is faked.
-
Export ready-to-ship CSS The full generator downloads
uicraft.csswith your theme baked in. -
One file for code and design The same
theme.jsonimports into Figma — your library re-themes to match.
theme.json → Figma
Generate uicraft inside Figma
Pick the components you need and the plugin builds them in Figma with every variable already bound — colors, type, spacing, radius and shadows.
Choose only what you need from the uicraft set — buttons, forms, cards, the lot.
The plugin draws real frames with semantic tokens already wired up.
Export theme.json and reuse it on the web — round-trip safe.
Start in 30 seconds
Three ways to add uicraft to your project. Pick whichever fits your stack.
$ npm install @uicraft/core
Then import the stylesheet in your entry file:
import '@uicraft/core/uicraft.css';
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uicraft/core@latest/uicraft.min.css">
No build step required — drop into any HTML page.
<link rel="stylesheet" href="uicraft.css">
Download uicraft.css → and host it yourself.
Copy & paste
Each component is clean, self-contained HTML. No installation, no imports.
Semantic tokens
Two-layer token system with Figma-aligned names. Consistent everywhere.
Dark mode built in
Light and dark out of the box using CSS variables and a single .dark class.
Zero runtime
Pure HTML and CSS — no framework, no JS bundle, no hydration.
One source of truth. Figma, code, and AI in sync.
Free, open source, MIT-licensed. Start with 62 components today — and grow into the design-to-code-to-AI bridge when you're ready.