UI spacing guide · September 30, 2026
Why is my AI-generated UI spacing wrong?
Start with grouping and the CSS value that actually reaches the element. More padding can hide a broken token or an inherited gap. It can also push mobile controls out of view.
AI가 만든 화면의 간격이 어색하다면, 같은 그룹과 다른 그룹의 간격을 나누고 실제 적용된 CSS 값을 확인하세요. 부모의 간격이 자식 화면에 넘어오는지도 살펴봅니다.
Same content. One boundary fix.
The parent declares 64px. The child owns a 12px project token. Switch the CSS to see which value reaches the child.
NOTIFICATIONS
Keep your team informed
Weekly summary
Project activity, once a week.
Measured child gap
—px
The child inherits the parent's engine alias.
Synthetic CSS regression example. This reads your browser’s computed gap; it is not a customer result or a design-quality score. The fix restores a chosen value—it does not establish that 12px is optimal.
Three checks before changing the numbers
- Group by the task. A label, field, and hint belong together. Separate that group from the next decision. Equal gaps everywhere can flatten the hierarchy.
- Read the applied value. Inspect the element’s computed gap or padding, its layout container, and its token reference. A missing or cyclic variable can collapse a gap even when the config looks correct.
- Check ownership and content. A nested screen should use its own choices. Recheck narrow widths, longer labels, empty/error states, overflow, and wrapped controls after a spacing change.
What changed in the example?
Previously, a child without its own section-gap alias could inherit 64px from its parent. StyleSeed’s CSS generator now resets its spacing aliases at nested artifact boundaries. The child can use its original 12px project token through a fallback. Explicit child overrides still work, even when parent CSS loads afterward.
Project tokens and type stay in place. The 64px → 12px result is a reproduced inheritance repair. It is not an AI model comparison, a customer outcome, or a claim that every screen needs tighter spacing.
Fixture source and limits
Canonical source: engine/.claude/skills/ss-resolve/scripts/spacing-contract.mjs. SHA-256: 275cc123618266e730082569d3d612220a98621eea2745c861d04252dbeeeb24. The parent owns 64px; the child project token is 12px. The fixed CSS is generated from the canonical engine. The before CSS deliberately reproduces the previous inheritance behavior. Only named page/toggle/copy events are sent when site analytics is enabled. No screenshot, project data, computed values, or clipboard contents are uploaded.
Try this on your own screen
The spacing on this screen feels wrong. Identify which elements belong together, then inspect their computed padding/gap and the actual CSS token values. Check whether nested screens inherit a parent spacing alias. Preserve approved project tokens and components. Explain three prioritized fixes, apply only the authorized changes, and render desktop and mobile before and after. Check overflow, wrapped controls, and unrelated screens. Report what was measured and what still needs my judgment.Paste into your coding agent and add your screen or reference.
Use your existing components and tokens as the starting point. Ask for actual rendered evidence; a rules file alone does not change the page.
Want a repeatable workflow?
Run in your project’s terminal. Copies all core skills into this project; skips the selection menus.
Another agent or install options?
For Cursor or another agent, run npx skills add bitjaru/styleseed. Choose your agent, Project, then Copy. Codex is already included under Universal. Use this interactive command to review each installer choice.
Only use one? Codex setup · Claude Code setup. If skills do not appear after installation, start a fresh agent session.
Then use $styleseed in Codex or /styleseed in Claude Code with your screen and the prompt above. New projects choose a method; existing projects preserve approved choices.
Already installed? Run $ss-update or /ss-update, recompile affected bundles, and review any copied CSS. Updating skills alone does not repair an existing screen.