Verbinde Figma einmal mit Claude Code. Gib im Terminal diese zwei Zeilen nacheinander ein:
claude plugin install figma@claude-plugins-official
mkdir -p meine-website && cd meine-website && claude
Melde dich in Claude Code bei Figma an:
/plugin→Installed→figma→2× Enter→Allow access
Dann dein Auftrag, mit dem Link zum Frame:
Bau mir die Website aus diesem Figma-Entwurf: [Link zum Frame]. Nimm reines HTML, CSS und JavaScript. Wo im Entwurf das Video hin soll, setz vorerst einen leeren Platzhalter. Öffne die Seite danach im Browser.
Reicht ein kostenloses Figma-Konto?
Ja. Damit kann Claude bis zu 20-mal im Monat Daten aus deinen Entwürfen lesen. Mehr Abrufe gibt es mit einem bezahlten Plan.
Ich bin kein Designer. Was brauche ich?
Ein einfacher Frame reicht: Kopfzeile, Überschrift, der Bereich für das Video und zwei, drei Abschnitte darunter.
Claude Code fehlt?
Am Mac installierst du es im Terminal mit curl -fsSL https://claude.ai/install.sh | bash. Unter Windows nimmst du in der PowerShell irm https://claude.ai/install.ps1 | iex. Danach startest du es mit claude und meldest dich an. Du brauchst dafür Claude Pro, Max, Team oder Enterprise oder ein Console-Konto.
Figma wird nicht gefunden?
Dann kennt Claude Code das offizielle Verzeichnis noch nicht. Füg diese Zeile ein und danach noch mal die erste von oben.
claude plugin marketplace add anthropics/claude-plugins-official
2
Bauvideo in Seedance erzeugen
Seedance 2.5 bekommt ein Startbild und ein Endbild und erzeugt den Weg dazwischen: Fundament, Rohbau, Dach und Fassade.
Das Endbild ist dein Bild vom fertigen Haus. Das Startbild ist dasselbe Grundstück ohne Haus, das macht dir ein KI-Bildeditor aus dem Endbild:
Entferne das Haus und alles, was darauf gebaut ist. Das leere Grundstück bleibt exakt wie es ist: gleicher Blickwinkel, gleiches Licht, gleiche Umgebung.
Öffne die Vorlage und tausch die Beispielbilder pool_start_frame.png und pool_end_frame.png gegen deine. Setz die Dauer auf 10 Sekunden und füg diesen Prompt ein:
The input images are the first and last frames: @image1 is the empty building plot, @image2 is the finished house. Construction time-lapse, fixed camera, same angle as the last frame. [0-2.5s] Foundation: excavation, concrete slab. [2.5-5s] Shell: walls and timber framing go up. [5-8s] Roof and exterior: roof tiles, facade, windows, door. [8-10s] Final touches, landing exactly on the last frame image. No text, no watermark, no jump cuts.
Lad das fertige Video herunter und leg es als bauprozess.mp4 in den Ordner deiner Website.
Was kostet das?
ComfyUI rechnet Seedance 2.5 mit vorab gekauftem Guthaben ab, nach Dauer und Auflösung. Du brauchst dafür ein Comfy-Konto mit Guthaben. 1080p kostet laut Preisliste rund das Zweieinhalbfache von 720p, starte also mit 720p. Die aktuellen Preise stehen in der ComfyUI-Preisliste.
Mein Produkt ist kein Haus.
Dann tauschst du die zwei Bilder und die Stufen im Prompt. Das Startbild zeigt die leere Fläche oder die Einzelteile, das Endbild das fertige Produkt, und der Prompt zählt auf, was dazwischen passiert.
Warum ist der Prompt englisch?
Seedance versteht laut Doku Chinesisch und Englisch. Mit dem englischen Prompt bist du auf der sicheren Seite.
3
Video ans Scrollen koppeln
Gib Claude Code den Auftrag, die Wiedergabe an das Scrollen zu koppeln.
Das Video bauprozess.mp4 liegt im Ordner meiner Website. Koppel die Wiedergabe ans Scrollen: Das Video (muted, playsinline, preload="auto") bleibt gepinnt im Bild (position: sticky) und spielt nicht von allein. Setz video.currentTime aus der Scrollposition, oben Sekunde 0, am Ende die letzte Sekunde, geglättet mit requestAnimationFrame. Teste mit einem Server mit Range-Unterstützung (npx serve), nicht mit python -m http.server.
Lieber selbst einsetzen? Das ist die ganze Kopplung, das Video füllt dabei den Bildschirm. Heißt dein Video anders, ändere src.
<section id="bau">
<div class="buehne">
<video id="bauvideo" src="bauprozess.mp4" muted playsinline preload="auto"></video>
</div>
</section>
<style>
#bau { height: 400vh; }
.buehne { position: sticky; top: 0; height: 100vh; }
.buehne video { width: 100%; height: 100%; object-fit: cover; }
</style>
<script>
const video = document.getElementById('bauvideo');
const bau = document.getElementById('bau');
let jetzt = 0;
function tick() {
const strecke = bau.offsetHeight - innerHeight;
const p = Math.min(1, Math.max(0, -bau.getBoundingClientRect().top / strecke));
const ziel = p * (video.duration || 0);
jetzt += (ziel - jetzt) * 0.15;
if (Math.abs(video.currentTime - jetzt) > 0.01) video.currentTime = jetzt;
requestAnimationFrame(tick);
}
tick();
</script>
Das Video bewegt sich nicht beim Scrollen?
Meist liefert der Server das Video ohne Range-Unterstützung, dann kann der Browser nicht springen. Der einfache Python-Server python -m http.server kann das nicht. Starte die Seite stattdessen im Ordner mit npx serve oder öffne die Datei direkt im Browser.
Das Bild ruckelt beim Scrollen?
Dann mach aus jedem Bild ein Schlüsselbild. Der Browser springt damit schneller an jede Stelle. Sag Claude Code „Wandle bauprozess.mp4 mit ffmpeg so um, dass jedes Bild ein Schlüsselbild ist“, oder gib diese Zeile im Terminal ein und nimm bauprozess-scroll.mp4 in der Seite:
