Claude design, door de ogen van een UX-Designer

Claude Design

Claude Design van Anthropic Labs heeft de laatste tijd veel stof op doen waaien. Het is een AI-powered design tool waarmee je met een paar simpele prompts prototypes, slide decks en one-pagers voor websites kan genereren - zonder enige design-ervaring. Het platform valt binnen een trend van agentic design -producten, zoals Google Stitch en Lovable. Anthropic benoemt dat het platform als research preview (onderzoeksversie) is uitgebracht, maar de tool biedt zeker al veel mogelijkheden en wordt al veel gebruikt en besproken. Wel is te verwachten dat de tool nog verder ontwikkeld zal worden naarmate meer tijd verstrijkt. In deze blogpost neem ik een kijkje in de wereld van Claude Design en andere agentic design-tools, vanuit de blik van een UX-Designer.

Mooie designs, volgens jouw design system

Met Claude Design kan je dus snel designs genereren die er visueel goed uitzien - of je nou design-ervaring hebt of niet. Bij het genereren van de designs kan je een eigen design system toevoegen, zodat Claude daar rekening mee houdt (en de output minder generiek wordt). Dit kan via Github, je codebase, een Figma-bestand, en/of door fonts, logo’s en assets te uploaden. De import van design system-elementen gaat soms net iets strakker via github dan via een .fig-bestand, maar het is wel fijn dat de optie wordt aangeboden. Voor de soepelste overdracht naar Claude Design moet je het design system goed documenteren, wat natuurlijk wel wat extra tijd en moeite kost. Het is ook niet zo dat de overdracht van het design system altijd goed verloopt - soms zijn basis-onderdelen zoals button-kleuren en focus states niet correct geïmplementeerd. Wel kan je nadat het design system is aangemaakt de elementen los goedkeuren of aan laten passen, maar elke aanpassing kan kostbaar tegoed opmaken.

Het design system dat wordt opgebouwd is op het eerste oog uitgebreider dan het vrij simpele ‘design system’ dat Google Stitch (beta) aanlevert zodra je een project begint (al zijn er bij Stitch meer regels gegenereerd dan direct zichtbaar is op de style sheet). Het is wel jammer dat je bij de output van de typografie niet in kan zoomen, waardoor je het design system net niet goed kan inspecteren. Dat doet de precisie waarmee een design system wordt opgebouwd geen eer aan.

Links Claude Design, rechts Google Stitch

Een goede toevoeging is dat Claude je bij de start van een project een aantal vragen zal stellen om het project goed te begrijpen. Dit zijn vragen over de tone of voice, kleurstelling en scope (moet er een paywall in het product komen?). Dit soort vragen spelen bij elk ontwikkeltraject, en zijn een slimme toevoeging aan de workflow in Claude Design. En elk prompt telt, want de credits van Claude kunnen duur uitvallen.

Opus 4.7: krachtig model met dure breincellen

Claude staat bekend om sterke AI-modellen, en ook bij Claude Design worden deze ingezet. Het Claude Opus 4.7-model is krachtig, maar kent zijn keerzijde: door Opus 4.7 te gebruiken ben je heel snel door je wekelijkse credits heen. Zo kan het zijn dat je na het importeren van een uitgebreid design system al een aanzienlijk deel van je wekelijkse tegoed hebt verbrand. En een ontwerp is zelden in één keer perfect en vereist vaak een aantal iteratieslagen. Dit tegoedprobleem kan deels verholpen worden door alleen de eerste designs met Opus 4.7 te maken, en vervolgens door te itereren met een minder ‘duur’ model zoals Sonnet 4.6. Eerder werd ook aangeraden om het gegenereerde prototype zo snel mogelijk naar Claude Code te sturen om credits te beperken, maar gezien Claude Design sinds kort de credits van Claude Code en Claude AI deelt, lijkt deze omzeiling al minder werkbaar, al is claude code wel wat zuiniger in gebruik. De handoff naar Claude Code is wel erg goed opgezet: components, design tokens, teksten en interaction notities worden meegegeven, en al met al wordt de handoff van design > development in deze workflow flink versneld.

Claude design vanuit de blik van een UX-Designer

Claude Design is een indrukwekkende tool die bepaalde taken zou kunnen stroomlijnen. Je hoeft nooit meer naar een leeg scherm te staren tot je inspiratie krijgt; een prompt is genoeg om ideeën mee te genereren. Anthropic benoemt zelf dat het product ook goed werkt voor het genereren van variaties om op door te bouwen. Hierover ben ik nog ietwat cynisch, gezien het inderdaad kan, maar ook veel tegoed opmaakt, dus de vraag blijft hoe vaak je het de moeite waard zou vinden om dit met Claude Design op te pakken.

De designs die uit Claude komen zijn vaak indrukwekkend en makkelijk voorzien van animaties. In mijn ogen is deze tool goed voor developers zonder design-expertise en andere mensen die websites willen genereren, maar weinig design-ervaring hebben. Of voor als je een slide deck of video met motion graphics wil genereren, en daar niet te veel tijd of geld aan kwijt wil zijn. Een ontwerp maken voor een complexe app met een aantal iteratierondes lijkt mij voor nu altijd fijner om op zijn minst eerst in Figma te schetsen en schematisch uit te denken (waar AI evt bij kan helpen), ook gezien je zo snel door je Claude-tegoed heen brandt. Het blijft belangrijk om te onthouden dat UX Design veel meer is dan mooie interfaces ontwerpen: een 'mooi' ontwerp met toffe animaties kan even goed falen op het gebied van gebruiksvriendelijkheid.

Uiteindelijk willen designers zich in controle blijven voelen over het ontwerp. Alles moet pixel perfect gemaakt kunnen worden, en als designer wil je niet enkel bezig zijn met prompten en goedkeuren. Figma is een partij die dit door lijkt te hebben.

Figma: de tool gemaakt voor designers

Figma heeft recent een paar erg veelbelovende updates aangekondigd. Met de Figma design agent kan je AI gebruiken direct in je ontwerpcanvas - geen importeren en exporteren meer, maar nieuwe tools in een ontwerpprogramma waar je veel meer controle over het algehele design hebt. Je kan variaties genereren en comments van collega’s automatisch laten toepassen - uiteraard volgens een design system naar keuze. Je kan je design system-documentatie laten schrijven door de design agent, wat ook veel werk kan schelen. Daarnaast worden er aan Figma Make ook Figma Design edit-functionaliteiten toegevoegd - wat ook in deze tool de grens tussen design en development verder vervaagt. Mijn vermoeden is dat de meeste designers dit product veel meer zullen willen gebruiken, omdat het switchen tussen snel schermen genereren en pixel voor pixel kunnen editen in de realiteit meer vrijheid biedt en meer aansluit bij hoe veel digitale producten worden ontworpen. Het is ook het fijnst om designs op een centrale plek op te bouwen, waar je er met je hele team tegelijkertijd aan kan werken. Het is echter nog maar te zien hoe het zal zitten met het tegoed voor de design agent, en hoe snel je daar doorheen brandt. Het stemt mij in ieder geval hoopvol dat er bij Figma realistisch wordt nagedacht over hoe AI de meeste waarde toe kan voegen in de workflow van designers.

Conclusie

Agentic design tools als Claude Design zijn veelbelovend en helpen om bepaalde taken te stroomlijnen en design > development-handoff te versnellen, maar kennen ook gebreken. Soms ben je met een uur al door je tegoed heen, en moet je wachten totdat je door kan werken - wat ironisch genoeg vertragend voelt. Er zijn verschillende use cases waarbij agentic design tools handig zijn, bijvoorbeeld bij het genereren van veel variaties in de beginfase van een project. Met Claude heb je in een handomdraai verschillende design-richtingen uitgestippeld om verder op door te bouwen. 

Voor nu is Claude Design met name goed voor het genereren van websites (met bijbehorende toffe animaties) en voor workflows waarin er snel een paar eerste schetsen met een aantal variaties moeten worden gemaakt. De tool is daarnaast handig voor developers en mensen zonder design-expertise, of voor mensen die het niet te nauw nemen op hoe precies de output bij een initieel ontwerp aansluit (of in situaties waarbij er simpelweg genoeg geld is om credits bij te kunnen blijven kopen). De ontwikkeling is in ieder geval duidelijk: development en design komen steeds dichter bij elkaar te liggen. Claude lijkt vanuit development een stap richting design te maken, en Figma een stap richting development vanaf Design. Ik ben erg benieuwd hoe eventuele volgende versies van het nu al indrukwekkende Claude Design eruit zullen zien, maar kijk persoonlijk vooral uit naar de nieuwe functionaliteiten die Figma heeft aangekondigd (en ik vermoed dat veel designers dit sentiment delen). Exciting stuff! :)