shadcn MCP: design to React with AI
shadcncraft connects three AI building blocks into one design-to-React workflow: the Figma MCP for reading designs, the shadcn MCP server for installing and composing components, and shadcncraft agent skills for repeatable tasks. Together they let an AI assistant read a design, pull the right components from your kit, and produce code that already matches your codebase.
This page explains what each piece does, how they fit together, and how to set them up. If you only want the code-side workflow, jump to the shadcn MCP server section. If you want the full Figma-to-code loop, read From Figma to production React, with AI in the loop.
What is an MCP server?
MCP (Model Context Protocol) is a standard way to give AI tools access to external systems. An MCP server exposes a system, such as a design file or a component registry, to assistants like Claude, Cursor, and VS Code, so they can read it and act on it rather than guessing from a screenshot.
Two MCP servers matter for shadcncraft: the Figma MCP, which lets AI read your designs, and the shadcn MCP server, which lets AI install and compose components from a registry.
The three pieces of the workflow
- Figma MCP reads your designs so the AI understands structure, layers, and variables.
- shadcn MCP server installs and composes components from the shadcncraft registry by prompt.
- shadcncraft agent skills package common tasks, like generating code from a frame or composing a page, into repeatable workflows.
You can use any one of them on its own. Connected together, they turn a design into reviewed React in minutes instead of an afternoon of manual translation.
Figma MCP: let AI read your designs
The Figma MCP server exposes Figma files to AI tools the same way a file system is exposed to a code editor. Once it is connected, an assistant can read a frame, understand its structure, see the variables in use, and reason about it, instead of only seeing a flat screenshot.
This matters most when your design file is built from real components. The shadcncraft Figma kit mirrors the React registry one to one: the same names, the same variants, the same hierarchy. Because shadcncraft layer names match the data-slot values in the React components, an assistant reading the frame can map card-header to <CardHeader> and tabs-trigger to <TabsTrigger> without guessing.
To connect it, enable the Figma MCP server in Figma's settings and point your AI tool at it. Cursor, Claude Code, VS Code, and Codex all support MCP servers.
shadcn MCP server: install and compose by prompt
The shadcn MCP server lets AI assistants work with items from registries. They can browse available components, search for a specific one, and install it directly into your project using natural language.
The shadcncraft registry works with the shadcn MCP server out of the box. Once your project is connected to the registry and the MCP server is configured, you can ask your assistant to assemble a full page from real shadcncraft components in a single prompt, and it resolves imports and installs anything that is missing.
From your project root, run the init command for your editor:
$ pnpm dlx shadcn@latest mcp init --client cursor $ npx shadcn@latest mcp init --client claude $ npx shadcn@latest mcp init --client vscode
For the project setup, including how to add the registry and set your license key, see the registry installation guide. For a full walkthrough of building a page this way, read Build pages fast with shadcn MCP server.
shadcncraft agent skills: repeatable workflows
Agent skills package common shadcncraft tasks into repeatable workflows your assistant can run on demand. Where the MCP servers give the AI access to your designs and your registry, skills give it a tested procedure for a specific job. Current skills include:
- Generate code from a Figma frame turns a selected shadcncraft frame, component, or page into production React and shadcn/ui code, reusing the matching registry block.
- Compose a page from blocks assembles a full page by intent, picking and ordering the right shadcncraft blocks and installing them.
- Import design variables syncs design tokens into your
globals.css, mapped to shadcn token names for light and dark. - Switch icon library migrates a project between the supported icon libraries.
See the full set and how to install them on the shadcncraft agent skills page. To learn more about the design-to-code direction these skills build on, see From Figma to production React, with AI in the loop.
How they work together
With all three connected, the loop runs like this. You compose a screen in Figma from shadcncraft blocks, then ask your assistant to build it. The assistant reads the frame through the Figma MCP, recognizes the components, and installs anything missing from the registry through the shadcn MCP server. An agent skill can drive the whole step, generating the page and keeping it on your tokens and icon library.
The first pass gets you most of the way there. You review the diff like a pull request from a fast new contributor, correct the things only you can correct, such as business rules and real data shape, and commit. The drift between design and code shrinks because both ends are pinned to the same kit.
Get started
- Set up your project and the shadcn MCP server with the registry installation guide.
- Browse the shadcncraft agent skills that automate these steps.
- Explore the components, blocks, and Figma kit the workflow draws from.
- See the full loop in From Figma to production React, with AI in the loop.
Ready to try it? Explore everything in shadcncraft, or get the design system.
