Figma to Code

Sag das, um den Skill zu aktivieren

---
name: figma-to-code
description: Übersetzt Figma-Frames, Links oder Screenshots in sauberen HTML/CSS- oder React-Code mit Token-System und semantischer Struktur.
---

Dieser Skill überführt ein Figma-Design strukturiert in wartbaren Frontend-Code, statt Pixel blind abzupausen.

## Wann dieser Skill aktiviert wird
- Der Nutzer teilt einen Figma-Link, Frame-Export oder Screenshot und will daraus HTML/CSS oder React.
- Eine Landingpage oder ein UI-Screen soll designgetreu umgesetzt werden.
- Bestehender Code soll an ein neues Figma-Design angeglichen werden.

## Workflow
1. Quelle erfassen: Figma-MCP oder API nutzen, wenn verfügbar (Frame-Baum, Auto-Layout, Variablen). Sonst per Screenshot visuell schätzen und Unsicherheiten markieren.
2. Zuerst Tokens extrahieren, nicht Markup: Farben, Schriftgrößen, Abstände, Radien, Schatten als CSS Custom Properties. Krumme Werte auf ein 4px- oder 8px-Raster runden.
3. Layoutmodell ableiten: Auto-Layout wird Flexbox (direction, gap, padding, alignment), Rasterstrukturen werden CSS Grid. Absolute Positionierung nur für Dekor-Overlays.
4. Wiederholungen als Komponenten schneiden (Button, Card, NavItem). Varianten werden Props oder Modifier-Klassen.
5. Semantisches HTML: genau ein h1, saubere Heading-Hierarchie, nav/main/section, button vs. a nach Funktion, Labels und alt-Texte.
6. Fehlende States ergänzen: Figma zeigt selten hover, focus-visible, active oder disabled. Aus dem Markenstil ableiten und einbauen.
7. Responsive festlegen: Der Frame hat eine feste Breite. Entscheiden, was auf kleinen Viewports stapelt oder umbricht; clamp() und fluide Abstände statt vieler Breakpoints.
8. Im Browser verifizieren: rendern, neben das Design legen, Abweichungen bei Abständen, Schriftschnitten und Farben korrigieren.
9. Bewusste Abweichungen (z.B. erhöhter Kontrast) kurz dokumentieren.

## Output-Format
- Lauffähiger Code: HTML-Datei mit eingebettetem CSS oder React-Komponenten plus Styles-Datei.
- Tokens gesammelt am Anfang (Custom Properties unter :root).
- Kurze Notizliste: Annahmen, ergänzte States, Abweichungen vom Design.

## Qualitätsregeln
- Keine hartcodierten Farben oder Abstände im Markup, alles über Tokens.
- Kein position:absolute fürs Seitenlayout, nur für Dekor.
- Schriftgrößen in rem, Abstände auf konsistentem Raster.
- Jedes interaktive Element hat einen sichtbaren focus-visible-Stil.
- Textkontrast mindestens WCAG AA; notfalls vom Design abweichen und vermerken.
- Klassennamen beschreiben Funktion, nicht Optik (kein .blue-box).
- Ergebnis wurde gerendert und mit dem Design verglichen, nicht nur gelesen.

Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.

Skill teilen