What is figma-react-converter?

A design-to-code agent that turns Figma files into React components written in TypeScript. It also extracts Figma design settings and maps them to Tailwind CSS configuration.

Use it to extract a design system from Figma, create Tailwind theme settings, and build React components from the design.

It removes the manual work of translating a visual design into reusable code while keeping colours, typography, spacing, and layout settings consistent.

figma-react-converter — Agent for Claude Code by PMDevSolutions: A design-to-code agent that turns Figma files into React…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add agents/pmdevsolutions/aurelius/figma-react-converter

Clone the repo

git clone --depth 1 https://github.com/PMDevSolutions/Aurelius

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/agents/pmdevsolutions/aurelius/figma-react-converter.svg)](https://agentmods.dev/agents/pmdevsolutions/aurelius/figma-react-converter)

Your own site

<a href="https://agentmods.dev/agents/pmdevsolutions/aurelius/figma-react-converter"><img src="https://agentmods.dev/badge/agents/pmdevsolutions/aurelius/figma-react-converter.svg" alt="Measured on agentmods" height="20"></a>

Per session 38 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,732 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00038	$0.01732
Opus 5	$0.00019	$0.00866
Sonnet 5	$0.00008	$0.00346
Haiku 4.5	$0.00004	$0.00173

Measured yesterday against content hash ca57578f7c24, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

figma-react-converter scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/agents/figma-react-converter.md · 197 lines

How it starts

The opening of the file, as written. The whole thing — 197 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are an elite Figma-to-React conversion specialist. You bridge the gap between Figma design files and production-ready React components with pixel-perfect accuracy, proper TypeScript types, and Tailwind CSS styling.

Primary Responsibilities

1. Design System Extraction & Translation

Extract complete design systems from Figma:

Auto-detect Figma design systems (non-blocking):
- Search page names: "Design System", "Styles", "Tokens", "Library", "Components"
- Use get_variable_defs to extract tokens
- If not found: Use fallback tokens (no user prompt needed)
Extract wholesale:
- ALL colors (primary, secondary, neutrals, semantic)
- ALL typography (families, sizes, weights, line heights)
- ALL spacing tokens (complete scale)
- ALL layout settings (breakpoints, container widths)
- ALL border radii, shadows, opacity values
Translate to Tailwind config:
- Figma color variables → theme.extend.colors
- Figma text styles → theme.extend.fontSize + fontFamily
- Figma spacing → theme.extend.spacing
- Figma shadows → theme.extend.boxShadow
- Figma radii → theme.extend.borderRadius
Also generate CSS variables for tokens that don't map cleanly to Tailwind

2. React Component Architecture

Generate well-structured React components:

TypeScript-first with proper interfaces/types for all props
Functional components with hooks
Tailwind CSS for styling (utility-first)
Component composition over monolithic components

Proper file structure:

src/components/
├── ui/              # Primitive UI components (Button, Input, Card)
├── layout/          # Layout components (Header, Footer, Sidebar)
├── sections/        # Page sections (Hero, Features, CTA)
└── pages/           # Full page compositions

Component patterns:

Props interfaces exported alongside components
Children and className passthrough where appropriate
Responsive variants using Tailwind breakpoints
Semantic HTML elements (header, nav, main, section, footer, article)

Read the full file on GitHub · 197 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 197 lines · 38 tokens per session scan A ca57578f7c24

Subscribe to this mod's changes

figma-react-converter is an agent published in the GitHub repository PMDevSolutions/Aurelius (8 stars, last pushed 21d ago), licensed MIT. It adds 38 tokens to every session and 1,732 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-04.

CSS and styling Design and UX Frontend React ai-agents automation claude-code design-to-code developer-tools figma

frontend-developer

Build Next.js applications with React components, shadcn/ui, and Tailwind CSS. Expert in SSR/SSG, app router, and modern frontend patterns. Use PROACTIVELY for Next.js development, UI component creation, or frontend architecture.

davepoon/buildwithclaude · 55 tokens

frontend-ui-component-agent

/ui-component-agent or @ui-component-agent.

girijashankarj/cursor-handbook · 0 tokens

frontend-lead

Holistic frontend development guidance combining React, CSS, accessibility, and performance optimization. Use when building frontend applications, making UI/UX decisions, or coordinating frontend architecture across multiple concerns.

armanzeroeight/fastagent-plugins · 40 tokens

ui-developer

Use this agent when you need to implement or fix UI components based on design references or designer feedback. This agent is a senior UI/UX developer specializing in pixel-perfect implementation with React, TypeScript, and Tailwind CSS. Trigger this agent in these scenarios:\n\n \nContext: Designer has reviewed…

MadAppGang/claude-code · 338 tokens

senior-react-engineer

Use when building, refactoring, or reviewing React 19 + Tailwind CSS v4 code on the Aumovio frontend (Design System v3.1). Delegate for: building a React feature, extracting a component, choosing the right Aumovio component, wiring a chart, adding dark mode, fixing a hook, or applying the animation system. Enforces…

Jm-Paunlagui/CATHERINE · 106 tokens

animation-specialist

Animations, transitions, and gesture handling expert for shadcn/ui. Specializes in micro-interactions, page transitions, and smooth user experiences.

Matt-Dionis/claude-code-configs · 33 tokens