# Landing Page Design

> Conversion-optimized landing page design — single-file HTML with embedded CSS, no external dependencies. Hero sections, social proof, CTA placement, A/B variants, responsive design, accessibility, and performance (<100KB). Use when generating landing pages or conversion-focused web content.

- **Type:** Skill
- **Install:** `agentstack add skill-melgarafael-growthos-landing-page-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [melgarafael](https://agentstack.voostack.com/s/melgarafael)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [melgarafael](https://github.com/melgarafael)
- **Source:** https://github.com/melgarafael/growthOS/tree/main/skills/landing-page-design

## Install

```sh
agentstack add skill-melgarafael-growthos-landing-page-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Landing Page Design Skill

Generate production-ready, conversion-optimized landing pages as **single self-contained HTML files** with embedded CSS and zero external dependencies.

## Output Constraint: Single-File HTML

Every landing page output MUST be:

- **One `.html` file** — no separate CSS, JS, or image files
- **Embedded CSS** via `` tag in ``
- **No external dependencies** — no CDNs, no Google Fonts links, no external scripts
- **System font stack** — `font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`
- **Inline SVG only** — for icons and simple graphics
- **Max file size: 100KB** — enforced, no exceptions
- **No JavaScript** unless absolutely required for a specific interaction (accordion, form validation)

```html

  
  
  
  
  
  
  
  [Page Title]
  
    /* ALL CSS embedded here */
  

  

```

## Page Structure

Every landing page follows this section order:

### 1. Hero Section (Above the Fold)

The most critical section. Must contain:

- **Headline**: Clear value proposition in 
  [Value proposition — benefit, not feature]
  [How it works in one sentence]
  [Action Verb] — [Benefit]
  [Trust signal: "Used by 10,000+ teams" or "★★★★★ 4.9/5"]

```

**Hero patterns:**

| Pattern | Best For | Structure |
|---------|----------|-----------|
| Centered | SaaS, apps | Headline + CTA centered, illustration below |
| Split | Products with visuals | Text left, visual right (stacks on mobile) |
| Gradient | Bold brands | Full-width gradient bg, white text |
| Minimal | Premium/luxury | Lots of whitespace, single strong headline |

### 2. Social Proof Section

Position immediately after hero to validate the promise.

```html

  
  Trusted by
  [Company names or inline SVG logos]

  
  
    
      "[Specific result achieved]"
      — [Name], [Title] at [Company]
    
  

  
  
    [Number][Label]
  

```

### 3. Features / Benefits Section

3-4 benefits maximum. Lead with outcomes, not features.

```html

  [Section headline — outcome-focused]
  
    
      [Inline SVG or CSS icon]
      [Benefit headline]
      [1-2 sentences explaining the benefit]
    
    
  

```

### 4. How It Works (Optional)

3-step process. Reduces cognitive load.

```html

  How it works
  
    [Step 1][Brief explanation]
    [Step 2][Brief explanation]
    [Step 3][Brief explanation]
  

```

### 5. CTA Section (Repeat)

Repeat the primary CTA with urgency or additional proof.

```html

  [Restate value proposition differently]
  [Urgency or additional benefit]
  [Same CTA text as hero]
  [Risk reversal: "No credit card required" / "Cancel anytime"]

```

### 6. Footer

Minimal. Don't distract from conversion.

```html

  &copy; [Year] [Brand]. [Optional: Privacy | Terms]

```

## Conversion Optimization (CRO) Principles

### CTA Rules

- **One primary CTA** per page — never compete with yourself
- **Above the fold** — first CTA visible without scrolling
- **Repeated** — CTA appears 2-3 times (hero, mid-page, bottom)
- **Action verb + benefit**: "Start Free Trial" not "Submit"
- **High contrast**: CTA button must have ≥4.5:1 contrast ratio
- **Size**: Minimum 44x44px touch target (mobile accessibility)

### Copy Hierarchy

1. **Headline**: Benefit-first, `, ``, ``, ``
- All images/SVGs: `alt` text or `aria-label`
- Color contrast: ≥4.5:1 for text, ≥3:1 for large text
- Focus states: Visible outline on all interactive elements
- Skip link: Hidden "Skip to content" link
- Form labels: Every input has associated ``
- `lang` attribute on `` tag

```html

  Skip to content
  ...
  ...
  ...

```

## Performance Budget

| Metric | Target |
|--------|--------|
| Total file size | <100KB |
| First Contentful Paint | <1.0s |
| CSS size | <15KB |
| No external requests | 0 |
| Inline SVG total | <20KB |

### Performance Techniques

- CSS custom properties for theming (reduces duplication)
- `prefers-reduced-motion` media query for animations
- `prefers-color-scheme` for dark mode variant (optional)
- Minimal CSS — no unused selectors
- System font stack — zero font loading time

## A/B Testing Variants

When generating a landing page, always produce a primary version and specify testable variants:

```yaml
ab_variants:
  - element: headline
    control: "[Original headline]"
    variant: "[Alternative headline]"
    hypothesis: "[Why this might convert better]"
  - element: cta_text
    control: "[Original CTA]"
    variant: "[Alternative CTA]"
    hypothesis: "[Why this might convert better]"
  - element: hero_layout
    control: "[centered | split]"
    variant: "[opposite layout]"
    hypothesis: "[Layout impact on conversion]"
```

## CSS Design System (Embedded)

```css
:root {
  /* Typography */
  --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;

  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* Colors — override per brand */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1a1a2e;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-border: #e2e8f0;
  --color-success: #059669;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* Button base */
.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }
```

## Anti-Patterns

- External font loading (Google Fonts CDN)
- JavaScript frameworks for static content
- Multiple competing CTAs
- Feature lists without benefit framing
- Stock photo placeholders (use SVG or CSS)
- Hamburger menus on landing pages (no nav needed)
- Footer with 20+ links (landing page ≠ website)
- Auto-playing video/audio
- Pop-ups or modals on load

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [melgarafael](https://github.com/melgarafael)
- **Source:** [melgarafael/growthOS](https://github.com/melgarafael/growthOS)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-melgarafael-growthos-landing-page-design
- Seller: https://agentstack.voostack.com/s/melgarafael
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.