More screenshots
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsFigma Optimize — Run 5 Cleanup Passes on a Frame
Picks and runs up to five Figma cleanup passes on one frame in the right order: auto layout, layer names, variables and Text Styles, components, and a final audit. Needs the five skills installed.
Free
Figma Optimize — Run 5 Cleanup Passes on a Frame
Example session with this skill installed
/figma-optimize https://www.figma.com/design/<fileKey>/code-to-canvas?node-id=16-2
- Read your context and instructions
- Compiled the figma optimize
- Generated the app files
The frame is a villa-rental landing page (1440 x 3370, 113 layers) captured from code: no auto layout, no variables, no Text Styles, no components, and layers named Container, Paragraph, and Text. The agent asked for a backup once (the original frames were still in the file, so the answer was to go ahead), then asked which passes to run. All five were chosen.
The selection
| Question | Answer |
|---|---|
| Cleanup: run auto-layout restructuring (tidy-up)? | Run tidy-up |
| Optimize: which passes? | Layer rename, Tokenize, Componentize |
| Extend: run the post-structuring audit (enhance)? | Run enhance |
The agent ran them in the fixed order (tidy-up, layer rename, tokenize, componentize, enhance) and passed the same frame URL to each, together with a note that the backup was already confirmed, so none of them asked again. Each pass then asked its own questions in full.
What each pass did
| # | Pass | Result |
|---|---|---|
| 1 | tidy-up | 68 frames converted to auto layout, every layer given a semantic name, 113 of 113 layers checked against the reference layout, frame height 3370 to 3365 (a hidden line break in the hero heading removed) |
| 2 | layer rename | 0 candidates: no auto-generated names left, because tidy-up had already named every layer |
| 3 | tokenize | 10 Color variables bound to 53 fills and strokes, 7 Typography size variables, 16 Spacing variables bound to 69 gaps and paddings, 23 Text Styles applied to 38 text layers |
| 4 | componentize | Button (Size x State, 6 variants), Villa card (Size, 2 variants), Header, Footer; 8 instances placed; 1 new variable for the Hover color |
| 5 | enhance | 15 component properties added (14 text, 1 instance swap) so labels, titles, and footer links can be edited on each instance |
What the checks caught
The agent's own checks found three problems during the run and fixed each one before moving on:
- A dark overlay in the map section came out 42 px too tall after auto layout was applied; the size check caught it and it was set back to 400 px.
- After tokenize, the underline on the English language label had disappeared, because it shared a Text Style with a plain label. A before and after screenshot comparison caught it, and the underline was restored on the Header component.
- After enhance linked the label to a text property, the underline was dropped again. The check of text settings on every instance caught it, and it was restored.
Final summary
✅ Completed tasks:
- Auto-layout restructuring (tidy-up)
- Layer rename cleanup (layer-rename)
- Tokenize
- Componentize
- Post-structuring audit (enhance)
⏭ Skipped tasks:
- None
The frame went from a flat capture to a structured file: auto layout, semantic layer names, 34 variables, 23 Text Styles, 4 components, and editable component properties, and the page looks the same as before. A full-frame image comparison against the tidy-up result differs by 11 pixels, from sub-pixel rendering of one button label.
figma-optimize-run-5-cleanup-passes-on-a-app.zip
ZIP · project files
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Cleaning up a captured or generated Figma frame takes several separate steps, and the order matters: layout before names, names before variables, variables before components. Run by hand, each step asks its own setup questions and repeats the same backup warning. This skill is the picker in front of them. It asks which passes you want, runs only those in the fixed order, and lets each pass ask its own questions in full.
Requires these skills
This is a runner, not a cleanup tool by itself. The five passes are separate skills, and you need the ones you select:
- Figma Layer Rename (free): https://www.agensi.io/skills/figma-layer-rename-semantic-names-for-frame-group-layers
- Figma Tidy Up: https://www.agensi.io/skills/figma-tidy-up-auto-layout-semantic-layer-names
- Figma Tokenize: https://www.agensi.io/skills/figma-tokenize-variables-text-styles-from-a-frame
- Figma Componentize: https://www.agensi.io/skills/figma-componentize-components-variants-from-a-frame
- Figma Enhance: https://www.agensi.io/skills/figma-enhance-component-properties-audit-for-your-file
If you only need one of them, use that skill directly instead of this picker.
What it does
- Asks once for a backup, then asks which of the five passes to run, grouped into three questions: initial cleanup, optimize, and extend
- Runs the selected passes in a fixed order, whatever order you picked them in: tidy-up, layer rename, tokenize, componentize, enhance
- Hands each pass the same frame URL and tells it the backup is already confirmed, so no pass repeats that prompt
- Lets every pass run its own steps, questions, and checks unchanged; it never shortens or merges them
- Stops and tells you which skills are missing if one you selected is not installed, and asks whether to continue with the rest
- Ends with a list of completed and skipped tasks
How it works
- Give it a Figma frame or section URL
- It recommends a backup once
- It asks which passes to run
- It runs them in order, each with its own questions
- It finishes with a summary of completed and skipped tasks
Why the order is fixed
Auto layout comes first so that layer names and spacing make sense. Names come before variables so the tokens are easy to read. Variables come before components so new components inherit bound variables instead of hardcoded values. The audit runs last, on a file that already has components and variables.
What it is not
It has no cleanup logic of its own and does nothing if the skills it runs are not installed. It does not accept component or component-set URLs.
Requirements
Runs inside an agent connected to the official Figma MCP server, the same connection used for implementing Figma designs as code. Needs edit access to the Figma file, because the passes write to it. Duplicate the file first if you want a way back.
Try it free first
Try it Free on Agensi runs on Agensi's servers, which have no connection to your Figma file. Use the example session above to see the flow; the installed skill works on your real file through your own Figma MCP connection.
More from KMRVID
The full Claude Code skill bundle for Figma, Tailwind and Astro workflows is available on Gumroad: https://gaspanik.gumroad.com/l/kmrvid-claudeskills
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 listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 1 day ago
- Free to download with an account