Built by practitioners
These aren't generic AI prompts. They're the exact workflows we use every day to build with the shadcn/ui kit for Figma - refined over hundreds of use cases and tested across real production projects.
Each skill encodes the conventions, edge cases, and best practices we've learned while working with AI and our Figma kit.
Founder @ shadcndesign.com
Skills for the Figma-to-code workflow
Each skill is a detailed set of instructions your AI agent follows to complete a task. Use the same approach we use every day when working with the shadcn/ui Kit for Figma.
Generate Code
Turn any Figma frame into production-ready React code with proper shadcn/ui components, Tailwind CSS classes, and icon imports.
Import Variables
Sync your Figma design tokens — colors, radius, typography, shadows, spacing — as CSS custom properties directly into your globals.css.
Up and running in under a minute
Skills are based on Figma MCP. Install them with the CLI, point your AI agent at a Figma frame, and get production-ready output.
Install the skills
One CLI command adds the skills to Claude Code, Cursor, or any compatible AI tool.
Run a skill on your task
Select a Figma frame and tell your AI agent to generate code or import variables.
Get production-ready output
Review clean code that follows shadcn/ui conventions with a full audit checklist.
Works with the AI tools you already use
Join 6K+ pros who design & ship faster
Our ecosystem eliminates the friction between design and development. Every role gets exactly what they need to work and collaborate faster.
Designers
Ship pixel-perfect designs that developers can actually build
Design 10x faster with pre-built components and blocks
Stay current with AI tools that already understand your components
Focus on UX and conversion, not component building from scratch
Level up your skills with shadcn/ui best practices built-in
"Our company selected shadcn as our primary design library, and its been a fantastic choice. The design kit is sleek, modern, and offers excellent UX right out of the box. Its comprehensive variable system has significantly improved our efforts around branding and accessibility."
Ryan Almoneda
UX Designer @ BlackDuck