I Gave Claude, GPT-4o, and Gemini the Same Landing Page Prompt — Here's Who Won

작성자

카테고리:

← 피드로
DEV Community · Dhaval Prajapati · 2026-07-18 개발(SW)

Dhaval Prajapati

I ran the exact same web dev prompt through three AI models — Claude, GPT-4o, and Gemini — and asked each to build a complete landing page from a single index.html file. Same prompt, zero edits, three very different results.

The Test

The prompt asked for a full landing page for a fictional tuition company, requiring:

  • Sticky nav with mobile hamburger menu
  • Hero section with SVG illustration + stats
  • Courses grid, testimonials carousel (auto-slide + dots)
  • Real-time JS form validation
  • Scroll animations via Intersection Observer
  • Zero frameworks — no Bootstrap, no Tailwind, no jQuery

Results

Feature ChatGPT Claude Gemini Lines of code 99 1,157 1,915 Overall score 52/100 🥇 89/100 🥈 84/100 Typography System default Playfair + DM Sans Playfair + Plus Jakarta Sans Scroll animations ❌ None ✅ Full staggered ✅ Full scroll reveal Form validation Alert only ✅ Real-time ✅ Inline error fields SEO meta tags Basic Good ✅ Full OG setup Prompt coverage ~30% ~85% ~95%

🥇 Claude — Best Overall (89/100)

Strongest aesthetic output: elegant hero with a gradient dot pattern, clean Playfair Display + DM Sans pairing, staggered scroll animations, and a testimonials carousel with real-time validation (including an Indian phone number regex). Minor miss: the hero stats row was thinner than the prompt asked for.

🥈 Gemini — Most Complete (84/100)

Longest and most literal output — nearly full prompt coverage, complete Open Graph/SEO metadata, and touch-swipe support on the carousel. Trade-off: verbose code that’s harder to edit, and less visual cohesion than Claude’s output.

🥉 ChatGPT — Basic Prototype (52/100)

Just 99 lines — missed animations, the carousel, form validation, and custom fonts entirely. Looks like it hit an output length limit rather than a capability gap.

Takeaway

Better prompting only pays off if the model can actually execute on long, detailed instructions. Claude wins on design polish and code cleanliness, Gemini wins on raw completeness and SEO scaffolding, ChatGPT is fine for a quick prototype but not a full build.

Full write-up with live interactive previews of each AI’s actual output: read it here

원문에서 계속 ↗

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다