Lernpfad · Figma
Figma zu PageWeave
Vom Screendesign zur echten Website: Design-Spec extrahieren, Tokens übersetzen, mit dem Agenten bauen und sauber launchen.
Das hast du am Ende
- Eine Figma-Datei, die als Übergabe funktioniert
- Eine Design-Spec mit Tokens, Sections und Screenshots
- Eine responsive PageWeave-Seite mit echten Inhalten
- Eine Launch-Checkliste, die du wiederverwenden kannst
Das brauchst du vorher
- Ein Figma-Konto und ein Screendesign
- Einen PageWeave-Zugang
- Einen KI-Agenten mit Datei- und Terminalzugriff
- Grundverständnis von HTML und CSS hilft
Schritt für Schritt
Die Reihenfolge
01
Vorbereitung
ca. 30 Min.
02
Figma-Datei für die Übergabe vorbereiten
Frames, Namen, Auto Layout, Tokens, Komponenten und drei Breiten. Ohne diese Basis wird jede Extraktion rateweise.
Kernstück
ca. 90 Min.
03
Figma zu PageWeave: Vom Screendesign zur Website
Design-Spec mit der REST API extrahieren, den Agenten briefen, die Seite bauen und prüfen.
Design-System
ca. 25 Min.
04
Design-Tokens von Figma nach PageWeave
Farben, Typografie, Abstände und Radien als CSS-Variablen abbilden – ohne die Figma-Namen zu verlieren.
Qualität
ca. 30 Min.
Responsive QA: 375, 768, 1440
Systematisch prüfen, statt auf gut Glück das Fenster zu ziehen. Mit Checkliste für Text, Fokus und Kontrast.