More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
DeepSeek
Muse+22 moreClaude CodeCursorCodex CLIDeepSeekMuse
Dots
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
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.
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.
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Frontend & Web Apps.
Runs only the skills you have installed; it has no cleanup logic of its own. The passes run in one fixed order and each pass asks its own questions, so a full run of all five can take a while on a large frame. Works on one FRAME or SECTION at a time; component and component-set URLs, FigJam, and Slides files are not supported. It writes to the file through the selected skills, so duplicate the file or frame first.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
2 uses
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
- Accounts
official Figma MCP
Permissions
Allowed Hosts
This skill runs other installed skills and does not access anything by itself. Its own only tool use is get_metadata through the Figma MCP server the user's agent already has connected; the selected skills then read and write the connected Figma file through the same server, each asking for confirmation in its own steps. The skill recommends a backup once before anything runs. There is no local file read/write, no direct network or HTTP calls, and no terminal use. Connection steps differ by agent/client — see https://www.figma.com/mcp-catalog/ for setup guides.