Landing — Premium HTML Landing Page Generator
Distinct from
product-team/skills/landing-page-generator/. That skill outputs Next.js TSX components optimized for conversion / lead-gen. THIS skill outputs a single self-contained.htmlfile optimized for premium visual experience with GSAP animations. Pick by use case.
Generate a polished, self-contained .html landing page from a text prompt or brief. The output is ONE HTML file: all CSS inline in <style>, all JS inline in <script>, only external dependencies being Google Fonts + GSAP via CDN. The page is visually distinctive, animated, and production-quality.
Invocation Triggers
- "create a landing page"
- "build a landing page"
- "make a landing page for X"
- "I need a web page for Y"
- "promotional page"
- "product page"
- "one-pager"
- "web presence"
- "sales page"
- "landing for X"
Delivery Mode
In Claude Code CLI, write the file to disk at the specified path. In Claude.ai web, create an HTML artifact with the same content.
Phase 0: Grill-Me Intake (4 forcing questions, one at a time)
Dependency-ordered. Each question carries explicit "why I'm asking". Stop condition: max 4.
Q1 (root) — Product / Service
What's the product or service? Give me the name + a 1–2 sentence elevator pitch — what does it do, and who's it for?
Why I'm asking: The headline, subtext, and feature copy all derive from this. "App for productivity" produces generic boilerplate; "Async standup tool for remote engineering teams who hate Zoom" produces a landing page that converts.
Refuse mush. If user gives just a name with no pitch, push back once: "What does it do? Who's it for?" If still no pitch after push-back, deliver with explicit "generic positioning" caveat.
Q2 (depends on Q1) — Audience Register
Who's the audience? Pick one:
- Technical buyers (engineers, ops, security)
- Business buyers (PMs, execs, ops leaders)
- Consumers (general public, hobbyists)
- Internal (employees, partners — not for public sale)
Why I'm asking: Audience dictates copy register, jargon level, social-proof choices, and CTA framing. Technical buyers want specifics; consumers want benefits; internal pages can skip persuasion.
Forcing choice.
Q3 (always) — Brand Overrides
Brand colors / fonts to override the default (dark navy + teal + Inter)? Provide as: primary HEX, accent HEX, optional bg HEX. Or say "default" if you want the polished default.
Why I'm asking: The default is intentionally beautiful, but matching your brand makes the page feel native to your existing site. Even just a primary color override goes a long way.
Accept "default" or partial overrides (e.g., just primary). If only primary provided, derive accent algorithmically (lighten / darken).
Q4 (depends on Q1) — Tone
Tone — pick one:
- Professional — confident, restrained, B2B-friendly
- Playful — warm, light, occasional humor
- Authoritative — expert, data-forward, trust-building
- Minimal — terse, design-led, low copy density
Why I'm asking: Tone affects every sentence — headlines, microcopy, button text, closing copy. Picking upfront prevents tonal whiplash across sections.
Forcing choice. Recommended default: professional if Q2 = technical/business; playful if Q2 = consumer; minimal if the product is design-led.
Stop condition: After Q4, commit and generate. No follow-up questions during generation.
Content Extraction (with Fallback Strategy)
From Q1's elevator pitch, derive:
- Hero headline — punchy version of "what it does" (8–12 words)
- Hero subtext — version of "who it's for + payoff" (1–2 sentences)
- 3–6 feature bullets — distilled from pitch + audience (Q2) + tone (Q4)
- CTA text — action-oriented, matches tone
- Closing copy — short, emotive, matches tone
Fallback when input is sparse: invent compelling content from product-name semantics + audience register. Flag inferred content with a comment in the HTML source (<!-- inferred: ... -->). Don't stall waiting for more input.
Brand System Specification
Default Color Palette (Dark Navy + Teal)
:root {
--navy: #0A1628;
--navy-mid: #0D1F38;
--teal: #00D4AA;
--teal-glow: rgba(0, 212, 170, 0.12);
--amber: #F5A623;
--off-white: #F7F7F2;
--text-muted: rgba(247, 247, 242, 0.68);
--card-bg: rgba(0, 212, 170, 0.06);
--card-border:rgba(0, 212, 170, 0.15);
}
Override Pattern
When Q3 provides custom brand values, the skill substitutes them into the :root block:
Brand override:
- primary: #FF6B35 → --navy / hero bg
- accent: #2EC4B6 → --teal / CTA / highlights
- bg: #011627 → --navy-mid / section bg
- text: #FDFFFC → --off-white
If only primary provided, derive accent algorithmically (lighten 15% for accent; darken 8% for navy-mid; convert to rgba at 0.12 alpha for glow). Use scripts/brand_palette_validator.py for the deterministic derivation.
See references/brand_system_design.md for color theory + WCAG + algorithmic palette derivation canon.
Typography
- Font family: Inter (via Google Fonts)
- Weight scale: 400 (body), 500 (eyebrow), 600 (links), 700 (subtitle), 800 (H1 + H2)
- Size scale:
- Hero H1: 68–82px
- Section H2: 52–62px
- Card titles: 22px
- Body: 17–19px
- Eyebrow: 13px (uppercase, letter-spaced)
- CTA button: 18px (500 weight)
Components (Must Specify CSS)
.btn-primary— CTA button with hover state (lift + brightness).feature-card— card with hover lift (translateY(-6px) + border-brighten).eyebrow— letter-spaced (0.2em) uppercase category label
Section 1: Hero
min-height: 100vh, flex-centered content- Optional eyebrow label above H1
- H1 (68–82px, 800 weight)
- Subtitle (17–19px, 1–2 sentences)
- CTA button (.btn-primary)
- Scroll-down indicator (animated chevron, CSS bounce)
- Depth layers (mouse parallax):
.hero-shapes-back— large blurred circles, absolute-positioned, low opacity.hero-shapes-mid— smaller shapes, sharper edges, higher opacity- Content layer (H1 + subtitle) — moves subtly in same direction as mouse
Section 2: Features
- 3 columns default (
repeat(3, 1fr)grid) - Responsive:
- 2 columns at 900px breakpoint
- 1 column at 580px breakpoint
- Each card:
- SVG icon (28px, stroke=var(--teal), no fill)
- Title (22px, 700 weight)
- Description (15–16px, --text-muted)
- Hover state:
transform: translateY(-6px)border-color: var(--teal)(brighten from --card-border)transition: 0.3s ease
Section 3: Closing CTA
- Full-width,
background: var(--navy-mid) padding: 120px 24px, text-align: center- Large closing headline (52–62px, 800 weight)
- Short subtext (--text-muted, 1–2 sentences)
- CTA button with ambient radial-gradient glow behind it:
background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
Animation Patterns
See references/gsap_animation_patterns.md for the canon. Five patterns required:
1. Hero Entrance (GSAP timeline)
// MUST use gsap.set() FIRST to prevent FOUC
gsap.set([".eyebrow", ".hero h1", ".hero .subtitle", ".btn-primary", ".scroll-down"], {
opacity: 0,
y: 30
});
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".eyebrow", { opacity: 1, y: 0, duration: 0.6 })
.to(".hero h1", { opacity: 1, y: 0, duration: 0.8 }, "-=0.3")
.to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.6 }, "-=0.5")
.to(".btn-primary", { opacity: 1, y: 0, duration: 0.5 }, "-=0.3")
.to(".scroll-down", { opacity: 1, y: 0, duration: 0.4 }, "-=0.2");
2. Mouse Parallax
const hero = document.querySelector(".hero");
hero.addEventListener("mousemove", (e) => {
const x = (e.clientX / window.innerWidth