De clip waardoor ik stopte en hem drie keer opnieuw bekeek, duurde tien seconden. Een 3D-geïllustreerde versie van mezelf, langzaam wandelend door een lege terracotta studio, die even stilhoudt om in de camera te kijken en dan weer wegkijkt. Native 4K. Geen upscaler in de pipeline. En hij stond achter de herotekst van een portfoliosite die ik veertig minuten eerder had geschetst met niet meer dan een servetje aan instructies.
Dat is het hele verhaal in één zin: ik bouwde een 3D-geanimeerd portfolio — een complete homepage met een levende, loopende 4K-charactervideo in de hero — met twee tools die niet met elkaar praatten en één overdracht die alles aan elkaar naaide. Claude Design 2.0 voor de site. Seedance 2.0 4K van Higgsfield voor de video. Claude Code om het geheel naar productie te brengen.
Ik wil je door de daadwerkelijke build loodsen, niet door de highlightreel. Waar het angstaanjagend goed werkte, waar het vreemd werd, en de twee beslissingen vooraf die het verschil maakten tussen een "AI-slop-landingspagina" en iets waar ik daadwerkelijk mijn naam op zou zetten. De tools zijn indrukwekkend, zeker. Maar de tools zijn niet de reden dat het goed is geworden.
Waarom een 3D-geanimeerd portfolio eindelijk de moeite waard is
Jarenlang was een herovideo als achtergrond op een portfoliosite een belasting die je in drie valuta betaalde: een videograaf of motion designer, een renderpipeline en bandbreedte. Je schoot zelf beelden, licenseerde een stockloop die duizend andere sites ook gebruikten, of betaalde een 3D-artiest voor een animatie op maat die begon bij vier cijfers. De meeste solo-bouwers keken naar die rekensom en shipten in plaats daarvan een statische hero-afbeelding.
Twee dingen veranderden in 2026 die de vergelijking omdraaiden.
Ten eerste passeerden AI-webdesigntools de grens van "genereert een wireframe die je met de hand opnieuw bouwt" naar "genereert een echte, bewerkbare, exporteerbare site." Ik volg dit op de voet — mijn analyse van de Claude Design-overhaul van juni 2026 behandelde het moment waarop de tool ophield een token-verslindende demo te zijn en iets werd waarbinnen je een project kon afmaken. Claude Design 2.0 is de volgende stap daarna: volledig bewerkbare output, direct bewerken op het canvas en een schone overdracht naar Claude Code.
Ten tweede — en dit is het deel dat de meeste mensen onderschatten — leerden videomodellen native hoge resolutie te genereren. Higgsfield tilde Seedance 2.0 naar native 4K, aldus de modelpagina van Higgsfield. Niet 1080p-en-dan-geüpscaled. Echte 4K-frames rechtstreeks uit het model. Dat ene detail schrapt een complete stap, een complete kwaliteitsverliesfase en een complete categorie van "waarom ziet de geüpscalede versie eruit alsof hij smelt"-frustratie.
Voeg die twee samen en een solo-bouwer kan nu een portfolio maken dat oogt alsof een bureau het heeft opgeleverd. De adder onder het gras — want die is er altijd — is dat de tools voorbereiding belonen en luiheid harder afstraffen dan welke designsoftware ik ook heb gebruikt. En dat brengt me bij de eerste echte les.
De wireframe die ik schetste voordat ik ook maar één AI aanraakte
Dit is waar de meeste mensen de mist ingaan, en waar ik het bijna ook deed. De reflex bij een tool als Claude Design 2.0 is om hem te openen, "bouw een strak modern portfolio met een videohero" te typen en op start te drukken. Je krijgt iets. Het ziet er prima uit. Het ziet er ook precies zo uit als het iets dat iedereen krijgt die die prompt intypt, omdat je het model nul beperkingen hebt gegeven en het het vacuüm heeft opgevuld met het statistische gemiddelde van elk portfolio dat het ooit heeft gezien.
Dus voordat ik iets opende, schetste ik. Niets bijzonders — een ruwe wireframe van de paginastructuur, van boven naar beneden:
- Hero: volledig scherm,
100vh. Gecentreerde tekst. Een call-to-action verankerd aan de onderkant van de viewport, niet zwevend in het midden. - Selected Work: een showcasegrid met projecten, direct onder de vouw.
- Grote tekstcallout: één oversized statement-regel, het soort dat een site een eigen standpunt geeft in plaats van alleen een portfoliodump.
- Journal-/blogsectie: recente artikelen, want een portfolio zonder stem is een cv.
- Footer-CTA: nog één duidelijke "laten we praten" voordat ze vertrekken.
Dat is alles. Vijf secties, geschetst in ongeveer vier minuten. Maar die schets is het artefact met de meeste hefboomwerking in de hele build, en ik leg in de volgende sectie precies uit waarom — want wat ik ermee deed, is belangrijker dan de tekening zelf.
De build opzetten in Claude Design 2.0
Binnen Claude Design 2.0 bepalen de eerste twee keuzes het plafond voor alles wat volgt.
Keuze één: geen template. Templates voelen als een voorsprong. In werkelijkheid zijn ze een kooi — je besteedt de rest van de sessie aan vechten tegen de aannames van de template in plaats van de jouwe uit te drukken. Ik begon vanaf een leeg canvas, zodat de structuur uit mijn wireframe kwam en niet uit andermans idee van wat een portfolio zou moeten zijn.
Keuze twee: kies het meest capabele model dat er is. Claude Design laat je het onderliggende model kiezen, en voor een build vanaf nul waarbij zowel layoutredenering als visuele smaak ertoe doen, grijp ik naar het sterkste design-redenerende Opus-model dat beschikbaar is. Op een hero-gedreven site waar de compositie de hele eerste indruk moet dragen, is die redeneerkracht de uitgave waard.
Dan de eigenlijke zet: ik uploadde de wireframeschets en schreef de instructies er direct bij uit. Niet "maak een portfolio." In plaats daarvan — full-screen hero op 100vh, gecentreerde kop, CTA vastgezet aan de onderkant, selected-work-grid eronder, oversized tekstcallout, journalsectie, footer-CTA. Ik beschreef ook het gevoel: zelfverzekerd, redactioneel, een tikje galerieachtig. Terracotta en zwart als kleurverhaal.
Dit is de gamechanger. Een heldere wireframe plus specifieke instructies maakt de output niet een beetje beter — het verandert de categorie van de output volledig. Het model stopt met gissen naar je intentie en begint die uit te voeren. Toen ik op genereren drukte, kwam er geen generieke template terug. Het was mijn structuur: een 100vh-hero met placeholderbeelden, een terracotta-en-zwart-schema dat aanvoelde als een designbeslissing in plaats van een default, en elke sectie uit mijn schets in de volgorde waarin ik ze had geschetst.
De placeholders waren precies dat — placeholders. Maar het skelet klopte. En het skelet goed krijgen bij de eerste generatie is het hele spel, want alles hierna is verfijning, geen reconstructie. Nu had de site iets echts nodig in die hero. Tijd om van tool te wisselen.
De assets genereren in Higgsfield
Higgsfield is een platform, geen los model — zie het als één login die een hele plank vol beeld- en videogeneratoren ontsluit. Op een willekeurige dag heb je GPT Image 2, Nano Banana Pro, Seedance 2.0 en een lange lijst anderen tot je beschikking, allemaal achter dezelfde interface. Higgsfields eigen modeloverzicht blijft uitbreiden, en ik heb het platform inmiddels genoeg gebruikt om meningen te hebben over welk model je wanneer pakt — ik dook in een volledige productiepipeline in mijn geautomatiseerde creative-agency-build met Claude en Higgsfield.
Voor dit portfolio had ik twee dingen nodig: een 3D-geïllustreerd character gebaseerd op mij, en vervolgens dat character geanimeerd tot een 4K-heroloop. Twee verschillende klussen, twee verschillende modellen.
De ster van de videoklus is Seedance 2.0 4K. De reden dat het ertoe doet is niet alleen kwaliteit — het is dat het in native 4K genereert. Op de meeste platforms betekent "4K-video" dat het model op 1080p rendert en een upscaler het daarna oprekt, wat randen verzacht, artefacten introduceert en een renderstap toevoegt. Seedance 2.0 slaat dat allemaal over. De frames komen op 4K uit het model. Voor een herovideo die een bezoeker misschien op een 27-inch monitor bekijkt, is die native scherpte precies het punt. Geen upscaling-taks.
Maar voordat ik iets kon animeren, had ik het character nodig. Dat bleek het lastigste deel van de hele build.
Het 3D-character goed krijgen (voorbij de uncanny valley)
Ik begon met één foto van mezelf. De prompt: een 3D-geïllustreerd full-body character, terracotta studioachtergrond passend bij de site, gekadreerd in 16:9 zodat het direct in de hero zou passen.
Eerst probeerde ik GPT Image 2. Toen Nano Banana Pro. En hier is het eerlijke deel — de eerste paar resultaten waren slecht op een heel specifieke manier. Ze waren te realistisch. De modellen bleven duwen richting een hypergedetailleerde, bijna fotografische render van mijn gezicht, en het effect belandde recht in de uncanny valley. Het was geen gestileerd 3D-character meer; het was een net-niet-kloppende kloon van mij, en mijn brein markeerde het binnen een halve seconde als fout. Freaky was de technische term die ik destijds gebruikte.
De oplossing was om richting minder realisme te itereren, niet meer. Ik draaide de prompts richting een duidelijk geïllustreerde, gestileerde 3D-look — het soort proporties en oppervlakken dat je in een goede animatiekortfilm ziet, waar het character leest als een ontworpen object in plaats van een gescand mens. Een paar rondes later vond ik de balans: herkenbaar ik, duidelijk een 3D-illustratie, nul uncanny-valley-ongemak. Full body, terracotta studioachtergrond, 16:9.
Les om te onthouden: wanneer een AI-gegenereerd character griezelig aanvoelt, is de reflex om detail en realisme toe te voegen om het te "repareren". Dat is precies verkeerd om. Realisme is juist wat het breekt. Duw richting stilering en het ongemak verdwijnt.
Met een character waar ik echt blij mee was, ging ik door naar de animatie.
Animeren in Seedance 2.0 4K
Ik voerde de gekozen characterafbeelding in Seedance 2.0 4K in met een strakke prompt: het character loopt langzaam rond in een lege studio, kijkt even in de camera, kijkt weer weg. Tien seconden. 16:9. 4K. Hoge bitrate.
Die specificiteit is bewust. "Loopt rond en kijkt in de camera" geeft het model een heldere, simpele bewegingsboog — niets acrobatisch, niets dat framenauwkeurige fysica vereist die het zou kunnen verprutsen. Een langzame wandeling en één blik is precies het soort ingehouden beweging dat deze modellen feilloos neerzetten, en ingehouden is sowieso wat je achter herotekst wilt. Je maakt geen videoclip; je maakt omgevingsbeweging die het oog trekt zonder de focus van de kop te stelen.
De download kwam schoon terug op 4K. Geen upscaling, geen nabewerking, geen "laat ik dit door Topaz halen om het te redden"-stap. De clip was scherp genoeg om op volledige viewportgrootte achter tekst te staan en overeind te blijven.
Wil je liever dat iemand dit soort AI-gedreven site-en-videopipeline end-to-end voor je bouwt: dat is een flink deel van wat ik doe — je ziet de reikwijdte van mijn werk op mijn Fiverr-profiel. Maar eerlijk gezegd is de workflow te leren, dus laat ik je verder laten zien hoe de stukken in elkaar passen.
De 4K-clip in de hero plaatsen
Terug in Claude Design 2.0 was het integreren van de video de bevredigende beloning. De clip ging erin als hero-achtergrond — en de instellingen hier doen er meer toe dan mensen verwachten:
- Gedempt. Een herovideo die bij het laden geluid afspeelt is een bouncemachine. Stil, altijd.
- Bediening verborgen. Geen tijdbalk, geen afspeelknop. Het is een achtergrond, geen mediaspeler.
- Loopend. Tien seconden, naadloos, op herhaling.
- Tekst en CTA gecentreerd onderaan, precies zoals de wireframe voorschreef, bovenop de bewegende beelden.
Op het moment dat het 4K-character achter de kop begon te loopen, hield de site op eruit te zien als een gegenereerd concept en begon hij eruit te zien als iets met een hartslag. Dat is de emotionele omslag die een videohero je oplevert — een statische site zegt "hier is mijn werk", een levende zegt "hier is wie ik ben". Voor een persoonlijk portfolio is dat verschil de hele pitch.
Nu was de site levend, maar hij was nog niet goed. Het gewicht van de kop was te zwaar, het oranje voelde modderig, en er zat een gradiënt op de hero die ik niet wilde. En dat is precies waar het on-canvas bewerken van Claude Design 2.0 zijn geld waard bleek.
Het design bewerken zonder de hele pagina opnieuw te prompten
Dit is de functie die het herbouwde Claude Design onderscheidt van het "regenereer en bid"-tijdperk van AI-designtools. In plaats van de hele pagina opnieuw te prompten bij elke kleine wijziging — met het risico dat het model iets herbouwt wat je goed vond — bewerk je direct op het canvas. Anthropics herbouwde visuele editor geeft je, volgens Anthropics Claude Design-aankondiging, WYSIWYG-controle zodat kleine aanpassingen geen volledige modelbeurt kosten.
In de praktijk zijn er grofweg drie niveaus van bewerken, en weten welke je wanneer pakt is de halve kunst:
- Directe manipulatie — selecteer een element en doe het gewoon: sleep het, schaal het, typ de tekst opnieuw, verschuif de uitlijning, helemaal geen prompt. Hier lijnde ik de hero-inhoud links uit en maakte ik het lettergewicht van de kop lichter — wijzigingen die absurd zouden zijn geweest om in een zin te beschrijven terwijl ik ze met de hand kon aanpassen.
- Diepere aanpassingen — knopachtige bediening voor spacing, kleur en layout, met de mogelijkheid om een wijziging in één keer door het hele design te duwen. Hier maakte ik het oranje site-breed helderder en wisselde ik de hele site in één beweging naar een strakker lettertype in plaats van elk tekstblok afzonderlijk na te jagen.
- Toegang op codeniveau — duik in de onderliggende markup wanneer je chirurgische controle wilt die de visuele editor je niet kan geven. Hier verwijderde ik de herogradiënt netjes.
Kijk wat die reeks daadwerkelijk was: de hero met de hand links uitlijnen, het oranje globaal helderder maken, het sitelettertype in één beweging wisselen, in de code duiken om de herogradiënt te verwijderen, en dan het kopgewicht lichter maken. Vijf betekenisvolle wijzigingen, nul volledige paginaregeneraties, en niet één keer liep ik het risico dat het model "behulpzaam" een sectie herbouwde waar ik tevreden mee was.
Dat is de echte doorbraak. Het vuile geheim van de oude workflow was dat elke re-prompt een gok was — je vroeg om één tweak en kreeg drie ongevraagde "verbeteringen" die je vervolgens moest terugdraaien. Direct bewerken maakt van designiteratie weer wat het hoort te zijn: een reeks kleine, veilige, omkeerbare stappen. Wil je de diepere strategische versie van deze overdracht, dan heb ik die uiteengezet in mijn website-workflow met Claude Code en AI-designtools.
Toen de look vaststond, restte er nog één klus vóór de export: zorgen dat het niet uit elkaar viel op een telefoon.
Het 3D-geanimeerde portfolio responsive maken
Een herovideo en een strakke desktoplayout betekenen niets als de site instort op mobiel, waar meer dan de helft van je bezoekers daadwerkelijk zit. In Claude Design 2.0 controleerde ik het gedrag op kleine schermen en verhielp ik de voor de hand liggende breuk: de secties Journal en Selected Work, die op desktop comfortabel naast elkaar stonden, moesten op smalle viewports verticaal stapelen in plaats van zich in onleesbare kolommen te wringen.
Dit is een snelle ronde, maar wel een waar je niet omheen kunt. De 4K-hero schaalt gracieus mee naar beneden — een voordeel van native 4K is dat het schoon downsampled naar kleinere schermen in plaats van zacht te ogen. Maar layoutlogica moet je bewust afhandelen. De tweekolomssecties stapelen, bevestigen dat de CTA bereikbaar bleef, controleren dat de kop niet overliep — tien minuten werk dat voorkomt dat je iets lanceert dat kapot oogt op precies het apparaat waarop de meeste mensen het zullen openen.
Met responsive geregeld was het prototype oprecht goed. Maar een Claude Design-prototype, hoe gepolijst ook, blijft een prototype. Om het echt te maken, had ik het in code nodig.
Exporteren naar Claude Code voor echte controle
Dit is waar veel AI-gebouwde sites tegen een plafond aanlopen. Ze leven binnen de tool die ze maakte, en zodra je iets wilt wat de tool niet kan, zit je vast. Claude Design 2.0 vermijdt die val met een schone overdracht.
Twee routes naar buiten:
- Share → Send to Claude Code duwt het project rechtstreeks in een Claude Code-sessie.
- Downloaden als ZIP geeft je de ruwe bestanden om te openen waar je maar wilt.
Ik stuurde het naar Claude Code, draaide het lokaal op, en hier gebeurde de polish die "AI-gegenereerd" scheidt van "professioneel gebouwd" — de dingen waarover een visuele tool oprecht niet zo goed kan redeneren als een codeeragent die in de daadwerkelijke codebase werkt:
- Sectieflow en spacing — het verticale ritme tussen secties aanscherpen zodat de pagina ademt in plaats van als gestapelde blokken aan te voelen. Ik heb eerder geschreven over hoeveel van "premium" eigenlijk gewoon discipline in spacing en flow is.
- Hoverstates op de portfolio-items — het soort micro-interactie dat vakmanschap signaleert. Een subtiele lift, een verschuiving, iets dat de cursor beloont.
- Fade-in-animaties — secties die bij het scrollen zacht binnenkomen in plaats van op hun plek te klappen.
- Footer-CTA — de laatste call-to-action verfijnen zodat de pagina met intentie afsluit.
Claude Code dat op echte bestanden werkt, is fundamenteel een ander gereedschap dan een visuele editor. Het redeneert over de hele codebase, voert er consistente wijzigingen in door en geeft je de controle op codeniveau die een mooi ogend prototype verandert in iets dat je daadwerkelijk zou deployen. De designtool brengt je op prachtige wijze het grootste deel van de weg. Claude Code overbrugt het laatste stuk dat iedereen daadwerkelijk opmerkt.
Op dit punt had ik een oprecht shipbaar 3D-geanimeerd portfolio: native-4K characterhero, redactionele layout, responsive, gepolijste hoverstates en scrollanimaties, echte code die van mij was. Maar het was nog steeds, in de kern, een statische homepage. En een portfolio dat je niet kunt bijwerken is een doodlopende weg.
De stap die van een prototype een platform maakt
Hier is de eerlijke beperking, het ding dat de gelikte demovideo's overslaan. Alles hierboven levert een prachtige statische site op. De Selected Work is hardcoded. De Journal-items zitten in de markup gebakken. Een nieuw project toevoegen? Code bewerken. Een nieuwe journalpost publiceren? Code bewerken. Dat is prima voor een eenmalige build en volstrekt onhoudbaar voor een levend portfolio.
De oplossing — en dit is de natuurlijke volgende build, volledig uitgevoerd in Claude Code — is een backend-CMS. Een contentlaag waarmee ik portfoliostukken kan beheren, individuele projectpagina's kan opzetten en journalposts kan publiceren zonder telkens de codebase aan te raken. Dat is het verschil tussen een homepage en een platform. Ik heb precies dit patroon eerder gebouwd en gedocumenteerd in websites client-editable maken met Claude Code, en dezelfde aanpak geldt of de klant nu een betalende klant is of gewoon toekomstige-ik die op een zondagavond een nieuwe casestudy wil posten.
Die CMS-stap is wat stilletjes het onderscheid maakt tussen mensen die een AI-gebouwde site hebben gedemonstreerd en mensen die er daadwerkelijk een draaien. De homepage is het makkelijke, dopamine-deel. De contentinfrastructuur eronder is wat het echt maakt — en het is waar het gesprek over AI-webdesign als volgende naartoe gaat.
Veelgestelde vragen
Kun je echt een 3D-geanimeerd portfolio bouwen met AI en zonder te coderen?
Ja — je kunt een volledig ontworpen, responsive portfolio met videohero krijgen zonder code te schrijven, met Claude Design 2.0 voor de site en Seedance 2.0 4K van Higgsfield voor de animatie. De adder onder het gras is dat de laatste meters polish (hoverstates, scrollanimaties, een CMS) veel makkelijker en beter beheersbaar zijn zodra je naar Claude Code exporteert, dus "no code" levert je een geweldig prototype op, maar een beetje code levert je een echt product op.
Wat maakt Seedance 2.0 4K anders dan andere AI-videomodellen?
Op Higgsfield genereert Seedance 2.0 native in 4K in plaats van op lagere resolutie te renderen en daarna te upscalen. Dat schrapt een kwaliteitsverliesstap en een extra renderfase, waardoor de clip scherp genoeg is om op grote schermen achter full-viewport herotekst te staan zonder artefacten. Het ondersteunt volgens de modeldocumentatie van Higgsfield ook multi-shot-generatie met consistente characters.
Waarom zag mijn AI-gegenereerde 3D-character er griezelig uit, en hoe los ik dat op?
Een AI-character oogt meestal unheimisch omdat het model de render te ver richting fotorealisme heeft geduwd en hem zo in de uncanny valley heeft laten belanden. De oplossing is contra-intuïtief: prompt om meer stilering, niet om meer detail. Stuur richting een duidelijk geïllustreerde 3D-look met ontworpen proporties, en het ongemak verdwijnt omdat het brein het leest als een bewust ontworpen character in plaats van een mislukte kloon.
Hoe werkt de overdracht van Claude Design naar Claude Code?
Gebruik vanuit Claude Design 2.0 Share → Send to Claude Code om het project rechtstreeks in een Claude Code-sessie te duwen, of download het project als ZIP en open het lokaal. Vanaf daar werkt Claude Code op de echte bestanden, en daar handel je de verfijningen op codeniveau af die de visuele editor niet kan, zoals consistente spacing, hoverstates, scrollanimaties en uiteindelijk een backend-CMS. Zie de exportsectie hierboven voor de volledige flow.
Het servetje was de hele truc
Ga terug naar die clip van tien seconden — de 3D-versie van mij die door een lege studio ijsbeert en in de camera kijkt. Het is het deel dat iedereen opvalt. Maar het is niet het deel dat de site goed maakte.
De site is goed dankzij vier minuten met een pen voordat ik ook maar één tool opende. De wireframe. De vijf heldere secties. De specifieke instructies die aan het model werden overhandigd in plaats van een vage wens. Al het krachtige dat daarna gebeurde — het terracottaschema dat bij de eerste generatie raak was, het on-canvas bewerken dat verfijnde in plaats van herbouwde, de schone overdracht naar Claude Code — dat alles bouwde voort op een helder plan dat aan een capabel model werd gegeven. De AI heeft mijn portfolio niet ontworpen. Ik heb het ontworpen, en de AI voerde het uit met een snelheid en precisie die me twee jaar geleden een maand en een factuur van halverwege de vier cijfers hadden gekost.
Dus hier is je uitdaging voor de komende 24 uur: voordat je Claude Design, Higgsfield of welke AI-builder dan ook aanraakt, schets het ding. Vijf secties, van boven naar beneden, op echt papier. Schrijf drie zinnen over hoe het moet voelen. Dan — en pas dan — open je de tools. Je zult oprecht versteld staan hoeveel beter de eerste generatie terugkomt wanneer het model eindelijk weet wat je echt wilt.
Wil je zo'n site voor je laten bouwen?
Als je liever de trial-and-error overslaat en een AI-gedreven portfolio — native-4K videohero, redactionele layout, echte code die van jou is — end-to-end laat bouwen, dan is dat precies het soort project dat ik aanneem. Stuur me het ruwe idee en ik vertel je eerlijk of deze pipeline erbij past of dat je beter echte beelden kunt schieten. Je start dat gesprek via mijn Fiverr-profiel.
