Generate Code

What it does

The generate-code skill takes a link to a Figma frame and produces a complete React component that matches the design. It is not a generic "screenshot-to-code" tool — it understands shadcn/ui's component library and your project's specific setup, so the output uses your actual components, your design tokens, and your file conventions.

Here is what happens behind the scenes when you run the command:

The agent fetches the design data and a screenshot from Figma. It reads your project's components.json to understand your framework, aliases, and installed components. It then maps every element in the design to the right shadcn/ui component — a Figma button becomes a <Button>, a card layout becomes <Card> with <CardHeader> and <CardContent>, and so on. If a component is not installed yet, the agent installs it automatically via the CLI. Images and logos are downloaded to public/. Icons are identified by their library (Lucide, Tabler, Phosphor, and others) and imported correctly. Finally, the agent runs an audit to verify the output.

The result is a .tsx file you can drop into your project and start customizing.

Usage

1. Open the Figma file that contains your design.
2. Select the frame you want to turn into code.
3. Right-click the frame and choose Copy link to selection (or use the Share menu).
4. In your AI tool, run:

/generate-code https://figma.com/design/abc123/MyApp?node-id=42-15

Replace the URL with the one you copied. The agent takes it from there.

How the mapping works

The skill maps Figma layers to shadcn/ui components based on their structure, naming, and visual properties. Some examples:

| Figma element | Generated code | |---|---| | Button with text and icon | Button with Lucide icon import | | Card with header, body, and footer sections | Card, CardHeader, CardContent, CardFooter | | Input field with label | Field, FieldLabel, Input | | Dropdown or select | Select, SelectTrigger, SelectContent | | Tab container with multiple panels | Tabs, TabsList, TabsTrigger, TabsContent | | Badge or tag | Badge with the correct variant | | Avatar circle | Avatar, AvatarImage, AvatarFallback | | Navigation bar | NavigationMenu or Sidebar | | Dialog or modal overlay | Dialog, DialogContent, DialogHeader |

When a component exists in your project, the agent reuses it. When it does not, the agent installs it first using npx shadcn@latest add.

Pro Block detection

If the Figma frame was built using components from the ShadcnFigma.io Figma Kit, the agent can detect matching Pro Blocks in the @shadcnfigma registry. When a match is found, the agent installs the Pro Block directly instead of generating code from scratch. This gives you a pixel-perfect, production-tested implementation.

You do not need to do anything special for this to work — the detection is automatic. If no match is found, the agent falls back to generating the component from the design context.

Icons

Figma designs often include icons from various libraries. The skill identifies the icon library from the Figma component or layer name and generates the correct import statement.

Supported libraries:

• Lucide (default for shadcn/ui) — import { ChevronRight } from "lucide-react"
• Tabler — import { IconArrowRight } from "@tabler/icons-react"
• Phosphor — import { ArrowRight } from "@phosphor-icons/react"
• Remix — import { RiArrowRightLine } from "react-icons/ri"
• Hugeicons — import { ArrowRight01Icon } from "hugeicons-react"

If the icon library cannot be determined, the agent defaults to Lucide and picks the closest matching icon.

Assets

Images, logos, illustrations, and other non-icon visual assets are downloaded from Figma and saved to public/ in your project. The agent uses descriptive file names based on the layer names in the Figma file.

For example, a logo layer named "CompanyLogo" becomes public/logos/company-logo.svg, and a hero background becomes public/images/hero-bg.jpg.

Static designs become interactive

Figma is a static design tool, so elements like carousels, sliders, and animated sections are represented as flat layouts. The generate-code skill recognizes common patterns and makes them interactive:

• A row of logos laid out horizontally becomes a CSS-animated marquee that scrolls continuously.
• Tabs shown side by side become an interactive <Tabs> component where clicking a tab switches the visible content.
• Hover states defined in Figma variants are translated to Tailwind hover: utilities.

This is one of the key differences between a generic Figma-to-code tool and a skill that understands the shadcn/ui ecosystem — the output is not just a visual match, it actually works.

Large designs

When a Figma frame is too complex for a single request (the design context exceeds the MCP response size), the agent breaks it down automatically. It first fetches the metadata to get an overview of the node tree, then requests each logical section (header, hero, features, footer, etc.) individually. The final output stitches everything together into a single component or a set of components.

If you know your design is large, you can also select a smaller section in Figma and run the command on that instead.

Tips for best results

Name your Figma layers clearly. The agent uses layer names to decide what each element is. A layer named "HeroSection" produces better output than one named "Frame 47".

Use Auto Layout in Figma. Auto Layout constraints translate directly to Flexbox in the generated code, which means the responsive behavior matches what you designed.

Use Figma variables for colors and spacing. When colors reference Figma variables instead of being hardcoded hex values, the agent maps them to your CSS custom properties instead of inlining color values.

Keep your shadcn/ui components up to date. The agent checks which components are already installed and what versions are available. Outdated components may cause mismatches.

FAQ

Can I generate code for an entire page, or just individual components? Both. You can select a full page frame or a single component. For full pages, the agent breaks the design into sections and generates code for each one. For very large pages, selecting individual sections will give you more control over the output.

What framework does the generated code target? The agent reads your components.json to detect your framework (Next.js, Vite, etc.) and generates code accordingly. It uses React with TypeScript by default, styled with Tailwind CSS.

Does it work with Figma files that do not use the ShadcnFigma.io Figma Kit? Yes. The skill works with any Figma file. The ShadcnFigma.io Figma Kit gives better results because its components are pre-mapped to shadcn/ui. With a generic Figma file, the agent does its best to infer the right components from the design structure.

What if the generated code does not match the design exactly? The agent runs a validation step at the end, comparing the output against a screenshot of the original design. If something looks off, try selecting a smaller section of the design, or make sure Auto Layout is used consistently in the Figma file. You can always ask the agent to refine specific parts after the initial generation.

Can I customize the generated code? Absolutely. The generated component is plain source code added to your project — there is no lock-in, no runtime dependency. Edit it however you need.

Does the agent install npm packages automatically? It installs shadcn/ui components (which are source code, not npm packages) and their required dependencies. It will not install unrelated npm packages without asking.