# Design Landing Page > Generate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero (full-viewport) + 3 feature blocks + CTA. Designed to be opened in a browser, iterated on, and deployed as-is. Reads ./design//DESIGN.md, tokens.css, and components.html. Triggers include "landing page for X", "marketing page", "product landing", "/landing-page". - Skill: `slogsdon/design-landing-page` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add slogsdon/design-landing-page` - Raw SKILL.md: https://api.skillmd.com/api/skills/slogsdon/design-landing-page/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: slogsdon (https://skillmd.com/u/slogsdon) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/slogsdon/design-landing-page --- # Skill: landing-page Produces a deliverable landing-page HTML file at 1440px design width, fully responsive (CSS-only, no JavaScript). This is **NOT** a screenshot-target artifact like the platform skills — it's a real page meant to be opened in a browser, iterated on, and (eventually) deployed. There is no `.canvas` div. The page IS the page. The anti-pattern rules apply with extra force here. Landing pages are the format where AI-default templates are most obvious: centered hero with template "[Big Word] [Subheading] [Button]", icon-grid features with circles, blue CTA buttons. This skill exists to NOT produce that. ## When to use - User is launching a product, service, project, or initiative and needs a landing page - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, page topic / thing being launched, hero claim (sentence-case ending in period) - **Required:** 3 feature points (each: short name + 2-sentence description) - **Required:** CTA text + destination (e.g. "Read the documentation" → URL) - **Optional:** logo / brand mark variant, footer details, supporting hero copy ## Output `./design//artifacts/landing-page-YYYY-MM-DD-.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design//tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Page topic — what is this landing page for? (1 sentence) 2. Hero claim — the dominant headline, sentence-case ending in period (max ~14 words) 3. Optional supporting hero copy — 1-2 sentence dek 4. Three feature points: a. : <2-sentence description> b. : <2-sentence description> c. : <2-sentence description> 5. CTA text + destination URL (e.g. "Read the documentation" → /docs) 6. Footer details — copyright line, secondary links (about, contact, GitHub, etc.) ``` ### 3. Pick variation — HERO archetype is the lever The hero section carries the page's identity. Pick ONE: - `headline-led` — display headline dominates; everything else subordinated. Most editorial. - `inverse-text` — full hero in dark inversion (canonical v2 feature treatment). Reads as confident. - `object-of-content` — the hero looks like a fragment of the actual product (a screenshot-style mock, a transcript, a code excerpt). The page sells the thing by SHOWING it. - `pattern-led` — typographic pattern fills hero; headline is the punctum. Risky for landing pages — may confuse first-time visitors. Use only if the brand has earned it. - `chrome-led` — eyebrow + headline + dek + CTA-row — the AI-editorial default. **Last resort.** If you reach for this, ask why. Feature blocks always use a CONSISTENT layout (3-column grid OR vertical stack) — the variation lever is on the hero only. Feature blocks don't get cards-with-icons-in-circles. CTA section uses the brand's accent color ONLY on the action — never on a button background. The CTA is a `.btn-arrow` (text + arrow), not a filled button. ### 4. Generate the HTML Template: ```html <Page topic>

[hero claim, with optional [one word] in accent]

[supporting dek — 1-2 sentences]

[primary CTA text]

[features section headline — sentence-case ending in period]

01 · [feature short label]

[feature 1 name]

[feature 1 description]

02 · [feature short label]

[feature 2 name]

[feature 2 description]

03 · [feature short label]

[feature 3 name]

[feature 3 description]

[secondary CTA framing — invitation, sentence-case ending in period]

[primary CTA text]

``` ### 5. Verify - [ ] Page renders at 1440px AND at 375px (mobile) without horizontal scroll - [ ] Hero archetype documented — NOT `chrome-led` unless explicitly justified - [ ] Feature blocks have NO icons-in-circles, NO cards-with-shadows, NO centered-template layouts — just numbered text blocks - [ ] CTA is `.btn-arrow` (text link with arrow) — NOT a filled blue button - [ ] `.accent` color used on AT MOST one word in the hero headline - [ ] **Read `../../design-anti-patterns.md` and verify the page violates none of its rules.** Pay special attention to sections 1 (no orbs, no gradients, no isometric illustrations, no stock photo cliches), 2 (no italics-emphasis OR single-word color emphasis as default), 4 (architecture must reach inner blocks; no center-aligned hero with template), and 6 (no marketing-phrase clichés — "single pane of glass", "digital transformation", "next-generation") - [ ] No animation on scroll (no fade-ins, no parallax, no slide-up) - [ ] All copy is sentence-case ending in period per brand voice - [ ] No exclamation points anywhere > Landing page generated at `./design//artifacts/landing-page-YYYY-MM-DD-.html`. > > Hero archetype: ``. Open in a browser at 1440px AND 375px to verify responsive behavior. Iterate by editing the file directly — there is no canvas to screenshot. > > To deploy: drop the file on any static host (GitHub Pages, Netlify, Vercel). It works as-is. ## Anti-Slop Rules Governed by three shared canonical references — read them, do not restate them: - **`../../design-anti-patterns.md`** — the hard floor. Wins every conflict. - **`../../design-principles.md`** — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension). - **`../../design-variation-sop.md`** — the named-aesthetic roster + the procedure for varying every invocation. **Forbidden (fast scan — the references hold the full list):** - Indigo/violet/purple as default accent or primary — the `hsl(230–280)` family on a near-white surface. The single loudest AI tell. - Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text. - Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere. - The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton. - One global border-radius on every element; timid evenly-weighted low-contrast palette. - Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster. - Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value. **Required variation (every invocation):** - Make at least **two** intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand. - Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1). - Sketch **three distinct directions**, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3). **Authenticity:** prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders. ## Rules - **Deliverable HTML, not a screenshot artifact.** No `.canvas` div. The page IS the deliverable. - **CSS-only responsive.** No JavaScript for layout. The page works with JS disabled. - **Hero archetype must NOT default to `chrome-led`.** That's the AI-editorial template — pick a different archetype unless the brand specifically requires it. - **Feature blocks have no icons.** Numbered text blocks only. Icons-in-circles are the SaaS-template tell this skill exists to avoid. - **CTA is text + arrow.** No filled buttons. The brand uses `.btn-arrow`; this skill respects that. - **Token-pure.** Every visual value via `var(--*)` from tokens.css. Only literal values: `1px` for hairlines. - **Anti-pattern compliance.** This skill defers to three shared canonical references: `../../design-anti-patterns.md` (the hard floor — wins every conflict), `../../design-principles.md` (the craft floor), and `../../design-variation-sop.md` (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. Landing pages are the highest-risk format for AI-default tells; verify carefully.