How We Built This Website

Vibe coding

Our goal was to create a simple website where we can showcase our products and share our experiences with AI. We have built many websites in the past 15 years and one of the most successful ones was a static HTML website. It performed well in SEO and excellent in terms of speed and accessibility. But it was of course very difficult to maintain because of (a lot of!) code duplication. So we wanted to see if we could create a website that was easy to maintain and update and also performed well in SEO, speed and accessibility. And all of this of course with AI which should solve the code duplication problem.

We actually started with trying out Bolt inspired by this video How to build a website in 30 minutes with AI and without code. Our experience was not as good as in the video. We used the same approach by starting with a very basic site and then suggesting changes based on inspiration from other sites. But the results were always a bit off and we ended up with a site that was not as good as we expected. Why? Maybe because of our lack of design skills or maybe because of the prompts although we tried to follow the video as close as possible. Sometimes AI tools also just don’t match the person using the tool.

So what now? We have been using WindSurf for using AI to generate code for us for a while now. So we decided to use it for this website as well. We used Gemini 2.5 Pro for creating the whole website. We gave Gemini the criteria outlined above and asked it what tech stack it would recommend. It suggested Astro with TailwindCSS. Additionally we used the Appever template as a starting point.

Based on our experience specifically with building the website here are some tips:

• Check the code into a source control system from the start
• Make small changes and commit them. Sometimes even Gemini makes mistakes and you need to be able to roll back to a working version of the website.
• Check changes for small (or big) mistakes. We found most easy changes don’t have mistakes. But bigger changes will have, for instance deprecated code, hardcoded text instead of translations or hardcoded locales instead of using a parameter.
• Make small changes yourself as this saves prompt credits

We found Gemini very easy to work with. Previously we mainly used Claude 3.7 Sonnet but we found it sometimes a bit too verbose in it’s answers before starting to actually code. Gemini for us works well because it still gives you options on how to code something but is also very direct when the solution is clear. The prompts mostly also don’t have to be very clear as it interprets what you want very well. So our final tip is to try different models in WindSurf and see which one works best for you.

Content

For the content of the website we used ChatGPT o3 because it seems to be better at creating content than other models. We used the following prompt:

Your role is a website content writer for a company called RedMaki. The company creates AI products and has 2 upcoming products. A mobile app which suggests recipes based on local supermarket or other shops offers. Recipe preferences like cuisine and cooking time can be set of course and then recipes will be suggested based on for instance lowest price. The second product is a saas product which helps companies building products to track the impact of their releases on their product KPIs. The first release will integrate with JIRA and Mixpanel. Further integrations will follow. Can you create content for a homepage which introduces the company, and showcases the 2 products. The content should be informal and very to the point. The company is based in Amsterdam and has previously built Mobalize, an online scheduling tool. The company is small and works with AI in all aspects of development and running the company. Please write the content in content blocks as they would appear on the website.

The initial content was very good! We especially liked ‘AI‑powered tools, cooked up in Amsterdam’. From the initial content we asked ChatGPT to make some changes as it had dreamed up some features. We of course also made some changes ourselves but overall the content was good from the start.

By the way, the content for this blog is 100% human and coffee generated.

Images

We actually started the image creating by asking Claude 3.7 Sonnet what a good prompt is to ask an AI to create an image. Then, because of all the buzz around the image creating capabilities of ChatGPT we used the structure of that prompt to ask it to create the website images. This is the prompt we used for the hero image:

I need an image for a homepage of an AI company website. This is the brief:

Scene:  A lively countertop where a robotic sous-chef stirs a steaming saucepan that is brimming with glowing app icons (smartphone, graph arrow, chat bubble). Lines of code waft up like aromatic steam.
Style: Flat-vector illustration like Mailchimp mascots: bold shapes, chunky outlines, subtle grain for warmth.
Palette: RedMaki red + warm oranges for heat, balanced with charcoal grey and off-white.
Mood: Friendly, crafty, we are tinkering so you don't have to
Prompt starter: a cute flat-vector kitchen scene, robot chef, pot of bubbling icons, code smoke, red and orange accent, minimal background

The company is called RedMaki and is a small AI company making AI mobile and saas apps. RedMaki red is #ba212d

This resulted in the hero image on the homepage. The only thing we did was change the background color to transparent. Overall we found the initial images based on the prompts created by ChatGPT with the o3 model very good. What it wasn’t able to do, or we were not able to correctly prompt it to do, was change only certain aspects of the images. For instance when we asked it to only remove the background color we were presented with a completely new image (with a nice background color!).

Initial results

So what was the result of this AI and human website tinkering? We used Google PageSpeed Insights to analyze the website. These are the initial results:

Not bad. The combination template, human and AI delivered good results!

If you have a question or a comment then just use the contact form on the homepage.