Read the skill at https://ai-skills-vault.pages.dev/skills/prompt-to-landing-page.md and install it as a skill in your agent. Follow it exactly, including its checklists. Then ask me the questions it requires and do the work.
One prompt in, one deployed landing page out. This skill covers the thinking that makes pages convert, not just the markup.
When to use this skill
Launching a product, waitlist, app, service or event and needing a page today.
Replacing a weak page that gets traffic but no signups.
Producing several landing variants for an ad test.
Stage 1 - Extract the brief (ask only what you cannot infer)
What is it, in one sentence a stranger understands?
Who exactly is it for - role, situation, current workaround?
What action counts as success: signup, purchase, call booked, download?
What is the single strongest proof? (number, customer, demo, guarantee)
Price or pricing model, if shown.
Brand: colours, font, logo, tone.
Traffic source: cold ads, SEO, referral, email list. Cold traffic needs more proof; warm traffic needs less explanation.
Missing answers become explicit assumptions listed at the top of the page source as an HTML comment.
Stage 2 - Positioning before copy
Fill this sentence and do not write a word until it is sharp:
For [specific person] who [specific painful situation], [product] is a [category] that [single differentiated outcome], unlike [the alternative they use today].
Weak: "AI-powered productivity platform for teams." Strong: "For freelance designers who lose 6 hours a week chasing invoices, Ledgerly is a one-tap invoice chaser that gets you paid 11 days faster - unlike spreadsheets and polite reminder emails."
The differentiation must be a claim you can prove on the page.
Stage 3 - Page architecture (in this order)
Hero - headline, subhead, primary CTA, one visual, one trust line. Above the fold on a 390x844 phone.
Problem - three specific pains in the customer's own words.
How it works - three steps, each a verb, each with a visual.
Features as outcomes - not "AI engine", but "Answers in 4 seconds, not 4 days".
Proof - logos, numbers, testimonials with name + role + photo, screenshots, case snippet.
Objection handling / FAQ - the 5 real reasons people do not buy: price, trust, effort, switching cost, "will it work for me".
Pricing (if applicable) - 2-3 tiers, one recommended, annual/monthly toggle, what is included, guarantee.
Final CTA - restate the outcome, remove risk, one button.
Footer - contact, privacy, terms, social.
Total: 7-10 sections. Long pages are fine if every section earns its scroll.
Stage 4 - Copy rules
Headline: outcome + specificity, under 10 words. Test it by asking "would a competitor be unable to say this?"
Subhead: how it works in one line, under 25 words.
CTA button: verb + object. "Start free trial" beats "Submit". One primary CTA repeated 3-4 times down the page, identical wording.
Body: second person, present tense, active voice. Short sentences. No "revolutionary", "seamless", "cutting-edge", "empower".
Layout rules: 1120 px max width, 24 px side padding on mobile, section padding clamp(56px,9vw,120px), 8 px spacing scale, one accent colour used only for CTAs and highlights, no more than two font families, headline weight 700+ with tight tracking.
Visual hierarchy rule: exactly one element per screen should be the loudest. If everything is bold, nothing is.
Stage 6 - Mobile-first build
Design at 390 px first; check 320 px for no horizontal scroll.
Hero must show headline + CTA without scrolling.
Buttons: 48 px min height, full width on mobile.
Sticky bottom CTA bar on mobile after 40% scroll.
Font size 16 px minimum on inputs (stops iOS zoom).
Tap targets 44 px, 8 px apart.
Stage 7 - Conversion mechanics
Form: fewest possible fields. Email only beats name+email+company by 20-40% in most tests. Show a privacy line under the button.
Above the fold: outcome + who it is for + CTA + one proof element.
Plus: one h1, ordered h2s, descriptive alt text, JSON-LD (Organization, Product or FAQPage), sitemap, favicon set, lang attribute.
Stage 9 - Performance
Single self-contained HTML file where possible: inline critical CSS, no framework, system fonts or one preloaded variable font, images as WebP/AVIF with width/height, loading="lazy" below the fold, total page under 500 KB, LCP under 2 s on 4G.
Stage 10 - Ship and measure
Deploy, then verify: no console errors, links resolve, form posts and confirms, 404 page, analytics event on CTA click, mobile Lighthouse 90+. Set up one conversion event before sending traffic - a page you cannot measure is a page you cannot improve.
Quality checklist
Positioning sentence written before copy
Hero passes the 5-second test with a stranger
One CTA wording, repeated, one accent colour
Real proof, no invented testimonials or logos
Every objection in the FAQ is one a buyer actually has
Mobile: CTA above fold, no horizontal scroll, 48 px buttons
Meta tags, OG image, JSON-LD present
Page weight under 500 KB
Copy-ready agent prompt
Read the skill at the URL above and follow all 10 stages. Ask me the 7 brief questions in one message. Write the positioning sentence and show it to me before any copy. Then produce a single self-contained index.html with inline CSS, real copy (no lorem ipsum), mobile-first layout, meta tags and JSON-LD. End with the quality checklist filled in honestly.