Hoe we deze website hebben gemaakt

Vibe coding

Ons doel was om een eenvoudige website te maken waarop we onze producten kunnen presenteren en onze ervaringen met AI kunnen delen. We hebben de afgelopen 15 jaar veel websites gebouwd en een van de meest succesvolle was een statische HTML-website. Deze presteerde goed in SEO en uitstekend qua snelheid en toegankelijkheid. Maar het was natuurlijk erg moeilijk te onderhouden vanwege (veel!) dubbele code. We wilden dus kijken of we een website konden maken die gemakkelijk te onderhouden en bij te werken was en ook goed presteerde in SEO, snelheid en toegankelijkheid. En dit alles natuurlijk met AI, die het probleem van dubbele code zou moeten oplossen.

We zijn begonnen met het uitproberen van Bolt, geïnspireerd door deze video How to build a website in 30 minutes with AI and without code. Onze ervaring was niet zo goed als in de video. We gebruikten dezelfde aanpak door te beginnen met een zeer eenvoudige site en vervolgens wijzigingen voor te stellen op basis van inspiratie van andere sites. Maar de resultaten waren altijd een beetje afwijkend en we eindigden met een site die niet zo goed was als we hadden verwacht. Waarom? Misschien vanwege ons gebrek aan ontwerpvaardigheden of misschien vanwege de prompts, hoewel we probeerden de video zo nauwkeurig mogelijk te volgen. Soms passen AI-tools ook gewoon niet bij de persoon die de tool gebruikt.

Dus, wat nu? We gebruiken WindSurf al een tijdje om AI code voor ons te laten genereren. Dus besloten we het ook voor deze website te gebruiken. We gebruikten Gemini 2.5 Pro om de hele website te maken. We gaven Gemini de hierboven beschreven criteria en vroegen welke tech-stack het zou aanbevelen. Het stelde Astro voor met TailwindCSS. Daarnaast gebruikten we de Appever template als uitgangspunt.

Hier zijn enkele tips naar aanleiding van het bouwen van de website met WindSurf en Gemini 2.5 Pro:

• Zet de code vanaf het begin in een versiebeheersysteem.
• Maak kleine wijzigingen en commit deze. Soms maakt zelfs Gemini fouten en moet je terug kunnen vallen op een werkende versie van de website.
• Controleer wijzigingen op kleine (of grote) fouten. We merkten dat de meeste gemakkelijke wijzigingen geen fouten bevatten. Maar grotere wijzigingen zullen dat wel hebben, bijvoorbeeld verouderde code, hardcoded tekst in plaats van vertalingen of hardcoded locales in plaats van een parameter te gebruiken.
• Maak zelf kleine wijzigingen, want dit bespaart prompt credits.

We vonden Gemini erg prettig om mee te werken. Eerder gebruikten we voornamelijk Claude 3.7 Sonnet, maar we vonden dit model soms wat te uitgebreid in zijn antwoorden voordat het daadwerkelijk begon met coderen. Gemini werkt voor ons goed omdat het nog steeds opties geeft over hoe je iets moet coderen, maar ook erg direct is als de oplossing duidelijk is. De prompts hoeven meestal ook niet heel duidelijk te zijn, omdat het heel goed interpreteert wat je wilt. Dus onze laatste tip is om verschillende modellen in WindSurf uit te proberen en te kijken welke het beste voor jou werkt.

Tekst

Voor de content van de website hebben we ChatGPT o3 gebruikt omdat het beter lijkt te zijn in het creëren van content dan andere modellen. We gebruikten de volgende 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.

De initiële content was erg goed! We vonden vooral ‘AI-gedreven tools, bereid in Amsterdam’ erg leuk. Vanuit de initiële content vroegen we ChatGPT om enkele wijzigingen aan te brengen, aangezien het enkele features zelf had bedacht. We hebben natuurlijk ook zelf enkele wijzigingen aangebracht, maar over het algemeen was de content vanaf het begin goed.

Trouwens, de content voor deze blog is 100% door mens en koffie geschreven.

Afbeeldingen

We zijn begonnen met het maken van de afbeeldingen door Claude 3.7 Sonnet te vragen wat een goede prompt is om een AI te vragen een afbeelding te maken. Vervolgens, vanwege alle berichten rond de mogelijkheden van ChatGPT om afbeeldingen te maken, gebruikten we de structuur van die prompt om ChatGPT te vragen de afbeeldingen te maken. Dit is de prompt die we gebruikten voor de hero-afbeelding:

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

Dit resulteerde in de hero-afbeelding op de homepage. Het enige wat we deden was de achtergrondkleur transparant maken. Over het algemeen vonden we de initiële afbeeldingen op basis van de prompts gemaakt door ChatGPT met het o3-model erg goed. Wat het niet kon, of waar we het niet correct voor konden prompten, was het wijzigen van slechts bepaalde aspecten van de afbeeldingen. Toen we bijvoorbeeld vroegen om alleen de achtergrondkleur te verwijderen, kregen we een compleet nieuwe afbeelding (met een mooie achtergrondkleur!).

Resultaat

Dus wat was het resultaat van AI en mens die een website bouwen? We gebruikten Google PageSpeed Insights om de website te analyseren:

Niet slecht! De combinatie template, mens en AI levert goede resultaten op!

Als je een vraag of opmerking hebt, gebruik dan het contactformulier op de homepage.