As there occur more and more challenges in developing frontends, new standards and laws appear and budgets get more and more competitive, I was curious to try out on how easy it is to create the markup for websites automatically – at least the base to use for the fine-tuning then.
The Prompt
So I simply described what I needed to ChatGPT and asked it to come up with a query to recreate a website based on tailwind from a given screenshot. It came up with the following prompt:
You are an expert web developer skilled in Tailwind CSS and UI replication. Your task is to analyze a provided screenshot of www.macaw.de and accurately reproduce its layout using Tailwind CSS.
Requirements:
- Analyze Section by Section
- Break down the screenshot into distinct sections (e.g., header, hero section, content blocks, footer).
- Identify and replicate spacing, alignment, and structure.
- Ensure that no section is left out—the final implementation must include every visible part of the page.
- Maintain Design Accuracy
- Use the exact colors, font sizes, and spacing from the original design.
- Ensure that typography, buttons, and other elements closely match the provided screenshot.
- Pay close attention to margins, paddings, shadows, and borders to achieve a pixel-perfect look.
- No section should be simplified or skipped—every small detail, including separators, background effects, and micro-interactions, should be implemented.
- Use Only Tailwind UI Components
- Implement elements using pre-built Tailwind UI components where possible.
- If a section doesn’t have an exact Tailwind UI match, compose components creatively to maintain fidelity.
- Avoid custom CSS or external libraries—stick strictly to Tailwind and Tailwind UI.
- Optimize and Polish
- Ensure responsiveness—the page should look great on both desktop and mobile.
- Implement hover effects, transitions, and other UX enhancements as necessary.
- Ensure proper semantic HTML structure for accessibility and SEO.
- Maintain consistency with the original layout—avoid approximation or creative modifications unless they enhance usability.
- Final Output
- Deliver a single self-contained HTML file with all markup and Tailwind classes.
- The file should fully implement the design when opened in a browser.
Key Directives:
- Do not omit any sections or details—the reproduction must be as complete and accurate as possible.
- Pay attention to small details such as borders, shadows, line heights, icons, and subtle design elements.
- Ensure a polished, professional final output that is visually and functionally as close as possible to the original.
I could have added some more stuff that I experienced during my tests, like “please keep the texts as they are” (because some models tend to shorten the texts for no reason) or “please use online placeholder images in case you need to display an image” (which I did by hand for two of the results).
The screenshot
I then chose the german version of the macaw.de site and took a screenshot.
HINT: In case you’re interested in how to do that:
- Open Chrome
- Hit F12 (the developer tools open up)
- Then you can either hit “CTRL+SHIFT+P” or click the three dots in the upper right and select “run command”
- Type “Full” for “Capture full size screenshot”
As a result I got the following image (screenshot just contains the upper part, so you dont have to scroll all through it, but it ended with the footer):
Fun facts
Some fun facts from the generations:
When playing around with Deepseek (VL2 not R1) I suddenly got a contact form:
Gemini Flash used the text from the hero banner as menu items
GPT 4.5 was the only one who tried to add a language selector with a dropdown:
Grok was the most colorful trying to utilize the color schemas for the tiles:
Mistral offered me a “get started” button in the main navigation 😉
o3-mini-high offered me this Quake-Like icon as magnifying glass replacement (i think it tried to combine it with the arrow-downwards of the language selector)
Sonnet got a lot of stuff right, but as there’s a contact lash at the right side of the page, it obviously tried to rotate its own version 😉
And besides that (unfortunately not in my latest try that I used here) it got fancy with the locations:
🤣 At first I thought how cool it is that it even translated “Cologne” to “Köln” … until a colleague mentioned that it also thinks that “München” is a better location then “Wuppertal” 🤔. But also for the netherlands it replaced “Hoofddorp” with Amsterdam and Utrecht 🤣
The results
The results in tabular version. For screenshots or markup download see below.
| gem 2 flash | gem 2 flash think | gpt-4o | gpt-45 | o3-mini-high | grok3 | mistral | sonnet-37 | |
| Logo | 👍as font | 👍as font | 👍as font | 👍as font | 👍 as image | 👍as font | 👍as font | 👍as font |
| MainNav | 🆗 yes but wrong items | 🆗 yes but wrong items | 👍yes | 👍yes | ⭐ yes event with lang | 👍yes | 🆗 exists but different items | ⭐ good |
| Hero | 🆗 yes but no img | 🆗 yes but no img | 🆗 yes but no img | 🆗 yes but no img | 👍yes | 👍yes | 👍yes | ⭐ good |
| Welcome | ❌ mixed into header | ❌ mixed into header | 🆗 yes but no columns and button | 🆗 quite good | 🆗 yes but no columns and button | 🆗 yes but no columns and button | 🆗 yes but no columns and button | ⭐ good |
| Customers | ❌ no | 🆗 yes but wrong component | 👍yes | 🆗 used fonts instead of images | ❌ missing | 👍yes | ❌ missing | 👍yes |
| Tiles | ❌ no | 🆗 some tiles | ❌ no | ⭐ good even with structure | 🆗 some other tiles | 🆗 even added some colors | ❌ missing | 👍yes |
| References | 🆗 some tiles | 🆗 some tiles | ❌ missing | ❌ missing | 🆗 some other tiles | 🆗 looks different, but with nesting | 🆗 some tiles | 👍yes |
| Services | 🆗 tiles but not correct component | 🆗 tiles but not correct component | ❌ missing | ❌exists but not good | 🆗 some other tiles | ❌ colors but no img and no further details | 🆗 some tiles | 👍 good result (only broken in two lines) |
| News | 🆗 tiles but not correct component | 🆗 tiles but not correct component | ❌ missing | ❌exists but not good | 🆗 some other tiles | ❌ colors but no img and no further details | ❌ missing | ⭐ good |
| WorkAt | ❌ missing | ❌ missing | ❌ missing | ❌ missing | 🆗 exists but suddenly a banner | 🆗 exists, image is missing | ❌ missing | 🆗 exists, image is missing |
| Footer | 🆗 free interpretation | 🆗 free interpretation | 🆗 free interpretation | 🆗exists but not good | 👍 quite good interpretation | 🆗 free interpretation | 🆗 free interpretation | ⭐ best interpreation |
Opinion:
I was quite curious as “Github Copilot” introduced “Sonnet” as an option on how good this is compared to GPT. I have to say: I love GPT – especially the reasoning models, but in regards of coding Sonnet is really shining.
I’m wondering: As the detail level of the components decreases at the 4 and 4.5 GPT models on the lower end of the page, how hard the default token limit hits here.
Files
In case you want to download the full markup to see by yourself:
Download the markup files
