Layout, Spacing & Grids: AI Skill for UX Design
Layout, Spacing & Grids is an AI skill that makes your assistant lay out screens like a trained designer: one base unit, a real grid, and space that groups and ranks content. No more arbitrary pixel values.
npx skills add Uxcel-Lab/product-skills --skill ux-layout-spacing-grids
What this skill does
Helps an AI assistant create layouts that feel intentional and systematic rather than assembled from arbitrary spacing values and ad-hoc alignment.
- Establishes the layout context before making decisions: platform, density, content type, and responsiveness.
- Creates spacing and sizing from one base unit, usually 8px or 4px.
- Aligns content to columns, gutters, margins, and a consistent grid.
- Uses proximity and whitespace to group related elements.
- Builds visual hierarchy through space, position, and size.
- Plans how the layout should reflow across breakpoints.
- Flags context-dependent choices instead of applying every layout rule at once.
When to use it
Use it when you need an AI assistant to:
- design or critique a layout;
- define spacing, padding, or margins;
- create spacing and sizing tokens;
- choose a grid or column system;
- fix inconsistent alignment;
- improve spatial hierarchy;
- adapt a design across desktop, tablet, and mobile.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Base unit | 8px for most product interfaces, 4px for dense interfaces |
| Grid type | Column, modular, manuscript, or hierarchical |
| Layout model | Fixed, fluid, or responsive |
| Sizing approach | Element-first or content-first |
| Composition | Symmetric or asymmetric |
| Token model | Numeric scale only or semantic aliases |
| Grid breaking | Deliberate exception or strict alignment |
How the skill works
1
Establish context
The skill identifies the platform, density, content type, and responsive requirements.
2
Apply the core system
It defines a base unit, spacing scale, grid, alignment rules, proximity, whitespace, and hierarchy.
3
Surface trade-offs
It presents the layout choices that depend on context and explains where each option works best.
Try it with
Build a spacing scale and responsive grid for a finance dashboard.
Review this settings screen and fix inconsistent spacing and alignment.
Adapt this desktop layout to tablet and mobile without rebuilding the structure.
Improve the visual hierarchy of this landing page using spacing and position.
Related skills
1.0.0
MIT
UX Design
Foundations
