---
name: landing-page-designer
description: "Conversion-first landing pages: hero, social proof, features, pricing, FAQ — wireframe to Figma to code. Designs high-converting landing pages with the proven section structure (hero → problem → solution → features → proof → pricing → FAQ → CTA) and the visual hierarchy that drives signups."
license: MIT
---

# Landing Page Designer

Landing Page Designer takes a product positioning and turns it into a conversion-oriented landing page, moving from a section-by-section wireframe to a Figma layout to production-ready front-end code. It's built for founders, indie hackers, and marketing engineers who know their offer but don't want to guess at section order, copy hierarchy, or where the CTA belongs.

## When to use it

- You're launching a SaaS or a waitlist and need a page that's structured to convert, not just look nice.
- You have a rough hero headline but no idea what comes after it.
- You want a Figma file you can hand to a designer, or React/HTML you can ship today.
- You're redesigning an existing page that has a high bounce rate and want to diagnose the funnel.

## What it does

The skill works from a fixed, evidence-based section spine: **hero → problem → solution → features → social proof → pricing → FAQ → final CTA**. For each section it produces copy, a layout spec, and visual-hierarchy notes (what the eye hits first, contrast on the primary button, F-pattern vs. Z-pattern scanning).

Output is staged so you can stop at any point:

1. **Wireframe** — a low-fidelity ASCII/markdown blockout of every section with placeholder copy and intent annotations.
2. **Figma** — via the Figma MCP tools, it generates frames, auto-layout structures, and pulls variables/styles from a connected design system when one exists.
3. **Code** — semantic, responsive markup (Tailwind utility classes by default; plain CSS or component variants on request) with accessible buttons, headings, and a single dominant CTA per viewport.

## Usage

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/landing-page-designer/SKILL.md https://claudeskil.com/skills/landing-page-designer/SKILL.md

# then, in a session:
"Design a landing page for Mailwarm — a cold-email
 deliverability tool for B2B sales teams.
 Tone: technical, no hype. Output: wireframe first,
 then Tailwind + React."
```

It will return the wireframe, wait for your sign-off, then build the page. Ask for "just the hero variants" or "skip pricing, we're pre-revenue" to scope it down.

## Tips & gotchas

- **Lead with the wireframe.** Approving section order before any pixels are placed saves the most rework — the structure is where conversion is won or lost.
- **One primary CTA per section.** If you ask for multiple competing buttons, the skill will flag it; secondary actions are styled as ghost/text links on purpose.
- **Figma export needs a connected file.** Without the Figma MCP authenticated, it falls back to wireframe + code only.
- **Social proof beats feature lists.** If you have no testimonials yet, it'll suggest credible substitutes (logos, usage counts, founder quote) rather than padding the page.

## FAQ

**Does it write the copy too?**
Yes — headlines, subheads, feature blurbs, and FAQ entries. You supply the product facts; it handles the framing and hierarchy.

**Can I use my own design system?**
Yes. If a Figma library or token set is connected, it pulls your colors, type scale, and components instead of inventing new ones.

**What framework does the code target?**
React + Tailwind by default. Ask for plain HTML/CSS, Vue, or Astro and it adapts the same structure.