What problem does it solve? AI-generated layouts often use arbitrary pixel values, inconsistent alignment, and no grid, producing screens where nothing reads as more important than anything else. This Skill replaces ad-hoc spacing with a systematic approach: one base unit, a token scale, a grid, and deliberate use of proximity and whitespace. ## Core Features & Use Cases - Spacing and sizing system: Enforces a single 8px or 4px base unit with a numeric token scale, unifying margins, padding, gutters, and component sizes. - Grid selection and alignment: Chooses column, modular, manuscript, or hierarchical grids based on content type, with standard 12/8/4 column counts for desktop, tablet, and mobile. - Hierarchy through space: Uses proximity, external-vs-internal spacing, and whitespace to group related elements and rank importance. - Use Case: When asked to design a dashboard layout, the Skill establishes an 8px base unit, applies a responsive column grid, groups cards with consistent gutters, and hands off to aesthetics and accessibility audits before declaring the layout done. ## Quick Start Ask your assistant to design or critique a screen layout using disciplined spacing, an 8px base unit, and a responsive column grid.
