AI SavvyFounders Standard Operating Procedure

Standard Operating Procedure

Build a Landing Page from Nothing

Give Claude Code a short brief and your copy. It looks at your brand's website, catches the feel, and builds a complete, responsive landing page you own outright. No page builder, no developer, no template.

15 minutes Intermediate July 2026

Purpose

For most founders, a landing page means an evening lost to a page builder or a week waiting on a designer and a developer. Plenty of offers never go live at all because the page never gets made. This SOP uses Claude Code to build the entire page from a paragraph of instructions. It reads your brand's website to catch the feel, then generates a self-contained HTML file with all the CSS inline, ready to open in a browser or paste into your funnel builder.

Prerequisites

  • Claude Code (via the desktop app or terminal)
  • Your page copy written out (headline, subhead, body sections, CTAs)
  • A reference URL for your brand (or a competitor brand to learn from)
  • Your funnel builder (GoHighLevel, WordPress, etc.) for embedding (optional)
01

Open Claude Code

Launch Claude Code from the desktop app (click the Code tab) or from your terminal. Both work the same way. If you are using the desktop app, you do not need to install anything separately.

02

Write your brief

Your brief tells Claude Code three things:

  1. What brand or website to reference for the look and feel
  2. The design direction in a few words (bright and playful, warm and editorial, dark and premium)
  3. The page structure: which sections in which order

Keep the brief short. One paragraph is enough. Claude Code will go and look at the reference website to pull the palette, type feel, and overall mood.

03

Include your copy

Below the brief, paste the exact copy you want on the page. Organise it by section:

  1. Hero: headline, subheadline, button text
  2. Features or benefits: each with a title and a short description
  3. Social proof or product showcase section
  4. Final CTA: headline, button text
  5. Footer

Tell Claude Code to use the copy exactly as written. This prevents it from rewriting your messaging.

04

Run the build

Paste the full prompt (brief + copy + build instructions) into Claude Code and run it. Claude Code will:

  1. Visit the reference website and analyse the brand feel
  2. Build the page section by section as a single HTML file
  3. Include all CSS inline in a <style> tag (no external dependencies except a Google Fonts link)
  4. Make the page fully responsive
  5. Open it in your default browser when done

The build typically takes 1 to 3 minutes depending on the complexity of the page.

05

Review in your browser

Check the page at full width and on a phone-sized window. Look for:

  1. Colours matching the brand feel (close to the reference, not pixel-perfect)
  2. Typography that feels right (readable, well-spaced, correct hierarchy)
  3. Layout stacking properly on mobile
  4. Your copy appearing exactly as you wrote it

NOTE

Claude Code reads the reference site to catch the feel, so the colours and type come out in the spirit of the brand, close to it rather than pixel-for-pixel exact. This is what you want anyway, because you are building for your own brand.

06

Refine with conversation

If anything needs adjusting, describe the change in plain language. Claude Code will edit the file and refresh the browser.

  1. "Make the hero section taller with more padding"
  2. "Use a darker background on the benefits section"
  3. "Increase the font size on the CTA button"
  4. "Add more spacing between the flavour cards"

Go through one or two rounds of refinement until the page looks right.

07

Embed in your funnel builder

The output is a single HTML file. To get it live:

  1. Open your funnel builder (GoHighLevel, WordPress, Carrd, etc.)
  2. Add a custom code block or custom HTML element to a blank page
  3. Paste the entire HTML file contents into that block
  4. Save and preview

WARNING

Claude Code cannot push the page into your funnel builder automatically. GHL (and similar tools) keep their page builder closed to outside tools. The paste-into-custom-code-block step is manual. A full custom page like this sometimes needs a small tidy to sit exactly right inside the builder's container.

Full Prompt Template (Copy and Customise)

Replace the bracketed sections with your own brand, copy, and structure. This is the template used in the masterclass demo.

Prompt Build me a single-page landing page for [YOUR BRAND/PRODUCT]. First, look at their website at [WEBSITE URL] to get a feel for their brand, their colours, their fonts, and their overall vibe. Match that look and energy in what you build. Do not copy their logo or their images, just take the palette, the typography feel, and the mood. Design direction: [DESCRIBE THE FEEL: bright and playful, warm and editorial, dark and premium, etc.]. Clean and airy with generous spacing. Use the copy below exactly as written. Do not rewrite it, just lay it out beautifully. Structure, in this order: 1. HERO (full width) Headline: [YOUR HEADLINE] Subhead: [YOUR SUBHEAD] Button: [YOUR CTA TEXT] 2. [SECTION NAME] ([layout description]) [Your content for this section] 3. [SECTION NAME] ([layout description]) [Your content for this section] 4. FINAL CTA Headline: [YOUR CLOSING HEADLINE] Button: [YOUR CTA TEXT] Then a simple footer. Build it as ONE self-contained HTML file, all the CSS inline in a style tag, no frameworks and no build step, so I can paste the whole thing straight into a custom code block in my funnel builder. A Google Fonts link is fine. Make it fully responsive so it looks right on a phone. When it is done, open it in my browser so I can see it.

Frequently Asked Questions

Do I need to know how to code?

No. Claude Code writes all the code for you. You describe what you want in plain language and paste the output into your funnel builder. You never need to read or edit the code yourself.

Can I use this for my own brand instead of copying a reference?

Absolutely. Point Claude Code at your own website instead of a reference brand. It will read your site and match the look. If you do not have a website yet, describe the design direction in the brief (colours, mood, type style) and Claude Code will build from that description.

Will the page match the reference brand exactly?

It will be in the spirit of the brand rather than a pixel-perfect copy. The colours and type will feel close, which is what you want. If you need exact brand compliance, provide your specific hex codes, font names, and spacing values in the prompt.

Can Claude Code push the page live for me?

Claude Code can build the page and open it locally in your browser. Getting it live depends on your hosting setup. If you use a funnel builder like GHL, you paste the code into a custom code block. If you use GitHub Pages or a static host, Claude Code can push the file there directly.

What if the page needs images?

If you have images, place them in a folder and tell Claude Code where they are. It will reference them in the HTML. If you do not have images yet, Claude Code can use placeholder sections or suggest free image sources.