name: landing-page description: "Builds minimal, high-taste landing pages for new product ideas. Use when asked to create a landing page, splash page, or signup page for a new project."

Landing Page Builder

Builds minimal, polished single-page landing sites for new product ideas.

Design Principles

• Minimalist above all. One page, one CTA. Eyebrow → headline → subtext → email form → footnote. No feature grids, no testimonials, no pricing sections.
• No navbar, no footer. Just centered content.
• No AI buzzwords. Describe what the product does, not what technology it uses.

Tech Stack

• Single HTML files — no build step, no framework, no bundler
• Tailwind CSS via CDN (https://cdn.tailwindcss.com) with inline tailwind.config
• Google Fonts loaded via <link> tags with preconnect
• Express server (server.js) for the signup API endpoint
• Resend for email notifications on new signups
• Static file serving via Express (express.static)
• Flat-file storage (signups.json) — no database
• Favicon as inline SVG file (favicon.svg)

Page Structure

index.html

1. Eyebrow (icon + short audience label)
2. H1 headline with accent-colored key phrase
3. One-sentence value prop paragraph
4. Email signup form (email input + submit button)
5. Low-pressure footnote
6. JS: POST to /api/signup, then redirect to /thanks.html

thanks.html

• Shares same Tailwind config, fonts, and color scheme as index.html
• Short, personality-forward headline (not "Thank you for signing up!")
• Brief follow-up message
• Back link to home page

server.js

• Express app serving static files from project root
• POST /api/signup: validates email, appends to signups.json, sends notification via Resend, returns { success: true }

Workflow

Step 1: Understand the product

Ask what the product does, who it's for, and what the desired CTA is. Get the one-sentence pitch. Figure out the right aesthetic for this specific product.

Step 2: Generate the landing page

Create index.html with the full structure. Include OG/Twitter meta tags from the start.

Step 3: Present variations for micro-decisions

When the user needs to choose between options (eyebrow text, icon style, color palette, etc.), create a variations.html file that shows all options side-by-side in labeled cards. Let the user pick visually. Then apply their choice to index.html and delete the variations file.

Step 4: Build the confirmation page

Create thanks.html matching the same design system.

Step 5: Wire up the backend

Create server.js with Express + Resend. Create package.json with only the needed deps.

Step 6: Create the favicon

Extract or create a simple SVG icon related to the product domain. Save as favicon.svg.

Step 7: Iterate on copy

Expect rapid small changes. Apply them immediately. If he says "revert," undo the last change instantly.

Step 8: Ship

When Ben says "ship," commit and push. Use descriptive commit messages. Only stage files related to the current change.

OG / Social Previews

• Always include og:title, og:description, og:image, og:type
• Always include twitter:card (summary_large_image), twitter:title, twitter:description, twitter:image

Anti-Patterns

• No hero images or illustrations
• No multi-section layouts
• No navbar or footer
• No JavaScript frameworks
• No animations beyond hover states
• No database — flat JSON file for signups