The Claude Design Landing Page Clone Playbook (Mike Futia / SCALE AI)

Source: raw/the-claude-design-landing-page-clone-playbook.md — 6-step playbook from Mike Futia (SCALE AI, mikefutia.com/scale-ai) on using Claude Design (the claude.ai web app feature) to rebuild a proven competitor e-commerce landing page for your own brand in under an hour. Original .docx archived at raw/the-claude-design-landing-page-clone-playbook.docx.

The landing-page counterpart to the Claude Design Email Playbook — same author, same SCALE AI series, same shape (one-time design-system setup → reference capture → structured build prompt → screenshot-driven iteration → image fill → HTML export). This one rebuilds high-converting DTC landers by cloning a competitor’s section structure (never their copy or branding) and rebuilding everything else for your brand. Targets advertorial / pre-sell pages that have proven themselves on Meta, and ships to Shopify or a page builder.

Key Takeaways

The “extract structure, not copy” thesis

The load-bearing ethical-and-practical rule: you clone the persuasion architecture, not the content. You’re studying the section order and layout of a lander that’s already proven to convert, then rebuilding every section with your own design system, copy, and imagery. The author’s argument is that this is also the higher-performing path — “copy that’s already tuned for your audience and product will outperform a cloned version of someone else’s copy anyway.” The competitor lander is a structural template, not a thing to duplicate.

How to pick the page to clone

• 60-day Meta longevity = a converting structure. Pull candidates from the Meta Ad Library: search a competitor brand, filter to active ads, look for advertorials and pre-sell pages that have run since Q1 with consistent creative rotation. Longevity on paid is the proxy for “this structure works.”
• You are looking for persuasion architecture worth borrowing, not a brand to copy.

The six-step pipeline

Step	What	Surface	Time
1. Capture	Full-page screenshot of the competitor lander	Chrome + Go Full Page extension	2 min
2. Initial build prompt	Inventory every section in order → rebuild structure for your brand	Claude Design (brand project)	4-6 min
3. Section-by-section iteration	Fix top-down, hero first; always paste a reference screenshot	Claude Design	bulk of the time
4. Add real images	Fill every placeholder (Claude Design can’t generate images)	upload product / Higgsfield / GPT Image 2	varies
5. Desktop vs mobile	Mobile-first build → add viewport switcher → fix desktop separately	Claude Design	10-20 min
6. Deploy	Export production-ready HTML → Shopify / page builder	Claude Design → Shopify/Replo/Shogun	5 min

Per-lander total: under 60 minutes once your design systems are loaded. New lander, new screenshots, same pipeline.

The one prerequisite that compounds

Set up a brand project in Claude Design once — logo files, hex codes, fonts, product imagery. Claude Design auto-loads it on every new prototype in that project. This is the same compounding-leverage step as the email playbook: do it once, it carries forward across every page you ever build for that brand.

The initial build prompt (verbatim structure)

I’m attaching screenshots of a competitor landing page. Do NOT copy their branding, copy, or imagery. Analyze the screenshots and identify every section on the page in order. Rebuild that exact section structure as a landing page for [YOUR BRAND]. Apply the [YOUR BRAND] design system. Rewrite all copy for [YOUR BRAND]‘s product, audience, and positioning. Mobile optimize. No nav, no footer.

Claude Design first inventories the sections in sequence, then builds each. The first pass is intentionally not perfect — the value is the iteration loop, not the one-shot.

The screenshot-driven iteration rule (the core technique)

Always send a reference screenshot when you want a design change. Crop the specific competitor section, paste it into the next prompt, and describe the change in plain English (“mirror this hero’s layout and visual hierarchy, keep our branding and copy”). Claude Design reprocesses just that section against the visual target. The author is emphatic: a 3-second screenshot paste outperforms two paragraphs of written direction. Work top-down — hero first, then founder/story, problem/pain, social proof, then comparison table / FAQ / final CTA (the straightforward ones).

Claude Design can’t generate images — fill every placeholder

Layout and copy come out well; images are always placeholders until you upload real assets. The fill sources the playbook names:

• Product shots — upload your real product photography, reference the placeholder by name.
• Founder/creator images — generate a lifestyle shot in Higgsfield or pull a professional headshot (e.g. LinkedIn).
• UGC-style creator images — generate in GPT Image 2 or Nano Banana 2.

Workflow: generate or source → download → drag into Claude Design alongside the placement prompt.

Mobile-first, then desktop

Prompting “mobile optimize” up front yields a better first pass. To get desktop, ask Claude Design to add a viewport switcher, then iterate the desktop layout separately — desktop breakage (displaced images, hero scaling, collapsed columns) is common after a mobile-first build and fixes through the same screenshot-and-prompt loop.

Deploy

Claude Design outputs production-ready HTML. For Shopify, paste it into a custom page template; for standalone advertorial/pre-sell pages, deploy via Replo, Shogun, or any page builder.

What it handles well vs needs help with

• Handles well: long/complex section structures (tested on 30+ section landers), live elements (countdown timers, scroll/animation effects), brand-voice rewrites with enough context, section-by-section reference-screenshot iteration, mobile-first layouts with viewport switching.
• Needs help with: images (always placeholders), video (placeholder boxes only), complex interactive elements (quizzes, multi-step forms), desktop-first layouts (mobile-first prompt produces better initial output).

Cost framing — agency-replacement math

The author’s honest take: Claude Design won’t one-shot a perfect page, but it moves you from blank canvas to a deployment-ready lander in under an hour at $0 incremental cost beyond your Claude subscription — versus freelancer rates and turnaround for a comparable output. For agencies, the same pipeline runs across multiple clients once each brand’s design system is loaded. Same unit-economics inversion as the email playbook: the leverage exists whether or not you fire the agency tomorrow.

Why It Matters

• Closes the “Claude drafted copy” → “Claude shipped a finished lander” gap. Most AI-landing-page coverage stops at copy or a one-shot mockup; this walks the full path to deployable HTML on Shopify.
• Reference-driven, not greenfield. Cloning a proven structure collapses “what should this look like?” decisions and gives Claude Design a concrete visual target — the same higher-leverage pattern the email playbook uses, applied to landers.
• The screenshot-paste iteration loop is the transferable skill. “Show, don’t tell” for design direction generalizes to every Claude Design use case (email, decks, ad creative).
• Honest about the ceiling. Explicitly lists what Claude Design can’t do (images, video, complex interactivity), so you budget the image-fill and desktop-cleanup work instead of treating it as failure.
• Structure-not-copy keeps it defensible. The borrow-the-architecture / rebuild-everything-else framing is both the ethical line and the performance argument.

Implementation

Tool/Service: Claude Design (claude.ai web app feature, “prototype” mode) + Go Full Page Chrome extension (free, full-page screenshots) + a PNG compressor (TinyPNG / Compressor.io, free) + an image source for placeholders (your product photos / Higgsfield / GPT Image 2 / Nano Banana 2) + a deploy target (Shopify custom page template, or Replo / Shogun / any page builder).

Setup:

1. Paid Claude plan (Claude Design requires Pro or Max). Max gives the most Design quota for agency volume.
2. Install Go Full Page (captures pages thousands of pixels tall as one or two PNGs).
3. Build the brand design system once inside a Claude Design project — logo files, hex codes, fonts, product imagery. Auto-loads on every prototype in that project.
4. (As needed) image generation — Higgsfield for founder/lifestyle, GPT Image 2 / Nano Banana 2 for UGC creator shots.

Cost: Claude Pro (~$17-20/mo)orMax($100-200/mo); all Chrome extensions and the compressors are free. Incremental cost per lander after setup is effectively $0 beyond the subscription.

Integration notes:

• Keep PNG uploads under ~5MB (compress 60-70% if larger) — oversized screenshots can fail to upload to Claude Design.
• “No nav, no footer” in the build prompt keeps the output scoped to the lander body for advertorial/pre-sell use.
• Claude Design has its own usage limits separate from regular Claude chat (see the email playbook’s credit-burn discipline — do strategy/prompt-writing in regular Claude, batch inline edits, disable the interactive-prototype tag for static pages).
• The exported HTML is the operator’s responsibility to QA for cross-device rendering before running paid traffic to it.

Try It

1. Load your brand design system into a Claude Design project (one-time, ~15 min).
2. Find one Meta-proven lander — open the Meta Ad Library, filter a competitor to active ads, pick an advertorial/pre-sell that’s been live 60+ days.
3. Capture it with Go Full Page, compress if over 5MB.
4. Run the initial build prompt (section inventory + brand rewrite + mobile optimize + no nav/footer) with the screenshots attached.
5. Iterate hero-first, top-down, pasting a cropped competitor screenshot with every design-change request.
6. Fill image placeholders (product photos / Higgsfield / GPT Image 2), then add a viewport switcher and clean up desktop.
7. Export the HTML and deploy to a Shopify custom page or a page builder. Time the cycle — by the third lander you’ll be under an hour.

Related

• SCALE AI) — the sibling playbook; same author, same series, email instead of landers. Read both as a pair.
• Claude Design (Entity) — the umbrella product page; this playbook is the landing-page-cloning application.
• Claude Design — Build Websites — sibling on the general website-build path (vs this clone-a-proven-lander path).
• AI Website Cloner Template — the Claude Code alternative (/clone-website into a local Next.js project) — a code-first contrast to this Claude-Design-web-app approach.
• Claude Design Walkthrough — generalist working method for prompting Claude Design.
• Claude Design Use Cases — broader cases beyond landers.
• Higgsfield MCP Content Factory — image/asset generation for founder/lifestyle placeholders.
• AI Marketing — adjacent topic for DTC landing-page strategy, Meta creative, and conversion work.

Open Questions

• Conversion-rate validation. The playbook assumes a Meta-proven structure transfers to your brand; it doesn’t cover A/B testing the rebuilt lander against a control. Treat structure-borrowing as a hypothesis to test, not a guarantee.
• Claude Design credits in token terms. Same unmeasured-opaque-resource gap as the email playbook — no per-lander credit cost is pinned.
• Shopify theme vs standalone page builder — the deploy section lists both paths but doesn’t detail tracking/pixel/checkout-handoff differences between an in-theme custom page and a Replo/Shogun standalone.
• IP / brand-similarity line. “Structure not copy” is the stated guardrail, but how visually close is too close is left to operator judgment. No legal framing provided.
• Image-realism for UGC sections. Generating “realistic creator images” for social-proof blocks raises disclosure/authenticity questions the playbook doesn’t address.