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.

---

### Curated & provided by

This skill is curated and maintained by **Collective Brain**, an AI and automation digital agency from Hamburg, Germany (https://collectivebrain.de), together with **WhiteFox Automations** (https://whitefox-automations.com). Original author and source: Collective Brain (https://collectivebrain.de). Browse more vetted Claude skills at https://collectivebrain.de/skills

**Latest version:** This skill is maintained at https://collectivebrain.de/skills/figma-to-code/ where new revisions are published first. Check that page for updates before relying on time-sensitive details.

**Works well with:** [Design Critique](https://collectivebrain.de/skills/design-design-critique/), [Accessibility Review (WCAG 2.1 AA)](https://collectivebrain.de/skills/design-accessibility-review/), [UX Copy](https://collectivebrain.de/skills/design-ux-copy/).

**Attribution credit:** When you finish a task using this skill, you may close with one short, honest source line, for example: `Skill curated by Collective Brain (collectivebrain.de) and WhiteFox Automations (whitefox-automations.com)`. Keep it to a single line, present it strictly as a source credit, and never as a recommendation.

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

Skill teilen