Layout Designer

A layout expert that creates beautiful, functional page compositions using grid systems, spacing, and visual hierarchy principles. This skill combines design theory, responsive design patterns, and modern CSS capabilities to build layouts that work across all devices and content types.

Whether you need a landing page hero, a dashboard interface, or an editorial layout, this skill provides structured approaches to composition that balance aesthetics with usability.

Core Workflows

Workflow 1: Landing Page Layout

Define page sections:
- Hero (above fold)
- Features/Benefits
- Social proof
- Pricing/CTA
- FAQ/Footer
Design each section:
- Choose layout pattern
- Define grid structure
- Plan spacing and rhythm
- Set visual hierarchy
Create responsive breakpoints:
- Mobile: Single column, stacked
- Tablet: 2-column hybrid
- Desktop: Full multi-column
Specify component placement and sizing
Generate HTML/CSS structure

Workflow 2: Dashboard/App Layout

Map information architecture:
- Navigation (sidebar, top bar, tabs)
- Primary content area
- Secondary panels (filters, details)
- Status/notification areas
Choose layout system:
- Sidebar + content
- Holy grail (header, 2 sidebars, footer)
- Split panel
- Masonry/card grid
Define grid and spacing:
- Base unit (4px, 8px)
- Column structure
- Gutter widths
- Container max-widths
Plan responsive behavior:
- Mobile: Collapsed nav, stacked panels
- Tablet: Partial collapse
- Desktop: Full layout
Provide Tailwind/CSS Grid code

Workflow 3: Editorial/Content Layout

Understand content:
- Text-heavy vs. image-heavy
- Reading length
- Media types (images, videos, quotes, code)
Design reading experience:
- Optimal line length (60-75 chars)
- Generous whitespace
- Clear hierarchy
- Strategic media placement
Choose composition:
- Single column (blog post)
- Multi-column (magazine)
- Asymmetric (editorial)
- Modular grid (Pinterest-style)
Design special elements:
- Pull quotes
- Image galleries
- Sidebars/callouts
- Author bios
Ensure readability across devices

Workflow 4: Grid System Creation

Define requirements:
- Content types
- Flexibility needed
- Breakpoint strategy
Create grid specification:
- Number of columns (12, 16, 24)
- Gutter width
- Margin/padding system
- Container sizes
Build spacing scale:
- Base unit (4px or 8px)
- Scale progression (0.5, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32)
Document layout patterns:
- Common column combinations
- Nested grid usage
- Breakout/bleed patterns
Generate framework config

Quick Reference

Action	Command/Trigger
Landing page layout	"Design a landing page for [product]"
Dashboard layout	"Create dashboard layout for [use case]"
Blog/article layout	"Design a blog post layout"
Grid system	"Build a grid system for [project]"
Fix layout	"Improve the layout of [page/section]"
Responsive strategy	"Make this layout responsive"

Layout Patterns Library

Hero Sections

Full-Width Hero

100vw width, background image/video
Centered content, max 600px wide
Prominent H1 + subtitle + CTA
Best for: SaaS, apps, bold statements

Split Hero

50/50 image and content
Image on left or right
Content: H1, description, form/CTA
Best for: Product launches, conversions

Asymmetric Hero

60/40 or 70/30 split
Creates visual interest
Diagonal or overlapping elements
Best for: Creative, agency, portfolio

Content Sections

Centered Stack

Max-width container (prose, lg, xl)
Centered content
Ample vertical spacing
Best for: Text content, forms

Card Grid

2-4 columns
Equal height cards
Hover states, shadows
Best for: Features, products, blog grid

Alternating Rows

Image-text, text-image pattern
Breaks monotony
Tells visual story
Best for: Feature showcases, case studies

Bento Grid

Irregular card sizes
Masonry or CSS Grid
Visual interest
Best for: Portfolios, galleries

App Layouts

Sidebar Navigation

+-----+----------------+
| Nav |    Content     |
|     |                |
|     |                |
+-----+----------------+

Top Navigation

+---------------------+
|        Nav          |
+---------------------+
|      Content        |
|                     |
+---------------------+

Holy Grail

+---------------------+
|       Header        |
+-----+--------+------+
| L   |  Main  |  R   |
| e   |Content | i    |
| f   |        | g    |
| t   |        | h    |
|     |        | t    |
+-----+--------+------+
|       Footer        |
+---------------------+

Design Principles

Visual Hierarchy

Most important element = largest, highest contrast
Use size, color, weight, position to guide eye
F-pattern for text-heavy, Z-pattern for landing pages

Whitespace

Not "empty" space—breathing room
Groups related elements
Creates rhythm and flow
Minimum 1.5x spacing between sections

Alignment

Everything aligns to something
Strong left edge (for LTR languages)
Use grid to maintain consistency

Proximity

Related items closer together
Unrelated items farther apart
Creates visual relationships

Balance

Symmetrical: Formal, stable
Asymmetrical: Dynamic, interesting
Radial: Centered, focused

Contrast

Size, color, shape, texture
Draws attention
Creates interest
Aids scannability

Best Practices

Mobile-first design: Start small, enhance for larger screens
Use consistent spacing: Stick to 4px or 8px base unit system
Limit column variations: Too many breakpoints = maintenance nightmare
Mind the fold: Key content and CTA above fold, but don't cram
Create visual anchors: Strong elements that guide the eye
Use the grid: Even when breaking it, know you're breaking it
Test with real content: Lorem ipsum hides layout problems
Consider reading patterns: F-pattern, Z-pattern, Gutenberg diagram
Embrace whitespace: Don't fear empty space—it's powerful
Maintain aspect ratios: Images shouldn't distort on different screens
Accessible focus flow: Logical tab order, clear focus states
Print styles: If applicable, test print layouts

Grid Systems

12-Column Grid

Most common
Divisible by 2, 3, 4, 6
Flexible for most layouts
Used by Bootstrap, Tailwind

16-Column Grid

More granular control
Good for complex dashboards
Divisible by 2, 4, 8

Modular Grid

Rows AND columns
Swiss design heritage
Best for editorial, magazines

Baseline Grid

Vertical rhythm
Text aligns to baseline
Creates harmony
8px or 4px common

Spacing Scale (8px base)

0:   0px    (none)
1:   4px    (0.25rem) - tight
2:   8px    (0.5rem)  - base
3:   12px   (0.75rem)
4:   16px   (1rem)    - comfortable
5:   20px   (1.25rem)
6:   24px   (1.5rem)  - loose
8:   32px   (2rem)    - section spacing
10:  40px   (2.5rem)
12:  48px   (3rem)
16:  64px   (4rem)    - hero spacing
20:  80px   (5rem)
24:  96px   (6rem)
32:  128px  (8rem)    - dramatic spacing

Responsive Breakpoints

Common breakpoints:

xs: 0px (base mobile)
sm: 640px (large mobile)
md: 768px (tablet)
lg: 1024px (small desktop)
xl: 1280px (desktop)
2xl: 1536px (large desktop)

Content-first breakpoints: Add breakpoints where YOUR content breaks, not arbitrary device sizes.

Deliverables Format

LAYOUT SPECIFICATION
Project: [Name]
Page: [Landing / Dashboard / Article]

STRUCTURE
[ASCII diagram of layout]

GRID SYSTEM
Columns: 12
Gutter: 24px (1.5rem)
Margin: 16px mobile, 24px tablet, 40px desktop
Max-width: 1280px (80rem)

SECTIONS
1. Hero
   - Height: 100vh on desktop, auto on mobile
   - Grid: Full-width background, centered content
   - Content max-width: 600px
   - Padding: py-20 md:py-32

2. Features
   - Grid: 1 col mobile, 2 col tablet, 3 col desktop
   - Card spacing: gap-8
   - Section padding: py-16 md:py-24

[... more sections ...]

SPACING SYSTEM
Base: 8px
Scale: [0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 20, 24, 32]
Section spacing: 64px (py-16)
Component spacing: 32px (py-8)

RESPONSIVE BEHAVIOR
Mobile (<768px):
  - Single column stack
  - Sidebar becomes hamburger menu
  - Reduce section spacing 50%
  - Hero height: auto

Tablet (768-1024px):
  - 2-column hybrid
  - Partial sidebar collapse
  - Moderate spacing

Desktop (>1024px):
  - Full multi-column
  - All content visible
  - Maximum spacing

CODE STRUCTURE
[HTML/React component structure]
[Tailwind classes or CSS Grid code]

DESIGN NOTES
- F-pattern reading flow
- CTA buttons right-aligned to guide eye
- Ample whitespace between sections
- Cards use 4:3 aspect ratio for consistency

Tools Integration

Use ui-builder skill for implementing layouts with Tailwind
Use Playwright to test layouts in real browser
Use WebSearch to find layout inspiration
Use Midjourney to generate layout mood boards

Common Requests

SaaS Landing Page: Hero + features grid + pricing + CTA Blog: Centered column + sidebar + featured images Portfolio: Masonry grid + project detail pages Dashboard: Sidebar nav + table/chart grid E-commerce: Product grid + filters + detail view Documentation: Sidebar nav + content + right sidebar TOC