Zeven keer dezelfde kubus
Een site bouwen voor een object zonder scherm. Het ontwerp komt uit Claude Design, de code uit Claude Code, de beelden uit de GPT API. Het lastigste zit in dat laatste: dezelfde kubus zeven keer laten kloppen.
Minagi heeft een naam. Nu ook een plek om te landen: mi-nagi.com. De site is geen webshop, het is de etalage voor de Kickstarter campagne die we later gaan starten: één pagina, tweetalig, met een e-mailveld waarmee je je aanmeldt voor Kickstarter. De minagi heeft geen scherm, geen app, geen melding. De site laat precies die afwezigheid zien. Dat geeft ons een leuke uitdaging. Rust laten zien zonder saai te worden is een ander vak dan een gadget verkopen met specs.
Het ontwerp uit Claude Design
Het design system met kleuren, fonts en UI elementen bouwen we met Claude Design. Deze maakt er een pakket van: een map met tokens, componenten en een aparte Kickstarter-ui-kit. Geen los moodboard dat een developer daarna zelf mag interpreteren. De kleuren, de type-schaal, de radii, de schaduwen: het zit er allemaal als code in. Dit design system vormt de basis van al onze digitale uitingen en zorgt voor consistentie.
De kleurkeuze weegt zwaar. Walnoot, messing, papier. Warm, tactiel, analoog, precies de materialen van het product zelf. De eerste versie leunt op een klassiek lettertype. De tweede ronde is strakker: het Fraunces font voor de koppen, Inter Tight voor de tekst, JetBrains Mono voor de kleine technische details. En Shippori Mincho voor dat ene teken, 凪, het beeldmerk dat in het hout komt. Een Japanse letter vraagt om een Japanse letterfamilie. Zo'n detail regel je aan het begin in het design system.
De bouw in Claude Code
Claude Code zet de bundel om in een echte site. Statisch, geen zware applicatie voor nu, gewoon een index.html met een stylesheet en wat javascript. Open de map, klaar. Dat past bij een campagnepagina die jaren mee moet zonder dagelijks onderhoud.
Het tweetalig maken van de site gaat via een omweg die zichzelf terugverdient. Engels is de basis en de fallback als javascript niet beschikbaar is (relevant voor Google search). Een script vertaalt de Engelse tekst automatisch naar de Nederlandse versie, zodat één bron twee talen voedt. Eén versie aanpassen, beide sites lopen mee.
De mooiste truc zit in het geluid. De klankschaal-toon op de site is geen audiobestand. De Web Audio techniek synthetiseert hem live, rond de 456 Hz, één warme toon die klinkt als de minagi timer afloopt. Geen download, geen mp3, geen laadtijd. De site doet akoestisch wat het product mechanisch doet: het minimum (en doet dat goed).
Het echte werk: de beelden
Een fotostudio zit er voor ons nog niet in, het product bestaat voor nu alleen als digitaal prototype. De beelden komen uit de GPT-images-2.0 API. Zeven scènes, telkens dezelfde walnoten kubus op een ander bureau: een ontwerper, een student, een maker, iemand die thuis werkt. Op papier een kwestie van zeven prompts. In de praktijk het meest complexe proces tot nu toe.
Elke render tekent de kubus net anders. Heel irritant. De ene keer vier ribbels op de messing schijf, de andere keer zes. De houtnerf draait een kwartslag. De klankschaal verschuift een tint richting goud. Voor één losse afbeelding boeit dat niemand. Voor zeven beelden die als één set naast elkaar in een carrousel staan, springt elk verschil eruit. De kubus oogt als een familie met varianten, terwijl het product één ding is.
Zeven keer dezelfde kubus
Daar zit de grens van generatieve beelden anno nu. Het model onthoudt een stijl, geen exemplaar. Vraag twee keer om hetzelfde object en je krijgt twee interpretaties, geen kopie. Voor een merk dat leunt op precies dat ene object, is dat een reëel, vervelend probleem.
De oplossing ligt in de montage, geen nieuwe render. We maken een perfecte render van de minagi en voeden deze als referentie aan de API. De API zorgt voor een gegenereerde afbeelding van de gewenste scene en plaatst het minagi object in die scene. In plaats van ook de minagi elke keer opnieuw te renderen. Hiermee krijgen we het gewenste, reproduceerbare resultaat. Weer wat geleerd.
Wat dit zegt
De AI levert het ontwerp, de code en de beelden. Drie disciplines, drie tools, één middag per stuk. En een lange uitloop voor de juiste foto scenes. De consistentie levert de mens. Het model genereert richting en volume, de continuïteit tussen zeven frames bewaakt iemand met oog voor detail. Dat is de verdeling die dit hele experiment blootlegt: de machine maakt veel, de mens houdt het bij elkaar. Minagi haalt techniek weg uit het product. De site erachter, mi-nagi.com, zit vol techniek om die eenvoud overtuigend te tonen.