Prompt Claude for Strict iOS Spacing With Tokens

Tired of AI-built iOS screens with margins that drift, 12 here, 15 there, 20 somewhere else? The short answer: the model invents padding because nothing pins it down. Give Claude a fixed spacing scale and tell it to use only those tokens, and the layout snaps into rhythm. Pair the prompt with a VP0 design, the free iOS design library for AI builders, so the model has a target to match. Constrain spacing and revisions drop fast.

Who this is for

This is for people building iOS UI with Claude, in Claude Code or the app, who get screens that look almost right but feel off because the spacing is inconsistent, and want a repeatable way to fix it.

Why AI spacing drifts

A language model generates each view somewhat independently, so without a rule it picks plausible-looking padding every time, and plausible is not consistent. The human eye reads that inconsistency as amateurish even when every screen is individually fine. The fix is the same one design systems use: a spacing scale, a small set of allowed values, usually an 8-point grid. The HIG layout guidance covers spacing and margins, the Human Interface Guidelines cover the broader rhythm, and SwiftUI is where you enforce it in code.

Approach	Output target	How it pins spacing
CSS variables	React Native or web styling	One token set, referenced everywhere
Swift spacing enum	SwiftUI	Named constants, no raw numbers
8-point grid	Either	4, 8, 16, 24, 32 only
VP0 reference	Either	A concrete rhythm to match

The prompt pattern

Give the model the scale and forbid raw numbers. For SwiftUI:

Define a spacing enum with values s4 equals 4, s8 equals 8, s16 equals 16, s24 equals 24, s32 equals 32. Build this screen using only these spacing tokens for all padding and spacing, never raw numbers. Match the layout rhythm of this VP0 design: [paste VP0 link].

For React Native or web-styled output, define the same scale as CSS variables (or a tokens object) and instruct the model to reference only those. The pairing matters: the token scale enforces consistency, and the VP0 reference gives the model the actual rhythm to aim for. For related quality workflows, see how to make an AI app look native on iOS, how to fix AI React Native shadow hallucinations, a Figma Material to iOS Swift converter, and Cursor rules for a SwiftUI native mobile template.

Make it stick across screens

Define the tokens once and reference them in every prompt for the project, so screen two matches screen one. When the model slips back to raw numbers, point at the scale and name the offending value. Keeping the token set in your project rules or a pinned context means you do not re-explain it each time. Used consistently, this turns spacing from a per-screen negotiation into a solved problem, often cutting layout-fix rounds by 3x because you are no longer correcting numbers by hand.

Common mistakes

The first mistake is letting the model use raw numbers, which guarantees drift. The second is defining tokens but not requiring them in the prompt. The third is a different scale per screen instead of one project-wide set. The fourth is no reference, so the model has no target rhythm. The fifth is ignoring the 8-point grid that aligns with iOS conventions.

One more authoritative reference worth knowing: the W3C WCAG contrast guidance asks for a contrast ratio of at least 4.5 to 1 on normal text.

Key takeaways

• AI spacing drifts because nothing constrains it; a token scale fixes that.
• Use an 8-point grid as CSS variables or a Swift enum and forbid raw numbers.
• Pair the token prompt with a free VP0 reference for the target rhythm.
• Define the scale once and reuse it across every screen in the project.
• Constraining spacing cuts layout-fix rounds dramatically.

Frequently asked questions

How do I force consistent iOS spacing when prompting Claude? Give it a fixed spacing scale as CSS variables or a Swift enum, require only those tokens, and pair it with a VP0 design reference for the target rhythm.

Why does AI-generated UI have inconsistent margins? Nothing constrains it, so the model picks padding ad hoc per view. Define a token scale and require it and the inconsistency disappears.

Should I use CSS variables or SwiftUI constants for spacing? CSS variables for React Native or web styling, a Swift enum for SwiftUI. Both give one source of truth the AI must reference.

What spacing scale should I use for iOS? An 8-point grid, 4, 8, 16, 24, 32, with 4 for tight cases, which aligns with iOS conventions and keeps rhythm consistent.