Blog

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

Introducing Agent Skills: curated instruction sets that teach Claude Code, Cursor, and Codex how to generate production-ready shadcn/ui components from Figma designs and sync design tokens to CSS.

news·March 13, 2026·5 min read
Agent Skills: Turn Figma Designs into shadcn/ui Code with AI
Preview the newest version How to get the new update?
MW
Matt Wierzbicki

Founder @ shadcndesign.com

Continue reading

Related articles

View all articles
Agent Skills and Figma Slots
update·4 min

Agent Skills and Figma Slots

We've launched Agent Skills for AI-powered Figma-to-code workflows, added slots to the Figma kit components, new Tailwind colors, updated AI models, and more.

Generate code for your stack with our plugin
update·4 min

Generate code for your stack with our plugin

The Figma to shadcn/ui plugin now generates code tailored to your project. Plus we added support for the Claude 5 family and Gemini 3.5 Flash.

How to Use Our shadcn/ui Figma Kit as a Design System for Claude Design
article·8 min

How to Use Our shadcn/ui Figma Kit as a Design System for Claude Design

Bootstrap a production-ready design system for Claude Design in minutes by pointing it at our shadcn/ui Figma kit and matching React codebase.

Level-up your workflow today

One-time payment
14 days refund policy