Agent skill

Figma To Code

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

MITAuto-check passedFrontend & Design

Install Figma To Code

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/figma-to-code .claude/skills/figma-to-code && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .claude/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/figma-to-code .agents/skills/figma-to-code && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .agents/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/figma-to-code .cursor/skills/figma-to-code && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .cursor/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/majiayu000/spellbook.git --path skills/figma-to-code

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/figma-to-code .gemini/skills/figma-to-code && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .gemini/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/figma-to-code .github/skills/figma-to-code && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .github/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add majiayu000/spellbook --skill figma-to-code -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install majiayu000/spellbook figma-to-code --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/figma-to-code .opencode/skills/figma-to-code && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "figma-to-code" agent skill from https://github.com/majiayu000/spellbook/tree/main/skills/figma-to-code into .opencode/skills/figma-to-code/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-code", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: figma-to-code
GitHub stars: 287
Token cost: ~2.1k tokens
SKILL.md length: 492 words
Files: 2
Skills in repo: 97
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

A user provides a Figma URL
SKILL.md covers 🎯 Purpose, 🚨 CRITICAL RULES - Read First! and Extended Reference
Reaches fonts.googleapis.com and fonts.gstatic.com
Asks to convert Figma designs to code

What it does

Figma To Code is an agent skill from majiayu000/spellbook. 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.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `reference/extended.md`).

It sits in Frontend & Design, covering Design to code. It works with Figma, Next.js, React and TypeScript. The repository describes itself as: Cross-runtime skills for Claude Code, Codex, and multi-agent workflows. The licence is MIT.

When your agent uses it

A user provides a Figma URL
Asks to convert Figma designs to code

Example prompts

“/figma-to-code”

What it can do on your machine

Read from SKILL.md and the folder at commit ed52af7. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and css).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- fonts.googleapis.com
- fonts.gstatic.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma To Code loads about 2.1k tokens when it runs. Until then it costs about 57 tokens; SKILL.md has 492 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~57
When it runs · the whole SKILL.md, loaded when a task matches: ~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from majiayu000/spellbook at commit ed52af7, republished under its MIT licence (© majiayu000). 492 words, ~2,127 tokens.

Download SKILL.mdSave it as .claude/skills/figma-to-code/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: figma-to-code
description: 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.

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)

Show full SKILL.md (173 more words)Show less

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.

Files

SKILL.md and 1 other file in skills/figma-to-code of majiayu000/spellbook.

SKILL.md
reference/extended.md

Open the folder on GitHubat commit ed52af7

Compare with similar skills

Figma To Code next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma To Code compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Figma To Code this skillmajiayu000/spellbook	287	—	~2.1k	Automated safety check: Pass	MIT	yesterday
Design To CodeMigoXLab/coderio	114	2 repos	~1.2k	Automated safety check: Pass	Apache-2.0	4 mo ago
React Screenshot Recreatorbuildfastwithai/gen-ai-experiments	785	—	~2.9k	Automated safety check: Pass	MIT	17 days ago
Ss Learnbitjaru/styleseed	974	—	~1.3k	Automated safety check: Pass	MIT	today
Senior FrontendOhh-889/skyroc	795	2 repos	~1.1k	Automated safety check: Notes	MIT	1 mo ago
Styleseedbitjaru/styleseed	974	—	~1.1k	Automated safety check: Pass	MIT	today

Similar skills

Design To Code
MigoXLab/coderio
Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.
114 GitHub starsUsed in 2 repos~1.2k tokens
Frontend & DesignAuto-check passed
React Screenshot Recreator
buildfastwithai/gen-ai-experiments
Recreate a UI screenshot, mockup, or design image as production-quality React + TypeScript + Tailwind code with near-pixel-perfect visual fidelity.
785 GitHub stars~2.9k tokensUpdated 17 days ago
Frontend & DesignAuto-check passed
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
974 GitHub stars~1.3k tokensUpdated today
Frontend & DesignAuto-check passed
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
795 GitHub starsUsed in 2 repos~1.1k tokens
Frontend & DesignAuto-check: notes
Styleseed
bitjaru/styleseed
Build, improve, or inspect UI with StyleSeed. An agent skill from bitjaru/styleseed.
974 GitHub stars~1.1k tokensUpdated today
Frontend & DesignAuto-check passed
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
995 GitHub stars~4.2k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Figma To Code

What does Figma To Code do?

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Figma To Code is an agent skill from majiayu000/spellbook.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

When should I use Figma To Code?

Figma To Code fits situations like: A user provides a Figma URL; asks to convert Figma designs to code.

How do I install Figma To Code in Claude Code?

Run `npx skills add majiayu000/spellbook --skill figma-to-code -a claude-code`. Or copy the skill folder (skills/figma-to-code in majiayu000/spellbook) into .claude/skills/figma-to-code in your project. Claude Code loads it when a task matches its description.

How do I install Figma To Code in Codex?

Run `npx skills add majiayu000/spellbook --skill figma-to-code -a codex`. Or copy the skill folder (skills/figma-to-code in majiayu000/spellbook) into .agents/skills/figma-to-code in your project. Codex loads it when a task matches its description.

Can I use Figma To Code in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add majiayu000/spellbook --skill figma-to-code -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-to-code, .gemini/skills/figma-to-code, .github/skills/figma-to-code and .opencode/skills/figma-to-code in your project.

What does Figma To Code need to run?

SKILL.md names no scripts, command-line tools or credentials: Figma To Code is instructions for the agent only.

Does Figma To Code access the network?

SKILL.md names 2 domains. In commands or code: fonts.googleapis.com and fonts.gstatic.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Figma To Code safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma To Code use?

Figma To Code is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma To Code use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma To Code?

Skills that share tags, products or a category with Figma To Code: Design To Code (MigoXLab/coderio, 114 stars), React Screenshot Recreator (buildfastwithai/gen-ai-experiments, 785 stars), Ss Learn (bitjaru/styleseed, 974 stars) and Senior Frontend (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma To Code?

majiayu000 (a GitHub user) maintains it in majiayu000/spellbook, which has 287 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 8, 2026.

Source: majiayu000/spellbook on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Figma To Code

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Figma to Code - Production-Ready Component Generator

🎯 Purpose

🚨 CRITICAL RULES - Read First!

Rule 1: NEVER Truncate Code

Rule 2: Flatten absolute contents Structures

Rule 3: Extract Dimensions from Metadata

Rule 4: Font Loading & Name Mapping

4.1 Font Loading (layout.tsx)

4.2 Font CSS (globals.css)

4.3 Font Name Mapping

4.4 Font Weight Mismatch Warning

Rule 5: Critical CSS

Rule 6: Replace Simple Images with CSS

Rule 7: Inline SVG Assets

Rule 7.5: Remove Fixed Heights from Text Blocks

Extended Reference

Files

Compare with similar skills

Similar skills

More from majiayu000/spellbook

Related

Questions about Figma To Code

Rule 2: Flatten `absolute contents` Structures