Artificial Intelligence (AI) has made significant strides in recent months, with the development of advanced algorithms and machine learning techniques. However, when it comes to the field of web development, there are still some challenges that AI bots face. One such challenge is the ability to generate high-quality CSS code. While AI models like GPT-4, Bard, Claude+, and co-pilot have shown impressive coding capabilities in various domains, the complexity of CSS presents unique difficulties. We will examines how AI impacts CSS and the difficulties AI bots have generating CSS code.
The Problem
We will ask each AI to create a header using tailwind css. The prompt is “Create a header component using Tailwind CSS that includes a logo on the left, navigation links in the center, and a search bar on the right. Make the header dark purple.” We are using tailwind since it is a very popular css library and wanted to see how well it works with libraries. You can test out the code yourself on the tailwind playground.
Bard
First off is bard. When given the prompt this is what it returned.
<header class="bg-purple-700">
<div class="container mx-auto flex justify-between items-center">
<a href="/" class="flex items-center">
<img src="/logo.png" alt="Logo" class="h-10 w-auto mr-4">
<span class="text-white font-bold">My Website</span>
</a>
<nav class="flex items-center">
<a href="/about" class="text-white font-bold">About</a>
<a href="/contact" class="text-white font-bold">Contact</a>
</nav>
<input type="text" class="w-full rounded-md bg-white text-purple-700 focus:outline-none focus:bg-purple-600">
</div>
</header>
So this is the code we got back and this is how it looks like:
This is what it looks like on mobile.
As we can tell, it’s not too great. For starters the nav links have no space between them, the search bar is illegible against the background. Also the logo on the left doesn’t look mobile optimize. I guess it still got the main parts of the prompt correct, all the content is in the correct order. Logo on the left, nav links in center and search bar on the left.
Claude+
Now we move on to Claude, again given the same prompt.
<header class="bg-purple-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="logo.svg" alt="Logo">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
<div class="flex-1 flex justify-center px-2 lg:ml-6 lg:justify-end">
<div class="max-w-lg w-full lg:max-w-xs">
<label for="search" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</div>
<input id="search" name="search" class="block w-full pl-10 pr-3 py-2 border border-transparent rounded-md leading-5 bg-gray-700 text-gray-300 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 sm:text-sm" placeholder="Search" type="search">
</div>
</div>
</div>
</div>
</div>
</header>
Ok this header looks a lot more impressive. For starter it has a nice sleek design that fits the color scheme we want. The search bar is also more visible, and there is more space between the nav links. Claude also added a hover effect to the nav links which is a nice touch. The logo on the left looks great, we didn’t specify a logo and just has a standard image with the word “Logo”.
Here is the same view on mobile:
When it’s shown on mobile it seems like the design is still holding. The navigation links collapse which is common practice. However the search bar stays over the whole navbar which is a bit of a problem. Logo looks good although some spacing may be needed. But overall this is a pretty good attempt at generating a header using Tailwind CSS.
GPT-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Component</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<header class="bg-purple-900 text-white py-4">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="your-logo-url-here" alt="Logo" class="h-8 w-auto mr-4">
<nav class="hidden md:flex space-x-8">
<a href="#" class="hover:text-purple-300">Home</a>
<a href="#" class="hover:text-purple-300">About</a>
<a href="#" class="hover:text-purple-300">Services</a>
<a href="#" class="hover:text-purple-300">Contact</a>
</nav>
</div>
<div class="flex items-center">
<form action="#" method="get" class="flex items-center">
<input type="search" name="search" placeholder="Search" class="rounded-md pl-3 pr-8 py-2 bg-purple-800 text-white placeholder-purple-400 focus:ring-1 focus:ring-purple-600 focus:outline-none">
<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
</button>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
Here is the design of the header.
Overall looks very good. The design is sleek and follows the dark purple color scheme. The logo is in the right place and the navigation links have good spacing between them. The search bar is visible and has good text input styling.
Overall, GPT-4 has done a pretty good job with generating the header using Tailwind CSS. The design is visually appealing, and all the components are in the correct place. However, there are still some tweaks that need to be made to ensure that the
One thing I will say is that the mobile design does look better than Claude+. The search bar isn’t fully across the screen, overall looks solid.
Bing AI (Creative Mode)
Next we will try Bing AI on creative mode and see what we get.
<div class="flex items-center justify-between bg-purple-900 p-4"> <div class="flex items-center"> <img src="logo.png" alt="Logo" class="mr-2 h-8 w-8" /> <span class="text-xl font-bold text-white">Tailwind</span> </div> <div class="flex items-center space-x-4"> <a href="#" class="text-white hover:underline">Home</a> <a href="#" class="text-white hover:underline">About</a> <a href="#" class="text-white hover:underline">Contact</a> </div> <div class="flex items-center"> <input type="text" placeholder="Search" class="rounded-lg bg-purple-800 px-2 py-1 text-white focus:outline-none focus:ring-2 focus:ring-purple-700" /> </div> </div>
Ok so this one is interesting. Out of all the AI bots, this Bing was able to get the nav links in the center. It created the logo with both text and image on the left. It’s interesting to see how different each model thinks about the problem. Here is an image bellow.
Overall looks very similair to GPT-4 design. Here is the header in mobile:
The header does look a bit packed. I would have preferred a hamburger style button, but then again none of the models did that. This may seem ok if we only have three nav links, but even then it looks to clumped together. Overall I would say is probably the best one on desktop but tied with GPT-4.
Difficulties AI bots have generating CSS code
While AI bots like GPT-4, Bard, Claude+, and co-pilot have shown impressive capabilities in various domains, the complexity of CSS presents unique difficulties. One of the main challenges is generating high-quality CSS code that meets specific design requirements. As we saw in the previous examples, AI-generated code often lacks attention to detail and can result in design flaws. Additionally, AI still struggles with context awareness, and it can be challenging to provide precise instructions that an AI can follow accurately. These difficulties demonstrate that AI cannot replace human designers entirely but can be a valuable tool to assist them in their work.
From the results it seems that GPT-4 and Bing have done the best job with generating the header using Tailwind CSS. As AI continues to improve it will be interesting to see how well they can generate CSS code and how much they can assist programmers. It’s clear that AI-generated code still has room for improvement, especially when it comes to details and context awareness.