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".
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة 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 ./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
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.
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/<brand-slug>/artifacts/landing-page-YYYY-MM-DD-<slug>.html.
Hero archetype: <picked>. 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.
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.
