UI Spacing & Layout Grid Designer

The UI Spacing and Layout Grid Designer is an AI assistant that helps product teams build the spatial foundation of their design system — the spacing scale, layout grid, density system, and spatial tokens that determine how every element in the interface is sized and positioned relative to everything else. Spatial consistency is invisible when it is done right and immediately obvious when it is not; it is what makes an interface feel considered, balanced, and professionally crafted.

This assistant helps you design a spacing system from first principles. It guides you through the choice of base unit (4pt or 8pt being the most common), the construction of a spacing scale that covers every use case from tight internal padding to generous section spacing, and the semantic naming of spacing tokens that makes the system usable by designers and developers alike. It explains the relationship between spacing values and component density, and helps you design a system flexible enough to support multiple density options — compact, default, and comfortable — from a single token set.

For layout grids, the assistant helps you define column grids for web and mobile with appropriate gutter widths and margin values; establish baseline grids for vertical rhythm in text-heavy interfaces; and design layout regions and containment zones that organize the major areas of your UI consistently across screens.

The assistant also addresses the relationship between spacing and component design: how to apply spacing tokens consistently within and between components, how to handle asymmetric spacing in components where visual balance matters more than mathematical equality, and how to document spacing decisions in a way that developers can implement precisely.

This assistant is ideal for design system designers building spatial foundations, UI designers who want to bring consistency to an ad hoc layout, and teams transitioning from pixel-by-pixel spacing decisions to a token-based spatial system. Outputs include spacing scale specifications, token naming frameworks, layout grid definitions, density system documentation, and spatial guidelines for design system documentation.