What is the spellbook figma-to-code skill?
The spellbook figma-to-code skill is one folder in the majiayu000/spellbook library. Its SKILL.md gives an AI coding agent numbered rules for converting Figma MCP output into production React and Next.js components with TypeScript and Tailwind, covering positioning, dimensions, fonts, inline SVG and text heights.
Rule 1 is never to truncate code: every className in the Figma MCP output must be kept. That sets the tone for a skill built around lossless extraction and then careful cleanup of a few known problems.
It lives in majiayu000/spellbook, a library the README presents as cross-runtime skills for Claude Code and Codex. The skill's stated aim is production-ready React and Next.js components in TypeScript and Tailwind.
The rules, in order
- Keep every className from the Figma MCP output, with nothing dropped.
- Flatten nested absolute contents wrappers and keep child positions as they are.
- Read page width and height from get_metadata instead of hardcoding them.
- Load fonts from the Google Fonts CDN, map Figma font names, and test weights visually.
- Add critical CSS so wide pages scroll and keep their layout intact.
- Replace simple line images with CSS and use inline SVG for vector assets.
- Remove fixed heights from multi-line text blocks so text can wrap naturally.
Two details worth knowing
On positioning, the SKILL.md draws a line. A parent with the contents class means the child's top and left are already absolute. A parent without it means you add parent and child values.
On fonts, it warns that Figma's weight names may not match CSS. A Figma Bold can look lighter than weight 700, so it suggests trying one step lighter and comparing against the Figma screenshot.
Who the figma-to-code skill suits
Best for
- React or Next.js projects using TypeScript and Tailwind that receive Figma MCP output.
- Pixel-faithful conversion of fixed-size frames, since the examples use absolute positioning and widths such as 1920px.
- Teams that keep hitting text-wrapping and font-rendering drift between Figma and the browser.
Not for
- Projects outside React and Next.js. The output target is fixed in the skill's description.
- Anyone without Figma MCP access, because the skill works from that server's output.
- Responsive-first builds that need a design system mapping. See openai-figma-use or design-handoff.
Use it with UiChemy
Both routes start from a Figma file, but they end differently. This skill produces React code for an app. For a WordPress site, UiChemy Figma to WordPress converts the frames into editable pages directly. Click Get Started on uichemy.com.
If you stay on the code route, figma-implement-design and tailwind-design-system cover neighbouring ground.
How to install Spellbook Figma to Code Skill: React and Tailwind
git clone https://github.com/majiayu000/spellbook.gitClone the repository
Run
git clone https://github.com/majiayu000/spellbook.git, then change into the spellbook directory.Run the installer for one skill
The README's example format is
./install.sh --target all --skills <names>, so use./install.sh --target all --skills figma-to-code. Claude Code targets ~/.claude/skills and Codex targets ~/.agents/skills.Or copy the folder by hand
Copy skills/figma-to-code, including its reference subfolder, into your agent's skills directory so the extended reference stays beside SKILL.md.
Connect Figma MCP
The skill works from Figma MCP output and calls get_metadata. Provide a Figma URL and ask for the design as a React or Next.js component.
Check that it loaded
The README says to type / in Claude Code to see installed skills, or restart Codex so it reloads its skills folder. Then ask for one Figma frame as a component.
Key features
- Lossless Figma MCP useThe skill's purpose is to extract complete design information and keep 100 percent of the MCP output, with a correct and a wrong className example.
- Absolute contents flatteningA position table shows when to keep a child's coordinates as they are and when to add parent and child offsets, based on the contents class.
- Dimensions from metadataThe agent calls get_metadata for a file key and node ID, reads width and height from the returned XML, and uses those values in the layout.
- Google Fonts CDN loadingThe skill says to link Google Fonts directly in layout.tsx rather than next/font/google, and to include the opsz axis for Source Serif 4.
- Font name and weight mappingFigma font strings map to Tailwind classes, Source Serif Pro becomes Source Serif 4, and a table flags weights that may need to go lighter.
- Critical CSSBody gets overflow-x auto, and a page container uses min-width max-content and inline-block to stop the layout compressing.
- Images replaced with CSS and SVGSimple line images become a bordered div with a background color, and external vector images become inline SVG.
- Fixed heights removed from textMulti-line paragraphs lose their h-[Npx] class, while cards, single-line table rows, images and icons keep their dimensions.
- Extended reference fileMaterial from Rule 8 on, starting with table pattern detection and conversion, was moved to reference/extended.md and is loaded when needed.
Frequently asked questions
What is the spellbook figma-to-code skill?
It is the skills/figma-to-code folder in the majiayu000/spellbook library. The SKILL.md describes extracting Figma designs and generating production-ready React and Next.js components with TypeScript, Tailwind and pixel-level accuracy, using a set of numbered rules.
How do I install it?
Clone majiayu000/spellbook and use the README's installer format with the skill name figma-to-code, or copy skills/figma-to-code, with its reference folder, into your agent's skills directory. Then give the agent a Figma URL and ask for a component.
Does the skill need the Figma MCP server?
Yes in practice. Its rules are written around Figma MCP output, and Rule 3 shows a get_metadata call with a file key and node ID. Without that output the agent has no structured design data for the rules to act on.
Which AI coding agents can use it?
The README targets Claude Code and Codex and says the library installs into both, with agents supported for Claude Code only. Another agent that loads SKILL.md folders may work, but the repository does not list others.
Why does it avoid next/font/google?
The SKILL.md says self-hosted fonts from next/font/google may render differently from reference HTML that uses the Google Fonts CDN, causing different character widths and optical size handling. It recommends linking the CDN in layout.tsx and keeping the opsz axis.
Why remove fixed heights from text blocks?
Figma MCP outputs fixed heights for text, and font metrics differ between Figma and browsers. That can cause clipping or different line counts. The skill removes heights from multi-line text but keeps them on cards, images, icons and single-line table rows.
What is in the extended reference?
The SKILL.md says detail from Rule 8 on, starting with table pattern detection and conversion, moved to reference/extended.md to keep the main file short. The agent loads it when a task needs the moved examples, checklists or templates.
What license does the figma-to-code skill use?
GitHub lists the spellbook repository under the MIT license. Check the repository again before you redistribute the skill folder inside a product, because licenses and file contents can change after this page was written.