One Prompt, Four Different AIs: Which One Is Really Better?

Produced by Gemini

In today’s world, where new language models emerge every day and existing ones constantly evolve and change, keeping up with them is truly challenging. So, on March 20, 2026, the date I’m writing this, which of the popular language models on the market will have the best design?

In this article, I will give a single blog prompt to 4 different language models and share their outputs with you. To make the evaluation more convincing, I made this comparison in a live broadcast and published it on YouTube. 🤩

In this article, I will provide a summary of the broadcast. Here are our topics:

1. Why a blog?

2. Prompt and its explanation

3. Arena showdown: Lovable, Claude, Gemini and Cursor

4. Technical evaluation and results based on defined criteria

1. Why a Blog?

Because everything new in software development is first tested on a blog! When learning a new programming language, the first thing you always do is build a blog. That’s how we’ve seen it, that’s how we know it; and that’s how we do it.

I remember that first internship I did when I was transitioning from my third to fourth year of university. The company was using ASP.NET MVC 5, and I started by writing a blog to understand the world. 11–12 years have passed, and when I learn something new (this time with AI, “Vibe Coding”), I still end up building a blog.

Why? Because a blog is the “purest” playground where you can test everything from database architecture to SEO strategy, from content management (Markdown editors, image buckets) to the most modern UI principles. I didn’t break this tradition with the devdiscipline.com project either. If an AI can build a decent blog for me, it can do many things.

Not just an experiment, but a “digital copy”… A “fantastic” content hub ranging from blog posts to my science fiction writing: devdiscipline.com

The main motivation behind this project was the desire to gather my 10 years of technical experience, scattered across different platforms, under one “fantastic” roof. Software, Scrum, ultra-trail running, and science fiction… I want to blend all these different disciplines with my dream Blade Runner aesthetic and transform them into a content center that is entirely my own.

I’m not just aiming for a site that looks “cool,” but one where every line is optimized for Google AdSense; where SEO, GEO, and even AEO scores are sky-high; and most importantly, a user experience that keeps the reader engaged with the content while immersing them in that futuristic atmosphere. This structure, where I can manage my own ad spaces and set my own rules, will be the point where the speed of artificial intelligence intersects with my engineering discipline.

2. Prompt and its explanation

First of all, ever since language models entered our lives, the most important issue has been prompts. The clearer, more detailed, and more explicit the boundaries we write, the closer the product generated by the language model will be to what we want. These are practically children. We need to explain it to them as if we were talking to a child, so they do their best.

PROJECT: Personal Blog - "devdiscipline.com"

TASK DESCRIPTION
Build a production-ready personal blog with a post-apocalyptic aesthetic
inspired by Blade Runner and Cyberpunk 2077, fully optimized for SEO and
ready for Google AdSense integration.

TECH STACK (IMMUTABLE)
Framework: Next.js 14+ App Router. SSR and ISR are mandatory, SPA is forbidden.
Styling: Tailwind CSS and Framer Motion.
Icons: Lucide React.
Deployment: Vercel.
Fonts: Use next/font with "Orbitron" for headings and "Share Tech Mono" for body.
Markdown: react-markdown, remark-gfm, rehype-highlight.
Editor: @uiw/react-md-editor, split view.

DESIGN SYSTEM

BACKGROUND (CRITICAL)
Do not use plain black. Use a futuristic neon-lit megacity skyline at night
as the background. Apply it via CSS background-image, add a parallax effect
with background-attachment: fixed, and use background-attachment: scroll on
mobile. Add a dark semi-transparent gradient overlay on top of the image so
the city atmosphere is visible but text remains readable. Apply glass
morphism for cards and panels: backdrop-filter blur, semi-transparent dark
background, and thin neon-colored borders. The city image should be subtly
visible behind the cards.
Color Palette (globals.css, CSS variables):
--color-bg: #050505
--color-surface: rgba(10, 5, 20, 0.7)
--color-cyan: #00f3ff
--color-magenta: #ff0055
--color-purple: #9d4edd
--color-text: #c8c8c8
--color-text-dim: #666

Required UI Effects:

1. CRT Scanline Layer: position: fixed, pointer-events: none, use repeating-linear-gradient for thin horizontal lines with 3% opacity flicker animation.
2. 3D Tilt Card: Apply mouse-tracking perspective tilt to article cards using react-parallax-tilt.
3. Glitch Title: RGB shift effect with CSS clip-path animation on hover.
4. Neon Glow: Use box-shadow and text-shadow for cyan and magenta elements.
5. Skeleton Loaders: Neon-bordered pulse animation placeholders for async content and AdSense areas.
6. Reading Progress Bar: Neon cyan progress line at the top based on scroll position.
7. Rain Overlay: Very subtle semi-transparent rain effect using canvas, optimized with requestAnimationFrame.

PAGE ARCHITECTURE
URL Structure:
/ → Locale detect → redirect to /tr or /en
/[lang]/ → Homepage
/[lang]/posts/[slug] → Post detail
/[lang]/category/[name] → Category listing
/[lang]/about → About page
/admin → Protected admin panel

Categories: yazilim, scrum, kosu, kisisel-gelisim, bilim-kurgu
Middleware: Detect locale from Accept-Language header, protect /admin,
set hreflang headers.

DATA MODELS
categories: id, slug, name_tr, name_en, accent_color
posts: id, slug, category_id (FK), cover_image, author, published_at,
updated_at, featured, views, published
post_translations: id, post_id (FK), lang, title, description, content, tags,
reading_time

ARCHITECTURE (MANDATORY)
src/models/ → TypeScript interfaces for each table: post.ts, category.ts,
common.ts.
src/services/ → All Supabase queries: post.service.ts,
category.service.ts, storage.service.ts.
src/hooks/ → Custom hooks managing loading/error/data state: usePosts.ts,
usePost.ts, useCategories.ts, useAdminPost.ts, useImageUpload.ts.
src/components/ → UI only, renders data from hooks.

Layer rule: components → hooks → services → Supabase. Skipping layers is forbidden.

ADSENSE
Script: in layout.tsx with strategy="afterInteractive". AdUnit component
must be reusable, accept slot and format props. Neon-bordered wrapper with
"// SPONSORED_CONTENT.exe LOADING..." skeleton until loaded. CLS must be 0,
all AdUnits must be inside fixed-size containers.

Ad placements:
1. Inside post, after first H2: min-height 280px
2. Sidebar sticky, desktop only: min-height 600px
3. Listing pages, after every 5 posts: min-height 90px
4. End of post: min-height 250px

SEO
Use Metadata API for every page: title, description, openGraph, alternates
(canonical + hreflang), robots.
/sitemap.xml dynamic, updated hourly with ISR.
/robots.txt blocks /admin and /api/*.
JSON-LD: Article, BreadcrumbList, WebSite schema.

DELIVERY PROTOCOL
1. Show file structure (folder tree).
2. Provide .env.example.
3. Wait for approval, then start coding.
4. TypeScript strict mode, "any" is forbidden.

DESIGN EVALUATION CRITERIA (CRITICAL)
Generate the design based on the following:
1. READABILITY (most important)
- Text must always be easy to read
- Contrast should be close to WCAG standards
- Neon effects must not harm readability
2. HIERARCHY
- Within the first 3 seconds, the user should understand:
  - What is this site about?
  - What is the most important content?
  - Where should I click?
3. AESTHETIC CONSISTENCY
- All components must follow the same design language
- Random use of effects is forbidden
- Every effect must have a purpose
4. PERFORMANCE-ORIENTED DESIGN
- Limit excessive blur, shadow, and animation usage
- Avoid FPS-dropping effects
5. MODERN UI PATTERNS
- Hover, focus, active states must be complete
- Mobile-first approach
6. REAL USER EXPERIENCE
- Reading the blog should be enjoyable
- Minimize distracting effects

DESIGN EXPLANATION (MANDATORY)
Explain your design approach:
- How did you interpret the cyberpunk theme?
- Why did you choose these colors and effects?
- What UX problems did you try to solve?
- Which effects did you intentionally NOT use and why?
Your goal is not just to "look cool" but to create a usable interface.

CONSTRAINT
Achieve these two goals at the same time:
- Maximum visual impact (cyberpunk, post-apocalyptic aesthetic)
- Minimum distraction (reading experience)
Balance these and explain how you achieved it.

SELF-EVALUATION
Rate your design (out of 10):
- Aesthetics
- Readability
- Performance
- Originality
And answer:
Can this design realistically be used by a user every day?

2.1. Creating a “Software Task Description,” Not a “Prompt”

The biggest mistake when working with artificial intelligence is approaching it like an “assistant,” begging and pleading. My 9.5 years of industry experience has taught me this: Clarity comes from authority. Preparing the prompt I used in this publication took me a full 4 hours. Because if you tell artificial intelligence, “Make me a blog,” it will throw back something like an intern’s intern, and think it’s successful. But when you tell it, “Framework: Next.js 14 App Router, SSR and ISR are mandatory, SPA is absolutely forbidden!” you’ll find yourself facing a senior engineer who knows their job.

The critical keyword here is: “Immutable.” If you tell artificial intelligence, “It would be good if you used this,” it will leave room for flexibility according to its own judgment. But when you give the command, “The technology stack is unchangeable,” it will work within those boundaries, performing acrobatic feats to produce the most optimal code. I’ve outlined the backbone of this project with these “red lines”:

• Framework: Next.js 14 (App Router required, SPA prohibited!). Because SEO and Google AdSense integration are our red lines.

• Style: Tailwind CSS. It’s both fast and AI speaks this language very well.

• Aesthetics: A Blade Runner / Cyberpunk 2077 themed, post-apocalyptic megacity skyline. We needed to feel that dark city atmosphere in the background, but the text also had to remain readable.

2.2. Architectural Nationalism: Our Love for “Model Classes” and the JS World

As a software team leader who has spent years working with Android, Java and Kotlin and who considers “Type Safety” sacred, I cannot let go of the overly “flexible” structure of the JavaScript ecosystem.

Just because I have two years of JS experience doesn’t mean I can just send data from one place to another saying, “Take whatever comes, whatever you want,” and leave it to God’s will. I know that in JS, without dealing with the Builder design pattern, we can enclose 30 variables in an object and throw it around without checking “what’s inside?”, but that ambiguity goes against my OOP-rooted discipline, my friend. Those Model Classes will stay there, and models will pass back and forth between different functions!

That’s why I specifically embedded the MVVM (Model-View-ViewModel) structure into the prompt. Whether we use TypeScript or not, those Model Classes will be there! I strictly enforced the “layer hopping prohibition” between the Service layer, the Hook layer, and the Component layer on the AI. The Component won’t just go straight to the database (Supabase)! There has to be a “Service” and a “Hook” in between. Architectural discipline is about code maintainability. I’ve explained this much better and in more detail in these articles:

DevDiscipline

Vibe Coding, Reviewed by a Developer With 10 Years of Experience

A veteran developer’s first encounter with vibe coding, who even said “it got too easy” when switching from Java to Kotlin.

2.3. Future SEO Vision: GEO and AEO (Making Yourself Appealing to Artificial Intelligence)

It’s no longer enough to just win over Uncle Google’s bots. Your blog needs to be referenced when someone asks something on ChatGPT or Perplexity someday. This is what we call GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization). I will discuss this topic in much more detail later in my article titled “Future Web Standards.” I don’t want to make this article too long; it’s a completely different topic.

The reason I structured the URL as /tr/post/slug is this: both to feed Google’s hierarchical structure and to enable language models to categorize content better. I’m not just after “working code,” but “findable and referenceable content.”

3. Arena showdown: Lovable, Claude, Gemini and Cursor

I pitted four big names against each other on the stream. Each of their approaches sometimes surprised me, sometimes made me say “No way!”.

• Lovable: They did a really “sweet” job with the design. Those flickering neon lights, the rain effects… They really gave the feeling that we were in a Cyberpunk universe. It made me say “Wow!” at first glance. They produced the first output the fastest. Even if I started them all at the same time and timed it, Lovable would have won the race by a landslide. Their daily free credits were only 5 and they ran out before the stream ended, which is another data point.

Screenshot taken by the author from Lovable.

• Claude: Personally, it became my favorite. The vision of making it feel like “looking at a bright terminal screen in a dark city” was exactly what I was looking for. Its code structure and layering were the most organized. When the output came through, it wrote a “design comment”; explaining why it chose these colors and which effects it consciously omitted. I didn’t expect that from a tool. Besides all that, Claude was the most thoughtful person. And you even chat with Claude through the terminal.

Screenshot taken by the author from Claude.

• Gemini: It disappointed me. A plain black background, topped with a green Matrix effect… Wanting cyberpunk isn’t the same as wanting the Matrix. They read the prompt but didn’t understand it.

Screenshot taken by the author from Gemini.

• Cursor: I have no complaints about your coding skills. The layer structure, model classes, and hook organization are quite neat and tidy, but the design vision fell far short of the “excellent” level I was expecting. After waiting half an hour and requesting numerous permissions, when the design finally appeared on the screen, as you’ll see in the live broadcast, I thought, “Is this it?”

Screenshot taken by the author from Cursor.

4. Technical evaluation and results based on defined criteria

This broadcast wasn’t just a “benchmark” for me; it was proof that AI had evolved from an “assistant” to a “pair programming” partner. With my amateur mistakes, audio delays, and that 1 hour and 50 minutes where no one showed up (but which would later reach thousands), it was my “first commit.”

• Architectural Fidelity: Here, Cursor, Claude, and Gemini 3 shared the top spot with a perfect score of 100. They adhered strictly to the src/hooks, services, and models structure I defined. Lovable, on the other hand, scored 90 points; while its design was stunning, it slightly relaxed that strict discipline in its file structure.

• UI/UX Aesthetics: This is where the divergence began. Claude and Lovable reflected the “Cyberpunk/Blade Runner” spirit on screen with 90 points, while Cursor scored 20 and Gemini 3 only 9. 9 points! The biggest slap in the face to the shallow notion that “a dark theme makes it Cyberpunk” was delivered here.

• Developer Experience (DX): The answer to the question, “How long did it take to run the code, how many times did we click ‘fix’?” Lovable shone with 100 points; we saw the project live with a single click. Gemini 3 followed with 80, while Claude remained at 60. Claude, the one who thought about it the most and was waiting for approval, made us sweat a bit.

• Vibe & Aesthetics: First impression… Claude proved here to be the leader in “futuristic” vision with a perfect score of 100. Lovable is right behind with 90. Cursor (10) and Gemini 3 (40) unfortunately failed in that “spirit” part.

• FX & Animation: In terms of glitch and neon effects quality, the trio of Cursor, Claude and Lovable did a good job in the 90–70–90 range. Gemini 3, with 20 points, said, “I’m not getting into this.”

• Mobile & Performance: As we tested live on air, Lovable delivered a “flawless” performance on mobile with a perfect score of 100. Claude was at a reasonable level with 80, while Gemini 3 left the mobile user at the door with 40 points.

The TOTAL SCORE at the very bottom of the table sums it all up:

1. Lovable: 93 (master of speed and visuals)

2. Claude: 83 (leader of architecture and vision)

3. Cursor: 58 (good at coding, lacking in spirit)

4. Gemini3: 48 (unfortunately at the bottom of the list)

4.2. Conclusion

So which one will I continue with? Answer: a hybrid model. I will take the rock-solid architecture that Claude built and dress it with Lovable’s aesthetic vision. In other words, I will transfer the features I like in Lovable to Claude. Because we do this when managing a team in the real world: the one who rides the horse, the one who wields the sword.

We saw on air that they all write code “like dogs”! The architecture, services, hooks are flawless. “Our profession is really gone,” I said to myself. But when it came to the “spirit” and “aesthetics” part, they all failed. Designers can sleep soundly, that creative vision is still in humans. A language model cannot do design. But for us programmers, “writing code” has decreased, “managing architecture” and “AI partnership” have begun. I won’t say it’s over because they can sometimes fail in code too. It’s a language model…

Bonus: First Commit Completed, Now the Real Work Begins

As someone who loves IDEs, I want to open the project with Google Antigravity and continue with the project using the Claude Code plugin within the IDE. Especially after sending to Git, the IDE is great for seeing the changes in the development. This can also be seen from the terminal (I’ve studied computer science, so I know), but seeing it comparatively in the IDE is more enjoyable, it’s a habit.

My plan for the next phase is this: I will individually transfer the design decisions I like from Lovable to the architecture Claude built, connect the Supabase integration, and place the AdSense fields.

Would you like to follow the writing process of this blog live? Let’s meet in the comments. This was my first post. It was unplanned, not error-free, but honest. I will be more prepared next time.

The coding race is over. Now the winner will be the one who manages artificial intelligence.