You can build a short-term program landing page in Gym Lead Machine from custom HTML code that an AI tool like Claude writes for you. This article covers how to prompt your AI tool for code that displays correctly in Gym Lead Machine, how to build the page from that code, how to fix common display issues, and how to update the page later without knowing how to code.

What you can do with AI-generated landing pages

• Build a custom-designed page for a specific, time-bound program

• Get page code from Claude or a similar AI tool, section by section

• Capture leads with a Gym Lead Machine form placed between code sections

• Point buttons to an on-page form or to an outside page, like a checkout

• Update copy, prices, and buttons later by asking your AI tool for new code

Custom code vs. the drag-and-drop builder: which should you use?

Gym Lead Machine has two separate ways to build a landing page. With the drag-and-drop builder, you add rows, columns, text, images, and forms by dragging them into place, and you edit them by clicking and typing. With Custom Code elements, you paste HTML into a special block, and the page displays exactly as the code describes. Content inside a Custom Code element can only be changed by changing the code.

Once you build a page from custom code, every future update comes from your AI tool. You ask it for updated code and paste that code into the existing block. Kilo Support can't edit or troubleshoot the code for you.

For updates or requests related to your main website, submit a website request form.

Write a prompt for Gym Lead Machine-friendly code

Most problems with AI-generated landing pages come from the prompt. When your AI tool knows what Gym Lead Machine can and can't handle, the code works much better on the first try.

Page structure

• Name the platform. Tell the AI the page will live inside Gym Lead Machine (GLM), so it writes code for where the page is going.

• Ask for separate, numbered blocks. Each block is one section of the page, such as the hero at the top, pricing, or the FAQ. Numbered blocks show you exactly what to paste where, and let you update one section later without touching the rest.

• Ask for code that fits inside a page. Tell the AI not to include <!DOCTYPE>, <html>, <head>, or <body> tags. Gym Lead Machine already provides those, and duplicates make the page look broken.

• Ask for a Setup Block as Block 0. Block 0 is a small piece of code you paste first on the page. It keeps your fonts from being overridden on the live page and makes every section span edge to edge on desktop. Tell the AI that Block 0 is a normal block you paste into the page, and not something for the Custom CSS settings.

• Give the AI a label for its style names. A short prefix, like myprogram-, in front of every style name keeps your styles separate from Gym Lead Machine's built-in styles. Pick anything short and lowercase, with no spaces.

• Ask for each section's styles to stay inside that section. This keeps styling for one section from changing another.

Forms and buttons

• Tell the AI not to build a form into the code. No name fields, email fields, or submit buttons, and no form embed code or iframe. Forms embedded inside a code block cause spacing and sizing problems that are hard to fix.

• Ask for a form placeholder instead. The AI leaves a placeholder note where the form goes and tells you which two blocks the form belongs between, for example, "Add the form between Block 8 and Block 9." You add the form yourself in Gym Lead Machine.

• Tell the AI what every button does. Buttons can scroll down to the form on the page or send visitors to another URL, and you can mix the two. Common link-out destinations include your main website's info or calendar page, the share link for a hosted Gym Lead Machine form, and a Kilo GMS or other checkout page.

• Skip the form if you don't need one. If every button links out, say so, and the AI leaves out the form placeholder.

Fonts and mobile

• Lock in your fonts. Ask the AI to use !important on every font setting. Without it, Gym Lead Machine's default styles can turn your fonts into Times New Roman when the page publishes.

• Ask for a mobile version of every section. Include the phrase "include a @media(max-width:600px) rule in every section so it works on mobile." Each section then stacks neatly on a phone.

Your brand and program

• Share your brand details: brand colors as hex codes (for example, #91b840), your website URL so the AI can match your style, and any font preferences.

• Describe the program: who it's for, what's included, the price, and what you want visitors to do, such as join a waitlist, book a call, or sign up.

• Describe the tone you want. "Warm and encouraging, for people who haven't worked out in years" produces very different copy than "high-energy and competitive, for athletes chasing a PR."

Sample prompt

Copy this prompt into Claude or your AI tool, and replace everything in square brackets with your own details before you send it.

I need you to build a landing page for a program I'm running at my gym. The page will be hosted on Gym Lead Machine (GLM). Please follow these technical requirements exactly.

OUTPUT FORMAT

1. Return the page as separate HTML section blocks, one per section. Label them clearly: Block 0 of X, Block 1 of X, Block 2 of X, and so on, in the order I should paste them into GLM, top to bottom.
2. Each block must be a self-contained HTML fragment. Do NOT include <!DOCTYPE>, <html>, <head>, or <body> tags anywhere.
3. Prefix every CSS class name with glmpage- so my styles don't collide with GLM's. Use this same prefix on the section element of every block (for example, <section class="glmpage-hero">).
4. Each section block should have its own scoped <style> block that only targets its own prefixed classes.
5. Use !important on every font-family declaration so GLM's global styles don't override them.
6. Include a @media(max-width:600px) rule in every section so it works on mobile and stacks columns to a single column where appropriate.

BLOCK 0: THE SETUP BLOCK (PLEASE READ CAREFULLY)

The first block you return must be Block 0, a Setup Block. This is a paste-in HTML block that I'll drop into the very top row of my page as a Custom Code element. It is NOT instructions for me to paste into GLM's Custom CSS field. Generate it as actual HTML I'll paste into a Custom Code element in the page itself.

Block 0 must contain a single <style> tag that does two things:
1. Forces my custom font family on every section that starts with my prefix, using !important on font-family declarations. Apply this to the section, all descendants, and headings (h1, h2, h3).
2. Forces full-width rendering on desktop. GLM wraps Custom Code elements in row, section, and wrapper containers that have default max-widths and side padding, which leaves white margins on either side of my colored backgrounds. Block 0 needs to override these.

Specifically, Block 0 must include CSS that:
1. Targets GLM's row and section wrapper classes (.c-section, .c-wrapper, .c-row, .row, .row-wrapper, .hl-page-row, .hl-row, .hl-section, and any div[class*="row"] or div[class*="Row"]) and forces max-width: 100% !important, width: 100% !important, and zero left/right padding and margin with !important.
2. Targets every section that starts with my prefix (section[class^="[YOUR PREFIX]-"]) and forces it to span the full viewport using margin-left: calc(-50vw + 50%) !important, margin-right: calc(-50vw + 50%) !important, width: 100vw !important, and max-width: 100vw !important.

Return Block 0 as a labeled HTML block I can paste into a Custom Code element. Do not describe it in plain English, and do not tell me to paste any of it into GLM's Custom CSS field.

ON-PAGE FORM BEHAVIOR (READ THIS EVEN IF YOU THINK YOU KNOW HOW TO DO IT)

1. Do NOT include any raw HTML form inputs, no <form> tag, no <input> fields, no GLM form embed code, and no iframes.
2. If the page should include an on-page lead form, leave a single placeholder comment in the appropriate spot like <!-- GLM FORM GOES HERE --> and tell me clearly which two blocks the form should be added between (for example, "Add a native GLM Form element between Block 8 and Block 9"). I'll add the native form in GLM directly, as its own row.
3. If a button should scroll to that form, place a scroll target <div id="form-anchor"></div> inside the block immediately above where the form will live, and have every scroll button use href="#form-anchor".
4. If a button should link to an external URL, use a proper <a href="..."> tag with target="_blank" and rel="noopener" so it opens in a new tab.

MY BRAND DETAILS

1. Business name: [YOUR GYM NAME]
2. Website: [YOUR WEBSITE URL]
3. Brand colors: [PRIMARY HEX], [SECONDARY HEX], [ACCENT HEX]
4. Preferred font family: [FONT STACK, or say "clean modern sans-serif"]
5. Class prefix to use on every class: glmpage- [change if you prefer]

BUTTON DESTINATIONS

1. Primary buttons (hero, pricing section, final CTA) should: [CHOICE A: scroll to an on-page GLM form / CHOICE B: link to this URL: [PASTE URL HERE] and open in a new tab]
2. If any buttons should go to different destinations, list them here: [for example, "The pricing button should go to my checkout page at [CHECKOUT URL], but the hero and final CTA buttons should scroll to the form"]

ABOUT THE PROGRAM

1. Name: [PROGRAM NAME]
2. Length: [DURATION]
3. Who it's for: [TARGET AUDIENCE]
4. What's included: [LIST OF DELIVERABLES]
5. Price: [PRICE]
6. Main call to action: [JOIN WAITLIST / BOOK A CALL / ENROLL NOW]
7. Vibe and tone: [warm and encouraging / hard-charging and competitive / clean and clinical]
8. Key sections I want on the page: hero, problem statement, program overview, what's included, pricing, FAQ, final call to action

FINAL REMINDERS

1. Please label every block clearly as "Block 0 of X," "Block 1 of X," and so on, in the order I should paste them into GLM, top to bottom.
2. Do not use em dashes anywhere in the copy. Use hyphens, periods, or restructured sentences instead.
3. After the last block, please tell me exactly which two blocks the native GLM Form element should be added between (if I'm using one).

Review the copy before you build

Read through the copy in your AI tool's preview and make sure it sounds like your brand. Ask for rewrites of any section where the tone feels off, and keep revising until you're happy with it. Getting the content right first saves you from replacing blocks one at a time in Gym Lead Machine later.

Build the page in Gym Lead Machine

Set up the page and Block 0

1. Go to Sites and open Funnels or Websites.

2. Create a new blank landing page with a clear name, such as "Gut Reset Waitlist" or "6-Week Challenge."

3. Choose a blank template with no default header, footer, or pre-built sections.

4. Add a new row and set it to Full Width.

5. Set the column padding to 0 on the left and right.

6. Add a single column to the row, then add a Custom Code element to the column.

7. Paste all of Block 0 into the Custom Code element, including the <style> tag and everything inside it.

Block 0 doesn't display anything on the page. It sets the font and width rules for every block below it.

[CALLOUT — Note] Block 0 goes into a Custom Code element in the page's first row, like every other block. It doesn't go into the Custom CSS field.

Add the rest of your blocks

Repeat these steps for each block, in the order your AI tool numbered them, starting with Block 1:

1. Add a new row.

2. Set the row to Full Width.

3. Set the column padding to 0 on the left and right.

4. Add a column and a Custom Code element.

5. Paste the block's code.

6. Click Save.

Every row needs the Full Width setting and zero side padding. Block 0 reinforces full-width display with code, and the row settings keep the editor preview accurate.

Add your form

If your page uses an on-page form, add it where your AI tool told you to. If every button links out to another page, skip this section.

1. Between the two blocks your AI tool named, add a new row.

2. Set the row to Full Width with 0 padding on the left and right.

3. Add a native Gym Lead Machine Form element to the row.

4. Select the form you prepared for this page.

If you haven't built the form yet, save the landing page and go to Sites → Forms. Duplicating and editing one of your existing forms is often the quickest route. Once the form is ready, contact Kilo Support so we can make sure it's connected to collect leads. Let us know:

• The tag to apply to new leads from the form

• The pipeline, if any, that leads should enter

• The follow-up to trigger, either a workflow you've created or the content of a single email

• Who on your team should be notified

The form has to be its own row, stacked between two code rows. A form embedded inside a Custom Code element causes spacing and sizing problems and doesn't capture leads cleanly.

Preview and publish

1. Click Save.

2. Open the published page in an incognito browser window. The builder preview can show cached styles that don't match the live page.

3. Check that fonts display correctly, colored backgrounds reach the edges on desktop, and the layout works on your phone.

4. Check that each button scrolls to the form or opens the right page, in a new tab if you asked for one.

5. If you're using a form, submit a test entry to yourself.

6. Publish the page.

7. Test the full lead flow, from the landing page to the form or link destination to the follow-up.

If something displays incorrectly, describe the problem to your AI tool and ask for updated code to paste into the block.

Update the page after it's live

Content inside Custom Code elements can't be edited by clicking on it in Gym Lead Machine. To change the page, you change the code, and your AI tool does that part for you.

1. Return to the chat where you built the page, or open a new chat with your AI tool.

2. If you're starting a new chat, paste or upload the original code for every block.

3. Describe the change in plain language, for example, "Change the price in Block 6 from $150 to $197."

4. Ask the AI to return only the updated block in full, for example, "Please return only the updated Block 6 in full so I can replace the existing block."

5. In Gym Lead Machine, open the page in edit mode and click into the Custom Code element for that block.

6. Select all of the existing code, delete it, and paste the new code.

7. Save and preview the page in an incognito window.

8. Publish when you're satisfied.

Keep a master copy of your page's code outside Gym Lead Machine, in a text file, a document, or a dedicated chat with your AI tool. When you want to make changes months later, you can give the AI the full original code and get targeted updates back.

Other changes you can request the same way:

• "Add a new FAQ item to Block 7 that asks 'Is there a payment plan?'"

• "Update the headline in Block 1 to say 'The Spring Reset Challenge.'"

• "Change the hero button in Block 1 to link to [your URL] and open in a new tab, instead of scrolling to the form."

• "Change the background color in Block 3 to [hex code]."

Frequently asked questions

Can Kilo Support edit or fix my custom code?

No. Kilo Support can't edit your code or identify errors in it. For display problems, describe the issue to your AI tool and paste in the updated code it gives you. Kilo Support can help with forms that aren't capturing leads and with tag, pipeline, and automation setup.

Why do my fonts look like Times New Roman on the live page?

Gym Lead Machine's default styles are overriding your fonts. Make sure Block 0 is in the very first Custom Code element on the page. If it already is, ask your AI tool to regenerate Block 0 with !important on every font-family setting, including the h1, h2, and h3 headings.

Why are there white margins on the sides of my page on desktop?

Block 0 controls full-width display, so start there. Work through these checks in order:

1. Confirm Block 0 is in the first Custom Code element on the page, above every other block.

2. Confirm every row with a code block is set to Full Width with 0 column padding on the left and right.

3. Ask your AI tool to add more Gym Lead Machine container selectors to Block 0.

4. As a last resort, copy the <style> content from Block 0 into the Custom CSS field in the page settings as a backup.

Why does my page look fine in the preview but broken when it's published?

The builder preview can show cached or outdated styles. Always check the published URL in an incognito window. If the live page really does differ, a style is being overridden when the page publishes. Describe what's broken to your AI tool and ask for a revised block.

Why is my mobile layout stacked strangely or cut off?

Your sections may be missing their mobile rules. Ask your AI tool: "Please add mobile responsive rules to each block so columns stack to one column on screens under 600px wide."

Why isn't my on-page form capturing leads?

Only a native Gym Lead Machine Form element, added as its own row, connects to your contacts. Form fields built into the code don't connect, so delete any <input> fields from your blocks. Remove any form embed code from your blocks too, and replace it with a placeholder comment. Then add a native Form element as its own row, between the two blocks your AI tool named.

Why is my page too wide or too narrow on desktop?

Each block's inner content width is set by a max-width value in the code. The outer sections are full width by design. Ask your AI tool to adjust the inner width; a range of 720–960px works well for most pages.

Why is my button going to the wrong place or not clicking?

The button's link in the code needs updating. Ask your AI tool, for example, "Please update the button in Block 4 to link to [your URL] and open in a new tab," or "Please update the button in Block 4 to scroll to the on-page form instead." Then replace the block with the updated code.

Why do my link buttons open in the same tab?

The link needs the attributes that open a new tab. Ask your AI tool to update the button so it opens in a new tab, then replace the block with the updated code.

Why don't my buttons scroll to the form?

Each scroll button has to point to a matching anchor on the page. Ask your AI tool to add a scroll anchor right above the form's position and update the buttons to point to it, then replace the affected blocks.

Helpful tips

• Get the copy right in your AI tool before you paste anything into Gym Lead Machine

• Set every row to Full Width with 0 side padding

• Paste blocks in the order your AI tool numbered them

• Check the published page in an incognito window, not just the builder preview

• Ask for only the updated block when you make a change

• Save a master copy of your page code outside Gym Lead Machine

• Duplicate an existing form when you need a new one for the page

When this feature is most helpful

• Launching a six-week challenge or seasonal transformation program

• Opening a waitlist for a new program

• Promoting a nutrition program launch

• Collecting leads for a specific, time-bound event or offer

If you have questions about landing pages in Gym Lead Machine, our Support team is happy to help. Reach us at hello@usekilo.com.