Wie Ich ein 3D Animiertes Portfolio Mit KI Baute
Zuletzt aktualisiert: 1. Juli 2026
Ich hatte ein Portfolio, das aussah wie ein Lebenslauf im Trenchcoat. Statische Screenshots, ein Kartenraster, ein Über-mich-Bereich, den niemand las. Dann launchte Anthropic Claude Design 2.0, und Higgsfield lieferte Seedance 2.0 mit nativer 4K-Ausgabe, und ich realisierte, dass ich ein vollständiges 3D animiertes Portfolio bauen konnte — mit Hero-Video, flüssigen Übergängen und echter Tiefe — ohne After Effects, Cinema 4D oder einen Motion Designer.
Dies ist der vollständige Workflow. Die tatsächlichen Schritte, die Tools, was schiefging, und das Portfolio am anderen Ende.
Warum ein 3D animiertes Portfolio jetzt endlich den Aufwand wert ist
Claude Design 2.0 fügte Prototyping, Wireframing und Markup-Tools hinzu. Seedance 2.0 4K von Higgsfield lieferte native 4K-Videogenerierung mit Charakter-Konsistenz. Zusammen fielen Kosten und Zeit für ein Premium-Portfolio auf „ein langes Wochenende."
Der Wireframe, den ich skizzierte bevor ich KI berührte
Auf einer Serviette. Ein schräges Rechteck für den Hero-Bereich, eine Linie für Navigation, drei Boxen für Projektkarten, eine Fußzeile. Daneben drei Wörter: „Bewegung, Licht, Tiefe." Das war das Creative Brief. Die Serviette ist das Filter — sie verhindert, dass man sich in Möglichkeiten verliert.
Den Build in Claude Design 2.0 aufsetzen
Claude Design 2.0 ist kein Figma-Ersatz — es ist ein Prototyping-Tool. Ich startete mit einem Text-Prompt für ein dunkles, modernes Portfolio mit Vollbild-Hero-Video. Die erste Version war 70% richtig. Die Markup-Tools retteten mich: statt Probleme in Text zu beschreiben, umkreiste ich die Projektkarten und schrieb „mehr Padding, kein Gradient, flache Farbe, scharfe Ecken." Drei Markup-Durchgänge und das Design war fertig.
Assets in Higgsfield generieren
Das 3D-Charakter richtig hinbekommen
Die ersten drei Versuche landeten in der Uncanny Valley. Die Lösung: mehr stilisieren, nicht weniger. Statt Fotorealismus anzustreben, lenkte ich Richtung leicht stilisiertes 3D — glatte Haut, vereinfachte Züge. Die Uncanny Valley trifft Fotorealismus am härtesten. Leichte Stilisierung umgeht sie komplett.
Animieren in Seedance 2.0 4K
Seedance 2.0 4K generiert echte 4K-Videos mit Charakter-Konsistenz über Clips hinweg. Ich generierte drei Clips: Charakter dreht sich zur Kamera, Charakter tippt am Laptop, langsamer Zoom mit Partikeleffekten. Die Qualität auf nativem 4K war scharf genug für Vollbild auf Retina-Displays.
Die 4K-Clips in den Hero einbauen
Zurück in Claude Design: Hero-Video als Hintergrundschicht, Autoplay, stumm, geloopt mit langsamem Fade-in. Das Ergebnis sah sofort aus, als hätte ein Studio es gebaut.
Die drei Bearbeitungsmodi
Markup-Modus: Auf dem Design zeichnen — Elemente umkreisen, Notizen schreiben. Direkt-Edit-Modus: Eigenschaften direkt klicken und ändern. Prompt-Modus: Textinterface für größere Änderungen. Man kann alle drei durcheinander nutzen. Die Oberfläche wird zum Prompt.
Das Portfolio responsive machen
Claude Design generiert responsive Breakpoints automatisch — 80% korrekt. Die 20% die ich fixte: Kartenabstand auf Mobil, Hero-Video-Zoom auf kleinen Bildschirmen, Navigation als Drawer-Menü. Drei Fixes, fünf Minuten.
Export zu Claude Code
Claude Design exportiert funktionalen HTML/CSS/JS-Code zu Claude Code. Die Code braucht Aufräumarbeit, aber sie ist ein laufender Startpunkt. Ich verbrachte ~2 Stunden mit CSS-Aufräumung, Video-Ladeoptimierung und SEO Meta-Tags.
Der Schritt der ein Prototyp in eine Plattform verwandelt
Das Portfolio ist eine statische Site — kein Backend nötig. Direkt deployed. Die Lektion: das Zeitalter von „ich brauche ein Team für eine Premium-Web-Erfahrung" verblasst für Portfolios und Landingpages.
Für Hilfe beim Aufsetzen solcher Build-Pipelines: fiverr.com/s/EgxYmWD.
Häufig gestellte Fragen
Kann man wirklich ein 3D animiertes Portfolio mit KI und ohne Programmierung bauen?
Mit minimaler Programmierung. Claude Design übernimmt Design und Prototyping, Seedance 2.0 4K generiert die 3D-Video-Assets, und der Export zu Claude Code produziert funktionalen Code, der Aufräumung braucht aber den Großteil der Arbeit überspringt.
Was macht Seedance 2.0 4K anders?
Native 4K-Rendering (nicht hochskaliert), Charakter-Konsistenz über Clips, und Motion-Qualität die scharf genug für Vollbild-Website-Nutzung ist.
Warum sah mein 3D-Charakter gruselig aus?
Die Uncanny Valley trifft Fotorealismus am härtesten. Stilisiere mehr, nicht weniger — glattere, vereinfachte Züge umgehen die Reaktion.
Wie funktioniert der Claude Design zu Claude Code Handoff?
Claude Design exportiert das Design als funktionalen HTML/CSS/JS-Code. Es ist laufender Code den man bearbeiten kann, kein Bild.
Die Serviette war der ganze Trick
Drei Wörter — „Bewegung, Licht, Tiefe" — steuerten jede Entscheidung. Die KI war die Geschwindigkeit. Die Serviette war die Richtung. Skizziere etwas bevor du etwas öffnest.
Lass Uns Zusammenarbeiten
- Fiverr: fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited: ramlit.com
- ColorPark: colorpark.io
- xCyberSecurity: xcybersecurity.io
