← ClaudeAtlas

design-landing-pagelisted

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/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "landing page for X", "marketing page", "product landing", "/landing-page".
slogsdon/skills-design · ★ 2 · Web & Frontend · score 73
Install: claude install-skill slogsdon/skills-design
# 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/<brand-slug>/artifacts/landing-page-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/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. Op