# 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.

Published: 2026-03-12 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/agent-skills-and-figma-slots-update

This is a big one. We're shipping Agent Skills — a brand-new way to turn Figma designs into production-ready code using your AI coding tools — alongside slots in the Figma kit, new Tailwind colors, updated AI models in the plugin, and a batch of quality-of-life improvements across the board.

## Agent Skills

AI coding tools are great at writing code. They're not great 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.

<Link href="/agent-skills">Agent Skills</Link> fix that. They're 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
<Link href="/">shadcn/ui Kit for Figma</Link>.

### Two skills, two workflows

**Generate Code** — Point your AI agent at any Figma frame and get a production-ready React component. The skill detects <Link href="/pro-blocks">Pro Blocks</Link>, maps Figma components to your local shadcn/ui library, handles icons from all supported libraries, downloads assets, and runs a full audit checklist before it's done.

**Import Variables** — Sync your Figma design tokens (colors, radius, typography, shadows, spacing) as CSS custom properties directly into your `globals.css`. Supports oklch, hsl, and hex color formats, and auto-derives dark mode when only light tokens are available.

### Works with the tools you already use

Agent Skills work with Claude Code, Cursor, Codex, and OpenCode. The three Design in Figma skills come with the Plus Package, the five Pro Blocks skills come with the React Package, and the <Link href="/pricing">Premium Package</Link> includes all ten. Check the <Link href="/docs/agent-skills">full documentation</Link> for the step-by-step setup guide.

## Slots in the Figma kit

We've added slots to our Figma kit components. Slots let you swap predefined content areas inside a component without detaching the instance — you keep the component structure intact while customizing the content inside. This brings the Figma kit closer to how shadcn/ui components work in code, where you compose children and pass content through props.

The plugin now supports generating code for slot contents in the Build module, so your AI-generated code matches the slot structure you designed in Figma.

## New Tailwind colors

We've added four new base colors to both the Figma kit and the plugin's Create module: **Taupe**, **Mauve**, **Mist**, and **Olive**. These are softer, more nuanced neutrals that work well for projects that need a warmer or more distinctive feel beyond the standard gray scales.

## What's new

### Figma kit

- Added new Tailwind colors: Taupe, Mauve, Mist, Olive
- Added Style Guide page
- Added slots feature to the components: Accordion, Alert, Alert Dialog, Avatar, Breadcrumb, Button Group, Calendar, Card, Carousel, Checkbox, Combobox, Command, Context Menu, Dialog, Drawer, Dropdown Menu, Empty, Field, Hover Card, Item, Menubar, Navigation Menu, Pagination, Popover, Radio Group, Resizable, Select, Sheet, Sidebar, Skeleton, Switch, Table, Tabs, Toggle Group, Typography
- Replaced old slot components with native Figma slots
- Added new block: Blocks / Sidebar-16
- Radio Button: updated colors and icon settings to ensure compatibility with the new shadcn version
- Slider: added Controlled variant
- Tabs: added hover state to Tabs / Trigger
- Dropdown/Popover menus: added new menu variants - Color and Appearance
- Fixed shadows appearance by adding Clip Content to the components with shadow

### Plugin

- Added new base colors to Create module: Olive, Taupe, Mist, Mauve
- Added new fonts to Create module: Geist, Noto Serif, Roboto Slab, Merriweather, Lora, Playfair Display
- Added support for generating code for slot contents in the Build module
- Added new AI models: Claude 4.6 Sonnet, Claude 4.6 Opus, Google Gemini 3.1 Pro Preview, Google Gemini 3.0 Flash Preview
- Removed deprecated AI models: Claude 3.7 Sonnet, Claude Sonnet 4, Google Gemini 2.5 Pro

---

### How to get started with Agent Skills

Already have a Premium license? Install the skills now — check our <Link href="/docs/agent-skills">Agent Skills documentation</Link> for setup instructions.