shadcn/ui Agent Skills: Turn Figma Designs into Code with AI

AI coding tools are great at writing code. They're terrible at understanding design.

You paste a Figma link, describe what you want, and the AI gives you something that technically works but looks nothing like the design. Wrong spacing. Wrong components. Hardcoded colors instead of your theme tokens. Icons downloaded as PNGs instead of imported from Lucide. You spend more time fixing the output than it would've taken to write it yourself.

So I built Agent Skills to fix that.

What are Agent Skills?

Agent Skills are detailed instruction files that your AI coding tool follows step by step. Not prompts. Not templates. Complete workflows that encode every convention, edge case, and best practice we've learned building with our shadcn/ui Kit for Figma.

Think of it as giving your AI agent a design engineering brain. Instead of guessing how to translate a Figma frame, the agent follows a structured process: fetch the design, identify components, map them to your local shadcn/ui library, handle icons properly, download assets, and run an audit checklist before it's done.

Two skills, two workflows

Generate Code

Point your AI agent at any Figma frame and get a production-ready React component. The skill handles the full pipeline:

• Detects Pro Blocks and installs them from the registry
• Maps Figma components to your local shadcn/ui components
• Installs missing shadcn/ui components via the CLI
• Downloads image and logo assets to public/
• Handles icons from Lucide, Tabler, and other libraries
• Runs a full audit checklist to verify the output

The key part: the skill doesn't dump Figma's reference code into a file. It reads your existing project (your components.json, your globals.css, your installed components) and adapts the output to match what you already have. If the Figma design uses a Button, the generated code imports your Button with your variants.

For multi-section pages, the skill chunks the Figma fetch so nothing gets truncated. It processes each section individually while keeping the full-page visual context.

Import Variables

Sync your Figma design tokens (colors, radius, typography, shadows, spacing) as CSS custom properties directly into your globals.css.

This matters more than people think. Getting design tokens right is the difference between a UI that feels cohesive and one that feels like parts from different kits duct-taped together.

The skill supports:

• Color formats: oklch, hsl, and hex, auto-detected from your existing CSS
• Border radius: Figma values converted to rem
• Font families: wired through next/font with proper Tailwind v4 theme tokens
• Shadows: mapped to --shadow-* custom properties
• Dark mode: auto-derived when only light mode tokens are available from Figma

You design in Figma, run the skill, and your codebase matches. No manual copying of hex values, no guessing what --muted should be in dark mode.

Works with the tools you already use

Agent Skills work with any AI tool that supports the open skills format:

• Claude Code: skills live in .claude/skills/
• Cursor: skills live in .cursor/skills/
• Codex: skills live in .codex/skills/
• OpenCode: skills live in .opencode/skills/

One CLI command installs everything:

npx shadcn@latest add @shadcndesign/skills-claude

That's it. Your AI agent now knows how to do Figma-to-code properly.

Why skills beat prompts

I tried the prompt approach first. Write a long system prompt, paste it into Cursor, hope for the best. It works sometimes. But prompts are fragile. They drift. They miss edge cases. And they can't encode structured workflows like "first check the project's components.json, then scan the installed components, then compare the Figma design against what's available."

Skills can. They're versioned, structured, and they encode the full decision tree. When the agent encounters a Pro Block in a Figma design, the skill tells it exactly how to parse the registry name, check if it's already installed, create a working copy, and edit only the differences. No hallucination. No guessing.

The skills also use Figma MCP and shadcn MCP under the hood. The agent gets direct access to Figma design data and the shadcn component registry. Not screen-scraping. Not parsing screenshots. Structured design context.

Built from real workflows

These aren't generic AI prompts I wrote over a weekend. They're the exact workflows we use every day to build with the shadcn/ui Kit for Figma. Every rule, every edge case came from a real production scenario.

The Generate Code skill alone covers:

• Pro Block detection and automatic installation
• Chunked fetching for multi-section pages (so nothing gets truncated)
• Component mapping with automatic installation of missing deps
• Icon library detection and proper imports
• Image asset downloading with correct next/image usage
• Style difference detection with user prompts
• A 15-point audit checklist

The Import Variables skill covers:

• Color format auto-detection (oklch, hsl, hex)
• Safe font wiring through next/font + Tailwind v4 theme tokens
• Dark mode derivation when Figma only provides light mode
• Shadow format normalization
• Proper @theme inline entries for new tokens

That level of detail is what separates AI output you ship from AI output you throw away.

Try it

The Plus Package includes the three Design in Figma skills, the React Package includes the five Pro Blocks skills, and the Premium Package includes all ten. If you already have a license, install them now:

1. Make sure shadcn/ui and Figma MCP are set up in your project
2. Add your license key to .env.local
3. Run the install command for your editor
4. Point your agent at a Figma frame and watch it work

Check the full documentation for the step-by-step setup guide.

If you're building with Figma and shadcn/ui, this is the fastest path from design to production code without losing fidelity.