Landing Page Builder: Complete HTML Landing Page with Copy, Layout, SEO and Buy Button, AI Skill for Claude & ChatGPT, Web Designer

Landing Page Builder is an AI skill for Claude and ChatGPT, made for web designers & freelancers. Answer an 8-line brief and it writes a complete single-file landing page: responsive, accessible, zero external requests, structured on conversion anatomy that's earned its keep. Four finished demo pages ship in the zip, browser-tested at mobile and desktop widths, so you can open them before you install anything.

Instant download. Works on the free tier. No coding. A brief goes in. A deployable page comes out.

WHAT IS AN AI SKILL?
Think of it as a trained assistant you add to Claude or ChatGPT. It is a small folder of files: the step-by-step method the AI must follow, the templates it fills in, the checks it runs on itself, and a worked example. You load it once (about a minute), then talk to the AI in plain English the way you would brief a colleague. Instead of a generic chat answer, you get the finished piece of work as a real file you can print, send or open in Excel. No coding, no software to install, nothing to configure. It runs inside your own Claude or ChatGPT account.

THE PROBLEM IT SOLVES
You ask an AI for a landing page and get a structure: hero here, benefits there, testimonial section, call to action. Useful, and still hours from anything a client could look at.

The page you actually need has the decisions already made. One conversion goal rather than three competing buttons. A thumb-reach CTA on mobile. Contrast computed rather than assumed. Every FAQ answer readable with JavaScript switched off. A form that submits somewhere real, or a price that carries its tax treatment in the same sentence.

ABOUT THE EXAMPLES BELOW
The figures and names come from the built-in demo: Marcus Webb, a Halifax freelance web designer building a site for a physio clinic. Type "demo" after setup and you watch the same run happen in front of you before you type a single real number.

WHAT IT DOES (6 JOBS, ONE SKILL)
1. Build the page
An 8-line brief becomes one complete file: semantic HTML, modern CSS, minimal vanilla JS, responsive, zero external requests. The 9-section anatomy in order, with the JSON-LD type picked from a lookup table rather than defaulted to LocalBusiness.

2. Sell one thing
The buy-now variant: one product, ticket or fixed-price service handed off to a Stripe Payment Link, Lemon Squeezy, Paddle or Gumroad. Zero card fields on the page, ever. Price carries its tax convention, delivery sits beside the button, structured data becomes Product with the ISO currency code.

3. Ship it in another language
Two languages means two files, never a JS toggle. Self-referential hreflang plus x-default in both, a switcher that points at the equivalent page, titles and metas recounted per language because translations run 15–25% longer, and locale formats in the copy and the markup.

4. Wire the form and deploy
Exact swap instructions for Formspree, Netlify or Tally, analytics stubbed, and a five-line deploy card read from your profile. On a buy-now page the checkout URL swap replaces the form swap, named at every place it appears.

5. Tear down an existing page
Paste the copy of a page you already have and it scores 17 line items out of 34, bands the result, states the projected score after the fixes ship, and exports the ranked fix list as its own file you can forward to a client.

6. Read the first 30 days
Bring back sessions, conversions and the per-CTA click counts. It computes the rate literally, says plainly when the sample is too small to conclude anything, locates the leak by CTA position, and ranks at most three changes.

WHAT YOU GET
• Complete HTML/CSS/JS in one file, no frameworks
• One conversion goal — enquiry, call, waitlist or buy-now
• Forms, hosted checkout, analytics and deploy, no hand-waving

No build step, no framework, no npm install. Double-click it:
• Complete HTML, CSS and JS in a single file, zero external requests
• Social preview tags, an inline data-URI favicon, and the right schema.org type
• data-cta on every button plus the event snippet, so month two has numbers in it
• verify_page.py — contrast, title and meta counts, no-JS FAQ, the KB budget
• Four finished demo pages, in the zip, to open first

YOUR FIRST FIVE MINUTES (copy-paste any of these)
› Build a landing page: [your 8-line brief].
› Build a buy-now page for one product at [price], checkout on Stripe.
› Wire the form to Formspree and give me the deploy steps.
› Score my existing page and rank the fixes.
› demo — pick physio, SaaS, electrician, or the Spanish shop.

HOW TO SET IT UP (about a minute)
1. Download the zip and unzip it. Inside: a START-HERE file, INSTALL steps for Claude, and CHATGPT-SETUP for ChatGPT.
2. Claude app: Settings → Capabilities → Skills → Upload skill (or add the files to a Project). Claude Code: drop the folder into ~/.claude/skills/. ChatGPT: follow CHATGPT-SETUP (copy-paste, about two minutes).
3. Type "demo" to watch the skill run on a built-in example. Then give it your own details in plain English.

WHO MADE THIS
The Skill Mastery builds AI skills for working professionals: photographers, filmmakers, creators, marketers and sales teams. We don't start from what AI can do. We start from how the job is actually done, the methods the trade already trusts (here: conversion-first page structure, performance budgets and scope control), the numbers that have to be right, and the mistakes that cost real money. Then we engineer the skill so the AI follows those rules every single time, and we test it the way a buyer would use it: on the built-in demo, on a cold scenario it has never seen, and in a currency other than our own. Every skill ships with a demo mode, a self-check, and a plain list of what it can't do.

WHY NOT JUST ASK THE CHATBOT?
• It ships code, not a plan. The output is a file you open in a browser. That's a different category of product from a description of what your page should contain.

• It states the numbers. HTML weight in KB against a 100 KB budget, the worst contrast pair with its ratio and its size class, title and meta counted, width and height on every image, the hero named and never lazy-loaded, and a keyboard pass described rather than claimed.

• It refuses the bad request. Ask for three competing calls to action and it declines and explains why one page gets one job. Ask for a card form on the page and it points you at a hosted checkout instead. A chatbot does as it's told.

WHAT IT WON'T DO (read this before buying)
• One page, one job. One product through a hosted checkout is in scope and gets built properly; a catalogue, variants, stock levels or a real cart is the wrong tool, and it says so rather than faking it.
• Payments happen at the checkout provider. The page never renders a card field, never collects card details, and never proxies a payment.
• Non-English pages are drafted, not certified. The technical layer is right — lang, hreflang, locale formats, recounted metas — and every such page ships with a native-review note in the file and in the handover.

FAQ
Q: How is this different from just asking Claude or ChatGPT?
A: Ask a chatbot and you'll usually get a page structure, or code that references files that don't exist. Landing Page Builder produces one complete self-contained file with the conversion anatomy already decided, then states its own numbers before handing it over: HTML size against a 100 KB budget, the worst contrast pair and its ratio, title and meta character counts, how many FAQ answers stay readable with JavaScript off, and a described keyboard pass.

Q: Do I need to know how to code?
A: No. The deploy path is drag-and-drop and takes about five minutes, and the file has no build step, no framework and no dependencies. If you're on WordPress, Webflow or Framer, the page still deploys standalone and the deploy card adds one line about how it sits beside the CMS site, plus the embed route if the client insists.

Q: Can I see the quality before I buy?
A: Yes. Four finished demo pages ship inside the zip and open in any browser: a physiotherapy booking page, a SaaS waitlist, an electrician's quote page, and a Spanish olive producer selling one €48 box across the EU. All four were re-verified end to end for release — script clean, no console errors, no horizontal overflow, one h1 with no skipped heading levels, every tap target at least 44px.

Q: Can it build a page that takes payment?
A: It builds the buy-now variant: one product, ticket or fixed-price service, with every button pointing at a hosted checkout URL such as a Stripe Payment Link, Lemon Squeezy, Paddle or Gumroad. Zero card fields ever touch the page. The price ships with its tax convention stated in the same sentence, delivery cost and timing sit next to the button, and the structured data becomes Product with an offers block and the ISO currency code.

Q: Is it a subscription?
A: No. A one-time purchase, yours to keep, updates included.

Q: Do I need a paid Claude or ChatGPT plan?
A: No. The free tiers run it. Paid plans give you longer sessions and stronger models, which is nicer but not required.

Q: Claude or ChatGPT: which should I use?
A: Both are included and both work. Claude gives the fuller experience because skills upload directly; ChatGPT setup is a two-minute copy-paste from the included CHATGPT-SETUP file.

Q: Does it work outside the US, in my currency?
A: Yes. It works in your currency, your date format and your market. It never converts or invents exchange rates.

Q: Can I use it for client work?
A: Yes. One purchase is a perpetual single-user licence; everything it produces is yours to use, unrestricted, for your own business or your clients. You just can't resell or share the skill files themselves.

Q: Is my data private?
A: It runs entirely inside your own Claude or ChatGPT account. We never see your numbers, clients or files.

Q: Can I use it on my phone?
A: Set it up once on a computer; after that it works from the Claude and ChatGPT phone apps too.

Q: Do I get updates?
A: Yes, free updates to this version. If a new version ships, message us on Etsy for the update.

Q: What if it doesn't work for me?
A: Digital files can't be returned on Etsy, but message us and we'll make it right, whether that's a fix, a walkthrough or a refund. A real person replies.

PART OF THE WEBSITE SUITE
Also in this shop: Site Architect & Copywriter, Web Freelancer Toolkit, or the full Website Suite bundle at a saving. They share one profile, so you describe your business once and every skill reads it.

INSTANT DIGITAL DOWNLOAD
One .zip file, delivered by Etsy the moment you buy. Nothing physical will be shipped. Free updates for the current version. Questions before or after buying: message us here on Etsy, a real person replies.
Version 2.0.0.

AI disclosure: this toolkit was designed and written by The Skill Mastery with the help of AI tools, then tested by hand (every calculation, template and demo checked). It runs inside Claude or ChatGPT; it is not a standalone app. Not affiliated with Anthropic or OpenAI. Claude and ChatGPT are trademarks of their respective owners.