Create an HTML landing page with Claude or ChatGPT

Market research and buyer persona

Before the copy, make the AI understand who you're talking to and why they buy. Paste this prompt (fill in product and country):

You are a direct response marketing expert. I need to sell [PRODUCT] in [COUNTRY], with cash on delivery (COD).
Give me, concisely:
1. Buyer persona: who they are, age, main problem, what they fear, what they want
2. The 3-5 strongest pain points to lean on
3. The most effective sales angle for cold traffic from Facebook/TikTok
4. The right tone of voice for this audience
5. 5 candidate headlines

Keep the answer aside: you'll pass it to Claude in Step 3.

Choose the format: advertorial or sales page

• Advertorial — looks like an article or a story ("I tried X for 30 days and..."). It sells softly: great for cold traffic that doesn't know you yet.
• Sales page — a direct sales page: problem → solution → product → offer → CTA. Good for warmer audiences or simple, impulse offers.

💡 When in doubt, for cold COD start with the advertorial: it converts better on people coming from social.

Have Claude write the HTML

This is the core prompt. Paste it into Claude together with the research from Step 1:

You are a direct-response copywriter and front-end developer. Create a landing page in a SINGLE index.html file to sell [PRODUCT] in [COUNTRY], cash on delivery.

Use this research:
[PASTE THE ANSWER FROM STEP 1 HERE]

Requirements:
- Format: [advertorial / sales page]
- Language: [country's language]
- Mobile-first, all CSS inside the file (no external libraries), fast and lightweight page.
- Structure: hook, problem, solution, benefits and proof, reviews, clear offer, FAQ, and several CTA points.
- For images use relative paths like images/img_01_hero.jpg, images/img_02_product.jpg, etc. At the end, list the images needed with a short description of each (I'll use it to generate them).
- At the CTA / order form points insert EXACTLY this placeholder (multiple times if needed): <div class="lp-form-container"></div>  — do NOT build a form by hand.
- Right before </body> insert this block, leaving the values as they are:
  <script>
    window.RoyLeadConfig = {
      captureUrl: "https://capture.roylead.com",
      apiKey: "YOUR_API_KEY",
      landingPageId: "YOUR_LANDING_PAGE_ID",
      thankYouPage: "https://yourdomain.com/thank-you.html"
    };
  </script>
  <script src="https://capture.roylead.com/tracker.js"></script>
- Give me the complete index.html file, ready to save.

💡 Claude gives you back the file and the list of images to create. Make a new folder on your computer and save the file inside it as index.html.

Create the images with ChatGPT

Take the image list Claude gave you and have ChatGPT generate them, one at a time:

Generate an image: [description from Claude's list]. Realistic photographic style, suited to a sales landing page for [PRODUCT]. Vertical format, designed for mobile.

• Download each image and rename it exactly as in the file (e.g. img_01_hero.jpg).
• Put them all in an images/ subfolder inside the landing page folder.

⚠️ Use your real photos for the product. ChatGPT is fine for hero shots, backgrounds, illustrations. No fake testimonials or untrue claims: besides being wrong, it gets your campaigns shut down.

Check the folder

In the end you should have:

• index.html
• the images/ folder with all images, with the right names
• the <div class="lp-form-container"></div> where you want the form
• the RoyLead Tracker block right before </body>

Open index.html with a double click: the page should display, the images should load, and there should be space for the form.

💡 Want to change something (some text, the section order, a color)? Tell Claude what to edit and have it return the updated file.