Tech-stack
Nu we de eerste plannen hebben doorgenomen en de knoop hebben doorgehakt dat we het experiment starten, is het tijd voor het ontwikkelen van ons merk en de tech-stack.
Nu we de eerste plannen hebben doorgenomen en de knoop hebben doorgehakt dat we het experiment starten, is het tijd voor het ontwikkelen van ons merk en de tech-stack.
01 · Naam & merk
Een belangrijke eerste stap is het kiezen van een passende naam (en URL). We verfijnen lang rondom het ProductAI concept. Claude vindt dit niet zo'n sterk concept en er zijn weinig bruikbare domeinnamen beschikbaar (of heel duur). Maar waarom voeden we AI niet met onze input? We geven Claude en ChatGPT onze gedachten rondom het experiment en al snel bewegen we in de richting van "founded by ai". Uiteindelijk kiezen we voor "co-Founded by AI" en leggen de .com domeinnaam vast. Zo, dat is geregeld.
02 · Logo
Hier hanteren we hetzelfde principe. We geven AI een lijst van criteria en vragen een logo te ontwerpen. Eerst in Claude Design. Daar komt niet veel soeps uit, lelijke logo's waar we niets mee kunnen beginnen. Bij ChatGPT eigenlijk hetzelfde. Wel logo's, maar niet naar onze tevredenheid. Zal wel aan onze prompting-vaardigheden liggen. Google's Gemini met Nano Banana Pro doet wel wat we willen. Er komt een set van 10 logo's uit die allemaal in de richting komen van wat we nodig hebben. Beetje doorvragen en de beste laten optimaliseren en klaar. Een logo waarmee we aan de slag kunnen. Wel meteen via MyImage.io de background verwijderen zodat het logo er overal netjes uitziet.
03 · Huisstijl
We hebben een logo, nu de wereld eromheen. Voor de merk richtlijnen en het UX design (user experience) kiezen we tussen Google Stitch en Claude Design. We kiezen de laatste. Recent gelanceerd door Claude, dus het nieuwste van het nieuwste. Even verkennen hoe de tool werkt en dan de prompt voeden.
Eerst een design systeem laten maken, hiermee kunnen we alle toekomstige uitingen consistent houden. Dat is een belangrijke les die we eerder hebben geleerd. De prompt van het logo is ook nu toepasbaar. Beiden laten we een design maken en over beide varianten zijn we niet meteen tevreden. Door itereren, beter aangeven wat we zoeken en voorbeelden van sites die we mooi vinden benoemen. AI gaat weer aan het werk.
De machine staat even te malen en komt met een compleet design systeem. Het logo hadden we al, maar nu ook een kleurenpalet, fontkeuze, lettergroottes, foto-styling, knoppen, borders, etc. Alles in één digitale huisstijl.
Op basis hiervan ontwerpt Claude Design de site. We prompten de sitestructuur (een beetje) en nemen de vragen en adviezen van AI mee. We zijn tevreden over het design, ons experiment komt stap voor stap tot leven.
04 · De tech-stack
Nu bouwen. Natuurlijk met Vibe Coding, maar welke tool gebruiken we? Lovable, Replit, Base44: volop keuze. Maar omdat we ons design in Claude Design hebben gemaakt, is het eigenlijk een no-brainer. De knop "hand-off to Claude Code" kijkt ons verlekkerd aan. De interface van Lovable en anderen is dan wel prettig visueel, de integratie van Claude Design en Claude Code wint in dit geval.
Code gaat aan de slag en bouwt de volledige site, inclusief alle content die we in de ontwerpfase genereren. Alles op basis van moderne technologie, vooraf klaargezet (pre-rendered) voor snelheid en vindbaarheid. De code synchroniseert met GitHub zodat we onafhankelijk zijn van welke tool dan ook.
O ja, AI maakt ook af en toe fouten bij het maken van een applicatie. Maar herstelt deze ook weer zelfstandig:
Publiceren gebeurt naar Vercel hosting vanuit GitHub en AI voegt er en passant nog Astro aan toe voor de pre-rendering. Bijna alles zonder handjes.
We hebben nu vanuit Claude Code:
Alles meteen geschikt (technisch) voor vindbaarheid in SEO en GEO. Wat gaat dit heerlijk soepel zeg. Ok, wel wat iteraties hier en daar, maar AI helpt altijd.
Omdat we in de toekomst ook data opslaan voor bijvoorbeeld onze interactieve idea generator, pluggen we meteen een Supabase database in. Claude Code neemt hiervoor het leeuwendeel van het werk voor z'n rekening. De database draait in Duitsland, ook wel fijn om te zien. Lekker soepel allemaal.
Claude Code: "Alles meteen geschikt (technisch) voor vindbaarheid in SEO en GEO. Wat gaat dit heerlijk soepel zeg."
Tot slot, een Content Management Systeem is ook handig. En doe dan meteen een automatische vertaalfunctie naar het Engels. AI adviseert om Sanity te gebruiken als CMS. Prima, doe maar. En implementeer het maar. Enkele minuten later kunnen we de hele site beheren vanuit een CMS. Het werkt allemaal. Pompiedom. O ja, de meeste tools (hosting, CMS, database, GitHub) zijn gratis bij beperkt gebruik. We betalen wel voor de AI tools (OpenAI, Anthropic en Google), die gebruiken we doorlopend.
05 · Social media
Snel de belangrijkste social media accounts registreren. Eerst LinkedIn: daar maken we de bedrijfspagina aan. Vervolgens Instagram (zie afbeelding) zodat we daar onze updates kunnen posten. AI instrueren om de posts automatisch te genereren. Dat gaat best goed: afbeeldingen en de meta teksten worden aangemaakt. Maar omdat we nog geen koppeling hebben met Meta en LinkedIn, is het publiceren nog een handmatige activiteit. Later nog eens naar kijken.
06 · Google
De laatste stap voor nu is het aanmelden van onze gloednieuwe site bij Google Search Console. Dat zorgt ervoor dat we gevonden worden. Als we alle pagina's hebben laten indexeren is het afwachten. Hopelijk pakt Google ons snel op en staan we hoog in de zoekresultaten. Doordat Claude Code automatisch gebruik maakt van pre-rendering, kan Google de pagina's perfect lezen. Dat moet helpen. Tevens heeft Claude adviezen gegeven over de content en technische metadata om ook met GEO goed gevonden te worden door de AI agents.
Geert-Jan Smits & Jurriën Kerstholt - Founders co-Founded by AI