Video walkthroughs · Claude Code Club

How To Build A $10,000 Mobile Microsite With Claude Code

14 minute read · Companion guide to “Claude Fable 5 Builds Beautiful $10,000 Websites”

Most people building websites with AI are optimizing the wrong thing. They are optimizing for how the site looks in a screenshot. Agencies that charge five figures for a single page are optimizing for something else entirely, and once you see what it is, the whole build changes shape.

Watch the full build: plumbing microsite, start to finish

Why a simple-looking page is worth $10,000

There are studios that build a single scrolling page for the NFL, for the Olympics, for consumer brands you have heard of, and charge ten, twenty, fifty thousand dollars for it. Look at the work and it can seem almost simple. One page. A handful of sections. No dashboard, no login, no database.

What the client is buying is one word: conversions. A site can look incredible and be worthless. If the visitor does not fill in the form, book the call, or buy the thing, the site failed at the only job it had. Design is the delivery mechanism. Conversion is the product.

That reframe has a practical consequence. Every decision in the build has to answer to it. Not "is this beautiful" but "does this move someone one step closer to acting." A gorgeous hero animation that pushes the offer below three scrolls is a downgrade, not an upgrade. Once you hold that line, the five stages below stop feeling like a checklist and start feeling obvious.

Stage 1: Mine the exact words your buyer already uses

This is the stage almost everyone skips, and it is the one that moves conversion the most. Before a single line of copy gets written, go collect the real sentences your buyer writes when nobody is selling to them. Reddit threads. Google and Yelp reviews, especially the three-star ones where people explain what actually went wrong. Niche forums. Facebook groups. Comment sections under competitor videos.

You are collecting four things, and it helps to keep them in four separate lists:

• Pain in their words. Not "inefficient plumbing infrastructure" but "the ceiling stain came back in the same spot."
• Desired end state. What they say life looks like after the problem is gone.
• Hesitation. The reason they did not buy last time. Price, trust, timing, fear of being upsold.
• Vocabulary. The nouns and verbs of the trade that an outsider would get wrong. Using the wrong word marks you as an outsider in one line.

Then write the page in those words. When a visitor reads a sentence that sounds like the one in their own head, they recognize themselves, and recognition is what buys you the next scroll. That is the entire mechanism. It is not clever copywriting. It is accurate quoting.

A worked example. Research on the plumbing industry surfaced one finding that reshaped the whole build: every plumbing site in the market screams at the same person, the panicked homeowner googling at 11pm with water on the floor. Nobody designs for the person weighing an $8,000 whole-home repipe. Same industry, completely different buyer, and one of them is worth ten times the other.

The decision that changes the number: which buyer you aim at

That plumbing finding is worth pulling out on its own, because it generalizes to every niche you will ever build for. In most markets there is a loud, cheap, urgent buyer that all the existing sites compete for, and a quieter, patient, high-value buyer that nobody is designing for. Emergency call versus planned repipe. Speeding ticket versus a case that decides someone's next five years. One-off logo versus a brand system.

The tells that you have found the high-value buyer:

• They research for weeks instead of minutes, so the page has room to make an argument.
• They are comparing on trust and competence, not on price.
• The decision has consequences they cannot undo cheaply.
• Competitor sites do not speak to them at all, because those sites were built for volume.

Aiming at that buyer changes everything downstream. The tone gets calmer. The proof gets heavier. The visuals get more premium and less alarming. The call to action becomes a walkthrough or a consult instead of a panic button. Make this decision explicitly and write it down before you build, because every later choice inherits from it.

Stage 2: Turn the offer into one continuous scroll story

The default shape of a website is a stack of disconnected blocks: hero, features, testimonials, pricing, footer. It is a filing cabinet. Nobody feels anything scrolling a filing cabinet.

Replace it with one continuous journey that acts out the transformation you are selling. Decide two points first. Where does the visitor start emotionally, and where do they end up. Then every scroll beat between those points does one job: move them one step along that line.

A reliable beat order that works across industries:

1. Name the moment they are in, in their words, so precisely that it is uncomfortable.
2. Raise the stakes with what happens if nothing changes. Concrete and physical beats abstract every time.
3. Introduce the mechanism, not the company. How the problem actually gets solved.
4. Show the proof: results, reviews, credentials, work. This is where a skeptic either relaxes or leaves.
5. Remove the friction. Price clarity, guarantees, what happens on the call, how long it takes.
6. Ask for the one action, in the calmest sentence on the page.

The legal example from the video hits these beats hard. It opens with "it is 3am and a stranger just told you to plead guilty by morning." Then the stakes: the state has a hundred lawyers and all the time in the world, you have ten minutes. Then the mechanism: make them prove the stop was legal, the search was clean, the rights were read. Then the ask: the first call is free and confidential. That is the whole arc in four screens, and none of it is about the firm.

The plumbing build does the same thing with a physical metaphor instead of a scene. The scroll flies into the house, down through the walls, along the pipes. The copy tracks it: your house was built in 1926, so were its pipes. Small leaks never stay small. Every year you wait, the water gets closer to the framing, the things that cannot be replaced. The animation is not decoration. It is the argument, moving.

Stage 3: Generate only the assets that earn their place

These sites use generated photography and video rather than stock, which is what makes them feel bespoke instead of templated. The practical piece is connecting an image and video generator directly to Claude Code so the build can produce its own assets in the same pass, rather than you going out to a separate tool and dragging files back.

Higgsfield is the one used in the video, and it exposes an MCP endpoint, which is the standard way to give Claude Code access to an outside service. The setup runs once and takes about a minute:

1. In Higgsfield, open the MCP and CLI section and copy the MCP URL.
2. In Claude Code, click the plus, go to connectors, then manage connectors, then add.
3. Choose add custom connector, name it Higgsfield, paste the URL, and click add.
4. Sign in with your Higgsfield account when prompted. Every image and video model you can reach in the browser is now reachable from the terminal.

The cost discipline matters more than the model choice. Generation credits disappear fast when a build reaches for the most expensive model at the highest resolution for every asset, including the ones that end up 300 pixels tall behind a text block. The rule that keeps the bill sane: resolution and model quality should scale with how much screen the asset occupies and how long the visitor looks at it. A full-bleed opening shot deserves the good model. A background texture behind a testimonial does not.

• Hero and first-scroll assets: highest quality you can afford. This is where trust is won or lost.
• Mid-page supporting imagery: mid-tier model, standard resolution.
• Textures, backgrounds, anything behind text: cheapest model, lowest resolution that does not visibly degrade.
• Video: use it once, early, where it carries a story beat. A second video rarely pays for itself.

Stage 4: Build every section around one call to action

Pick one action. Book the walkthrough. Request the case review. Start the trial. Everything on the page funnels toward that action, and no competing action gets equal weight anywhere.

This is where most self-built sites quietly fail. It feels generous to offer five next steps. Call us, or email us, or download the brochure, or follow us, or book a demo. What actually happens is that the visitor has to make a decision about which decision to make, and the reliable outcome of that is no decision at all.

How to place the one CTA without nagging:

• Once early, for the small number of people who arrived already convinced.
• Once immediately after the strongest proof beat, when belief is highest.
• Once at the end, as the calmest and most detailed version, next to the friction-removers.
• A persistent, quiet sticky button on mobile, which is where most of your traffic actually is.

Secondary actions are allowed to exist. They are not allowed to look like the primary one. Different weight, different color, smaller, lower on the page. If a visitor squints at your page, exactly one thing should still be shouting.

Stage 5: Make the build test itself before you look at it

You are not the QA department. The build should take screenshots at phone width, tap every button, submit the contact form, and confirm the whole thing works before it is handed back to you. This is the stage that separates a site you can charge for from a demo that breaks the first time a real person touches it.

The checks worth insisting on every time:

1. Screenshots at a real phone width, not a desktop window scaled down.
2. Every button and link tapped, with the resulting page confirmed.
3. The contact form actually submitted, and the submission confirmed to arrive somewhere you can see.
4. Text contrast checked over imagery and video, which is where legibility dies most often.
5. Load behavior on a slow connection, because generated video is heavy.

Even with self-testing, expect one or two visual problems that only a human eye catches. In the plumbing build, a set of value propositions sat over a busy background and became hard to read. The fix loop is fast and it is worth learning as a habit: take a screenshot of the exact section, hand it back, and say plainly that this is hard to read and needs to be fixed. Do not describe the fix in design terms. Describe the failure in reader terms and let the model solve it.

The failure modes that kill these sites

Every one of these has been earned the hard way. Read them before your first build rather than after.

• Designing desktop-first. Most of your visitors are on a phone. A site that is technically responsive but was composed on a wide screen loses people in the scroll, because the beats were spaced for a viewport nobody is using.
• Copy written from your own head instead of from collected buyer language. It always reads fine and always underperforms.
• Aiming at the loud cheap buyer by default because that is what the competitors did.
• Five competing calls to action, which reliably produces zero.
• Animation that decorates rather than argues, slowing the page for nothing.
• Text over generated imagery without a contrast pass. This is the single most common legibility failure.
• Shipping without submitting the form yourself at least once. A dead form on a beautiful site is a total loss.
• Burning generation credits on assets with no defined job in the story.

Build your first one in a single sitting

Here is the shortest honest path from reading this to having something real. Pick an industry you find slightly boring, because boring industries have outdated sites and the contrast does the selling for you.

1. Choose the niche and, explicitly, which of its two buyers you are aiming at. Write that decision down in one sentence.
2. Spend thirty minutes collecting real language. Pain, desired end state, hesitation, vocabulary. Paste the raw quotes into a file. Do not paraphrase them yet.
3. Write the six story beats as six sentences, using the collected words. This is the whole site. If the beats are weak, no amount of animation saves it.
4. List the assets each beat needs, with a purpose sentence and a quality tier for each.
5. Build the page, connecting your image and video generation so the assets are produced in the same pass.
6. Run the self-test: phone screenshots, every tap, one real form submission.
7. Do a screenshot fix loop on anything hard to read, then ship it.

Do that once and you have a portfolio piece. Do it three times in three different industries and you have something you can sell, because the objection you will hear is never "this looks bad," it is "can you do it for my industry," and three examples answers that before it gets asked.

What this is worth, and how to price it

The reason these sites carry real prices is that the buyer is not comparing them to a template. They are comparing them to their current site, which converts poorly, and to an agency quote, which is five figures and three months. You are selling the outcome and the speed at the same time.

What that means in practice when you go to sell one:

• Lead with the buyer insight, not the build. "Every site in your industry talks to the emergency customer and nobody is talking to the planned-project customer" is a sales conversation. "I build websites" is not.
• Show the phone first in every demo, because that is where their customers are and where their current site looks worst.
• Charge for the research and the conversion architecture, not the hours. The research is the part they cannot do.
• Do not compete on price against template builders. You are in a different category and pricing like them puts you back in theirs.

The framework above is the whole system and you can run every stage of it by hand today. Doing it by hand is how you learn which parts matter, which is why it is written out here in full rather than hidden.

Read this online at claudecodeclub.ai