Figma Structuring Kit: Tidy Up, Tokenize, Componentze, Enhance
Four Claude Code skills that take a hand-positioned or Design-Agent-generated Figma frame all the way to a clean, AI-readable file, in order. Figma Tidy Up restructures manual layout into auto layout with semantic layer names and normalized spacing. Figma Tokenize turns every hardcoded color, font size, and spacing value into bound variables and Text Styles. Figma Componentize finds repeated buttons, cards, and header/footer patterns and turns them into components with variant sets. Figma Enhance audits the result for what is still missing (variant merges, component properties, unbound values) and implements what you approve. Run them in this order on one frame and it ends up in the same state a hand-built design system would be in, without changing how it looks.
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. 4 skills unlock instantly in your library.
30-day refund guarantee
Instant unlock in your library
Free updates from the creator
What's included
4 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.
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