Loading page
About this tool
Build Figma AI prompts for wireframes, layer naming and design system cleanup, with real column-grid maths for your frame size.
Figma AI Prompt Builder writes a design prompt that carries real measurements instead of adjectives, working out your column width from the standard layout grid formula: (frame width − 2 × margin − (columns − 1) × gutter) ÷ columns. Choose the job — wireframe, layer naming scheme, variant plan, token names, system audit, accessibility pass or dev handoff — and the prompt arrives with fixed rules for each, including the 8-point spacing convention and Figma's slash-nesting rule for component names. It is for designers who keep getting back layouts described in vague spacing and layer names like Frame 27.
Open Figma AI Prompt Builder on AltFTool — it loads instantly in your browser.
Provide your input — an image, text, or data.
Let the tool analyze or generate the result.
Review, refine, and reuse the output wherever you need it.
Column width, content width and total gutter are calculated, not guessed, and impossible grids are rejected.
Tells you when the column width, margin or gutter does not land on the 8px spacing unit.
Each job carries its own constraints, so a naming prompt and an accessibility prompt never blur together.
Column width = (frame width − 2 × margin − (columns − 1) × gutter) ÷ columns. On a 1440px frame with 80px margins, 24px gutters and 12 columns that is (1440 − 160 − 264) ÷ 12 = 84.67px, which is why 12-column desktop grids rarely land on whole pixels.
A forward slash creates a level of nesting in the Assets panel and the instance swap menu, so Button/Primary/Large appears inside a Button folder, then Primary, then Large. A component name with no slash sits loose at the top level, which is why libraries get unusable once they pass a few dozen components.
It is a spacing convention, not a Figma feature: every spacing, size and radius value is a multiple of 8, with 4 used for small steps. It keeps components aligned when they are combined, and it maps cleanly onto common screen densities, which is why most design systems adopt it.
At minimum, WCAG 2.2's contrast thresholds of 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold and above), and the AA target size minimum of 24 by 24 CSS pixels for interactive elements. These are the rules that can be checked in the design file itself; keyboard order and screen reader behaviour still need testing in the built product.