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

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.