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

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

Workflow 2: Dashboard/App Layout

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

Workflow 3: Editorial/Content Layout

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

Workflow 4: Grid System Creation

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