Figma to Code Kit: Clean Up the File, Then Build the Page
Five Claude Code skills that take a Figma frame from a hand-built or Design-Agent-generated file to a running page.
First the file: Figma Tidy Up (auto layout, semantic layer names), Figma Tokenize (variables and Text Styles), Figma Componentize (components and variants) and Figma Enhance (audit and polish). Then the code: Figma Pipeline takes the frame URL, clones an Astro, React or plain-HTML starter (or works inside your project), moves the variables into Tailwind and implements the page in four phases with a review against the Figma screenshot. Figma Workflow is included inside Figma Pipeline.
What the code looks like depends on how the Figma file is built: with variables and components in the file, the page gets tokens and components instead of arbitrary values. That is why the cleanup skills come first.
Free skills that go with this kit: Figma AI-Readiness Audit (score the frame before you start), Figma Layer Rename (fix auto-generated layer names) and Figma Optimize (runs the cleanup skills in this kit, in the right order, from one prompt).
Works with every agent that reads SKILL.md — Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Windsurf, OpenClaw, and more.
One payment, lifetime access. 5 skills unlock instantly in your library.
30-day refund guarantee
Instant unlock in your library
Free updates from the creator
What's included
5 skills
Turns a hand-positioned or captured Figma frame into a clean auto-layout hierarchy with semantic layer names, section by section, checking each step against the original screenshot.
Turns the hardcoded colors, font sizes, spacing, and text settings in a Figma frame into bound Color, Typography, and Spacing variables plus Text Styles, without changing how the frame looks.
Finds the repeated buttons, cards, header, and footer in a Figma frame, turns them into components with variants, and replaces the originals with instances, checking each step with you.
Audits a Figma file that already has components and variables, ranks what is still missing, and implements what you approve: component properties, variant merges, bindings, and cleanup.
Give it a Figma URL and it builds the project for you: clones an Astro, React or plain-HTML starter, moves your Figma variables into Tailwind, implements and reviews the design in phases, and starts the dev server.
See it in action
Figma Tidy Up — Auto Layout & Semantic Layer Names
Example session with this skill installed
/figma-tidy-up https://www.figma.com/design/v14N2TMCUfOqvHNMefnmsy/code-to-canvas?node-id=12-2
- Read your context and instructions
- Compiled the figma tidy up
- Generated the UI component
Scan: a landing page captured with Code to Canvas, 1440 x 3370, 113 layers. None of the frames has auto layout, and 71 layers carry generic names (Container, Paragraph, Text, Link, Section). Top level: Header, Main Content (four sections), Footer. Figma variables and styles: none found.
Before changing anything, the skill recommended a backup and noticed two places that look like intentional overlaps: the hero (text over a background photo with a dark scrim) and the location map (a caption badge over the map). It asked how to treat them, and the answer was to keep them as overlays.
Plan: header, hero, villa spaces, location, reservation, footer, in that order. Each section is rebuilt on its own and compared with the Before screenshot before the next one starts.
| Section | What it did |
|---|---|
| header | Row with a brand group on the left and an actions group on the right, spread apart; language links and the CTA button keep their 44px touch height |
| hero | Photo and scrim kept as absolutely positioned layers that stretch with the section; heading, description, and buttons stacked in a column with 16 and 32px gaps |
| villa-spaces | Title group on the left, intro on the right; a large card beside a column of two cards, with the column stretched so the bottom edges line up |
| location | Text column and map side by side, centered vertically; the caption badge pinned to the bottom left of the map |
| reservation | Centered column: eyebrow, heading, intro, button, and two notes with a 40px rhythm |
| footer | Brand on the left, three links on the right, and a legal row underneath |
Two things it found along the way. The first line of the hero heading ended with a hidden line break, so it measured 130px tall instead of 65 and pushed the rest of the heading down; the skill removed the trailing break and listed it in the report. A one-pixel border on the small tagline badge added to its padding, so the padding was reduced by one pixel to match the original size exactly.
Result (Before, After):
| Before | After | |
|---|---|---|
| Frames with auto layout | 0 | 68 |
| Layers with generic names | 71 | 0 |
| Overlapping layers kept as absolute | (none) | 4 |
| Frame height | 3370px | 3365px |
The final full-frame screenshot matches the Before screenshot. The 6px difference in height comes from 8px of unused space that sat inside two cards (removed) and 2px added to the footer by its padding and border.
Final layer tree (top levels):
coral-terrace-landing-page
├─ header
│ ├─ header-brand (logo, brand-tagline)
│ └─ header-actions (language-nav, inquiry-button)
├─ main-content
│ ├─ hero (hero-background, hero-content)
│ ├─ villa-spaces-section (villa-spaces-header, villa-gallery)
│ ├─ location-section (location-copy, location-map)
│ └─ reservation-section (reservation-header, reservation-cta-button, reservation-notes)
└─ footer (footer-main, footer-legal-row)
Next step suggested: run a tokenize pass to bind the colors and font sizes to variables.
figma-tidy-up-auto-layout-semantic-layer.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every skill in this bundle passes our trust checks.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back