Claude Design getest: AI die onze eigen huisstijl gebruikt

Claude Design getest: AI die onze eigen huisstijl gebruikt We gaven Claude Design een opdracht van één zin en ons eigen design system. Een paar minuten later lag er een complete Instagram-carrousel met onze echte blogposts, in onze eigen kleuren en fonts. Zo werkt het, en dit viel ons op. AI · Design · Zelf getest De meeste AI-tools die "design" beloven leveren een plaatje op. Mooi voor een pitch, maar je ontwikkelaar mag het daarna helemaal namaken, en van je huisstijl klopt zelden iets. Claude Design, in april 2026 gelanceerd door Anthropic Labs, pakt precies dat aan: het leest jouw eigen design system en levert aan het eind geen screenshot op, maar een pakket dat Claude Code direct verder bouwt. Wij hebben het uitgeprobeerd met onze eigen site. De opdracht was letterlijk: "Maak een instagram carrousel over TechnologyFirst." Meer niet. 17 april 2026gelanceerd door Anthropic Labs Pro, Max, Team, Enterprisebeschikbaar voor betaalde abonnementen Web en desktopgeen mobiele versie Wat is Claude Design? Claude Design is een ontwerpomgeving waarin je samen met Claude visueel werk maakt: designs, prototypes, slides en one-pagers. Het scherm bestaat uit twee delen: links een chat waarin je stuurt, rechts een canvas waarop het resultaat verschijnt. Je krijgt geen statische afbeelding maar een werkend ontwerp waar je in kunt klikken en dat je kunt bijstellen. Het startscherm. Je typt wat je wilt, kiest welk design system Claude moet gebruiken en welk model eronder draait. Screenshot: Technology First. Voordat je iets typt kies je dus al twee dingen: het design system (in ons geval "Technology First Design System") en het model. Wij lieten het op Opus 4.8 staan. Goed om te weten: het draait nog als research preview (beta). Het gebruik telt mee met je gewone Claude-limieten, er is dus geen apart potje voor. Eerst stelt Claude vragen Wat ons meteen opviel: Claude begon niet blind te ontwerpen. Op onze zin van vijf woorden kwam een blokje "Claude has some questions" met gerichte vragen over onderwerp, doel, accentkleur en call to action. Dat is precies het verschil tussen een gokje en een bruikbaar resultaat. Questions answered:topic: De vorige 6 postsgoal: Verkeer naar de blog sturenaccent: Decide for mecta: Volg @technologyfirst en lees de blog Daarna ging het aan het werk, en juist dat is het interessantste deel om te zien. Hier zie je precies wat er gebeurt: Claude leest _ds_manifest.json, colors.css en typography.css uit ons design system, en haalt daarnaast technologyfirst.nl/blog op om de echte artikelen te vinden. Screenshot: Technology First. Geen verzonnen voorbeeldteksten dus. Het haalde onze daadwerkelijke laatste zes blogposts op, met de echte koppen, data en samenvattingen. In de chat verscheen droogjes: "Got the real 6 latest posts. Let me grab the logo and check a component." De kern: jouw design system Dit is waar Claude Design zich onderscheidt van "maak een mooi plaatje"-tools. Bij het opzetten bouwt Claude een design system voor je team door je codebase en designbestanden te lezen. Daarna gebruikt elk project automatisch jouw kleuren, typografie en componenten. Je kunt een of meerdere design systems binnenhalen via: een GitHub-repository designbestanden of losse uploads je lokale codebase het commando /design-sync vanuit Claude Code Het resultaat van die import: een complete, doorzoekbare documentatie van onze huisstijl met kleurwaarden, typografie, knoppen en kaartcomponenten. Screenshot: Technology First. Het slimme zit in wat er daarna gebeurt: Claude bouwt met je echte componenten, controleert zijn eigen resultaat tegen het design system en corrigeert zichzelf voordat jij het te zien krijgt. In onze test deed het dat zichtbaar: het maakte tussendoor screenshots van zijn eigen werk om te controleren of alles klopte, met als conclusie "MDI icon, gradient, mono date, Poppins title all render. Everything works." Het canvas en bijsturen Na een paar minuten stonden de slides er. Links vertelt Claude wat het gebouwd heeft, rechts staat het resultaat waar je doorheen kunt scrollen en zoomen. Het canvas met de coverslide en de eerste postslide. Bovenin de knoppen voor Comment, Tweaks en Edit. Screenshot: Technology First. Zodra er iets staat, verfijn je het op drie manieren, elk voor een ander soort wijziging: Manier Waarvoor Voorbeeld Via de chat grote koerswijzigingen "Maak het kleurenschema donkerder en minimalistischer" of "Laat me 2 tot 3 alternatieve indelingen zien" Inline comments gerichte aanpassingen je klikt op een specifiek onderdeel van het canvas en vraagt daar een wijziging Direct op het canvas snelle visuele correcties elementen slepen, verschalen en uitlijnen, of met de regelaars spacing en kleur bijstellen Het Tweaks-paneel: thema, breakpoint en losse eigenschappen als kleur en spacing pas je live aan met schuifregelaars. Afbeelding: Anthropic. Het resultaat Wat er uit kwam rollen: acht vierkante slides van 1080 bij 1080 pixels in onze huisstijl. Een cover met donkere achtergrond en een gradient-titel: "De 6 nieuwste posts uit de werkplaats" Zes postslides met de echte artikelen, elk met een eigen accentkleur per onderwerp: open-weight AI in oranje, HDMI 2.2 in teal, Wi-Fi 8 in blauw, 3D-chips in violet, Claude Sonnet 5 in magenta en VPS in lime, telkens met icoon, datum, kop en samenvatting Een afsluitende call to action: "Mis geen enkele post" met een verwijzing naar het account en de blog De kleurkeuze per onderwerp had niemand opgegeven; op de vraag naar een accentkleur hadden we "decide for me" geantwoord. Het aanbod om er losse PNG's per slide van te maken kwam er ongevraagd achteraan. Exporteren en overdragen aan code Aan het eind heb je iets bruikbaars nodig, en juist daar zit de kracht. Via de exportknop kun je onder meer: downloaden als ZIP, PDF, PPTX of losse HTML doorzetten naar Adobe, Canva, Vercel of Miro overdragen aan Claude Code, lokaal of via het web Die laatste is de interessantste. Claude bundelt het hele ontwerp in een handoff-pakket dat je met een enkele instructie aan Claude Code geeft. Die pakt op waar de ontwerper stopte: geen screenshot, geen namaakwerk. De werkwijze in zeven stappen Samengevat ziet de route van idee naar bruikbaar ontwerp er zo uit. Klik de stappen langs. Van idee naar ontwerp Klik een stap voor de toelichting. Wat ons opviel Het positieve eerst. Dat het echte content ophaalt in plaats van placeholders scheelt enorm: de slides waren direct bruikbaar in plaats van een demo die je nog moet vullen. Dat het zelf vragen stelt voorkomt een eerste ronde miskleunen. En dat het zijn eigen werk controleert met screenshots is een detail dat je bij de meeste AI-tools niet ziet. Maar het is een research preview, en dat merk je. De bekende beperkingen: Alleen web en desktop. Op je telefoon werkt het niet. Inline comments blijven soms niet staan. Hele grote repositories kunnen het traag maken. Samenwerken met meerdere mensen tegelijk werkt nog niet betrouwbaar. Het telt mee met je gewone gebruikslimiet, dus zwaar itereren kost je Claude-budget. Eén nuance die in geen enkele handleiding staat: de kwaliteit van het eindresultaat valt of staat met de kwaliteit van je design system. Wij hadden er al een met kleurwaarden, typografie en componenten. Voer je een rommelige codebase in, dan krijg je een rommelig systeem terug, en daarmee rommelige ontwerpen. Conclusie Claude Design is geen plaatjesgenerator. Door je eigen design system in te lezen, echte content op te halen, het eigen werk daartegen te controleren en aan het eind netjes over te dragen aan Claude Code, dicht het precies het gat waar AI-ontwerp tot nu toe op stukliep: de kloof tussen een mooi voorstel en iets dat je echt kunt gebruiken. Dat wij met één zin een publicatieklare carrousel in onze eigen huisstijl kregen, zegt genoeg. Het is nog beta, met haperingen en zonder fatsoenlijke samenwerking, maar voor teams die al met Claude Code werken is dit een logische volgende stap. Let op: Claude Design is een research preview; functies, beschikbaarheid en beperkingen veranderen snel. Genoemde details zijn een momentopname (peildatum juli 2026), gebaseerd op onze eigen test en op de officiele aankondiging van Anthropic en de Claude-helpdocumentatie. De schermafbeeldingen uit onze test zijn van Technology First; de afbeelding van het Tweaks-paneel is van Anthropic en wordt gebruikt ter illustratie van het besproken product.

Claude Design getest: AI die onze eigen huisstijl gebruikt

Reacties 0

Meer tech artikelen

IFA 2026: waarom AI deze week je huishouden binnenwandelt

Van speculatie naar salaris: hoe stablecoins de betaalwereld overnemen

De open aanval: hoe Alibaba's Qwen het AI-landschap kantelt