## Example 1: Marketing Landing Page

**Request:** Build a landing page for a developer tools SaaS product. The page should have a hero section, feature grid, pricing table, and footer.

**What a generic agent would do:**
- Purple gradient hero with white text
- Inter font everywhere
- 3 feature cards with identical padding
- No visual hierarchy between sections
- "Lorem ipsum" placeholder text

**What this skill produces:**

### Aesthetic Decision
**Chosen: Editorial** — Developer tools need to feel professional and trustworthy. Editorial aesthetic (inspired by Stripe and Linear) communicates competence without trying too hard.

### Typography
- Display: Geist Sans, bold, 56px/1.1 for hero headline
- Body: Geist Sans, regular, 17px/1.7 for paragraphs
- Code: JetBrains Mono, 14px for code snippets
- Scale: xs(13), sm(15), base(17), lg(21), xl(28), 2xl(40), 3xl(56)

### Color Palette
- Background: #fafafa (warm off-white)
- Surface: #ffffff (cards, elevated elements)
- Text primary: #1a1a1a (near-black, never pure black)
- Text secondary: #6b6b6b (muted)
- Text tertiary: #999999 (labels, hints)
- Accent: #2563eb (blue — trustworthy, not playful)
- Accent hover: #1d4ed8
- Border: #e5e5e5
- Success: #16a34a, Error: #dc2626

### Spacing Scale
Using 4px grid: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

### Layout
- Single column, max-width 720px for content
- Full-bleed sections with internal 80px padding
- 12-column grid for feature cards (3 columns on desktop, 1 on mobile)

### Implementation

```html
<!-- Hero Section -->
<header class="hero">
  <div class="hero-content">
    <p class="hero-label">Developer Tools</p>
    <h1 class="hero-title">Ship faster with confidence</h1>
    <p class="hero-subtitle">
      Tools that integrate into your workflow, not the other way around.
      Built for teams that care about code quality.
    </p>
    <div class="hero-actions">
      <a href="/signup" class="btn btn-primary">Get started free</a>
      <a href="/docs" class="btn btn-secondary">Read the docs</a>
    </div>
  </div>
</header>

<!-- Feature Grid -->
<section class="features">
  <div class="features-grid">
    <div class="feature-card">
      <div class="feature-icon"><!-- SVG --></div>
      <h3 class="feature-title">Type-safe by default</h3>
      <p class="feature-desc">Full TypeScript support with zero configuration.</p>
    </div>
    <!-- ... more cards ... -->
  </div>
</section>
```

```css
:root {
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-accent: #2563eb;
  --color-border: #e5e5e5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-20: 80px;
}

.hero {
  padding: var(--space-20) var(--space-6);
  max-width: 720px;
  margin: 0 auto;
  text-align: left; /* Never center long-form text */
}

.hero-title {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-4) 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 36px;
  }
}
```

---

## Example 2: Dashboard with Data

**Request:** Build a dashboard page that shows user analytics: total users, active users, revenue, and a line chart of growth over time.

**What a generic agent would do:**
- 4 cards in a row with numbers
- A chart below
- Everything centered
- No clear hierarchy — all cards look the same

**What this skill produces:**

### Aesthetic Decision
**Chosen: Minimal** — Dashboards need to present data clearly without visual noise. Minimal aesthetic keeps the focus on the data.

### Visual Hierarchy
1. **Primary:** The line chart (takes 60% of viewport height, full width)
2. **Secondary:** The 4 metric cards (smaller, below the chart)
3. **Tertiary:** Navigation, filters, date range picker (top bar, muted)

### Typography
- Metric value: Geist Mono, 32px, bold, --color-text
- Metric label: Geist Sans, 13px, --color-text-secondary
- Chart labels: Geist Sans, 11px, --color-text-tertiary
- Page title: Geist Sans, 24px, semibold

### Color Palette
- Background: #111111 (dark mode for dashboards — reduces eye strain)
- Surface: #1a1a1a
- Surface elevated: #222222
- Text primary: #f5f5f5
- Text secondary: #888888
- Accent: #22c55e (green for positive metrics)
- Chart line: #3b82f6 (blue — clear on dark)
- Negative metric: #ef4444 (red)
- Border: #2a2a2a

### Layout
- Full-width chart section
- 4-column metric grid below (2 columns on mobile)
- Sidebar navigation (collapsible)
- Top bar with filters

### Component Design

```html
<main class="dashboard">
  <header class="dashboard-header">
    <h1>Analytics</h1>
    <div class="date-filter">
      <button class="filter-btn active">7 days</button>
      <button class="filter-btn">30 days</button>
      <button class="filter-btn">90 days</button>
    </div>
  </header>

  <section class="chart-section">
    <div class="chart-header">
      <h2>User Growth</h2>
      <span class="chart-period">Jan 1 - Jan 7, 2026</span>
    </div>
    <div class="chart-container">
      <!-- Chart rendered here -->
    </div>
  </section>

  <section class="metrics-grid">
    <div class="metric-card">
      <span class="metric-label">Total Users</span>
      <span class="metric-value">12,847</span>
      <span class="metric-change positive">+12.3%</span>
    </div>
    <div class="metric-card">
      <span class="metric-label">Active Users</span>
      <span class="metric-value">3,291</span>
      <span class="metric-change positive">+8.1%</span>
    </div>
    <div class="metric-card">
      <span class="metric-label">Revenue</span>
      <span class="metric-value">$48,294</span>
      <span class="metric-change negative">-2.4%</span>
    </div>
    <div class="metric-card">
      <span class="metric-label">Conversion</span>
      <span class="metric-value">3.2%</span>
      <span class="metric-change positive">+0.4%</span>
    </div>
  </section>
</main>
```

```css
.dashboard {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-8);
}

.chart-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  min-height: 400px; /* Chart gets visual priority through size */
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.metric-change {
  font-size: 13px;
  font-weight: 500;
}

.metric-change.positive { color: #22c55e; }
.metric-change.negative { color: #ef4444; }

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
```

### Why This Works
- Dark background reduces eye strain for data-heavy interfaces
- Chart gets visual priority through size and position
- Metric cards use monospace numbers for alignment and readability
- Green/red color coding is immediately understood
- Mobile layout degrades gracefully to 2-column grid
- No decorative elements — every pixel serves a purpose