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.

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.

Best Figma design system kits for development teams (2026)
article·9 min

Best Figma design system kits for development teams (2026)

A practical 2026 comparison of Figma design system kits that map cleanly to code, with notes on variables, plugins, maintenance, and pricing.

Level-up your workflow today

One-time payment
14 days refund policy