danielhall/agent-skills

Webseite zu Figma-Design-Datei

Wandelt eine laufende Webapp in eine Figma-Datei um, aus der ein Designer tatsächlich ein Redesign ableiten kann: echte Kopien, echte Icons, Farb- und Abstandsvariablen mit Hell-/Dunkel-Modi, Textstile, wiederverwendbare Komponenten und jede Seite aufgebaut aus Instanzen dieser Komponenten. Screenshots sind nur eine Referenz, niemals das Endprodukt.

Dieser Skill baut auf den eigenen Skills des Figma-Plugins auf. Lade figma-use und figma-generate-design vor jedem use_figma-Aufruf, und figma-generate-library beim Erstellen von Komponenten oder Variablen.

Wann verwenden

• "Hole meine Seite in Figma, damit ich sie redesignen kann"
• "Erstelle diese Seiten in Figma" / "Schiebe diese App in Figma"
• Hinzufügen von mobilen Frames oder neuen Seiten zu einer Figma-Datei, die auf diese Weise erstellt wurde

Schritte

1. Die Quelle der Wahrheit lesen

• Die laufende App und das globale Stylesheet haben Vorrang vor Designdokumenten. Dokumente driften während eines Redesigns ab; sage Bescheid, wenn du einen Widerspruch findest.
• Sammle: Theme-Tokens (Hell und Dunkel), Schriftfamilien und -gewichte, das Layout-Raster (Rinnen, Schienen, Spaltenbreiten) und die Komponentendateien hinter jedem Seitenabschnitt.
• Prüfe mit figma.listAvailableFontsAsync(), ob Schriftarten in Figma existieren, bevor du Stile schreibst. Falle niemals stillschweigend auf Inter zurück.

2. Referenz-Screenshots mit Playwright aufnehmen, nicht mit page captures

Verwende scripts/ref-screenshots.mjs bei jeder Zielbreite (z.B. 1440 und 390). Es setzt reducedMotion: "reduce", damit Scroll-Reveal- und Entrance-Animationen den Inhalt nicht verstecken.

generate_figma_design -Seitenaufnahmen sind für diese Aufgabe unzuverlässig: Inhalte hinter sichtbaren Animationen werden leer aufgenommen, und Aufnahmen, die in Hintergrund-Browser-Tabs geöffnet werden, bleiben oft für immer im Status pending. Wenn du sie überhaupt verwendest, öffne einen Tab nach dem anderen und lösche die Aufnahme, sobald sie als Referenz gedient hat. Wenn du das Aufnahmeskript in die App injizierst, entferne es danach wieder.

3. Echte Daten und Icons aus dem Codebase exportieren

Schreibe ein wegwerfbares tsx-Skript (außerhalb des Repos oder lösche es danach), das die eigenen Datenmodule der App importiert und Icon-Komponenten mit react-dom/server's renderToStaticMarkup in SVG-Zeichenketten rendert. Dann:

• Ersetze currentColor durch eine echte Farbe und gib jedem SVG explizite width/height-Werte. Icon-Bibliotheken geben 1em aus, was Figma nicht skalieren kann.
• Dedupliziere Icons anhand ihrer Pfaddaten. Brand-Maps aliasieren oft viele Namen auf ein Logo.
• Ziehe CMS-Inhalte (Titel, Auszüge, Kategorien) mit dem CMS-Client, anstatt sie neu zu tippen.

4. Grundlagen zuerst aufbauen

Ein Aufruf pro Element, der alle erstellten IDs zurückgibt:

1. Seiten: Foundations, Components, eine Seite pro Breakpoint.
2. Variablenkollektionen: Theme-Farben (Hell/Dunkel), Kategorie- oder Markenfarben, Layout-Tokens (Desktop/Mobile-Modi). Setze explizite scopes und WEB-Code-Syntax.
3. Textstile für jede Textrolle, plus mobile Varianten der Display-Größen.
4. Einen Effektstil für jeden gemeinsamen Schatten.

5. Komponenten bauen, die kleinsten zuerst

Icons, dann Primitive (Buttons, Links, Kacheln, Badges, Chips), dann Composites (Header, Footer, Hero, Cards). Setze TEXT, BOOLEAN und INSTANCE_SWAP-Eigenschaften frei, damit Seiten befüllt werden können, ohne die Instanz aufzulösen. Gib responsiven Teilen eine Breakpoint-Variante, anstatt Größen auf Instanzen zu überschreiben. Mache einen Screenshot von jeder Gruppe und behebe Fehler, bevor du weitermachst.

6. Seiten aus Instanzen zusammensetzen

• Ein use_figma-Aufruf pro Seite, an festen Canvas-Positionen, damit Seiten parallel gebaut werden können.
• Spiegle das CSS-Raster mit Auto-Layout-Abständen (z.B. eine Schiene und Rinne) wider, nicht mit absoluten Positionen.
• Gleiche Kartenhöhen pro Zeile explizit an; Figma dehnt Geschwister nicht so wie CSS-Grid.
• Vergleiche die Gesamthöhe jeder Seite und einen Screenshot mit der Referenz. Höhen innerhalb weniger Prozent bedeuten, dass die Abstände stimmen.

7. Komponenten mit Code verknüpfen

Code Connect funktioniert nur mit Organisations- und Enterprise-Plänen. Überprüfe zuerst whoami. Bei anderen Plänen schreibe den Quellpfad, Komponentennamen und Prop-Mapping in die description jeder Komponente und setze documentationLinks auf die Datei auf GitHub. Der Dev-Modus zeigt beides an. Füge keine .figma.ts-Dateien zu einem Repository hinzu, das sie nicht veröffentlichen kann; sie brechen tsc ohne das Code Connect-Paket.

8. Aufräumen

Lösche Referenzaufnahmen, entferne injizierte Skripte, stoppe gestartete Dev-Server und bestätige, dass git status sauber ist.

Fallstricke

Lies references/plugin-api-pitfalls.md, bevor du Komponenten- oder Seitenskripte schreibst. Es listet die Fehlschläge auf, die am meisten Zeit kosten, jeweils mit ihrer Behebung: Bounded-Paint-Transparenz, resize() blockiert Auto-Layout-Größen, Eigenschaftsschlüssel werden neu vergeben, verlorene Referenzen bei geklonten Varianten, das Größenslimit pro Aufruf und mehr.

references/helpers.md enthält die kleinen Hilfsfunktionen, die es wert sind, an den Anfang jedes Seitenbau-Skripts gesetzt zu werden.