[2026] Let's Compare 3 Major Generative AIs by Having Them Create Websites (ChatGPT, Gemini, Claude)

2026-06-19

The evolution of generative AI has been remarkable since around 2023, and I primarily use Claude and Gemini, entrusting various tasks to Claude Code.

While I make it a point to write this blog manually and don't use AI, this time I'd like to compare the current performance of the three major AIs, "ChatGPT," "Gemini," and "Claude," by having them create websites with the same prompt.

As of 2026, the three generative AIs are said to have the following characteristics:

ChatGPT → Particularly good at brainstorming ideas
Gemini → Particularly good at searching for the latest information and processing large amounts of data. Affordable.
Claude → Particularly good at creating logical texts and programming

Indeed, that's how it feels when I use them.

Hearing this, it seems Claude would create the best output, but what do you think? (I'm also a Claude enthusiast)

Let's get started.

Rules
Let's try having them create a "LP for a fictional coffee subscription service"
Let's try having them create a "website for a fictional fast-food restaurant"
Is it necessary to hire a professional for website creation?

Rules

Interact using the regular chat interface
Although each has agents suitable for coding, this is for fairness.
Send the exact same prompt (instructions to the AI) without a single difference
Send instructions on the same day, at the same time
Use default thinking modes and models
ChatGPT → "GPT 5.5" Gemini → "3.5 Flash・Thinking Level: Standard" Claude → "Sonnet 4.6・Effort: Low"

Let's try having them create a "LP for a fictional coffee subscription service"

Please create an LP for a fictional coffee subscription service in a single HTML/CSS/JS file

Here's what they generated with that prompt. (Click to enlarge)

What do you think?

Perceptions vary, but I honestly thought ChatGPT was amazing.
It includes images and is generally clean.

On the other hand, Claude has a somewhat bold design, exuding a chic coffee shop atmosphere.

And then there's Gemini, which is a bit indecisive, or rather, ordinary.
It's a bit broken on smartphones, so it needs adjustment.

From a slightly technical perspective, they all essentially use similar markup.

<header><section><footer> elements are used in the markup, with proper indentation.

One distinctive feature is that only Claude uses Google Fonts.

I assume other AIs would also use them if instructed, but for Claude to use them from the start, does it have a particular attention to detail for design?

By the way, none of them included any SEO-related descriptions. That's understandable since I told them it was "fictional."

Adding SEO-related descriptions

Next, to compare their performance, I'll instruct them to add SEO-related descriptions.

I wanted at least OGP-related descriptions, and ideally, structured data as well.

It's long, so I'll collapse it, but here are the results.
They all included OGP-related tags and structured markup, and they were all pretty similar.

View added SEO-related descriptions

ChatGPT

Added to <head>

<!-- SEO -->
<title>BeanBox | Specialty Coffee Subscription Service</title>

<meta name="description"
      content="BeanBox is a coffee subscription service that delivers specialty coffee from around the world every month. Free shipping, freshly roasted beans to your home. 50% off first month currently available.">

<meta name="keywords"
      content="coffee subscription, coffee regular delivery, specialty coffee, coffee mail order, coffee beans, BeanBox">

<meta name="robots"
      content="index, follow, max-image-preview:large">

<meta name="author" content="BeanBox">

<link rel="canonical" href="https://example.com/">

<!-- OGP -->
<meta property="og:type" content="website">
<meta property="og:title" content="BeanBox | A Special Coffee Experience Delivered Monthly">
<meta property="og:description" content="A coffee subscription service that delivers specialty coffee from around the world every month.">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:site_name" content="BeanBox">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="BeanBox | A Special Coffee Experience Delivered Monthly">
<meta name="twitter:description" content="Delivering specialty coffee from around the world every month.">
<meta name="twitter:image" content="https://example.com/ogp.jpg">

<!-- Language -->
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Added just before </head>

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Organization",
  "name":"BeanBox",
  "url":"https://example.com",
  "logo":"https://example.com/logo.png",
  "description":"Specialty coffee subscription service"
}
</script>

You can also add structured data for FAQ rich results.

<script type="application/ld+json">
{
 "@context":"https://schema.org",
 "@type":"FAQPage",
 "mainEntity":[
   {
     "@type":"Question",
     "name":"Can I cancel anytime?",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"Yes. You can cancel anytime from My Page."
     }
   },
   {
     "@type":"Question",
     "name":"Is shipping free?",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"Shipping is free for all plans."
     }
   },
   {
     "@type":"Question",
     "name":"Can I choose between beans and ground coffee?",
     "acceptedAnswer":{
       "@type":"Answer",
       "text":"You can select your preferred state when ordering."
     }
   }
 ]
}
</script>

Gemini

1. Meta tags added within <head> (SEO/OGP)

<!-- Basic SEO Meta Tags -->
<meta name="description" content="CRAFT BEAN CLUB is a subscription service that delivers rare specialty coffee from around the world every month. Freshly roasted beans delivered by post.">
<meta name="keywords" content="coffee subscription, coffee regular delivery, specialty coffee, monthly delivery, home roasted">
<link rel="canonical" href="https://example.com/coffee-subscription"> <!-- Please change to actual URL -->

<!-- OGP (for SNS sharing) -->
<meta property="og:type" content="website">
<meta property="og:title" content="CRAFT BEAN CLUB - A Supreme Roasting Experience, Delivered Monthly">
<meta property="og:description" content="Rare specialty coffee carefully selected from small farms around the world. Delivered to your post within 48 hours of roasting.">
<meta property="og:image" content="https://example.com/assets/og-image.jpg"> <!-- Please change to actual image URL -->
<meta property="og:url" content="https://example.com/coffee-subscription">
<meta property="og:site_name" content="CRAFT BEAN CLUB">

<!-- X (formerly Twitter) Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CRAFT BEAN CLUB - A Supreme Roasting Experience, Delivered Monthly">
<meta name="twitter:description" content="Rare specialty coffee carefully selected from small farms around the world. Delivered to your post within 48 hours of roasting.">
<meta name="twitter:image" content="https://example.com/assets/og-image.jpg">

2. Adding structured data (JSON-LD)

<!-- Service/Product Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "CRAFT BEAN CLUB Coffee Subscription",
  "description": "A subscription service that delivers rare specialty coffee carefully selected from small farms around the world every month.",
  "image": "https://example.com/assets/og-image.jpg",
  "offers": {
    "@type": "AggregateOffer",
    "priceCurrency": "JPY",
    "lowPrice": "1980",
    "highPrice": "4780",
    "offerCount": "3",
    "priceValidUntil": "2027-12-31",
    "availability": "https://schema.org/InStock"
  }
}
</script>

<!-- FAQ (Frequently Asked Questions) Structured Data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Can I cancel or skip anytime?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, you can. If you complete the procedure from My Page up to 7 days before the next delivery date, you can skip delivery, pause, or cancel anytime without a cancellation fee."
      }
    },
    {
      "@type": "Question",
      "name": "What is the shelf life?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We recommend consuming within approximately 3 months unopened from the roasting date, and within 1 month after opening to best enjoy the aroma."
      }
    },
    {
      "@type": "Question",
      "name": "Is shipping free?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Shipping is free and uniform nationwide for all subscription plans."
      }
    }
  ]
}
</script>

Claude

The following SEO-related descriptions have been added.

<!-- ══ PRIMARY META ══ -->
<title>KUROKO COFFEE | Specialty Coffee Subscription Service</title>
<meta name="description" content="Farm-direct specialty coffee delivered to your post every month. Shipped within 5 days of roasting, cancel anytime. AI selects your preferred coffee every month. From 2,480 yen/month.">
<meta name="keywords" content="coffee subscription, specialty coffee, regular delivery, coffee regular purchase, farm-direct, single origin, roasting, coffee mail order">
<meta name="author" content="KUROKO COFFEE">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://kuroko-coffee.jp/">

<!-- ══ OGP (Open Graph) ══ -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://kuroko-coffee.jp/">
<meta property="og:site_name" content="KUROKO COFFEE">
<meta property="og:title" content="KUROKO COFFEE — A cup from behind the scenes, delivered monthly.">
<meta property="og:description" content="Farm-direct specialty coffee delivered to your post every month. Shipped within 5 days of roasting. AI learns your preferences and selects the optimal lot each month. From 2,480 yen/month, cancel anytime.">
<meta property="og:image" content="https://kuroko-coffee.jp/ogp.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="KUROKO COFFEE logo and coffee cup visual">
<meta property="og:locale" content="ja_JP">

<!-- ══ Twitter Card ══ -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@kuroko_coffee">
<meta name="twitter:creator" content="@kuroko_coffee">
<meta name="twitter:title" content="KUROKO COFFEE — A cup from behind the scenes, delivered monthly.">
<meta name="twitter:description" content="Farm-direct specialty coffee delivered to your post every month. Shipped within 5 days of roasting, from 2,480 yen/month.">
<meta name="twitter:image" content="https://kuroko-coffee.jp/ogp.jpg">
<meta name="twitter:image:alt" content="KUROKO COFFEE OGP image">

<!-- ══ Structured Data (JSON-LD) ══ -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://kuroko-coffee.jp/#organization",
      "name": "KUROKO COFFEE",
      "url": "https://kuroko-coffee.jp/",
      "logo": {
        "@type": "ImageObject",
        "url": "https://kuroko-coffee.jp/logo.png",
        "width": 400,
        "height": 100
      },
      "sameAs": [
        "https://www.instagram.com/kuroko_coffee/",
        "https://twitter.com/kuroko_coffee/"
      ],
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "customer service",
        "email": "hello@kuroko-coffee.jp",
        "availableLanguage": "Japanese"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://kuroko-coffee.jp/#website",
      "url": "https://kuroko-coffee.jp/",
      "name": "KUROKO COFFEE",
      "publisher": { "@id": "https://kuroko-coffee.jp/#organization" },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://kuroko-coffee.jp/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "WebPage",
      "@id": "https://kuroko-coffee.jp/#webpage",
      "url": "https://kuroko-coffee.jp/",
      "name": "KUROKO COFFEE | Specialty Coffee Subscription Service",
      "description": "Farm-direct specialty coffee delivered to your post every month. Shipped within 5 days of roasting, cancel anytime. From 2,480 yen/month.",
      "isPartOf": { "@id": "https://kuroko-coffee.jp/#website" },
      "about": { "@id": "https://kuroko-coffee.jp/#organization" },
      "inLanguage": "ja",
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://kuroko-coffee.jp/"
          }
        ]
      }
    },
    {
      "@type": "ItemList",
      "name": "KUROKO COFFEE Subscription Plans",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@type": "Product",
            "name": "Tanuki Plan",
            "description": "1 type of single origin 100g every month. Shipped within 5 days of roasting. Origin and roasting information card included.",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "2480",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "2480",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@type": "Product",
            "name": "Kitsune Plan",
            "description": "2 types of tasting set 100g x 2 every month. Advanced taste profile by AI, with Slack community access.",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "3980",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "3980",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        },
        {
          "@type": "ListItem",
          "position": 3,
          "item": {
            "@type": "Product",
            "name": "Tengu Plan",
            "description": "3 types + 1 limited lot every month. Roaster visit rights (once a year), Geisha Panama priority slot, monthly online tasting event participation.",
            "brand": { "@id": "https://kuroko-coffee.jp/#organization" },
            "offers": {
              "@type": "Offer",
              "priceCurrency": "JPY",
              "price": "6800",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "6800",
                "priceCurrency": "JPY",
                "billingIncrement": 1,
                "unitCode": "MON"
              },
              "availability": "https://schema.org/InStock",
              "url": "https://kuroko-coffee.jp/#plans"
            }
          }
        }
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "Can I cancel anytime?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Yes, you can cancel or pause anytime. There are no contract restrictions. If you complete the procedure from My Page by the deadline for the next month's delivery, you can stop future shipments."
          }
        },
        {
          "@type": "Question",
          "name": "How long does it take to receive after roasting?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "All plans are shipped within a maximum of 5 days from the roasting date (Tengu Plan within 3 days). You can enjoy fresh coffee."
          }
        },
        {
          "@type": "Question",
          "name": "Can I change my coffee preferences if they change?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Of course. You can update your taste profile anytime from My Page. Also, by simply sending feedback on the coffee you received, the AI will automatically adjust the next month's selection."
          }
        },
        {
          "@type": "Question",
          "name": "Is shipping free?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Shipping is free for the first order. For subsequent orders, a flat shipping fee of 330 yen (tax included) applies nationwide."
          }
        }
      ]
    }
  ]
}
</script>

They were all similar; they properly included OGP tags and structured markup.

In terms of SEO, there doesn't seem to be much difference with this.

Let's try having them create a "website for a fictional fast-food restaurant"

I had them generate it with the following prompt.

Please create a website for a fictional fast-food restaurant in a single HTML/CSS/JS file.

Pages to create

・Top page

・Our Commitment

・Menu

・Access

・Contact

Please also include SEO-related descriptions.

Please include images in key areas like the First View.

Please make the design white-based with green accents, clean, like the Mos Burger website.

Although the instruction was "in a single file," I'm hoping they'll provide several pages and simulate page transitions.

Here's what they generated. (Click to enlarge)

ChatGPT

View Live

Gemini

View Live

Claude

View Live

What do you think?

This time, Claude produced something quite good.

It looks good, and despite being a fictional site, it has solid content!

Also, it was the only one to use Google Fonts again. Does Claude prefer Mincho typefaces?

Gemini was the only one that understood the "simulated page transition" request.

Clicking on the menu simulates a transition to a sub-page.

However, it's not fully polished; the overall information is sparse, it doesn't look very stylish, and it's broken on smartphones.

On the other hand, ChatGPT consistently performs well.

Although I instructed it to Please also include SEO-related descriptions.,
only ChatGPT included both OGP tags and structured markup.

Gemini and Claude only included OGP tags.

They would probably do it if given additional instructions, but since it was in the initial prompt, I would have liked them to do it.

Is it necessary to hire a professional for website creation?

This is a very significant and grand theme.

Personally, I'd like to say, "You need to hire a professional!" but to answer strictly and honestly, it would be, "If you want to keep costs down, you don't need to hire a professional, but if you want to achieve results, it's better to hire a professional for at least some parts."

Website creation involves not only design and programming but also a wide range of tasks such as SEO (Google search optimization), server and domain contracts, Google indexing requests, and access analysis.

AI won't do these things for you; you'll need to do them yourself while consulting the AI.

Even in the previous test, it didn't include SEO-related descriptions unless explicitly told, and I believe there are many other things it won't do unless instructed.

Therefore, I think "if you want to achieve results, it's better to hire a professional for at least some parts."

For example, having AI handle the design and programming, and then handing it over to a professional, seems like a cost-effective and smooth approach.
You can also make many demands of the AI to create a design you like.

By the way, I also undertake web production, so please contact me if you are interested.

Portfolio

That concludes the comparison of the three major generative AIs, "ChatGPT," "Gemini," and "Claude," by having them create websites.

It's truly amazing that such decent websites can be created in such a short time!

I also feel a sense of dread that the world might become flooded with soulless creations...

I'm excited to see what kind of evolution they will show in the future.

Comments

If this was helpful, we'd appreciate your support!
All support received will go toward my child’s upbringing.

Author's Baby Registry (Amazon)

Support me via OFUSE

Or support me by buying something through the buttons below
(You don't have to buy the specific item linked.)

Support me via Amazon

Support me via Rakuten

Support me via Yahoo!Shopping

[2026] Let's Compare 3 Major Generative AIs by Having Them Create Websites (ChatGPT, Gemini, Claude)

Table of Contents

Rules

Let's try having them create a "LP for a fictional coffee subscription service"

ChatGPT

Gemini

Claude

Adding SEO-related descriptions

ChatGPT

Gemini

Claude

Let's try having them create a "website for a fictional fast-food restaurant"

ChatGPT

Gemini

Claude

Is it necessary to hire a professional for website creation?

Comments