landing-page

Starter

Appears as a one-click chip in the workspace.

Build a polished single-page marketing landing page with hero, features, social proof, and CTA. Use when the user asks for a landing page, product launch page, waitlist page, or "splash" page for a startup/product. Prefer scaffold-next for production polish; scaffold-vanilla for a one-file demo.

Scaffolds

vanilla

Verified dependencies

framer-motion

lucide-react

clsx

tailwind-merge

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a landing page for an AI productivity startup

Make a product launch page with a single CTA

Design a waitlist page with a hero and email signup

Build a coming-soon page for a luxury watch brand

Instructions

The full instruction set the agent receives when this skill is active.

Landing Page

A landing page lives or dies on its first 800 pixels. Lead with a sharp hero, prove value fast, end with a single confident CTA.

Structure

Hero — one headline (max 8 words), one subhead (one sentence), one primary CTA. No carousels, no rotating taglines.
Value props — 3 features in a row, each with an icon, 2-word label, and one-sentence body. Use lucide-react icons in scaffold-next.
Social proof — logos, testimonials, or a single big number. Skip if you don't have real content; an empty "trusted by" rail looks worse than no rail.
Pricing or details — optional, only if the product is a paid tool with clear tiers.
Final CTA — repeat the primary action, larger, with a single supporting line. Same button label as the hero CTA.

Visual Language

Pick one accent color and use it for primary actions only. Body text, headlines, and decoration stay in a neutral scale.
Hero typography should be at least text-6xl md:text-7xl in scaffold-next. Don't be timid.
Use framer-motion for one staggered-reveal animation on hero load — that's it. Resist the urge to animate every section.
Background: solid color, subtle gradient mesh, or a single decorative element (grid pattern, noise overlay). Never stack three.

Avoid

Centered hero with purple gradient on white — instant AI cliché.
Three-column "Why us?" sections with vague claims ("Fast", "Reliable", "Secure"). If you write that, you wrote nothing.
Carousels, modal sign-up popups, animated counters.
Stock-photo people. Use a product screenshot, illustration, or geometric shape.

Implementation Notes

scaffold-next: put the page in app/page.tsx. Use next/font/google for a distinctive heading font (e.g., Fraunces, Bricolage Grotesque, Instrument Serif). Use <Image> for any imagery.
scaffold-vanilla: single index.html with <style> block; Google Fonts via <link>. Avoid frameworks; lean on CSS Grid + custom properties.

See also: [[frontend-design]] for aesthetic direction; [[theme-kit]] for palette starting points; [[brand-kit]] if the user has brand colors/fonts.