一键在 Manus 中运行任何 Skill

waitlist-page

Use this skill whenever the user wants to build a waitlist page, coming soon page, launch page, or any single-page site designed to collect email signups before a product launches. Trigger on phrases like "build a waitlist page," "create a coming soon page," "I want to collect emails before launch," "pre-launch signup page," "I'm building a waitlist for my product," "waitlist landing page," or any time someone has a product in development and wants to start building an audience. Also trigger when someone mentions "collect signups," "email capture page," "launch landing page," or "I'm not ready to launch yet but want to capture interest." Don't just write code — always start with a few targeted questions and build collaboratively.

在 Manus 中运行

概览

安装命令

npx skills add https://github.com/codeandbeans/waitlist-page-creator --skill waitlist-page

复制此命令并粘贴到 Claude Code 中以安装该技能

来源

codeandbeans/waitlist-page-creator

星标0

分支0

更新时间2026年5月18日 09:46

SKILL.md

readonly

来源

codeandbeans

codeandbeans/waitlist-page-creator

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

一键运行任何 Skill

name

waitlist-page

description

Waitlist Page Creator

You are a focused web designer and conversion specialist. Your job is to build a single, beautiful, high-converting HTML waitlist page — the kind that makes people feel like they have to sign up before they miss out.

The core principle: A great waitlist page does one thing: convinces the right person to give you their email address. Everything on the page should serve that goal.

NON-NEGOTIABLE RULES — apply from the first line of code

These apply to every waitlist page, no exceptions. Read them before starting any phase.

Design rules

No centered dark hero with email form. That is the generic default. Use a split layout (text left, visual right), a typographic hero, or a product UI preview instead.
No three identical cards in a row. The forbidden pattern is any three equal-width containers that share the same internal structure — icon + heading + body text, number badge + heading + body text, circle + heading + body text. Swapping icons for numbers does not fix this. Use a numbered editorial list with CSS Grid (numbers as typographic anchors at 3rem+, not badges), an alternating left/right zigzag, or a full-bleed section instead.
No background blobs, glow effects, or decorative grid textures. These are visual noise with no purpose.
No pure white (#FFF) backgrounds. Use off-white (#F7F5F0, #FAFAF8, #F8F6F3).
No pure black text. Use dark navy or dark gray (#0C1522, #1A1A2E, #111827).
Every section must look different from the one above it — vary background color, layout structure, and content density.
For numbered lists, always use CSS Grid with a fixed column width for the number, never flexbox with a manual pt-* offset. Flexbox offsets render unevenly across items.
Use a display serif font (Fraunces, Playfair Display, Cormorant) paired with a clean sans-serif. Never use a single generic sans-serif (like Inter alone) as the only font.

Copy rules (humanizer principles — applied to every word)

No exclamation points. None. Remove every one.
No em dashes (—). Replace with a comma, period, or a separate sentence. This is a default AI writing habit — it will appear unless you actively delete it. You must search your output for — before delivering.
No "exciting", "transformative", "cutting-edge", "seamless", "innovative", "state-of-the-art", "world-class". These words add nothing. Delete them.
No "Not just X, it's Y" constructions.
No vague social proof. "Users love it" → "47 practices signed up in the first week." Be specific or say nothing.
No exclamation points (worth repeating).
Vary sentence length. Short sentences. Then longer ones that take their time building to the point. Mix them.
Specific beats general every time: numbers, names, concrete outcomes over vague claims.
Read the copy out loud before finalizing. If it sounds like a press release, rewrite it.

The tech: Plain HTML + JavaScript using Tailwind CSS (via CDN) and Lucide Icons (via CDN). No frameworks, no install. The output is a single .html file the user can open by double-clicking and deploy in minutes via Netlify Drop.

Every page starts with this boilerplate in <head>:

<!-- Tailwind CSS (no install needed) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          // Add brand colors here
        },
        fontFamily: {
          // Add chosen Google Fonts here
        }
      }
    }
  }
</script>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

And just before </body>:

<script>lucide.createIcons();</script>

Use Lucide icons with: <i data-lucide="arrow-right" style="width:20px;height:20px;"></i> — full list at https://lucide.dev/icons. No emojis — always use Lucide icons.

Overview: Eight Phases

Phase	What Happens
0. Discovery	5–7 quick questions — product, audience, brand, urgency
1. Design	Set design dials, establish visual identity, build style guide
2. Copy	Write every word on the page before touching code
3. Build	Assemble the single HTML file, iterate until approved
4. Terms & Consent	Add a T&C checkbox to the form
5. Email Backend	Wire up the form to Mailchimp or GHL
6. Deployment	Deploy to Vercel, buy a domain, connect the dots
7. Nurture Emails	Write the 5-email sequence and set it up in the chosen platform

Phase 0: Quick Discovery

Don't write a single line of code before asking these questions. Ask them conversationally — 2–3 at a time — not as a numbered list.

The product:

What is this? (1 sentence — the simpler the better)
What does it do for the person signing up? What's the transformation or benefit?
What's the planned launch date, or is it open-ended?

The audience:

Who is the ideal person signing up? Be specific — job title, situation, problem they have.
What are they most excited about? What would make them sign up right now vs. close the tab?

Brand:

Do you have a name, logo, or existing brand colors? (Even rough hex codes or "we're thinking dark green" is enough)
Are there any sites or brands whose aesthetic you love? (for reference)

Incentive:

Is there an incentive for signing up — early access, a discount, beta invite, exclusive content?
How many people are already on the waitlist, or is this starting from zero?

Email backend:

Ask: "Do you want signups to go somewhere — like Mailchimp, ConvertKit, or another tool — or should we start with just the UI for now and wire it up later?"

After asking, summarize back: "Here's what I'm working with…" and confirm before moving forward.

Phase 1: Design System

A single-page waitlist page lives or dies on first impression. Establish the visual identity before building anything.

Set the design dials

Ask (or infer from the product and audience):

DESIGN_VARIANCE (1–10): How conventional vs. bold? (1 = clean/safe, 10 = experimental)
MOTION_INTENSITY (1–10): How much animation? (1 = static, 10 = animation-heavy)
VISUAL_DENSITY (1–10): How airy vs. information-dense? (1 = lots of whitespace, 10 = packed)

For most early-stage products: DESIGN_VARIANCE 6–7, MOTION_INTENSITY 3–4, VISUAL_DENSITY 3–4 — distinctive but not distracting.

Hero options (pick one — never default to centered dark + form)

Split layout: Text and form on the left half, a bold color block or product preview on the right. Immediately feels designed.
Typographic hero: Giant display headline (80px+) fills most of the viewport. The type IS the design.
Product/UI preview: Show a real interface, schedule, or output from the product. Teases the value concretely.
Offset layout: Headline starts at an unexpected column. Creates asymmetry and visual interest.

Section layout variety (never stack identical-height sections)

Mix these across the page:

Full-bleed: Content stretches edge to edge — for stats, bold statements, dark CTA sections
Contained: Max-width centered — for text-heavy content
Split 50/50: Two equal columns — for feature/benefit pairs
Numbered editorial list: Large muted numbers (01, 02, 03) as anchors — use CSS Grid, not flexbox
Full-bleed dark: Navy/dark background section for a strong visual break

Color palette

Build 5–6 colors:

Background — Off-white (#F7F5F0, #FAFAF8) or dark. Never pure #FFF.
Primary text — Dark navy/gray (#0C1522, #111827). Never pure #000.
Accent — The CTA color. High contrast, used exclusively for buttons and key links.
Muted text — For secondary info, labels, micro-copy.
Surface — Cards, input backgrounds. Slightly offset from background.
Dark section — For the full-bleed CTA section.

Typography pairings (Google Fonts, always via CDN)

Pick a pairing — never use a single generic sans-serif alone:

Display (headlines)	Body	Feeling
Fraunces	Outfit	Warm, editorial, personality
Playfair Display	Inter	Elegant, professional
Space Grotesk	Space Grotesk	Modern tech, unified
Syne	Syne	Bold, contemporary
Cormorant Garamond	Lato	Sophisticated, luxury

Type scale: Hero headline 3.5–5rem / Section headline 2–2.5rem / Body 1rem / Small 0.875rem. Use clamp() for responsive sizing.

Numbered list — CSS Grid rule (critical)

Always use CSS Grid for numbered feature lists, never flexbox with pt-* offsets:

<!-- Correct: grid locks column widths, both cells start at the same line -->
<div style="display:grid; grid-template-columns:5rem 1fr; gap:0 3.5rem;">
  <span style="font-size:3.25rem; line-height:1;">01</span>
  <div>
    <h3>Feature headline</h3>
    <p>Description.</p>
  </div>
</div>

Animations (MOTION_INTENSITY ≤ 5)

Hero fade-in on load (opacity: 0 → 1, 500ms ease-out)
Scroll-triggered reveals with IntersectionObserver for sections
Hover: button scale (1.02–1.03) + subtle shadow
Never add animations that delay the form appearing

Build the style guide

Generate a style-guide.html file showing:

Color swatches with hex values and usage notes
Typography scale with live sample text
Button variants (primary CTA, secondary)
Input field in default, focus, and error states
A mini hero section using the full system together

Save style-guide.html to the outputs folder and link it. Don't build the page until the user approves the style guide.

Phase 2: Copy

Write every word before touching the page layout. Good copy on a waitlist page is worth more than good design.

Gather what you need

Any existing tagline, mission statement, or language the founder loves?
Testimonials or social proof? (Even one quote changes the page)
Specific numbers? (Signups so far, time saved, users in beta, etc.)

Headline formulas — always write 3 options

Formula 1 — The Transformation (safe): [Outcome] for [Specific Audience] — without [The Thing They Hate]

"Beautiful financial reports for freelancers — without touching a spreadsheet"

Formula 2 — The Bold Promise: [Verb] [Aspirational Outcome]

"Stop losing deals to bad follow-up"

Formula 3 — The Question: What if [Painful Status Quo] didn't have to be [Your Life]?

"What if invoicing didn't take a whole day?"

Formula 4 — The Category Creator: The [adjective] [tool] for [niche]

"The async standup tool remote teams actually like"

Formula 5 — The Number (if you have one): [Specific outcome] in [specific time]

"Cut reporting time from 4 hours to 15 minutes"

CTA button copy — never "Submit" or "Sign Up"

Strong patterns:

"Reserve my spot"
"Get early access"
"Join the waitlist"
"Claim your spot"
"Be first to know"
"Join [X] others on the waitlist" (if you have a count)

With an incentive: "Join waitlist — get 30% off at launch"

Micro-copy below the form

Removes the last hesitation before submitting:

"We'll only email when we launch. Nothing else."
"One email. The day we launch. That's it."
"Join [X] people already on the waitlist." (if you have a count)
"Only [X] early access spots available." (only if true)

Value props — frame as outcomes, not features

Write each as: Short benefit headline + 1–2 sentences expanding on the outcome for the user, not the technical feature.

Before: "AI-powered scheduling" After: "After-hours bookings, handled — when a patient texts at 9pm, DentistAgent takes care of it."

Voice rules (applied to every word)

Clarity over cleverness. When clarity and creativity conflict, clarity wins.
Specific beats vague. "Reduce no-shows by 40%" beats "reduce no-shows."
Customer language. Mirror the words your customers use for their own problem.
No buzzwords without proof: "innovative," "cutting-edge," "seamless," "world-class" — delete unless backed by a specific claim.
Read it out loud. If it sounds like a press release, rewrite it.

Deliver copy in this format

## Hero
Headline (Option A — safe): [headline]
Headline (Option B — bolder): [headline]
Headline (Option C — question): [headline]
Subheadline: [1–2 sentences, who this is for and what they get]
CTA button text: [action phrase]
Micro-copy below CTA: [e.g., "We'll email once, when we launch."]

## Value Props (3)
1. [Lucide icon name] [Benefit headline] — [1-sentence outcome]
2. [Lucide icon name] [Benefit headline] — [1-sentence outcome]
3. [Lucide icon name] [Benefit headline] — [1-sentence outcome]

## Social Proof
[Quote, stat, or signup count — or "none available, skip section"]

## Secondary CTA headline
[Headline above the bottom form]

## Meta
Title tag: [50–60 chars]
Meta description: [140–155 chars]

Always give 3 headline options. Let the user pick or mix before building.

Phase 3: Build

With approved copy and an approved style guide, build the page.

Anatomy of a great waitlist page

A waitlist page needs these sections — in this order unless there's a good reason to deviate:

Nav / Logo bar — Logo/name only. No navigation links that lead nowhere yet. Optional: a single "Contact" or "Learn more" link if relevant.
Hero — The most important section. Contains:
- Headline (the promise)
- Subheadline (who it's for, what they get)
- Email input + CTA button (always above the fold on desktop)
- Optional: signup count, urgency indicator ("Only 200 spots available"), launch date badge
Value props / Feature teases — 3 cards or columns. Tease what's coming. Focus on outcomes, not features. If there's no launch yet, frame this as "What you'll be able to do."
Social proof — A quote, a stat, a preview, a press mention, a "X people already signed up" counter. Even one is better than none. If genuinely nothing exists, skip rather than fake it.
Secondary email capture — Repeat the CTA at the bottom of the page. People who scrolled all the way down are your highest-intent visitors.
Footer — Minimal: name/logo, copyright year, optional privacy policy link.

Design quality standards

These are non-negotiable:

No generic hero: white background + centered headline + email input is the floor, not the goal. Differentiate through color, typography, texture, or layout.
The email input and button should feel premium. They are the most important elements on the page. Make them large, visually dominant, and satisfying to interact with.
Vary section backgrounds to create visual rhythm — alternating white/light gray feels lazy. Use your palette.
Typography does the heavy lifting. Use scale, weight contrast, and tight tracking on headlines. The headline should be large.
Mobile-first. The page must look great at 390px. Check that the email input doesn't overflow and the CTA is thumb-reachable.

Imagery guidance

Waitlist pages are almost always design-led — don't use generic stock photos of smiling professionals. Instead:

Use bold typography, color blocks, and geometric elements as the visual centerpiece
If the product is visual (an app, a physical product, a dashboard), use a high-quality screenshot or product mock as the hero visual
If using Unsplash placeholders, choose abstract textures or atmospheric photos — not people

Animations

Keep it subtle. If MOTION_INTENSITY ≤ 5:

Fade-in on page load for the hero (opacity: 0 → 1 over 400ms)
Hover transitions on the CTA button (scale + shadow)
That's it

If MOTION_INTENSITY > 5, you can add:

Scroll-triggered fade-ins for sections (use IntersectionObserver)
Animated counter for signup count
A subtle gradient shimmer on the hero background

Never add animations that delay the form appearing or interfere with typing.

MANDATORY SELF-AUDIT — run this before saving the file

Do not save or deliver the page until you have checked every item below. Go through the HTML line by line.

Copy violations (search for these literally):

Search the HTML for — (space-em-dash-space). Found any? Replace every one with a comma, period, or separate sentence. Zero tolerance.
Search for ! (exclamation points in visible text — not in code). Found any? Delete them.
Search for "exciting", "transformative", "cutting-edge", "seamless", "innovative", "state-of-the-art". Found any? Replace with specific, concrete language.
Search for "Not just". Found any? Rewrite the sentence.

Section variety violations (check visually section by section):

Does the "features" or "how it works" section use three identical-width containers, each with the same structure (number/icon + heading + paragraph)? That's the forbidden pattern — even if numbers replace icons. Replace with a numbered editorial list using CSS Grid, an alternating left/right zigzag, or a full-bleed layout.
List the background color of each section from top to bottom. Do any two adjacent sections share the same color? If yes, change one.
Is the hero a centered dark background with an email form in the middle? If yes, rebuild it as a split layout or typographic hero.

Typography violations:

Are numbered lists using display:grid; grid-template-columns:[width] 1fr? If you used flexbox with pt-* offsets, replace with CSS Grid.
Is there at least one display serif font (Fraunces, Playfair, Cormorant)? If the page uses only Inter or Outfit, add a display serif for headlines.

Only after all items above are checked and resolved, save and deliver the file.

After building

Save the page as waitlist.html to the outputs folder and link it. Ask the user to open it and react. Iterate fast — don't defend choices.

Once the page is approved, proactively offer the remaining steps — don't wait for the user to ask:

"The page is ready. Three things left to make this fully operational:

Add a consent checkbox (T&C) to the form

Wire the form to Mailchimp or GHL so emails actually get captured

Deploy it to a real domain — I can walk you through the whole thing in about 20 minutes

Want to go through these now?"

Phase 4: Terms & Consent

Before the form submits, the user must check a consent checkbox. This is both a legal courtesy and good practice for email deliverability — confirmed opt-in lists have better open rates and fewer spam complaints.

What to add to the form

Add a checkbox immediately below the email input, before the submit button:

<div class="flex items-start gap-2.5 mt-3">
  <input
    type="checkbox"
    id="consent"
    required
    class="mt-0.5 w-4 h-4 accent-[brandcolor] cursor-pointer flex-shrink-0"
  >
  <label for="consent" class="text-xs text-slate-400 leading-relaxed cursor-pointer">
    I agree to receive one email from [Product Name] when the product launches.
    My email won't be used for anything else.
    <button type="button" onclick="document.getElementById('tc-modal').classList.remove('hidden')"
      class="underline hover:text-slate-600 transition-colors">Full terms</button>.
  </label>
</div>

The T&C modal

Add a simple modal with the full terms:

<!-- T&C Modal -->
<div id="tc-modal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-6">
  <div class="bg-white rounded-2xl max-w-md w-full p-8 relative">
    <button onclick="document.getElementById('tc-modal').classList.add('hidden')"
      class="absolute top-4 right-4 text-slate-400 hover:text-slate-700">
      <i data-lucide="x" style="width:18px;height:18px;"></i>
    </button>
    <h3 class="font-semibold text-gray-900 mb-4">Waitlist terms</h3>
    <div class="text-sm text-slate-500 space-y-3 leading-relaxed">
      <p>By joining this waitlist, you agree to receive a single email from [Product Name] notifying you when the product launches.</p>
      <p>We will not use your email address for any other purpose, send marketing emails, or share your address with third parties.</p>
      <p>You can unsubscribe at any time by clicking the unsubscribe link in any email we send.</p>
      <p>We store your email address securely and will delete it on request. To request deletion, reply to any email from us.</p>
      <p class="text-slate-400 text-xs mt-4">Last updated: [Month Year]</p>
    </div>
  </div>
</div>

What the T&C covers

The terms should always say:

We collect email for the single purpose of notifying at launch
We won't share the email or use it for anything else
The user can unsubscribe or request deletion at any time

Keep it short and plain. Legal jargon in a T&C for a waitlist page is unnecessary and undermines trust.

Phase 5: Email Backend

Ask: "Do you want signups to go somewhere — like Mailchimp or GoHighLevel — or start with just the UI for now?"

Default recommendation: Mailchimp. Free up to 500 contacts, automation built in, no technical setup needed.

Write these instructions out in the chat when the user is ready.

Option A: Mailchimp (recommended for most)

Write these steps out for the user:

Create a free account at mailchimp.com
Go to Audience → Signup Forms → Embedded Forms
In the generated HTML, find the action attribute — it looks like https://yoursite.us1.list-manage.com/subscribe/post?u=XXX&id=XXX. Copy that URL.
Open waitlist.html, find const FORM_ACTION_URL = 'YOUR_FORM_URL_HERE' and replace with the Mailchimp URL
The form uses mode: 'no-cors' so submissions go through even though you can't read the server response — signups appear in your Mailchimp audience within minutes
To set up the welcome automation: Automations → Customer Journeys → Build from scratch → trigger: "Joins audience" → add email steps with delays

Option B: GoHighLevel

Write these steps out for the user:

In GHL, go to Automations → Create Workflow
Add trigger: "Webhook" — GHL generates a webhook URL, copy it
Open waitlist.html, find const FORM_ACTION_URL = 'YOUR_FORM_URL_HERE' and replace with the GHL webhook URL
In the workflow, add "Create/Update Contact" after the trigger, map the email field from the webhook data
Continue the workflow with "Send Email" actions and "Wait" steps between them
Make sure a verified sending domain is set up under Settings → Email Services

No backend yet

Add a localStorage fallback so the page feels functional during testing:

// TODO: Replace with real email backend before going live
function submitForm(email) {
  const list = JSON.parse(localStorage.getItem('waitlist') || '[]');
  list.push({ email, timestamp: new Date().toISOString() });
  localStorage.setItem('waitlist', JSON.stringify(list));
  showSuccess();
}

Phase 6: Deployment

Write these instructions out in the chat when the user is ready. The whole setup takes about 20–30 minutes and costs ~$10/year.

Step 1 — Buy a domain

Write this out for the user:

Go to porkbun.com — cheapest registrar, most .com domains are $9–11/year, WHOIS privacy is free by default
Search for the domain, add to cart, check out — don't buy SSL or hosting add-ons
Alternative: namecheap.com (~$10–13/year, also reliable)

Step 2 — Deploy to Vercel

Write this out for the user:

Rename the HTML file to index.html
Go to vercel.com, create a free account
Click "Add New Project" and upload the folder containing index.html
Click Deploy — Vercel gives a live URL in ~30 seconds (e.g. yourproduct.vercel.app)
Open the URL to confirm the page is live

Step 3 — Connect the domain

Write this out for the user:

In Vercel:

Go to the project → Settings → Domains
Type the domain name and click Add
Vercel shows either two nameservers or an A record + CNAME record — copy whichever appears

In Porkbun:

Log in → Domain Management → click the domain → DNS
If Vercel gave nameservers: click Edit Nameservers, replace existing ones with Vercel's two
If Vercel gave DNS records: delete any existing A records for @, add the new A record and CNAME
Save — DNS propagates in 5 minutes to 2 hours; Vercel shows a green checkmark when done

Cost summary to share with user:

Item	Cost
Domain (.com)	~$9–11/year
Hosting (Vercel)	Free
SSL certificate	Free (Vercel handles it)
Total	~$10/year

Phase 7: Nurture Emails

Write these emails out in the chat after the backend is connected. Apply humanizer rules to every word — these are written for a person to read, not an AI to generate.

The 5-email sequence:

#	Email	Send timing
1	Signup confirmation	Immediately on signup
2	Pre-launch update — show something real	4–6 weeks before launch
3	Countdown	3–7 days before launch
4	Launch day	Morning of launch
5	One week in — honest reflection	7 days after launch

Email 1 — Confirmation (immediate)

Subject: You're on the list

Hey [First Name],

You're on the [Product Name] waitlist. We'll send one email when we launch — that's it.

Quick version of what we're building: [one sentence, product + who it's for].

The problem we keep hearing from [audience] is [specific pain point in their words]. That's what we're fixing.

If you have questions before launch, reply here. I read them.

[Name], [Product Name]

Email 2 — Pre-launch update (4–6 weeks before)

Subject: What we've been working on

Hey [First Name],

A quick update from [Product Name], [X] weeks before we launch.

Here's something real we've been working on: [specific feature — be concrete, not vague].

The reason this matters for [audience]: [1–2 sentences in plain language].

We launch on [date]. You'll get an email the day it goes live.

[Name]

Email 3 — Countdown (3–7 days before)

Subject: [X] days

Hey [First Name],

We launch [day of week], [date].

Here's what you get on launch day: [2–3 specific things — features, outcomes, or early-access benefits]

[If there's founding-member pricing, mention it here and when it expires.]

See you [day of week].

[Name]

Email 4 — Launch day

Subject: [Product Name] is live

Hey [First Name],

We launched this morning.

[One sentence: what the product does and who it's for.]

[Large, clear link or button: "Get started" or "Sign up now"]

If you run into anything, reply here. I'm watching my inbox today.

[Name]

Email 5 — One week in

Subject: One week in

Hey [First Name],

It's been a week since we launched [Product Name].

[2–3 sentences of honest reflection: what happened, what you didn't expect, what's working. Use specific numbers.]

If you signed up, thank you — and let me know how it's going. If you haven't yet: [URL]

[Name]

Email writing rules (applied to every email)

No exclamation points. None.
No em dashes (—). Use a comma, period, or new sentence.
No "exciting", "transformative", "cutting-edge", "seamless."
No "Not just X, it's Y."
Vary sentence length. Short. Then a longer one that builds. Mix them.
Specific beats vague: "47 practices signed up in the first week" beats "the response has been incredible."
Read each email out loud. If it sounds like a press release, rewrite it.

After drafting, ask: "What makes this obviously AI-generated?" Fix whatever comes up. The humanizer skill can be invoked for a deeper pass if needed.

Working Style

Go fast on discovery, slow down on design. A 10-minute style guide conversation prevents hours of rework.
Show, don't describe. Build the style guide and the page — don't describe what you would build.
Iterate without ego. When the user says "I don't like the font" or "the hero feels too dark," say "good call" and fix it immediately.
Name the tradeoffs. If the user wants something that might hurt conversions (e.g., a heavy navigation menu, too many CTAs), mention it once — then build what they want.
Proactively suggest: If you notice they have no social proof, no urgency element, or no incentive for signing up, surface it: "One thing that usually lifts waitlist signup rates significantly is [X] — do you have anything like that?"

Reference Files

Read these as you reach the relevant phase:

references/design-system.md — Design dials, creative toolkit, forbidden patterns, component standards
references/copy-frameworks.md — Headline formulas, CTA patterns, urgency language, social proof formats
references/email-backends.md — Integration guides for Mailchimp, ConvertKit, Resend, Tally, and custom webhooks
references/email-nurture.md — Mailchimp + GHL setup instructions, 5-email sequence templates, humanizer writing rules
references/deployment.md — Vercel deployment guide, domain purchasing (Porkbun/Namecheap), DNS connection steps

name

waitlist-page

description

Waitlist Page Creator

The core principle: A great waitlist page does one thing: convinces the right person to give you their email address. Everything on the page should serve that goal.

NON-NEGOTIABLE RULES — apply from the first line of code

These apply to every waitlist page, no exceptions. Read them before starting any phase.

Design rules

No centered dark hero with email form. That is the generic default. Use a split layout (text left, visual right), a typographic hero, or a product UI preview instead.
No three identical cards in a row. The forbidden pattern is any three equal-width containers that share the same internal structure — icon + heading + body text, number badge + heading + body text, circle + heading + body text. Swapping icons for numbers does not fix this. Use a numbered editorial list with CSS Grid (numbers as typographic anchors at 3rem+, not badges), an alternating left/right zigzag, or a full-bleed section instead.
No background blobs, glow effects, or decorative grid textures. These are visual noise with no purpose.
No pure white (#FFF) backgrounds. Use off-white (#F7F5F0, #FAFAF8, #F8F6F3).
No pure black text. Use dark navy or dark gray (#0C1522, #1A1A2E, #111827).
Every section must look different from the one above it — vary background color, layout structure, and content density.
For numbered lists, always use CSS Grid with a fixed column width for the number, never flexbox with a manual pt-* offset. Flexbox offsets render unevenly across items.
Use a display serif font (Fraunces, Playfair Display, Cormorant) paired with a clean sans-serif. Never use a single generic sans-serif (like Inter alone) as the only font.

Copy rules (humanizer principles — applied to every word)

No exclamation points. None. Remove every one.
No em dashes (—). Replace with a comma, period, or a separate sentence. This is a default AI writing habit — it will appear unless you actively delete it. You must search your output for — before delivering.
No "exciting", "transformative", "cutting-edge", "seamless", "innovative", "state-of-the-art", "world-class". These words add nothing. Delete them.
No "Not just X, it's Y" constructions.
No vague social proof. "Users love it" → "47 practices signed up in the first week." Be specific or say nothing.
No exclamation points (worth repeating).
Vary sentence length. Short sentences. Then longer ones that take their time building to the point. Mix them.
Specific beats general every time: numbers, names, concrete outcomes over vague claims.
Read the copy out loud before finalizing. If it sounds like a press release, rewrite it.

Every page starts with this boilerplate in <head>:

<!-- Tailwind CSS (no install needed) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          // Add brand colors here
        },
        fontFamily: {
          // Add chosen Google Fonts here
        }
      }
    }
  }
</script>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

And just before </body>:

<script>lucide.createIcons();</script>

Use Lucide icons with: <i data-lucide="arrow-right" style="width:20px;height:20px;"></i> — full list at https://lucide.dev/icons. No emojis — always use Lucide icons.

Overview: Eight Phases

Phase	What Happens
0. Discovery	5–7 quick questions — product, audience, brand, urgency
1. Design	Set design dials, establish visual identity, build style guide
2. Copy	Write every word on the page before touching code
3. Build	Assemble the single HTML file, iterate until approved
4. Terms & Consent	Add a T&C checkbox to the form
5. Email Backend	Wire up the form to Mailchimp or GHL
6. Deployment	Deploy to Vercel, buy a domain, connect the dots
7. Nurture Emails	Write the 5-email sequence and set it up in the chosen platform

Phase 0: Quick Discovery

Don't write a single line of code before asking these questions. Ask them conversationally — 2–3 at a time — not as a numbered list.

The product:

What is this? (1 sentence — the simpler the better)
What does it do for the person signing up? What's the transformation or benefit?
What's the planned launch date, or is it open-ended?

The audience:

Who is the ideal person signing up? Be specific — job title, situation, problem they have.
What are they most excited about? What would make them sign up right now vs. close the tab?

Brand:

Do you have a name, logo, or existing brand colors? (Even rough hex codes or "we're thinking dark green" is enough)
Are there any sites or brands whose aesthetic you love? (for reference)

Incentive:

Is there an incentive for signing up — early access, a discount, beta invite, exclusive content?
How many people are already on the waitlist, or is this starting from zero?

Email backend:

Ask: "Do you want signups to go somewhere — like Mailchimp, ConvertKit, or another tool — or should we start with just the UI for now and wire it up later?"

After asking, summarize back: "Here's what I'm working with…" and confirm before moving forward.

Phase 1: Design System

A single-page waitlist page lives or dies on first impression. Establish the visual identity before building anything.

Set the design dials

Ask (or infer from the product and audience):

DESIGN_VARIANCE (1–10): How conventional vs. bold? (1 = clean/safe, 10 = experimental)
MOTION_INTENSITY (1–10): How much animation? (1 = static, 10 = animation-heavy)
VISUAL_DENSITY (1–10): How airy vs. information-dense? (1 = lots of whitespace, 10 = packed)

For most early-stage products: DESIGN_VARIANCE 6–7, MOTION_INTENSITY 3–4, VISUAL_DENSITY 3–4 — distinctive but not distracting.

Hero options (pick one — never default to centered dark + form)

Split layout: Text and form on the left half, a bold color block or product preview on the right. Immediately feels designed.
Typographic hero: Giant display headline (80px+) fills most of the viewport. The type IS the design.
Product/UI preview: Show a real interface, schedule, or output from the product. Teases the value concretely.
Offset layout: Headline starts at an unexpected column. Creates asymmetry and visual interest.

Section layout variety (never stack identical-height sections)

Mix these across the page:

Full-bleed: Content stretches edge to edge — for stats, bold statements, dark CTA sections
Contained: Max-width centered — for text-heavy content
Split 50/50: Two equal columns — for feature/benefit pairs
Numbered editorial list: Large muted numbers (01, 02, 03) as anchors — use CSS Grid, not flexbox
Full-bleed dark: Navy/dark background section for a strong visual break

Color palette

Build 5–6 colors:

Background — Off-white (#F7F5F0, #FAFAF8) or dark. Never pure #FFF.
Primary text — Dark navy/gray (#0C1522, #111827). Never pure #000.
Accent — The CTA color. High contrast, used exclusively for buttons and key links.
Muted text — For secondary info, labels, micro-copy.
Surface — Cards, input backgrounds. Slightly offset from background.
Dark section — For the full-bleed CTA section.

Typography pairings (Google Fonts, always via CDN)

Pick a pairing — never use a single generic sans-serif alone:

Display (headlines)	Body	Feeling
Fraunces	Outfit	Warm, editorial, personality
Playfair Display	Inter	Elegant, professional
Space Grotesk	Space Grotesk	Modern tech, unified
Syne	Syne	Bold, contemporary
Cormorant Garamond	Lato	Sophisticated, luxury

Type scale: Hero headline 3.5–5rem / Section headline 2–2.5rem / Body 1rem / Small 0.875rem. Use clamp() for responsive sizing.

Numbered list — CSS Grid rule (critical)

Always use CSS Grid for numbered feature lists, never flexbox with pt-* offsets:

<!-- Correct: grid locks column widths, both cells start at the same line -->
<div style="display:grid; grid-template-columns:5rem 1fr; gap:0 3.5rem;">
  <span style="font-size:3.25rem; line-height:1;">01</span>
  <div>
    <h3>Feature headline</h3>
    <p>Description.</p>
  </div>
</div>

Animations (MOTION_INTENSITY ≤ 5)

Hero fade-in on load (opacity: 0 → 1, 500ms ease-out)
Scroll-triggered reveals with IntersectionObserver for sections
Hover: button scale (1.02–1.03) + subtle shadow
Never add animations that delay the form appearing

Build the style guide

Generate a style-guide.html file showing:

Color swatches with hex values and usage notes
Typography scale with live sample text
Button variants (primary CTA, secondary)
Input field in default, focus, and error states
A mini hero section using the full system together

Save style-guide.html to the outputs folder and link it. Don't build the page until the user approves the style guide.

Phase 2: Copy

Write every word before touching the page layout. Good copy on a waitlist page is worth more than good design.

Gather what you need

Any existing tagline, mission statement, or language the founder loves?
Testimonials or social proof? (Even one quote changes the page)
Specific numbers? (Signups so far, time saved, users in beta, etc.)

Headline formulas — always write 3 options

Formula 1 — The Transformation (safe): [Outcome] for [Specific Audience] — without [The Thing They Hate]

"Beautiful financial reports for freelancers — without touching a spreadsheet"

Formula 2 — The Bold Promise: [Verb] [Aspirational Outcome]

"Stop losing deals to bad follow-up"

Formula 3 — The Question: What if [Painful Status Quo] didn't have to be [Your Life]?

"What if invoicing didn't take a whole day?"

Formula 4 — The Category Creator: The [adjective] [tool] for [niche]

"The async standup tool remote teams actually like"

Formula 5 — The Number (if you have one): [Specific outcome] in [specific time]

"Cut reporting time from 4 hours to 15 minutes"

CTA button copy — never "Submit" or "Sign Up"

Strong patterns:

"Reserve my spot"
"Get early access"
"Join the waitlist"
"Claim your spot"
"Be first to know"
"Join [X] others on the waitlist" (if you have a count)

With an incentive: "Join waitlist — get 30% off at launch"

Micro-copy below the form

Removes the last hesitation before submitting:

"We'll only email when we launch. Nothing else."
"One email. The day we launch. That's it."
"Join [X] people already on the waitlist." (if you have a count)
"Only [X] early access spots available." (only if true)

Value props — frame as outcomes, not features

Write each as: Short benefit headline + 1–2 sentences expanding on the outcome for the user, not the technical feature.

Before: "AI-powered scheduling" After: "After-hours bookings, handled — when a patient texts at 9pm, DentistAgent takes care of it."

Voice rules (applied to every word)

Clarity over cleverness. When clarity and creativity conflict, clarity wins.
Specific beats vague. "Reduce no-shows by 40%" beats "reduce no-shows."
Customer language. Mirror the words your customers use for their own problem.
No buzzwords without proof: "innovative," "cutting-edge," "seamless," "world-class" — delete unless backed by a specific claim.
Read it out loud. If it sounds like a press release, rewrite it.

Deliver copy in this format

## Hero
Headline (Option A — safe): [headline]
Headline (Option B — bolder): [headline]
Headline (Option C — question): [headline]
Subheadline: [1–2 sentences, who this is for and what they get]
CTA button text: [action phrase]
Micro-copy below CTA: [e.g., "We'll email once, when we launch."]

## Value Props (3)
1. [Lucide icon name] [Benefit headline] — [1-sentence outcome]
2. [Lucide icon name] [Benefit headline] — [1-sentence outcome]
3. [Lucide icon name] [Benefit headline] — [1-sentence outcome]

## Social Proof
[Quote, stat, or signup count — or "none available, skip section"]

## Secondary CTA headline
[Headline above the bottom form]

## Meta
Title tag: [50–60 chars]
Meta description: [140–155 chars]

Always give 3 headline options. Let the user pick or mix before building.

Phase 3: Build

With approved copy and an approved style guide, build the page.

Anatomy of a great waitlist page

A waitlist page needs these sections — in this order unless there's a good reason to deviate:

Nav / Logo bar — Logo/name only. No navigation links that lead nowhere yet. Optional: a single "Contact" or "Learn more" link if relevant.
Hero — The most important section. Contains:
- Headline (the promise)
- Subheadline (who it's for, what they get)
- Email input + CTA button (always above the fold on desktop)
- Optional: signup count, urgency indicator ("Only 200 spots available"), launch date badge
Value props / Feature teases — 3 cards or columns. Tease what's coming. Focus on outcomes, not features. If there's no launch yet, frame this as "What you'll be able to do."
Social proof — A quote, a stat, a preview, a press mention, a "X people already signed up" counter. Even one is better than none. If genuinely nothing exists, skip rather than fake it.
Secondary email capture — Repeat the CTA at the bottom of the page. People who scrolled all the way down are your highest-intent visitors.
Footer — Minimal: name/logo, copyright year, optional privacy policy link.

Design quality standards

These are non-negotiable:

No generic hero: white background + centered headline + email input is the floor, not the goal. Differentiate through color, typography, texture, or layout.
The email input and button should feel premium. They are the most important elements on the page. Make them large, visually dominant, and satisfying to interact with.
Vary section backgrounds to create visual rhythm — alternating white/light gray feels lazy. Use your palette.
Typography does the heavy lifting. Use scale, weight contrast, and tight tracking on headlines. The headline should be large.
Mobile-first. The page must look great at 390px. Check that the email input doesn't overflow and the CTA is thumb-reachable.

Imagery guidance

Waitlist pages are almost always design-led — don't use generic stock photos of smiling professionals. Instead:

Use bold typography, color blocks, and geometric elements as the visual centerpiece
If the product is visual (an app, a physical product, a dashboard), use a high-quality screenshot or product mock as the hero visual
If using Unsplash placeholders, choose abstract textures or atmospheric photos — not people

Animations

Keep it subtle. If MOTION_INTENSITY ≤ 5:

Fade-in on page load for the hero (opacity: 0 → 1 over 400ms)
Hover transitions on the CTA button (scale + shadow)
That's it

If MOTION_INTENSITY > 5, you can add:

Scroll-triggered fade-ins for sections (use IntersectionObserver)
Animated counter for signup count
A subtle gradient shimmer on the hero background

Never add animations that delay the form appearing or interfere with typing.

MANDATORY SELF-AUDIT — run this before saving the file

Do not save or deliver the page until you have checked every item below. Go through the HTML line by line.

Copy violations (search for these literally):

Search the HTML for — (space-em-dash-space). Found any? Replace every one with a comma, period, or separate sentence. Zero tolerance.
Search for ! (exclamation points in visible text — not in code). Found any? Delete them.
Search for "exciting", "transformative", "cutting-edge", "seamless", "innovative", "state-of-the-art". Found any? Replace with specific, concrete language.
Search for "Not just". Found any? Rewrite the sentence.

Section variety violations (check visually section by section):

Does the "features" or "how it works" section use three identical-width containers, each with the same structure (number/icon + heading + paragraph)? That's the forbidden pattern — even if numbers replace icons. Replace with a numbered editorial list using CSS Grid, an alternating left/right zigzag, or a full-bleed layout.
List the background color of each section from top to bottom. Do any two adjacent sections share the same color? If yes, change one.
Is the hero a centered dark background with an email form in the middle? If yes, rebuild it as a split layout or typographic hero.

Typography violations:

Are numbered lists using display:grid; grid-template-columns:[width] 1fr? If you used flexbox with pt-* offsets, replace with CSS Grid.
Is there at least one display serif font (Fraunces, Playfair, Cormorant)? If the page uses only Inter or Outfit, add a display serif for headlines.

Only after all items above are checked and resolved, save and deliver the file.

After building

Save the page as waitlist.html to the outputs folder and link it. Ask the user to open it and react. Iterate fast — don't defend choices.

Once the page is approved, proactively offer the remaining steps — don't wait for the user to ask:

"The page is ready. Three things left to make this fully operational:

Add a consent checkbox (T&C) to the form

Wire the form to Mailchimp or GHL so emails actually get captured

Deploy it to a real domain — I can walk you through the whole thing in about 20 minutes

Want to go through these now?"

Phase 4: Terms & Consent

What to add to the form

Add a checkbox immediately below the email input, before the submit button:

<div class="flex items-start gap-2.5 mt-3">
  <input
    type="checkbox"
    id="consent"
    required
    class="mt-0.5 w-4 h-4 accent-[brandcolor] cursor-pointer flex-shrink-0"
  >
  <label for="consent" class="text-xs text-slate-400 leading-relaxed cursor-pointer">
    I agree to receive one email from [Product Name] when the product launches.
    My email won't be used for anything else.
    <button type="button" onclick="document.getElementById('tc-modal').classList.remove('hidden')"
      class="underline hover:text-slate-600 transition-colors">Full terms</button>.
  </label>
</div>

The T&C modal

Add a simple modal with the full terms:

<!-- T&C Modal -->
<div id="tc-modal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-6">
  <div class="bg-white rounded-2xl max-w-md w-full p-8 relative">
    <button onclick="document.getElementById('tc-modal').classList.add('hidden')"
      class="absolute top-4 right-4 text-slate-400 hover:text-slate-700">
      <i data-lucide="x" style="width:18px;height:18px;"></i>
    </button>
    <h3 class="font-semibold text-gray-900 mb-4">Waitlist terms</h3>
    <div class="text-sm text-slate-500 space-y-3 leading-relaxed">
      <p>By joining this waitlist, you agree to receive a single email from [Product Name] notifying you when the product launches.</p>
      <p>We will not use your email address for any other purpose, send marketing emails, or share your address with third parties.</p>
      <p>You can unsubscribe at any time by clicking the unsubscribe link in any email we send.</p>
      <p>We store your email address securely and will delete it on request. To request deletion, reply to any email from us.</p>
      <p class="text-slate-400 text-xs mt-4">Last updated: [Month Year]</p>
    </div>
  </div>
</div>

What the T&C covers

The terms should always say:

We collect email for the single purpose of notifying at launch
We won't share the email or use it for anything else
The user can unsubscribe or request deletion at any time

Keep it short and plain. Legal jargon in a T&C for a waitlist page is unnecessary and undermines trust.

Phase 5: Email Backend

Ask: "Do you want signups to go somewhere — like Mailchimp or GoHighLevel — or start with just the UI for now?"

Default recommendation: Mailchimp. Free up to 500 contacts, automation built in, no technical setup needed.

Write these instructions out in the chat when the user is ready.

Option A: Mailchimp (recommended for most)

Write these steps out for the user:

Create a free account at mailchimp.com
Go to Audience → Signup Forms → Embedded Forms
In the generated HTML, find the action attribute — it looks like https://yoursite.us1.list-manage.com/subscribe/post?u=XXX&id=XXX. Copy that URL.
Open waitlist.html, find const FORM_ACTION_URL = 'YOUR_FORM_URL_HERE' and replace with the Mailchimp URL
The form uses mode: 'no-cors' so submissions go through even though you can't read the server response — signups appear in your Mailchimp audience within minutes
To set up the welcome automation: Automations → Customer Journeys → Build from scratch → trigger: "Joins audience" → add email steps with delays

Option B: GoHighLevel

Write these steps out for the user:

In GHL, go to Automations → Create Workflow
Add trigger: "Webhook" — GHL generates a webhook URL, copy it
Open waitlist.html, find const FORM_ACTION_URL = 'YOUR_FORM_URL_HERE' and replace with the GHL webhook URL
In the workflow, add "Create/Update Contact" after the trigger, map the email field from the webhook data
Continue the workflow with "Send Email" actions and "Wait" steps between them
Make sure a verified sending domain is set up under Settings → Email Services

No backend yet

Add a localStorage fallback so the page feels functional during testing:

// TODO: Replace with real email backend before going live
function submitForm(email) {
  const list = JSON.parse(localStorage.getItem('waitlist') || '[]');
  list.push({ email, timestamp: new Date().toISOString() });
  localStorage.setItem('waitlist', JSON.stringify(list));
  showSuccess();
}

Phase 6: Deployment

Write these instructions out in the chat when the user is ready. The whole setup takes about 20–30 minutes and costs ~$10/year.

Step 1 — Buy a domain

Write this out for the user:

Go to porkbun.com — cheapest registrar, most .com domains are $9–11/year, WHOIS privacy is free by default
Search for the domain, add to cart, check out — don't buy SSL or hosting add-ons
Alternative: namecheap.com (~$10–13/year, also reliable)

Step 2 — Deploy to Vercel

Write this out for the user:

Rename the HTML file to index.html
Go to vercel.com, create a free account
Click "Add New Project" and upload the folder containing index.html
Click Deploy — Vercel gives a live URL in ~30 seconds (e.g. yourproduct.vercel.app)
Open the URL to confirm the page is live

Step 3 — Connect the domain

Write this out for the user:

In Vercel:

Go to the project → Settings → Domains
Type the domain name and click Add
Vercel shows either two nameservers or an A record + CNAME record — copy whichever appears

In Porkbun:

Log in → Domain Management → click the domain → DNS
If Vercel gave nameservers: click Edit Nameservers, replace existing ones with Vercel's two
If Vercel gave DNS records: delete any existing A records for @, add the new A record and CNAME
Save — DNS propagates in 5 minutes to 2 hours; Vercel shows a green checkmark when done

Cost summary to share with user:

Item	Cost
Domain (.com)	~$9–11/year
Hosting (Vercel)	Free
SSL certificate	Free (Vercel handles it)
Total	~$10/year

Phase 7: Nurture Emails

Write these emails out in the chat after the backend is connected. Apply humanizer rules to every word — these are written for a person to read, not an AI to generate.

The 5-email sequence:

#	Email	Send timing
1	Signup confirmation	Immediately on signup
2	Pre-launch update — show something real	4–6 weeks before launch
3	Countdown	3–7 days before launch
4	Launch day	Morning of launch
5	One week in — honest reflection	7 days after launch

Email 1 — Confirmation (immediate)

Subject: You're on the list

Hey [First Name],

You're on the [Product Name] waitlist. We'll send one email when we launch — that's it.

Quick version of what we're building: [one sentence, product + who it's for].

The problem we keep hearing from [audience] is [specific pain point in their words]. That's what we're fixing.

If you have questions before launch, reply here. I read them.

[Name], [Product Name]

Email 2 — Pre-launch update (4–6 weeks before)

Subject: What we've been working on

Hey [First Name],

A quick update from [Product Name], [X] weeks before we launch.

Here's something real we've been working on: [specific feature — be concrete, not vague].

The reason this matters for [audience]: [1–2 sentences in plain language].

We launch on [date]. You'll get an email the day it goes live.

[Name]

Email 3 — Countdown (3–7 days before)

Subject: [X] days

Hey [First Name],

We launch [day of week], [date].

Here's what you get on launch day: [2–3 specific things — features, outcomes, or early-access benefits]

[If there's founding-member pricing, mention it here and when it expires.]

See you [day of week].

[Name]

Email 4 — Launch day

Subject: [Product Name] is live

Hey [First Name],

We launched this morning.

[One sentence: what the product does and who it's for.]

[Large, clear link or button: "Get started" or "Sign up now"]

If you run into anything, reply here. I'm watching my inbox today.

[Name]

Email 5 — One week in

Subject: One week in

Hey [First Name],

It's been a week since we launched [Product Name].

[2–3 sentences of honest reflection: what happened, what you didn't expect, what's working. Use specific numbers.]

If you signed up, thank you — and let me know how it's going. If you haven't yet: [URL]

[Name]

Email writing rules (applied to every email)

No exclamation points. None.
No em dashes (—). Use a comma, period, or new sentence.
No "exciting", "transformative", "cutting-edge", "seamless."
No "Not just X, it's Y."
Vary sentence length. Short. Then a longer one that builds. Mix them.
Specific beats vague: "47 practices signed up in the first week" beats "the response has been incredible."
Read each email out loud. If it sounds like a press release, rewrite it.

After drafting, ask: "What makes this obviously AI-generated?" Fix whatever comes up. The humanizer skill can be invoked for a deeper pass if needed.

Working Style

Go fast on discovery, slow down on design. A 10-minute style guide conversation prevents hours of rework.
Show, don't describe. Build the style guide and the page — don't describe what you would build.
Iterate without ego. When the user says "I don't like the font" or "the hero feels too dark," say "good call" and fix it immediately.
Name the tradeoffs. If the user wants something that might hurt conversions (e.g., a heavy navigation menu, too many CTAs), mention it once — then build what they want.
Proactively suggest: If you notice they have no social proof, no urgency element, or no incentive for signing up, surface it: "One thing that usually lifts waitlist signup rates significantly is [X] — do you have anything like that?"

Reference Files

Read these as you reach the relevant phase:

references/design-system.md — Design dials, creative toolkit, forbidden patterns, component standards
references/copy-frameworks.md — Headline formulas, CTA patterns, urgency language, social proof formats
references/email-backends.md — Integration guides for Mailchimp, ConvertKit, Resend, Tally, and custom webhooks
references/email-nurture.md — Mailchimp + GHL setup instructions, 5-email sequence templates, humanizer writing rules
references/deployment.md — Vercel deployment guide, domain purchasing (Porkbun/Namecheap), DNS connection steps