Skip to content
Content
Skill

/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

Boost this skill
@slogsdonslogsdon@slogsdon
From plugin
skills-design
319 skills
Install
$ npx -y skills add slogsdon/skills-design --skill design-landing-page --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/design-landing-page

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

design-landing-page.SKILL.md
name: design-landing-page
description: |
  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".

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

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. Optional supporting hero copy — 1-2 sentence dek
4. Three feature points:
   a. <name>: <2-sentence description>
   b. <name>: <2-sentence description>
   c. <name>: <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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><Page topic></title>
<meta name="description" content="<dek or summary>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--type-sans-family);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv11', 'kern';
}

/* Layout container — 1180px max width, 24px gutter, mobile responsive */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* === Site header === */
.site-header { padding: 24px 0; }
.site-header__bar { display: flex; justify-content: space-between; align-items: baseline; }
.wordmark { font-family: var(--type-display-family); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; color: var(--color-ink); }

/* === Hero — per chosen archetype === */
.hero {
  padding: 96px 0 144px;
  /* If `inverse-text` archetype: */
  /* background: var(--color-ink); color: var(--color-surface); margin-top: -24px; padding-top: 120px; */
}
.hero h1 {
  font-family: var(--type-display-family);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
}
.hero h1 .accent { color: var(--color-accent); }
.hero .dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 32px 0 48px;
}

/* === Feature blocks — consistent grid, NO icons-in-circles === */
.features {
  padding: 96px 0;
  border-top: 1px solid var(--color-rule);
}
.features__head { margin-bottom: 64px; }
.features__head h2 {
  font-family: var(--type-display-family);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 28ch;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.feature {
  /* No card. No icon. No circle. Just a numbered text block. */
}
.feature__num {
  font-family: var(--type-mono-family);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--color-ink-3);
  margin-bottom: 16px;
}
.feature__nu
Read more
Read it on GitHub ↗
Ships withskills-design

Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.

Get the whole plugin
Stats
JavaScriptHTMLCSSGitHubAnthropic
3
Stars
0
Forks
Active
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: slogsdon/skills-design

In this plugin
19 skills
See everything inside

Other skills on skills-design.

See all 19 skills in skills-design