Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Figma to Code - Production-Ready Component Generator · majiayu000 | DecimalAI

majiayu000/figma-to-code

NewSkillScoreMaintained

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.

Frontendby majiayu000

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/majiayu000-figma-to-code/SKILL.md

decimalai skills pull majiayu000-figma-to-code --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/majiayu000-figma-to-code/SKILL.md https://app.decimal.ai/s/majiayu000-figma-to-code/SKILL.md

Raw file: /s/majiayu000-figma-to-code/SKILL.md ↗ · machine-readable summary at /s/majiayu000-figma-to-code.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 39h ago

Yes — +70% lift · at higher cost+52% tokens0% turns100% of whole cases pass with skill (23/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	-14%	0%
case-02	✗→✓	▲ Improved	-4%	0%
case-03	✗→✓	▲ Improved	25%	0%
case-07	✗→✓	▲ Improved	41%	0%
case-17	✗→✓	▲ Improved	88%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

majiayu000 / spellbook

skills/figma-to-code/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Figma to Code - Production-Ready Component Generator

🎯 Purpose

Extract complete, lossless design information from Figma and generate production-ready React/Next.js components with TypeScript and Tailwind CSS.

🚨 CRITICAL RULES - Read First!

Rule 1: NEVER Truncate Code

Use 100% of Figma MCP output. Every className, every property matters.

tsx
// ✅ CORRECT: Keep ALL className from Figma MCP
<div className="absolute font-source-serif h-[108px] leading-[1.8] left-[100px] not-italic text-[20px] text-[rgba(29,38,45,0.8)] text-justify top-[210px] w-[1096px] whitespace-pre-wrap">

// ❌ WRONG: Removing any className
<div className="absolute left-[100px] top-[210px] font-source-serif text-[20px]">

Rule 2: Flatten `absolute contents` Structures

🔥 CRITICAL: Figma MCP returns nested absolute contents containers. display: contents makes the parent "disappear" - children are positioned relative to the nearest positioned ancestor (root)!

Key Insight: Children's positions are ALREADY absolute - DO NOT add parent's top/left!

tsx
// ❌ WRONG: Figma MCP output (has redundant parent wrapper)
<div className="absolute contents left-0 top-[41px]">
  <p className="absolute left-[100px] top-[41px]">TITLE</p>
  <div className="absolute left-0 top-[100px]">Line</div>
</div>

// ✅ CORRECT: Just remove the parent wrapper, keep children's positions AS-IS
<>
  <p className="absolute left-[100px] top-[41px]">TITLE</p>
  <div className="absolute left-0 top-[100px] w-[1920px] h-[1px] bg-[#C5CBCE] opacity-30" />
</>

Position Handling Rules:

| Parent Type | Child Position | Action | |-------------|----------------|--------| | absolute contents | Child has own top/left | Keep child position AS-IS, just remove parent | | absolute (no contents) | Child has relative top/left | Calculate: parent + child | | relative | Child has top/left | Calculate: parent + child |

🔥 The Golden Rule:

If parent has "contents" class → Child positions are already absolute → Keep AS-IS
If parent has NO "contents" class → Child positions are relative → Add parent + child

Reference: Verified correct positions (from production HTML):

Header text: top-[41px] (not 82px)
Header line: top-[100px] (not 141px)
Footer line: top-[980px]
Page number: top-[1004px]

Rule 3: Extract Dimensions from Metadata

NEVER hardcode dimensions!

typescript
// 1. Get metadata first
const metadata = await mcp__figma__get_metadata({
  fileKey: 'xxx',
  nodeId: '11:1420'
})

// 2. Extract from XML
// <frame width="1920" height="1080">
const pageWidth = 1920
const pageHeight = 1080

// 3. Use extracted values
<div className="w-[1920px] h-[1080px]">

Rule 4: Font Loading & Name Mapping

🔥 CRITICAL: Use Google Fonts CDN directly, NOT next/font/google!

next/font/google generates CSS variables and self-hosts fonts, but the font rendering may differ from reference HTML that uses Google Fonts CDN directly. This causes:

Different character widths (text wrapping issues)
Different optical size handling for variable fonts

4.1 Font Loading (layout.tsx)

tsx
// ❌ WRONG: Using next/font/google
import { Source_Serif_4, Kaisei_Tokumin } from 'next/font/google'
const sourceSerif = Source_Serif_4({ subsets: ['latin'], variable: '--font-source-serif' })
// This may render fonts differently than Google Fonts CDN!

// ✅ CORRECT: Use Google Fonts CDN directly in layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link
          href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Kaisei+Tokumin:wght@400;500;700;800&display=swap"
          rel="stylesheet"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Key: Include opsz (optical size) axis for Source Serif 4 - this affects character widths!

4.2 Font CSS (globals.css)

css
@layer utilities {
  /* Use direct font-family names, NOT CSS variables */
  .font-source-serif {
    font-family: 'Source Serif 4', serif;
  }
  .font-kaisei {
    font-family: 'Kaisei Tokumin', serif;
  }
}

4.3 Font Name Mapping

typescript
// Figma MCP returns:
font-['Kaisei_Tokumin:ExtraBold',sans-serif]
font-['Source_Serif_Pro:SemiBold',sans-serif]

// ✅ Convert to Tailwind classes:
font-kaisei font-extrabold
font-source-serif font-semibold

// Font name corrections (Google Fonts 2024):
'Source Serif Pro' → 'Source Serif 4'
'Source Sans Pro' → 'Source Sans 3'

4.4 Font Weight Mismatch Warning

⚠️ Figma's font weight names may NOT match CSS font-weights!

Figma renders fonts differently than browsers. What Figma calls "Bold" might visually appear lighter than CSS font-weight: 700.

| Figma Weight Name | Expected CSS | May Actually Need | |-------------------|--------------|-------------------| | Regular | 400 | 400 | | Medium | 500 | 500 | | Bold | 700 | 500 or 600 (test visually!) | | ExtraBold | 800 | 700 (test visually!) |

Solution: Always compare with Figma screenshot. If text looks too bold, try one weight lighter:

font-bold (700) → try font-medium (500)
font-extrabold (800) → try font-bold (700)

Rule 5: Critical CSS

Must add to globals.css:

css
body {
  overflow-x: auto; /* Allow horizontal scroll */
}

.page-container {
  min-width: max-content;  /* Prevent compression */
  display: inline-block;   /* Keep layout intact */
}

Rule 6: Replace Simple Images with CSS

Optimize line images:

tsx
// ❌ Before: Image-based line
<div className="absolute h-0 left-0 top-[100px] w-[1920px]">
  <div className="absolute inset-[-1px_0_0_0]">
    <img src={imgLine} />
  </div>
</div>

// ✅ After: CSS-based line
<div className="absolute left-0 top-[141px] w-[1920px] h-[1px] bg-[#C5CBCE] opacity-30" />

Rule 7: Inline SVG Assets

tsx
// ❌ Before: External image
<img src={imgVector} />

// ✅ After: Inline SVG
<svg viewBox="0 0 35 34" fill="none">
  <path d="M17.5 0L0 34..." fill="#1d262d"/>
</svg>

Rule 7.5: Remove Fixed Heights from Text Blocks

🔥 CRITICAL: Figma MCP outputs fixed heights for text blocks, but this causes line-wrapping issues!

Font metrics differ between Figma's rendering and browser rendering (even with the same font family). Fixed heights can cause:

Text overflow or clipping
Different line counts than expected
Layout breaks when font rendering differs slightly

tsx
// ❌ WRONG: Figma MCP output with fixed height
<p className="absolute h-[72px] leading-[1.8] left-[100px] text-[20px] top-[570px] w-[1096px]">
  Long text that might wrap differently in browser...
</p>

// ✅ CORRECT: Remove h-[Xpx], let text flow naturally
<div className="absolute leading-[1.8] left-[100px] text-[20px] top-[570px] w-[1096px]">
  <p className="mb-0">Long text that might wrap differently in browser...</p>
</div>

When to keep fixed heights:

Container elements (cards, boxes) - keep dimensions
Table rows with single-line content - keep h-[34px]
Images and icons - keep dimensions

When to remove fixed heights:

Multi-line text paragraphs - ALWAYS remove h-[Xpx]
Text blocks with text-justify - especially important
Any text that could wrap differently

Pattern: Use <div> wrapper with <p className="mb-0">:

tsx
// This matches reference HTML structure and ensures proper text flow
<div className="absolute font-source-serif leading-[1.8] left-[100px] text-[20px] top-[570px] w-[1096px]">
  <p className="mb-0">Text content here...</p>
</div>

Extended Reference

Detailed material starting at ### **Rule 8: Table Pattern Detection & Conversion** has been moved to reference/extended.md to keep this skill concise. Load that reference when the task requires the moved examples, command catalogs, checklists, platform details, or implementation templates.

Want to see if majiayu000/figma-to-code would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/27/2026, 19:20 UTC · 23 cases

Lift

+70%

100% vs 30%

Agent turns

1.0 vs 1.0

Tokens

+52%

4,220 vs 2,780.13

fail → pass · 16pass → pass · 7

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I need to build a Next.js page based on our Figma design node `11:1420` from file key `design_hero_99`. Could you generate the complete React Tailwind component in TypeScript along with the corresponding `layout.tsx` file? I want all font references loaded at the root level, all graphic paths or lines properly translated into clean markup, and full fidelity text styling for multi-line copy.	fail→pass	39,904	21,749	-45%	1	1	0%	8,278	7,156	-14%	0	0	—
case-02 We have a Figma frame (`nodeId: 45:678`, `fileKey: dashboard_v2`) representing a feature card with vector iconography and structured text headers. Please generate a Next.js component written in TypeScript with Tailwind CSS styling, along with the global CSS definitions and head font references needed to mirror the Figma design. Ensure all nested elements, absolute positioning, and graphic icons from the design file are accurately rendered.	fail→pass	37,743	16,904	-55%	1	1	0%	6,168	5,943	-4%	0	0	—
case-03 I'm converting an article section design in Figma (file `proj_art_2024`, node `200:15`) into clean frontend code. Could you inspect the metadata and structure to write a React TypeScript component that uses Tailwind CSS? Please include the layout file setup for font families like Kaisei Tokumin and Source Serif, inline any SVG icons or divider lines into proper markup, and make sure text paragraphs wrap naturally across different viewports without losing any utility classes.	fail→pass	50,731	34,119	-33%	1	1	0%	8,087	10,084	+25%	0	0	—
case-04 I'm setting up a Next.js App Router API route at `app/api/figma-webhook/route.ts` to handle webhook notifications from Figma when a file is updated (`FILE_UPDATE` event). Please write the TypeScript request handler function to verify the secret token and process the payload.	pass→pass	18,727	12,145	-35%	1	1	0%	2,838	4,966	+75%	0	0	—
case-05 We need to set up an automated visual regression test using Playwright for our newly imported hero banner component in Next.js. Write a Playwright test file in TypeScript that navigates to `/hero`, waits for network idle, and performs a full page snapshot comparison against baseline images.	pass→pass	9,452	8,112	-14%	1	1	0%	1,439	4,111	+186%	0	0	—
case-06 We want to document our imported UI components in Storybook 8 using Component Story Format 3 (CSF3). Write a Storybook story file `HeroBanner.stories.tsx` for the React TypeScript `HeroBanner` component, including primary and mobile viewport variants.	pass→pass	9,385	15,623	+66%	1	1	0%	1,785	5,815	+226%	0	0	—
case-07 When translating a nested layer structure from a Figma frame where a parent wrapper has `absolute contents` and `top-[41px]` positioning while its child paragraph has `absolute left-[100px] top-[41px]`, how should the positioning classes be output in the final JSX element?	fail→pass	16,965	6,383	-62%	1	1	0%	2,529	3,572	+41%	0	0	—
case-17 A Figma layer export renders a horizontal rule line as a raster image inside a zero-height positioned wrapper element (`<img src="line_asset.png" />`). How should this asset wrapper be converted into native CSS styling?	fail→pass	13,735	7,661	-44%	1	1	0%	1,950	3,660	+88%	0	0	—
case-08 When converting a Figma layer group where a parent container has `relative top-[100px]` and its child text element has `absolute top-[50px] left-[20px]`, how should the child element's final positioning classes be calculated in the React Tailwind component?	fail→pass	11,766	6,333	-46%	1	1	0%	1,917	3,569	+86%	0	0	—
case-09 We are programmatically fetching node data from Figma file key `design_spec_88` node `10:20`. Should the width and height of the root page container be hardcoded as standard 1920x1080 Tailwind classes or dynamically extracted from the metadata call first?	fail→pass	12,668	4,128	-67%	1	1	0%	2,064	3,292	+59%	0	0	—
case-10 We are setting up `app/layout.tsx` for a design system exported from Figma that uses Source Serif 4 and Kaisei Tokumin fonts. Should we import `Source_Serif_4` from `next/font/google` or use HTML `<link>` tags targeting Google Fonts CDN in the head element?	fail→pass	12,012	5,947	-50%	1	1	0%	2,180	3,748	+72%	0	0	—
case-11 When constructing the Google Fonts CDN link tag in Next.js layout for `Source Serif 4` to match Figma text rendering accurately, what URL query parameters must be included for variable font axes?	pass→pass	16,805	6,062	-64%	1	1	0%	2,544	3,737	+47%	0	0	—
case-12 In `globals.css`, how should font utilities like `.font-source-serif` and `.font-kaisei` be defined to ensure consistent text width rendering across browsers?	fail→pass	18,687	6,207	-67%	1	1	0%	2,755	3,744	+36%	0	0	—
case-13 A Figma node metadata output lists font family `Source_Serif_Pro:SemiBold`. How should this font name be normalized and mapped in Tailwind CSS classes?	fail→pass	9,794	4,904	-50%	1	1	0%	1,814	3,463	+91%	0	0	—
case-14 The Figma MCP metadata returns `Source_Sans_Pro:Bold` for a button label font. How should this font family name be updated for modern font CDN compatibility?	pass→pass	10,332	4,778	-54%	1	1	0%	2,010	3,399	+69%	0	0	—
case-15 During browser preview, text rendered with Figma's `Bold` weight setting appears noticeably heavier than the design screenshot. What adjustment should be made to the Tailwind font weight utility?	pass→pass	7,672	3,524	-54%	1	1	0%	1,299	3,003	+131%	0	0	—
case-16 What specific CSS declarations must be added to `globals.css` to prevent horizontal clipping and preserve layout integrity when rendering pixel-perfect Figma page exports?	fail→pass	15,988	3,263	-80%	1	1	0%	2,709	3,107	+15%	0	0	—
case-18 When an exported Figma icon layer is provided as an image tag `<img src={vectorUrl} />`, how should this vector element be handled in the final React component structure?	pass→pass	14,557	7,183	-51%	1	1	0%	2,074	3,827	+85%	0	0	—
case-19 A multi-line copy paragraph block from Figma has `h-[72px] text-[20px]` in its class list. How should text container height be managed during conversion?	fail→pass	11,233	6,370	-43%	1	1	0%	1,927	3,667	+90%	0	0	—
case-20 When reviewing fixed height classes (`h-[Xpx]`) in Figma MCP output, which UI element types should keep their fixed height attributes rather than having them stripped?	fail→pass	14,204	3,583	-75%	1	1	0%	2,234	3,019	+35%	0	0	—
case-21 An engineer proposes trimming utility classes from a verbose Figma output string, removing `not-italic`, `text-justify`, and `whitespace-pre-wrap` to clean up the code. What is the rule regarding class preservation?	fail→pass	8,523	5,597	-34%	1	1	0%	1,216	3,289	+170%	0	0	—
case-22 In an exported Figma layout table where individual row items specify `h-[34px]`, should the fixed height class be removed from these table row elements during conversion?	fail→pass	12,374	3,502	-72%	1	1	0%	1,806	3,077	+70%	0	0	—
case-23 How should the top-level container structure be wrapped in the output Next.js page component to support fixed design width positioning and prevent layout compression?	fail→pass	14,150	7,841	-45%	1	1	0%	2,320	3,812	+64%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +70 percentage points is the difference between those two pass rates over the 23 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 30.4%
Pass rate with the skill: 100%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/27/2026, 19:20 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

I need to build a Next.js page based on our Figma design node `11:1420` from file key `design_hero_99`. Could you generate the complete React Tailwind component in TypeScript along with the corresponding `layout.tsx` file? I want all font references loaded at the root level, all graphic paths or lines properly translated into clean markup, and full fidelity text styling for multi-line copy.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested yesterday

Other measured skills in the registry, with their headline benchmark lift.