Design is altijd mijn Achilleshiel geweest. Meestal heb ik een vrij duidelijk beeld van wat ik wil, maar dat omzetten in een consistente interface, daar loopt het mis. Voor de vorige herwerking van mijn cv-site, in 2024, heb ik uiteindelijk een designer ingehuurd via Fiverr om weer vooruit te raken. Toen Anthropic Claude Design uitbracht, een webtool die schermafbeeldingen en Figma-bestanden omzet in bewerkbare prototypes, was ik dan ook oprecht benieuwd of AI nu die kloof kan dichten.

Om het grondig te testen, gebruikte ik het om twee projecten te herontwerpen: een kleine Svelte-app die ik als testomgeving gebruik, en de cv-site die ik net vermeldde.

De hoofdinterface van Claude Design

De interface zelf is eenvoudig: schermafbeeldingen uploaden, een prompt schrijven en itereren door opmerkingen bij specifieke elementen te plaatsen of rechtstreeks op de lay-out te tekenen. Het kan wireframes met weinig detail opleveren of gedetailleerde mockups met die klaar zijn voor de browser en zelfs interactief zijn. Wijzigingen worden meteen ter plaatse toegepast, waardoor het veel meer aanvoelt als een live designtool dan als een chatvenster met een voorbeeldpaneel.

Een Svelte-webinterface moderniseren

Al een tijdje werk ik aan een kleine reeks tools om videogamerecords bij te houden: een Python-package dat spelgegevens valideert met Pydantic en een CLI bevat om die JSON-records te beheren, een frontend op basis van Svelte die de data omzet in een statische site, en een aparte repo met mijn eigen data. Dit project noemde ik MiScore. Het dient meteen ook als speeltuin om te experimenteren met Pydantic, Click, Svelte en alles wat ik verder nog wil uitproberen. De huidige versie van mijn site staat op sebastian.proost.science/MiScore-site/.

Het oorspronkelijke design kwam tot stand met Claude Code, en ik was er redelijk tevreden over. Maar na verloop van tijd merkte ik dat het model steeds op dezelfde visuele patronen terugviel, en wat fris begon, ging er stilaan uitzien als de generieke “vibe-coded” lay-out die je overal ziet. Een mooi excuus voor een redesign.

Ik maakte schermafbeeldingen van de bestaande pagina’s om de structuur en de inhoud vast te leggen, uploadde die naar Claude Design met een korte prompt waarin ik MiScore beschreef, en na een paar verduidelijkende vragen over stijl en kleuren rolde er een eerste prototype met hoge detailgraad uit.

De hoofdinterface van MiScore Recente records in MiScore De recordspagina van MiScore

Ik vroeg om een retrogame-look: donker thema, groene accenten, subtiele CRT- en neontoetsen. De eerste poging zat er dicht bij, maar een paar kleuren voelden verkeerd aan en het geheel oogde wat statisch. De opmerkingstools waren hier echt nuttig: je selecteert een specifiek element en zegt wat er moet veranderen, in plaats van dat te proberen omschrijven in een prompt. Na een paar iteraties had ik de sfeer die ik wilde, met een subtiele achtergrondanimatie en een flikkerende neontitel die alles samenbrengt.

Het MiScore-prototype van Claude Design

Voor de overdracht maakte Claude Design een zip met een op zichzelf staand HTML-prototype en een markdownbestand met implementatienotities gericht aan Claude Code. Ik dropte dat in de MiScore-site-repo in een redesign-map, opende Claude Code met Opus 4.7 en vroeg om de nieuwe lay-out te integreren in het bestaande Svelte-project, volgens de Svelte-conventies in plaats van het prototype letterlijk over te nemen. De structurele wijzigingen werden netjes afgehandeld, de reactieve mogelijkheden van Svelte werden gebruikt waar dat zinvol was, en het resultaat had geen enkele manuele correctie nodig. Ik heb te weinig ervaring met Svelte om elke regel te controleren en de algemene kwaliteit te beoordelen, maar de code was leesbaar en onderhoudbaar, en dat is wat voor mij telt.

De volledige herwerking kostte één avond, en ik liep noch bij Claude Design noch bij Claude Code tegen de gebruikslimieten van het Pro-abonnement aan.

Mijn cv bijwerken

Wil je weten wat ik professioneel zoal uitspook, dan vind je mijn cv op sebastian.proost.science. Ik houd die redelijk actueel, vooral door nieuwe inhoud toe te voegen, en af en toe kijk ik het design opnieuw na. Zoals gezegd werd de herwerking van 2024 deels door een Fiverr-designer gedaan, wat werkte, maar nooit helemaal consistent aanvoelde.

De hoofdinterface van het cv Publicaties op het cv Media op het cv

Deze keer uploadde ik schermafbeeldingen naar Claude Design, vroeg ik om een opfrissing, beantwoordde ik een paar vragen over kleuren en stijl, en genereerde het een prototype in petrol en cyaan met veel witruimte.

Het resultaat was strak, maar de herobanner oogde vlak. Ik vroeg om een animatie op basis van JavaScript: een dynamische netwerkgrafiek waarin nodes bewegen en verbindingen leggen op basis van eenvoudige fysica. Het werkte meteen, alleen dreven de nodes steeds samen tot een compacte cluster in het midden. Een periodieke “explosie” die ze naar buiten duwde, loste dat op en maakte het geheel levendiger. Onder de motorkap is het een klein force-directed systeem op een 2D-canvas: veren, afstoting, demping en om de paar seconden een duwtje om alles organisch te houden. Hieronder zie je het in actie.

Na een paar kleinere aanpassingen via opmerkingen genereerde ik de overdracht en zette ik die in de repo van het project.

De nieuwe hoofdpagina van het cv

Anders dan MiScore was deze site gebouwd met Gatsby, en er had zich behoorlijk wat technische schuld opgestapeld: verouderde dependencies, trage builds en een over het algemeen onaangename developerervaring. Mijn plan was om het redesign te integreren in de bestaande opzet, maar Claude Code (Opus 4.7) slaagde er niet in om een werkende build te produceren, ook al ging daar een volledige sessie aan tokens in op.

Dat bleek een zegen in vermomming. Gatsby was eigenlijk geen vereiste meer; het was gewoon wat ik de vorige keer had gekozen. De enige echte randvoorwaarde was dat de site statisch moest blijven en makkelijk te hosten op GitHub Pages. Dus deed ik een stap terug, bekeek ik Astro, Eleventy en Hugo, en koos ik voor Eleventy omwille van de eenvoud en de manier waarop het met YAML-data omgaat.

Ik begon van nul: nieuwe repo, de inhoud overgezet (publicaties, werkervaring en meer, allemaal opgeslagen als YAML), de designoverdracht toegevoegd en een devcontainer opgezet met VS Code en Docker. Claude Code maakte in enkele minuten een werkende Eleventy-site van het prototype. De lay-out kwam overeen met het design, de interactieve onderdelen werden in vanilla JavaScript geïmplementeerd en de YAML-data werd netjes geïntegreerd.

Er bleven een paar hiaten over. Navigeren zorgde voor volledige paginaherlaadbeurten, terwijl de Gatsby-versie aanvoelde als een single-page app. Ik vroeg Claude Code om client-side navigatie toe te voegen, wat met verrassend weinig code lukte, al brak het een paar dingen zoals filters en “toon meer”-knoppen die na navigatie opnieuw geïnitialiseerd moesten worden. Makkelijke fixes, eens ik ze doorhad. Een paar aanpassingen voor responsiviteit en de mobiele layout maakten het af.

Het geheel kostte minder dan een dag. De mislukte Gatsby-integratie slokte de voormiddag op; de heropbouw in Eleventy, de aanpassingen en de deploy pasten in de namiddag. Ik hield er een beter design en een eenvoudigere codebase aan over, iets wat zelden samengaat in eenzelfde redesign.

Conclusie

Een visuele interface hebben om een UI te bouwen, en wijzigingen kunnen sturen door ergens naar te wijzen en in gewone taal te beschrijven wat je wilt, is een echte stap vooruit. Ik was al blij met wat Claude Code kon, maar dit voegt een laag toe waardoor itereren meer aanvoelt als samenwerken met een designer dan als engineering. Ideeën kunnen sneller getest worden, en dat verandert hoe ik designbeslissingen neem. Je kunt snel dingen uitproberen die de moeite anders niet waard zouden zijn.

Waar ik niet zeker over ben, is diversiteit. In deze twee projecten was het resultaat prima, beter dan wat ik zelf zou maken. Maar naarmate meer mensen deze tools gebruiken, vraag ik me af of we straks overal dezelfde esthetiek zullen opmerken, zoals dat nu al met “vibe-coded” lay-outs gebeurt. Iets om in het oog te houden.

Er is ook een ongemakkelijkere verschuiving. In 2024 huurde ik een designer in om deze site te krijgen waar ik hem wilde. Deze keer hoefde dat niet, en ik denk niet dat het voortaan nog nodig zal zijn voor kleine of middelgrote persoonlijke projecten. Dat geeft mij meer slagkracht, maar het haalt ook werk weg bij mensen die die creatieve input vroeger als dienst aanboden.

Deze workflow zal ik zeker blijven gebruiken. Het is de ideale manier om snel van idee naar prototype te gaan, ook als je zelf wat minder aanleg hebt voor graphisch design.