Engineering
Flatten Figma autolayout with a reusable Skill
Figma Bro is out. The flatten skill was the missing piece.
What hurt
AI 嘉豪 (Davidwuuu92) replied to johnbai's Figma Bro thread with the public skill text for people who installed and were missing it. The skill is for building or cleaning any Figma autolayout: flatten to CSS — one relationship one frame, FILL/HUG/SPACE_BETWEEN instead of spacers, padding on the surface, captions as siblings. Not just tables or settings. Never eyeball.
What to install or create
One bot that already touches Figma, or a new cleaner named Flatten. Paste David's published skill as a Skill, not a made-up system prompt. Point it at one frame cluster. Count wrappers: the stack should be relationship > content + control. No send, no spend.
Bots
Flatten
Runs the published autolayout flatten skill on one cluster.
Plugins
None on day one. Follow the first-run steps.
Files
One autolayout cluster you own. Any frame, not just a table.
Routines
None on the first run. Watch one manual pass first.
The prompt
Paste as a Skill
David posted this skill publicly in reply to @johnbai's Figma Bro thread. Copied as published from the note.
name: Figma autolayout flatten description: >- use this when building or cleaning any Figma autolayout — flatten to CSS: one relationship one frame, FILL/HUG/SPACE_BETWEEN instead of spacers, padding on the surface, captions as siblings Use for any Figma frame, not just tables or settings. Structure is CSS: fewest layers, distribution via properties, inspect tokens. Never eyeball. 1. One relationship, one frame If two things sit in a visual relationship (beside, stacked, inset), that relationship is one autolayout. Extra wrappers are bugs. Same-named Frame-in-Frame is always flatten-worthy. If deleting a frame would not change the CSS, delete it. 2. Distribution is a property, not a node Spread, pin, and inset come from FILL / HUG / SPACE_BETWEEN / gap / padding . Never empty text, spacer frames, 50/50 fake columns, or a wrapper whose only job is to push a sibling. The longer (or stretching) child FILL s. The intrinsic child HUG s. The parent SPACE_BETWEEN s when they should sit on opposite edges. Resize the parent to verify: the hug child stays pinned to the trailing edge. 3. The box owns the padding Whatever looks like a surface (card, row, field, section) is the autolayout that has the padding. Nested pads compose (parent 8 + child 8 = 16). Measure both. Don't fake inset with inner frames. 4. DOM, not collage Label, surface, and helper/caption are siblings, like heading, box, and .hint in HTML. Meta copy does not live inside the surface it describes. A status, icon, or chip is a library component sitting next to the title, not restyled type on the title. 5. A clone is a starting tree, not the structure Hidden leftovers still count as layers. Strip them before rewriting. Instances keep the fills, copy, and icons of the screen they came from. Rebind or swap to the library. Do not trust a cloned button, badge, or row to already be the right variant. Check Count wrappers on one cluster. The stack should be relationship > content + control , nothing else.
First run
- 1Open a Figma-capable bot, or create one named Flatten.
- 2Add David's skill below as a Skill. Do not rewrite it into a second system prompt.
- 3Point it at one autolayout cluster you own — any frame, not just a table.
- 4Ask it to flatten using the skill. Then count wrappers: relationship > content + control.
- 5Review FILL / HUG / SPACE_BETWEEN before you keep the rewrite. No send, no spend.
Approval fence
The skill text has no send or spend. Still: no posting, no buying, and no writing to a file you do not own without a yes.
What to tweak
Steal the skill text, not a second persona. Credit David — he posted it publicly in reply to johnbai's Figma Bro thread. Use it on any frame, then check the wrapper count. Do not invent a separate system prompt beyond this quote.
Source
AI 嘉豪 @Davidwuuu92 · Original post
Not affiliated with xAI. We did not write this prompt. Third-party template terms still apply.