Education logo

I asked Gemini, Claude, and ChatGPT to create a website, and there was one obvious winner

Testing the "vibe-coding" prowess of today’s top LLMs to see which one truly masters the art of functional, thematic design.

By Rosalina JanePublished a day ago 4 min read
I asked Gemini, Claude, and ChatGPT to create a website, and there was one obvious winner
Photo by solidpixels. on Unsplash

Vibe-coding seems to be on the rise, and it is fast democratizing software and web development. Not too long ago, a huge barrier of syntax errors separated the average user from developing a website that worked. Times have changed over the last few years. The latest generation of LLMs are powerful and capable enough to turn plain language descriptions into functional code, allowing even non-coders like myself to put together HTML pages with nothing more than a prompt

This shift from technical mastery to creative distinction has gained some very prominent advocates too, like Nvidia CEO Jensen Huang, who recently suggested that programming is no longer an important skill. No matter where you stand on that argument, it's always fun to see how proficient the newer LLMs have become from time to time. That's exactly what prompted me to pit ChatGPT, Gemini and Claude against each other to test who could build the better website

The challenge was straightforward

To build the most "usable" website

To test the three LLMs fairly and comprehensively, I delivered the exact same prompt to the latest iteration of every model. The evaluation criteria were simple, and each model was judged for its aesthetic intelligence, the 'usability' of the site, and adherence to the prompt. With these ground rules set, I handed the following prompt to ChatGPT, Gemini and Claude:

"Design an onboarding screen for a social networking platform aimed at Dungeons and Dragons players. The screen should welcome a new user, prompt them to select their preferred play style, and nudge them to fill out a brief profile. Prioritize clarity and make the experience feel thematic without sacrificing usability. Write the code in HTML."

By looking at the prompt, you'd understand that the challenge also pertains seeing which model could perform best in scenarios with such limited context, which is more or less definitive of the vibe coding movement we see today. This also helps understand which agent is naturally predisposed to the task without the constant fine-tuning and "hand-holding" you'd normally expect from a traditional coder.

Following this, I used OneCompiler, which is a free tool that lets me directly paste the code and see the visual results instantly to gauge the output against the criteria.

ChatGPT likes to keep it 'minimalist'

The 'bare-bones' entry in the contest

Looking at the result from ChatGPT, it's clear that it adhered to the technical instructions, while struggling a little with the creative "vibe" you'd want from an onboarding page. It felt less like an inviting entry point into a social network, and more like a generic feedback dialogue box that you'd immediately want to close and get out of your way. The design is safe with a parchment-colored background (barely a step up from an old Google Form), and remarkably bare bones.

While the code is functional and the webpage could be construed as 'usable', ChatGPT stumbles in instruction and prompt adherence here, and it's hard to overlook this. It is remarkably unremarkable.

Gemini outperformed ChatGPT by a long shot

It embraced the theme and delivered well

Gemini took second place. Right off the bat, it was clear that the model had a much stronger affinity for aesthetics and design prowess than ChatGPT. From a UX perspective, Gemini leaned into the theme and transformed what ChatGPT interpreted as a standard form into an onboarding experience.

It delved subtly but effectively into evocative labels like "Raven Post" for email and "Your Legend" for the name field, which imparted an impressive thematic ambience. Some other UI elements such as spacing, visual hierarchy and the use of selection tiles also made for a cleaner design.

Claude was the clear victor

It wasn't even close

The initial impression on running the HTML code was nothing short of breathtaking, and it almost doesn't come as a surprise that Claude took the crown, since it's the leading choice for most vibe coders, and purpose-built for it. Unlike other pages, the screen didn't load statically but rather swayed in with animations that signaled intentionality.

Claude led decisively across all three criteria, conjuring a dungeon-dark environment of glowing gold accent which was very characteristic of the D&D world and the immersion that should come with it. I completely understand why, for vibe coders, the platform is in a league of its own. It brings aesthetic intelligence, prompt adherence and usability that's unlike what any other model could deliver.

Claude led decisively across all three criteria.

The future of vibe-coding seems bright

As vibe coding surges in popularity for coders and non-coders alike, frontier models have become remarkably capable at producing functional code across the board, and all the three tests proved that. The real differentiator, however, lay beyond simple functionality. In low-context scenarios, Claude read between the lines of the prompt and filled the gaps with its own creative judgement, which pulled it away from the competition. Seeing it in action firsthand only reaffirmed what has earned the model its wide renown, and that itself was something of a delight.

courseshigh schoolhow tostudentteachercollege

About the Creator

Rosalina Jane

Reader insights

Outstanding

Excellent work. Looking forward to reading more!

Top insights

  1. Compelling and original writing

    Creative use of language & vocab

  2. Easy to read and follow

    Well-structured & engaging content

  3. Excellent storytelling

    Original narrative & well developed characters

  1. Expert insights and opinions

    Arguments were carefully researched and presented

  2. Eye opening

    Niche topic & fresh perspectives

  3. Heartfelt and relatable

    The story invoked strong personal emotions

  4. Masterful proofreading

    Zero grammar & spelling mistakes

  5. On-point and relevant

    Writing reflected the title & theme

Add your insights

Comments (1)

Sign in to comment
  • Janney a day ago

    Thank you soo much..... This was really very helpful.

Find us on social media

Miscellaneous links

  • Explore
  • Contact
  • Privacy Policy
  • Terms of Use
  • Support

© 2026 Creatd, Inc. All Rights Reserved.