Landing Page Builder
An ad without a destination doesn't convert. When a campaign promises "get your free case value" or "download the crash-claim checklist," that thing has to exist and live somewhere. This skill builds the page + the lead magnet and puts it online.
Step 0 — Ask first (don't build/deploy uninvited)
Deploying to the web is outward-facing. Confirm with the user:
"Your ad promises '[offer]'. I can build a matching landing page with a lead form and put it live for you. Want me to? It'll live at a Vercel URL (free) — I'll walk you through the two logins you'll need (GitHub + Vercel)."
Only proceed on a yes.
Step 1 — Design the page (match the ad, match the brand)
The page must feel like the ad it came from — same hook, same offer, same brand. A mismatch kills conversions.
- Above the fold: the ad's hook as the H1, a one-line subhead, the offer, and the lead form (name, phone, email, "what happened?" — keep it short; every field costs conversions).
- Proof: results, reviews (pull from
reviews_google / reviews_detailed_analysis), years, local, "no fee unless we win."
- The offer/lead magnet: if it's a checklist/guide, generate the actual PDF (the crash-claim checklist, the "what to say to the adjuster" one-pager) so there's something real to deliver.
- Trust + compliance: badges, "Attorney Advertising," privacy note, TCPA consent line on the form if they'll call/text leads.
- Speed + mobile: most ad clicks are mobile — it must be fast and thumb-friendly. Build it lean (static HTML/CSS or a minimal Next.js page).
- Tracking: Meta Pixel + a lead event on form submit, and UTM parameters preserved, so
campaign-builder and Ranql can attribute. Where do form submissions go? — email, a webhook, or a simple form service (ask the firm).
Use the brand-kit-extractor output for exact colors/fonts/logo. See references/landing-page-checklist.md.
Step 2 — Deploy via GitHub + Vercel
Ask whether they already have GitHub and Vercel accounts.
If they do: guide them to create access tokens (or use a connected Vercel/GitHub integration if available):
- GitHub: Settings → Developer settings → Personal access tokens → generate a token with
repo scope. Paste it to me.
- Vercel: Account Settings → Tokens → create a token. Paste it to me.
Then: create a repo, push the site, and deploy to Vercel (or import the GitHub repo into Vercel). Return the live URL.
If they don't have accounts: walk them through it, plainly:
- Create a free GitHub account (github.com) → then the personal access token above.
- Create a free Vercel account (vercel.com), sign in with GitHub → then the Vercel token.
- Come back with both tokens and I'll deploy.
Detailed, copy-pasteable steps: references/deploy-github-vercel.md.
Never hard-code or commit their tokens. Use them for the deploy, don't store them, and don't print them back.
Step 3 — Hand off
- Give the live URL (use it as the ad's destination in
campaign-builder).
- Confirm the form works (submit a test) and leads land where the firm expects.
- Save the page source to a findable folder and give the path (same rule as
ad-creative-studio).
- Note what's still manual (custom domain, CRM wiring) so nothing is silently half-done.
Guardrails
- Confirm before deploying (outward-facing).
- Real lead capture only — never a form that goes nowhere.
- Compliance: TCPA consent for calls/texts, "Attorney Advertising," privacy policy link.
- Tokens are secrets — use, don't store, don't echo.
1---2name: landing-page-builder3description: Use when an ad or campaign needs somewhere to send people — build and deploy a conversion landing page (and its lead magnet). Triggers include "build a landing page", "where does the ad go", "I need a page for this campaign", "landing page", "lead magnet", "the checklist download", or when campaign-builder flags that an ad has no destination. Generates a fast on-brand LP with a lead form and deploys it via GitHub + Vercel, guiding the user through tokens/accounts if needed. Requires brand-kit-extractor (look) and the ad's offer (from ad-creative-studio).4---56# Landing Page Builder78An ad without a destination doesn't convert. When a campaign promises "get your free case value" or "download the crash-claim checklist," that thing has to exist and live somewhere. This skill builds the page + the lead magnet and puts it online.910## Step 0 — Ask first (don't build/deploy uninvited)1112Deploying to the web is outward-facing. Confirm with the user:13> "Your ad promises '[offer]'. I can build a matching landing page with a lead form and put it live for you. Want me to? It'll live at a Vercel URL (free) — I'll walk you through the two logins you'll need (GitHub + Vercel)."1415Only proceed on a yes.1617## Step 1 — Design the page (match the ad, match the brand)1819The page must feel like the ad it came from — same hook, same offer, same brand. A mismatch kills conversions.2021- **Above the fold:** the ad's hook as the H1, a one-line subhead, the offer, and the **lead form** (name, phone, email, "what happened?" — keep it short; every field costs conversions).22- **Proof:** results, reviews (pull from `reviews_google` / `reviews_detailed_analysis`), years, local, "no fee unless we win."23- **The offer/lead magnet:** if it's a checklist/guide, generate the actual PDF (the crash-claim checklist, the "what to say to the adjuster" one-pager) so there's something real to deliver.24- **Trust + compliance:** badges, "Attorney Advertising," privacy note, TCPA consent line on the form if they'll call/text leads.25- **Speed + mobile:** most ad clicks are mobile — it must be fast and thumb-friendly. Build it lean (static HTML/CSS or a minimal Next.js page).26- **Tracking:** Meta Pixel + a lead event on form submit, and UTM parameters preserved, so `campaign-builder` and Ranql can attribute. Where do form submissions go? — email, a webhook, or a simple form service (ask the firm).2728Use the `brand-kit-extractor` output for exact colors/fonts/logo. See `references/landing-page-checklist.md`.2930## Step 2 — Deploy via GitHub + Vercel3132Ask whether they already have GitHub and Vercel accounts.3334**If they do:** guide them to create access tokens (or use a connected Vercel/GitHub integration if available):35- **GitHub:** Settings → Developer settings → Personal access tokens → generate a token with `repo` scope. Paste it to me.36- **Vercel:** Account Settings → Tokens → create a token. Paste it to me.37Then: create a repo, push the site, and deploy to Vercel (or import the GitHub repo into Vercel). Return the live URL.3839**If they don't have accounts:** walk them through it, plainly:401. Create a free GitHub account (github.com) → then the personal access token above.412. Create a free Vercel account (vercel.com), sign in with GitHub → then the Vercel token.423. Come back with both tokens and I'll deploy.4344Detailed, copy-pasteable steps: `references/deploy-github-vercel.md`.4546**Never hard-code or commit their tokens.** Use them for the deploy, don't store them, and don't print them back.4748## Step 3 — Hand off4950- Give the **live URL** (use it as the ad's destination in `campaign-builder`).51- Confirm the form works (submit a test) and leads land where the firm expects.52- Save the page source to a findable folder and give the path (same rule as `ad-creative-studio`).53- Note what's still manual (custom domain, CRM wiring) so nothing is silently half-done.5455## Guardrails56- Confirm before deploying (outward-facing).57- Real lead capture only — never a form that goes nowhere.58- Compliance: TCPA consent for calls/texts, "Attorney Advertising," privacy policy link.59- Tokens are secrets — use, don't store, don't echo.
redwoodmeridian