How to build a landing page with Claude AI and systeme.io

Generate the landing page with Claude

Open claude.ai and paste this prompt. Swap out the bracketed sections with your own details:

Build me a modern landing page for my [NICHE] business.

Brand name: [YOUR BRAND NAME]

Goal: [WHAT YOU WANT VISITORS TO DO, e.g. download a free eBook, join a waitlist, sign up for a newsletter, book a free consultation]

Design direction: [PICK ONE: dark and bold / light and clean / warm and inviting / colorful and energetic]

Colors: [YOUR BRAND COLORS, e.g. #1A1A2E and #E94560 / or leave blank and let the AI choose a distinctive palette]

The page should capture leads with an opt-in form. Make it visually impressive with strong typography contrast, layered sections with depth (shadows, gradients, overlays), and real visual hierarchy so the eye moves naturally from headline to form. Use lots of images. Make it mobile responsive.

Include scroll-reveal animations on sections and cards.

Don't use a generic template look. Every section should feel like a deliberate design decision, not a default.

Important: Wrap all content inside a single container div with a unique ID, and scope all CSS styles to that container so they don't affect anything outside of it. Any JavaScript should only run when the page URL does not contain "/dashboard".

Claude will generate a complete HTML page: full layout, copy, images, form fields, styling, everything.

Here's the exact prompt used to generate the prompt library page above:

Build me a modern landing page for my AI prompts business.

Brand name: systeme.io

Goal: download a free library of 30 AI prompts for building, launching, and selling online (landing pages, email sequences, course outlines, sales copy, ad copy, and social content)

Design direction: dark and bold

Colors: #00A0FF and #19191B

The page should capture leads with an opt-in form. Make it visually impressive with strong typography contrast, layered sections with depth (shadows, gradients, overlays), and real visual hierarchy so the eye moves naturally from headline to form. Use lots of images. Make it mobile responsive.

Include scroll-reveal animations on sections and cards.

Don't use a generic template look. Every section should feel like a deliberate design decision, not a default.

Important: Wrap all content inside a single container div with a unique ID, and scope all CSS styles to that container so they don't affect anything outside of it. Any JavaScript should only run when the page URL does not contain "/dashboard".

Convert the code with the Raw HTML Converter

Systeme.io's page editor accepts code that goes inside the <body> tag only. Claude generates a full HTML document with headers, font imports, and wrapper tags that would break if pasted directly.

The Raw HTML Converter fixes this in one click.

1. Paste Claude's full HTML output into the left panel ("Paste your HTML")

2. Click Convert for systeme.io at the bottom

3. The converted code appears on the right panel ("systeme.io-ready output"). Click the Copy button in the top right corner of that panel.

   

The converter moves styles into the body, strips the document wrapper, caps z-index values so they don't conflict with systeme.io's editor, and keeps your fonts alive. Takes about 3 seconds.

Set up the funnel in systeme.io

Now you need a place to put the page.

1. Log into systeme.io and go to Sales funnels

   

2. Click Create (top right)

3. Give your funnel a name (e.g. "Lead magnet - 30 prompts")

4. Choose a funnel domain from the dropdown

5. Under "Choose your funnel goal", select Custom

6. Click Save

   

7. You're now inside your funnel. Click Add step in the left sidebar

8. Name your step (e.g. "30 prompts library")

9. Set the type to Opt-in page

10. Select Start from scratch and click Save

    

11. Click Edit page to open the editor

    

Add the Claude HTML page to systeme.io

Now paste the converted code into the editor and clean up the layout.

1. In the left sidebar, scroll down to the Other section

2. Drag the Raw HTML element onto the canvas

   

3. Click on the Raw HTML element to select it

4. In the left panel, click the Edit code button

   

5. A code editor will open. Paste the converted code from Step 2 into the text area

6. Click Save

   

7. Now remove the default padding so your page goes edge-to-edge. Click Row in the top breadcrumb (Section > Row > Raw HTML) and set both Padding values to 0

   

   

8. Then click Section in the breadcrumb and set both Padding values to 0 as well

   

9. Do the same for the mobile version

   

   

   

10. Save your page

    

Add a native systeme.io form

This is the step that makes your page actually capture leads. You'll add systeme.io's native form and configure what happens when someone submits.

1. In the editor, go back to the left sidebar. Under Column layout, drag a Row element onto the page below the Raw HTML block

   

2. Now drag a Form element (from the Form section) into that new row

   

3. The native form comes with default fields. Remove any fields that don't match your custom HTML form by clicking the trash icon next to them.

   For example, if your custom form only asks for a first name and email, delete the "Last name" field and the checkbox. You should be left with just "First name", "Email", and "Submit button".

   

4. Click the Actions tab at the top of the form panel. Here you can set what happens after someone submits: redirect to a custom URL (like a thank-you page) or enable double opt-in.

   

5. Click Add automation rule at the bottom to choose what happens when a lead comes in: add a tag, subscribe to a campaign, send an email, enroll in a course, and more.

   

6. Click Save in the top right corner

   

Connect the Claude form to systeme.io

This is where the magic happens. You'll use the free HTML Form Connector tool to generate a bridge script that links your custom form to systeme.io's native form.

1. Click on the native form element, then open the Design tab

   

2. Scroll down to (Advanced) HTML attributes at the bottom. You'll see the form's ID attribute (e.g. optinform-410da88f). Click the copy icon next to it.

   

3. Open the HTML Form Connector tool: https://systeme.io/free-tools/html-form-connector

4. Paste the form ID into the Native form ID field

   

5. Now go back to the editor, click on the Raw HTML element, click Edit code, and select all the code (Ctrl+A / Cmd+A). Copy it.

   

6. Go back to the HTML Form Connector and paste the code into the Page HTML field. The tool will detect your form fields automatically (you'll see them listed below the text area).

7. Click Generate bridge script

   

8. The output panel will show your page code with the bridge script added. You'll see a confirmation like "Bridge added. 1 form wired, 2 fields mapped." Click Copy output.

   

9. Go back to the editor, open the Raw HTML code editor again, select all the existing code (Ctrl+A / Cmd+A), and replace it with the output you just copied. Click Save.

   

10. Click Save in the top right corner of the editor

The visitor sees your beautiful AI-designed form. Behind the scenes, systeme.io's native form handles the actual submission. The lead lands in your contacts, tags get applied, automations fire. Everything works as if they'd used the default form.

Test your landing page

Your page is already live. Every time you save in the editor, the live page updates automatically.

1. Go to your funnel step settings (click the step name in the left sidebar)

2. Under URL Path, you'll see an auto-generated path. You can replace it with something clean and readable

   

3. Click View funnel step to open the live page in a new tab

   

4. Submit a test email through your form

   

5. If your page has more than one form, test each one

6. Go to Contacts in systeme.io and confirm both test leads appeared