"## Claude Design Review: De AI-websiteworkflow Die Ik Echt Heb Opgeleverd\n\nDe eerste prompt die ik naar Claude Design stuurde was een leugen. Ik vertelde het dat ik een beginner was. Dat ben ik niet. Ik ben al mid-2000s pixels aan het schuiven en vectoren aan het duwen — meer dan vijftien jaar klantwerk, merksystemen, landingspagina's die moesten converteren, anders at ik die maand niet. Maar ik wilde weten hoe dit ding aanvoelde voor iemand die er onvoorbereid in stapt.\n\nDus ik opende Claude, klikte op het nieuwe Design-tabblad en typte één zin: "Design een landingspagina voor een cyberpunk open-world game genaamd City Punks."\n\nZes minuten later staarde ik naar drie wireframe-varianten en een werkende hi-fi UI. Geen Figma-bestand. Geen statische PNG. Een levende, ademende, inspect-element-bare HTML-pagina met glitch-effecten op de hero-titel, een werkende navigatie, en een kleurenpalet waarvoor ik een klant drie uur had gefactureerd.\n\nEn mijn eerste reactie was niet "Figma is dood." Het was: "Oh, dit dekt zo'n 80% van wat ik doe. De overige 20% is waar niemand het over heeft."\n\nDit gaat over die andere 20%. Het is ook de volledige workflow die ik heb gebruikt om een echte cyberpunk game-site op te leveren — Claude Design naar Midjourney naar Claude Code naar Cloudflare — en de exacte plekken waar de AI tegen een muur liep en een mens (ik) moest ingrijpen.\n\n## Wat Claude Design Eigenlijk Is\n\nAnthropic lanceerde Claude Design op 17 april 2026 als een research preview binnen de Claude-apps. Het is beschikbaar voor Pro-, Max-, Team- en Enterprise-abonnees — Free-gebruikers zijn buitengesloten. Het draait op Claude Opus 4.7, hetzelfde model dat zwaar werk verricht in Claude Code en de API.\n\nAls je Claude opent, zie je nu een apart Design-tabblad. Daarbinnen vijf opties:\n\n- Prototypes — klikbare interactieve flows\n- Wireframes — low-fidelity lay-outverkenning\n- Hi-fi UI's — volledige HTML/CSS-landingspagina's en productoppervlakken\n- Diadecks — presentaties gebouwd als HTML\n- Importeren — Figma-bestanden inladen of schermafbeeldingen uploaden als startpunt\n\nWat het onderscheidt van v0, Lovable en Figma Make is niet één specifieke functie — het is de handoff. Wanneer je een ontwerp afrondt, verpakt Claude Design het geheel (componenten, tokens, assets, markup) in een bundel die je met één commando doorgeeft aan Claude Code. De stap van "gaaf mockup" naar "echte deploybare site" is één instructie, geen week van herbouwen.\n\nEen vriend stuurde me een screenshot van een site die hij ermee had gemaakt, de dag na de lancering. Schone typografie. Verstandig grid. Achtergrondverloop dat echt werkte. "Kostte me 20 minuten," zei hij. "Ik kan Figma niet eens openen zonder te huilen."\n\n## De Vereisten (Voor Je Iets Opent)\n\nJe hebt twee dingen nodig: een Claude-abonnement en een ruw idee. Ik heb de volledige eerste doorloop gedaan met het Pro-plan van $20/maand, dat Claude Design-toegang bevat tijdens het research preview-venster.\n\nMaar hier is de vangst waar niemand over praat: Claude Design verbrandt je gebruiksquotum snel. Tegen de tijd dat ik van wireframe naar hi-fi UI naar twee rondes van bewerkingen was gegaan, had ik ruwweg de helft van mijn dagvenster verbruikt. Plan dienovereenkomstig.\n\nVolledige stack die ik gebruikte:\n- Midjourney — $30/maand Standard-plan\n- Topaz Astra — optioneel, $39/maand Personal-plan voor AI-video-upscaling\n- Claude Code — onderdeel van het Claude-abonnement\n- GitHub + Cloudflare — beide gratis voor dit gebruik\n\n## Het Ontwerpsysteem Is de Echte Sleutel\n\nElke AI-ontwerptool kan een landingspagina uitspugen. Wat Claude Design anders doet, is dat het bij je allereerste project vraagt: "Heb je bestaande merkassets, of moet ik een ontwerpsysteem vanaf nul opbouwen?"\n\nAls je een logo, een Figma-bestand of zelfs een GitHub-repo invoert, leest het die. Het extraheert:\n- Merkkleuren (primair, secundair, accenten — met correcte contrastverhoudingen)\n- Typografieschaal (lettertypefamilies, -groottes, -gewichten, regelafstanden)\n- Verlopen, lijngewichten, border-radius-conventies\n- Componentpatronen die het detecteert in je code\n\nDit slaat het op als een persistent ontwerpsysteem gekoppeld aan je werkruimte. Elk nieuw project erft het automatisch. Dit is het ding dat Lovable en v0 niet standaard doen. Claude Design kan een consistent systeem afleiden uit een GitHub-repo omdat het bovenop de code-leesvaardigheid van Opus 4.7 zit.\n\nVoor City Punks — de cyberpunk game-site — had ik niets. Geen logo. Geen merk. Dus vertelde ik Claude Design om vanaf nul te bouwen:\n- Sfeer: Neo-Tokyo 2077, nachtmarkt, neonwaas\n- Primaire kleuren: elektrisch cyaan, fel magenta, chroom-grijs\n- Type: display-lettertype met scherpe geometrische sneden voor koppen; schone sans voor de body\n- Lijnstijl: dun, precies — 1px randen, geen zware contouren\n- Verloopappetijt: zwaar — sfeer, niet decoratie\n\n40 seconden later: een kleurengrid, vijf typografiesamples, drie verloopopties, een componentblad. Ik keurde het palet goed, paste het koplettertype licht aan en vergrendelde het systeem. Elke volgende generatie voor dat project erfde die beslissingen automatisch.\n\n## De Wireframe-flow\n\nMet het ontwerpsysteem vergrendeld, schreef ik:\n\n> "Landingspagina voor City Punks, een open-world cyberpunk game die eind 2026 uitkomt. Grote videohero met karakterbeelden, twee featuresecties die gameplay-pijlers uitleggen, een nieuws/blog-teasersectie, een full-width CTA voor de footer. Gedurfd, atmosferisch, niet druk."\n\nDrie wireframe-varianten in minder dan een minuut:\n1. Linksuitgelijnde hero — redactioneel, te veel als een Medium-artikel\n2. Gecentreerde hero — goed maar generiek\n3. Gesplitst-scherm-hero — vocht tegen zichzelf omdat cyberpunk-visuals willen domineren, niet delen\n\nIk koos gecentreerd en gaf één follow-up: "Rek de video uit naar full-bleed. Duw de titel omlaag en geef hem een glitch-effect. Minimaliseer de nav — simpel logo plus hamburgermenu, niets anders."\n\nAcht seconden. Klaar. In de wireframefase kun je ook aanpassen: navigatiestijl, sectievolgorde, griddichtheid, inhoudshiërarchie. Geef een snelle instructie, krijg direct een variant.\n\n## De Hi-Fi UI Genereren\n\n"Maak hier een hi-fi van met volledige visuals." Negentig seconden later:\n\n- Complete HTML-pagina met het vergrendelde ontwerpsysteem toegepast\n- "CITY PUNKS"-kop met CSS-gebaseerde glitch-animatie (RGB-splitsing, horizontale jitter, drie keyframes)\n- Tijdelijke aanduiding voor video in de hero\n- Twee featuresecties met nep-koppen, subbeschrijving, pictogramplaceholders\n- Nieuws-teaser met drie kaartvakken\n- Full-width CTA-sectie met neon-omrande knop\n- Footer met sociale links, juridische informatie, taalschakelaar\n\nAlles was inline bewerkbaar. Claude Design doet iets wat ik in geen enkel ander AI-ontwerpgereedschap goed heb zien worden gedaan: inline stijlbewerking zonder het ontwerpsysteemverband te verliezen. Verander de primaire accent van cyaan naar elektrisch groen — elk element dat dat token gebruikt, wordt bijgewerkt over de hele pagina.\n\nIk maakte drie bewerkingen:\n1. Wisselde het koptypografieface naar iets hoekigers\n2. Verlaagde de intensiteit van de glitch-animatie van "agressief" naar "subtiel"\n3. Voegde een vage scanline-overlay toe aan de hero — twee zinnen in de chat, klaar in zes seconden\n\n## De Midjourney-handoff\n\nGeen enkel AI-ontwerpereedschap genereert nog productie-kwaliteitsafbeeldingen. Ik opende Midjourney en schreef drie prompts:\n\n1. Hero-afbeelding: cyberpunk vrouwelijk personage, neonverlichte straten, teal en magenta, 16:9\n2. Featuresectie: Neo-Tokyo dak 's nachts, regenglanzende oppervlakken, neonborden\n3. Blogkaarten: drie varianten van cyberpunk voertuigfoto's, grof maar filmisch\n\nRond de 40 snelle afbeeldingen, 20 minuten iteratie. Terug in Claude Design sleepte ik de hero-afbeelding naar de tijdelijke aanduiding. Claude stelde automatisch een overlay-verloop voor om de tekstleesbaarheid te verbeteren. Ik accepteerde het en vroeg vervolgens om een vage rasteroverlay op 15% dekking om het cyberpunk-gevoel te versterken.\n\n## Het Responsiviteitsprobleem\n\nDe uitvoer van Claude Design is grotendeels responsief. Ik testte op desktop (1440px), laptop (1280px), tablet (768px) en mobiel (375px).\n\nDesktop: perfect. Laptop: perfect. Tablet: goed, met één kleine overflow. Mobiel: kapot.\n\nVijf problemen: navigatie horizontaal samengeperst, hero-kop te groot en over vier regels opgebroken, featuresecties stapelen niet, CTA-knop overloopt zijn container.\n\nIk typte: "Controleer de mobiele lay-out en herstel de breakpoints. Navigatie moet samenvouwen naar een hamburgermenu onder 768px. Hero-kop moet verkleinen zodat het op twee regels past op mobiel. Featuresecties moeten verticaal stapelen op tablet en kleiner. CTA-knop moet full-width gaan op mobiel."\n\nTwee minuten. Alle vijf problemen opgelost — hamburgermenu met slide-in overlay, clamp() kopschaling, gestapelde featuresecties, full-width CTA.\n\nMaar ik moest het weten om het te vragen. Een beginner zou mobiele problemen niet opmerken. Ze zouden een site opleveren die er geweldig uitziet op hun MacBook en vreselijk op de iPhone van hun klant.\n\n## De Handoff naar Claude Code\n\nRond de vierde ronde van bewerkingen raakte ik de Claude-gebruiksgrens. Klik op Exporteren naar Claude Code — Claude verpakt het ontwerp (HTML, CSS, JavaScript, assets, tokens) in een bundel. Open Claude Code in terminal en plak: "Ga lokaal verder aan dit project."\n\nPlotseling had ik lokale bestanden. Het quotum van Claude Code staat los van het conversationele Claude-quotum, waardoor ik wijzigingen kon blijven aanbrengen terwijl de webUI mij blokkeerde.\n\nIk gebruikte Claude Code om:\n- De hero-afbeelding te vervangen door een gecomprimeerde achtergrondvideo\n- Parallax-scrolleffecten op de featuresecties aan te passen\n- Hover-states op de blogkaarten toe te voegen (subtiele lift + gloed op de rand)\n- De footer-spatiëring aan te passen\n- Meta-tags en Open Graph-kaarten toe te voegen\n\nDe ontwerpsysteemvariabelen werden schoon overgedragen — --color-accent-primary in een nieuwe CSS-regel trok uit dezelfde tokens die Claude Design had gegenereerd.\n\n## De Video-animatietruc\n\nVoor de hero wilde ik beweging. Midjourney ondersteunt nu korte geanimeerde loops. Ik genereerde een lus van 4 seconden met subtiele neongloedebeweging en lichte rookdrift.\n\nTopaz Astra (Personal-plan, $39/maand) gaf me genoeg credits om op te schalen naar echte 4K met creatieve detailverbetering — ruwweg 160 seconden 4K creatieve-modus-uitvoer per maand. Ik comprimeerde de 4K-uitvoer terug naar 1080p op hoge bitrate met ffmpeg (de upscale verbeterde de kwaliteit zelfs bij de teruggeschaalde uitvoer), liet het bestand in de assets-map vallen en zei tegen Claude Code: "Vervang de hero-afbeelding door deze video als een herhalende achtergrond. Houd het overlay-verloop en het raster. Zorg ervoor dat het automatisch afspeelt gedempt met het playsinline-attribuut."\n\nElf seconden. Klaar.\n\n## Waar De Ontwerpershand Nog Steeds Telde\n\nDe eerlijke 20% — dingen die Claude Design niet zelf goed deed:\n\nLogo-plaatsing en -grootte. Claude Design gebruikte standaard een veilig 40px-logo linksboven. Voor dit merk moest het groter zijn, iets naar rechts geplaatst, gecombineerd met een pixel-gerenderde tagline in een tertiar lettertype.\n\nHerplaatsing van de navigatie. Standaard plaatste het "Aanmelden" als een tekstlink. Ik verplaatste het naar een omrande neon-pilknop, maakte het plakkerig bij scrollen, en voegde een subtiele gloed toe bij hover.\n\nKleurkalibratie. Automatisch gegenereerd cyaan was te verzadigd voor body-tekstcontexten. Drie tinten teruggedraaid, een bleker cyaan opnieuw toegewezen voor secundaire accenten. Kleine aanpassing, enorm perceptueel verschil.\n\nParallaxtiming. Standaard parallax op featuresectie was te snel — 0,5 vermenigvuldiger. Vertraagd naar 0,2 en de sectie voelde cinematischer.\n\nBlogkaart hover-states. Standaard was 2px lift + schaduw. Ik verving het door randgloed, 1px lift en kleurverandering op de titel.\n\nMeerpagina-continuïteit. Toen ik Claude Design vroeg een binnenste blogpostpagina te genereren, ging het standaard naar een nieuw lay-out. Ik moest het expliciet instrueren om de ontwerpsysteemvariabelen te hergebruiken.\n\nNiets hiervan is moeilijk. Maar het vereist smaak gekalibreerd door jaren van feedback. Een beginner zal dit opleveren zonder deze aanpassingen te maken.\n\n## Deployen: GitHub + Cloudflare\n\nClaude Code initialiseerde een Git-repo, committete het project en begeleidde me door het pushen naar GitHub. Vervolgens verbond ik me met Cloudflare Pages — ongeveer vijf klikken per Cloudflare's documentatie. Elke push naar main deployt automatisch.\n\nTotale deploytijd van "lokaal klaar" naar "live op internet": ongeveer twaalf minuten.\n\nGratis hosting. Gratis SSL. Globaal CDN. Totale stackkosten: $20/maand (alleen Claude-abonnement), $50/maand als je Midjourney toevoegt.\n\n## Het Eerlijke Oordeel\n\nClaude Design is de beste prompt-naar-prototype-tool die ik heb gebruikt. Verslaat Lovable op ontwerpsysteemtrouw. Verslaat v0 op veelzijdigheid en exportopties. Verslaat Figma Make op snelheid.\n\nMaar het is geen Figma-vervanger. Het is geen ontwerpersvervanger. Het is een 80%-tool.\n\nHet is fenomenaal voor:\n- Beginners die een functionele site nodig hebben zonder iemand in te huren\n- Ontwerpers die snel willen conceptualiseren — wireframeverkenning in minuten\n- Startup-oprichters die ideeën valideren voordat ze ontwerpbudget vastleggen\n- Kleine bedrijven die een fatsoenlijke webpresentie nodig hebben\n- Ervaren ontwerpers die het gebruiken als een snelle prototypinglaag\n\nHet zal niet werken als je enige tool als:\n- Je pixelperfecte merktrouw belangrijk vindt\n- Je werkt aan complexe meerpagina-producten\n- Je realtime samenwerking van meerdere ontwerpers met versiegeschiedenis nodig hebt\n- Je mobiele responsiviteitsnormen hoger liggen dan "werkt eigenlijk"\n\nOntwerpers die zich aanpassen aan Claude Design zullen degenen zijn die sneller ontwerpen. Degenen die dat niet doen, zullen in 2027 aan klanten moeten uitleggen waarom hun offerte vier keer hoger is voor werk dat er 80% hetzelfde uitziet.\n\n## De Workflow Die Ik Voortaan Gebruik\n\n1. Claude Design — merksysteem, wireframes, hi-fi UI. Verbrandt 30-50% van het dagelijkse quotum.\n2. Midjourney — hero- en sectie-afbeeldingen. 20-40 afbeeldingen.\n3. Topaz Astra — alleen wanneer ik hero-video nodig heb. Optioneel.\n4. Claude Design → Claude Code-handoff — het moment dat ik de quotumgrens bereik, of lokale bestandsbewerking nodig heb.\n5. Handmatige polish in Claude Code — logowerk, navigatiedetaillering, hover-states, parallaxtiming, meerpagina-continuïteit, mobiele audits.\n6. GitHub push → Cloudflare Pages — automatisch deployen, gratis hosting, globaal CDN.\n\nTotale tijd voor een competente kleine site: 3-5 uur in plaats van 2-3 dagen.\n\n## Veelgestelde Vragen\n\n### Heb ik een Claude Pro-abonnement nodig om Claude Design te gebruiken?\nJa — Pro, Max, Team of Enterprise vanaf april 2026. Het Pro-plan van $20/maand bevat het zonder extra kosten tijdens de research preview-periode.\n\n### Kan Claude Design Figma vervangen voor professioneel werk?\nNee, niet voor complex productontwerp, componentsystemen of teamsamenwerking. Claude Design is sterker voor snelle prototyping en landingspagina's. Figma wint nog steeds op collaboratief bewerken, versiegeschiedenis, plugin-ecosysteem en precies vectorwerk.\n\n### Is de uitvoer standaard mobiel-responsief?\nGrotendeels, maar niet volledig. Mobiel heeft doorgaans minstens één ronde van fixes nodig — hamburgermenu, gestapelde secties, geschaalde typografie. Claude Design expliciet vragen om mobiele breakpoints te controleren, lost de meeste problemen in minder dan vijf minuten op.\n\n### Hoe ziet de handoff naar Claude Code er eigenlijk uit?\nClaude Design exporteert een complete bundel — HTML, CSS, JavaScript, assets en ontwerptokens — die Claude Code lokaal kan openen en bewerken. De ontwerpsysteemvariabelen worden overgedragen, zodat kleur- en typografietokens consistent blijven wanneer je doorgaat met bewerken in de terminal.\n\n## Laten We Samenwerken\n\nWil je AI-systemen bouwen, workflows automatiseren of je technische infrastructuur opschalen? Ik help je graag.\n\n* Fiverr (custom builds & integraties): fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited (enterprise-oplossingen): ramlit.com\n* ColorPark (design & branding): colorpark.io\n* xCyberSecurity (beveiligingsdiensten): xcybersecurity.io"
Advertentie
