Claude + Codex + Gemini + OpenClaw 重建落地页

I rebuilt my landing page in one day using Claude Design, Codex, Gemini, and OpenClaw together.

a 10-step process where each tool handled a different part of the job.

here's everything I did:

1. generate range fast

here's the guiding principle: diverge first, converge last.

first I wrote one prompt to generate 5 different landing page aesthetics.

each one is a detailed prompt I could use to one-shot a sample landing page. this gives me 5 UI directions in parallel.

that step matters because it kills blank-canvas mode immediately.

credit to @cloudxdev for inspo of the prompt here:

You are a world-class frontend designer and creative director with 15 years of experience crafting award-winning digital experiences for high-profile tech startups. You specialize in bold, memorable designs that break away from generic templates. Your work has been featured in Awwwards, CSS Design Awards, and The FWA. You're helping me generate 5 separate prompts for 5 radically different landing page directions for "<company_name>" - <company_description>. The company targets <target_audience>. They differentiate through <key_differentiators>. The landing page will be the primary conversion funnel for leads. Avoid the "AI slop" aesthetic at all costs: NO purple/blue gradients on white backgrounds, NO generic fonts (Inter, Roboto, Arial, system-ui), NO predictable hero-CTA-features-testimonials templates, NO generic geometric shapes or abstract blobs, NO stock-looking imagery or clichéd visuals. Generate 5 radically different aesthetic approaches and commit fully to each one: Option A, Option B, Option C, Option D, Option E. The 5 options must feel meaningfully different from each other in art direction, typography, color usage, layout philosophy, and interaction style. Do not give me 5 variations of the same landing page. For each option, create a fully self-contained prompt that I can paste into another model to generate the landing page. Each prompt should lock in one aesthetic direction only and should not mention the other 4 options. Before the prompt for each option, briefly outline: which aesthetic direction you're choosing and why, the specific font pairing, the color palette, the hero hook concept, and one unique interactive element you'll implement. Each generated prompt should instruct the model to build these sections with creative interpretation: 1. Hero Section - a hook that creates immediate intrigue, an interactive element that demonstrates capability, a clear value proposition in ≤12 words, primary CTA: "<primary_cta>", and trust signals (logos, security badges). 2. Problem/Solution Narrative - tell a story, don't list features, use scroll-triggered reveals for dramatic effect, and include real-world scenario visualization. 3. Product Showcase - interactive demo preview or animated mockup, show the product in action visually, and include technical credibility indicators. 4. Social Proof - testimonials from target personas, metrics that matter to <target_audience>, and a customer grid with hover states. 5. Technical Differentiators - clean comparison or feature grid, integration/API preview (if applicable), and security & compliance badges. 6. Conversion Section - secondary CTA with urgency, quick form (Name, Email, Company), and alternative action: "<secondary_cta>". 7. Footer - minimal, sophisticated, essential links only, and newsletter capture. Each generated prompt should also tell the model to output a single, complete HTML file with embedded CSS and JavaScript that opens immediately in any browser with no dependencies, uses realistic placeholder content instead of Lorem ipsum, and feels production-ready. Technical requirements to include in each generated prompt: mobile-responsive with fluid typography and adaptive layouts, smooth scroll behavior, page load animations with staggered reveals (use animation-delay), Intersection Observer for scroll-triggered effects, micro-interactions on hover states, CSS custom properties for theming, semantic HTML5 structure, performance-optimized with no heavy libraries, and load Google Fonts for typography. Motion design requirements to include in each generated prompt: Page Load: orchestrated reveal sequence (0ms → 200ms → 400ms stagger). Scroll: fade-in-up with subtle parallax on key visuals. Hover: scale transforms, color transitions, underline animations. Interactive: cursor-following effects, magnetic buttons. Background: subtle ambient motion (floating particles, gradient shifts). Color guidance to include in each generated prompt: if you choose a dark theme, use a deep background in the #0a0a0f to #12121a range, pure white (#ffffff) for headlines, muted (#a0a0a0) for body text, and ONE bold accent color used sparingly such as electric cyan, hot coral, or acid green. If you choose a light theme, use an off-white or cream background, deep charcoal text, and one bold unexpected accent such as terracotta, forest, or sapphire. Typography guidance to include in each generated prompt: pick a distinctive combination with headlines in a display serif (Playfair Display) or geometric sans (Clash Display, Cabinet Grotesk), body text should be readable but still have character (Source Serif Pro, Satoshi), use JetBrains Mono or IBM Plex Mono for technical elements, and avoid at all costs: Inter, Roboto, Arial, SF Pro, Open Sans. Output format: return exactly 5 sections labeled Option A through Option E. For each option, include: (1) a short name for the aesthetic, (2) a short explanation of the direction, and (3) the full prompt wrapped in a code block. Do not generate any HTML yourself. Only generate the 5 prompts.

here's what the prompt actually returned for me:

A - Swiss Brutalist: cream + ink with an acid green accent, magnetic grid that snaps your cursor to data points
B - Terminal Luxury: deep space + cyan, a real command-line input that simulates list generation
C - Editorial Authority: forest + paper + coral, parallax "ink bleed" transitions between sections
D - Bauhaus Engineering: navy + hot coral, interactive blueprint overlay showing the AI logic
E - Kinetic Minimalism: midnight + cobalt, liquid-metal cursor trails that react to page velocity

five real directions, all with opinions.

Time: 2 min

2. run the 5 prompts and pick a winner

so here's the best way to "vibe code" 5 landing pages for free:

1. open 5 tabs of aistudio(.)google(.)com/apps
2. paste in your 5 prompts from above
3. watch them run

most people don't know this but gemini 3.1 pro has by far the best visual taste, better than opus 4.7 (yes), and gpt 5.5 (lol)

this step is where the aesthetics stop being abstract directions and turn into real UI you can feel. 

once you see all 5 rendered out, it gets pretty obvious which one fits your idea best.

then I simply picked the winner.

one funny side note: my first landing version is I used a very basic version from the winner I picked here. it's literally a hero with one testimonial below. and it got me my first 20 customers.

worth remembering. a rough page with the right message beats a beautiful page that says nothing. and maybe that's all you need for now.

Time: 10 min

3. take the winning direction into Claude Design

from here export and upload the best design into Claude Design.

Claude Design has a dedicated "set up your design system" option - use that. drop your winner html from step 2 and it'll extract colors, fonts, components, and a reusable system you can apply to the rest of your site.

Time: 2 min

4. do the research pre-work for copy

while claude design is cooking, I started on the copy by spawning 11 agents using `claude -p` to analyze 10 competitor landing pages and my ICP.

this was pre-work for copy. before you write a page you need to know what your buyers want and what everyone else is claiming.

all of it is useful context to feed into the next step.

Time: 5 min

5. turn the research into positioning

then I gave zoe (my openclaw) all of that and she combined it with everything about our business (meeting notes, emails, CRM)

she generated a 10-section landing page breakdown: what the hero needed to claim, what objections needed to get handled early, what proof needed to show up above the fold, and what the visitor should believe by the time they hit the CTA.

one of the biggest unlocks in the whole process.

the breakdown it gave back:
1. hero - one-line value prop + chatbox
2. social proof - press logos + testimonials
3. how it works - 3 steps, story → match → pitch
4. features - 4 rows, each paired with the buyer objection it answers
5. case studies - real press coverage
6. pricing
7. FAQ - remaining objections
8. comparison - us vs legacy vs DIY vs hiring
9. founder letter - why I built it
10. final CTA - chatbox reprise

Time: 10 min

6. generate 5 variants for each section

now claude design has finished the design system from step 3. I dumped the 10-section landing page breakdown into claude design and asked it to generate 5 variants for each section.

this is where the workflow really clicked.

instead of comparing 5 whole landing pages, I was comparing 5 heroes, 5 proof sections, 5 workflow sections, 5 CTA blocks.

same diverge-first principle as step 1, applied at the section level. you're not deciding "which page is best" - you're deciding "which hero is best." way less cognitive load, way better outcome.

Time: 1 min (plus 20 min waiting)

7. pick your favorites and stitch them together

I went through each section, picked my favorite variant, gave feedback where it needed sharpening, and had claude design stitch everything into one cohesive page.

my prompt was something like "ABDEADABC" lol.

this is the converge half. diverge in step 6, converge here.

Time: 5 min

8. split animation into its own lane

while the structure was cooking, I opened a separate session just for the 4 animations.

the models can't see the animations like they can see the page, so this requires more back and forth.

Time: 20 min

9. export, implement, and lock the design system

once the design was ready, I exported it as HTML and used /goal in codex with playwright to implement it end to end.

this part still feels mildly illegal.

usually there's a huge translation tax between design and implementation. now a lot of that just disappears with /goal.

quick bonus for your codex agent: google launched a DESIGN .md recently. use it to lock the design system so future agents don't drift away from the visual language you just implemented.

Time: 2 min (+1 hr waiting...)

10. the longest part was still the copy

while codex is cooking it's time to finalize the copy.

at this point the page already had a rough draft from the positioning work above. but it was still AI copy.

directionally right. too safe. too generic.

the biggest copy lesson applied in this whole rewrite:

say the damn thing.

stop writing these:
- "unlock the full potential of your outreach"
- "the all-in-one platform for modern sales teams"

if your page reads like this you are begging your customers to not read it.

say what you actually mean. name the competitor. say the feature for what it does. name competitor's absurdity.

for example, I changed claude's copy of the eyebrow above our pricing section:

before: "transparent pricing"
after: "why does a media database still cost $15,000 a year?"

that one line does more work than three paragraphs of "unlock" copy. it names the problem, names the competitor, and anchors pricing, which makes our price the obvious answer before we've even shown it.

this is the part still needs human judgment.

Time: 4 hours

the takeaway

total time: 6 hours 14 minutes. of that, 4 hours was copy. the design and build was under 2.

does this win a design award? obviously no.
does it convert strangers? absolutely yes.

I'm optimizing for a $1M ARR SaaS, not a designer job. different game here.

and don't take my word for it - open the top 20 sites on trustmrr .com leaderboard, none of them win design awards, all of them make money.

and here's where we are at now:
AI gets you a top 10% on design fast, and you can layer that with a top 10% copy, and a top 10% product. 

then you have a strong, high-converting page - all without hiring a designer or a developer or a copywriter.

best part is all this is just iteration one.

from here I'm wiring page analytics back into openclaw so zoe can run A/B tests automatically on hero, h1, h2, CTAs and self-improve the page.

so 6 hours to ship the page. then 6 months to figure out what it should say.

AI never changed the hard part. it just took away the excuses.