Figma-Design in semantisches HTML und responsives CSS umsetzen

Prompt

Arbeite als Senior-Frontend-Entwickler, der Designs in originalgetreues, barrierefreies und wartbares HTML und CSS übersetzt.

Kontext:
- Beschreibung des Designs: {{design}}
- Referenzgrößen und Breakpoints: {{breakpoints}}
- CSS-Ansatz: {{css_ansatz}}
- Zu unterstützende Browser: {{browser}}

Bevor du umsetzt, liste auf, was das Design nicht festlegt (Hover- und Fokuszustände, Verhalten auf Mobilgeräten, lange Texte, Leerzustände), und frag nach dem Nötigsten.

Liefere:
1. Die Dokumentgliederung: Landmarks (header, nav, main, footer), Überschriftenhierarchie und Wahl der Elemente (Button oder Link, Listen, figure).
2. Aus dem Design abgeleitete Tokens als Custom Properties: Farben, Abstände, Radien, Schatten und eine Typo-Skala mit fluider Typografie per clamp().
3. Das vollständige semantische HTML der Sektion oder Seite.
4. Mobile-first-CSS mit Grid und Flexbox, ohne feste Höhen und Magic Numbers, mit :hover-, :focus-visible- und Disabled-Zuständen.
5. Bilder mit width und height, srcset und sizes, loading="lazy" außer beim Hauptbild und sinnvollen Alternativtexten oder leerem alt bei Dekoration.
6. Eine Kontrastprüfung der Designfarben mit Alternativen, falls eine Farbe WCAG AA nicht erreicht.
7. Eine Liste der Entscheidungen, die du bei Unklarheiten getroffen hast, zur Abstimmung mit dem Design.

Vorgaben:
- Keine unnötig verschachtelten divs und keine Klassennamen, die das Aussehen statt der Funktion beschreiben, außer bei Tailwind.
- Keine Texte oder Daten erfinden: nutze [AUSFÜLLEN], wo Inhalte fehlen.
- Beachte prefers-reduced-motion, falls du Übergänge einbaust.

Format: Gliederung, Tokens, HTML und CSS in getrennten Blöcken, am Ende die Entscheidungsliste.

So verwenden Sie ihn

Anwendungsbeispiel

Beispielergebnis

:root {
  --farbe-hintergrund: #F6F1EA;
  --farbe-primaer: #1F4D3A;
  --farbe-text: #1B1B1B;
  --abstand-m: 1.5rem;
  --abstand-l: clamp(2rem, 5vw, 4rem);
  --radius: 0.75rem;
  --text-headline: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px auf dem Desktop */
  font-family: 'Inter', system-ui, sans-serif;
}

.hero {
  display: grid;
  gap: var(--abstand-m);
  padding-block: var(--abstand-l);
  background: var(--farbe-hintergrund);
}

.hero h1 { font-size: var(--text-headline); line-height: 1.1; }

@media (min-width: 48rem) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--farbe-primaer);
  color: #fff;
}
.button:hover { background: color-mix(in srgb, var(--farbe-primaer) 85%, black); }
.button:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 3px; }

Wichtige Fakten

Kategorie

Programmierung & Entwicklung · HTML & CSS

Ausgabetyp

Code

Niveau

Fortgeschritten

Entwickelt für

ChatGPT, Claude, Gemini und Microsoft Copilot

Verifiziert in

Redaktionelle Prüfung ausstehend

Variablen

Beschreibung des Designs, Breakpoints, CSS-Ansatz und Browser

Sprache

Deutsch

Preis

Kostenlos, ohne Anmeldung

Aktualisiert

07.11.2026

Häufig gestellte Fragen