I Gave Claude, Gemini & GPT the Same Landing-Page Brief — Here's What They Built
- Claude: the most beautiful design, with animations and confident copy — but the slowest, and it depends on Google Fonts.
- Gemini: the fastest to generate (~20s) and the punchiest headline ("Stop committing plant murder") — but the simplest layout, and it also pulls a Google Font.
- GPT: the most realistic app mockup, zero external dependencies, and the most thorough responsive layout — the closest thing to an all-rounder this time.
I handed the exact same one-line prompt to Claude, Gemini, and GPT — build a landing page for a fictional app called “PlantPing” — and compared them on design, code, and generation speed.
No follow-up instructions. First response only. One shot. The short version: there was no single winner.
Which one would you pick? Let me know in the comments.
The exact prompt (copy-paste)
All three models got this, word for word — no follow-ups, first response only:
Create a landing page for a fictional service called “PlantPing.” It’s a houseplant watering-reminder app: you snap a photo, AI identifies the plant, and it notifies you of the best day to water it. The target audience is people in their 20s-30s who keep killing their plants. Put the HTML and CSS in a single file, and include a hero section, three features, and a CTA button. Write the catchphrase and body copy too. Skip any explanation — just give me the finished version.
The verdict (4 axes)
| Axis | Claude | Gemini | GPT |
|---|---|---|---|
| Copy | ◎ | ◎ | ○ |
| Design | ◎ | ○ | ◎ |
| Code (self-contained + responsive) | ○ | △ | ◎ |
| Generation speed | △ | ◎ | ○ |
- Generation time — Gemini ~20s (fastest), GPT ~40s, Claude ~85s (slowest).
- Claude: most beautiful and the only one with animations, but pulls Google Fonts (not fully offline) and was slowest.
- Gemini: punchiest headline (“Stop committing plant murder”), leanest code (~6 KB), fastest — but the simplest layout and it also reaches for a Google Font.
- GPT: most realistic in-hero app mockup, zero external dependencies, the most thorough responsive layout — the closest to an all-rounder this time.
Download the actual output (full HTML)
Each file is exactly what the model returned — open it in a browser to see the live page, or read the source:
Note: this comparison was run in the chat UIs on each model’s latest version at the time. Results shift as models update — that’s the point of re-running it.
Full transcript
I gave the exact same one-line request to Claude, Gemini, and GPT: build a landing page for a fictional app. No extra instructions. One shot. Here’s what came back. Which one looks ready to ship? I actually ran them, and compared design, code, and speed. And the short version — there was no single winner. The rules are simple. All three get the exact same prompt, pasted into their own chat. No follow-ups. I judge only the first response. All three on their latest models. Four things I’m looking at: copy, design, how clean the code is, and speed. Here’s the brief. A fictional app called PlantPing. A watering reminder for houseplants: snap a photo, the AI identifies the plant, and tells you the best day to water it. The audience — people in their twenties and thirties who keep killing their plants. Build a landing page with a hero, three features, and a CTA, in a single HTML and CSS file. Let’s go one by one. First, Claude. It took the longest of the three — about eighty-five seconds. It thinks, then writes. And here’s the result. Honestly, it’s the most beautiful of the three. “Your plants can’t text you. So we will.” Confident copy, elegant type, a phone mockup, even little animations — from a one-line request. But look at the code, and there’s a catch: it pulls fonts from Google Fonts. Gorgeous type, but it won’t render the same offline. Something to keep in mind for production. The design is a clear step above. But it’s the slowest, and arguably over-engineered. That’s Claude. Next, Gemini. Generation took about twenty seconds — by far the fastest of the three. Here’s the output. “Stop committing plant murder.” — easily the punchiest headline of the bunch. Clean, centered, three feature cards. No hero mockup, so it’s the simplest layout. And the code is the leanest, just six kilobytes. The catch: it also reaches for a Google Font, so it’s not fully self-contained. Fast and witty, but the plainest of the three. Last, GPT. Generation took about forty seconds — right in the middle. And this one surprised me. A detailed, realistic app mockup right in the hero — a Monstera card with a watering schedule. Strong copy too: “Keep plants alive without becoming a plant person.” And the code was the best of the three for actually using: zero external dependencies, and the most thorough responsive layout. Nothing flashy, but if you’re going to take this and ship it, GPT gave you the cleanest starting point. Line them up on the four axes, and it looks like this. Copy: Claude and Gemini edge ahead. Design: Claude and GPT. Clean, self-contained code: GPT. Speed: Gemini. Three different strengths — and this time, GPT comes closest to an all-rounder. But there’s still no clean sweep. So how you choose comes down to what you care about most. Want the best-looking page, and you’ll fine-tune it? Claude. Want it fast, with a sharp headline? Gemini. Want something you can actually ship and build on? GPT. I’ll keep doing these “I actually tried it” tests. Which one would you pick? Let me know in the comments. And if you want to build something with AI, subscribe and let’s figure it out together.