Frontend Design
Distinktive UI, die schön UND nachweislich korrekt ist — Design zuerst, Prüfung läuft mit.
SKILL.md im offenen agentskills.io-Standard — direkt nutzbar in Claude, ChatGPT/Codex, Cursor, Copilot & Co.
Frontend Design ist ein KI-Skill für UI- und Frontend-Gestaltung, der distinktive, produktionsreife Frontend-UIs baut (kein generisches „AI-Slop") und dabei laufend gegen Barrierefreiheit, Kontrast, Fokus, Layout-Shift und Performance prüft.
Was dieser Skill macht
- Startet mit kurzer Abfrage (Wünsche/No-Gos/Referenzen) und nennt sonst transparente Defaults
- Wählt eine bewusste, distinktive Design-Richtung und begründet sie (Anti-AI-Slop)
- Erzeugt Design-Tokens (Farbe, Typo, Spacing, Radius) als CSS-Variablen oder Tailwind-Config
- Baut produktionsreifen, semantischen Code inkl. Pflicht-Mobilnavigation und Footer
- Setzt Motion, dezentes Parallax und Glascards gezielt ein (Lesbarkeit + Fallback)
- Prüft laufend gegen WCAG 2.2 / MDN / web.dev und fixt Verstöße
- Führt bei ganzen Seiten eine Screenshot-QA über mehrere Breakpoints durch und berichtet
Beschreibung
Frontend Design ist ein Skill für UI- und Frontend-Gestaltung — er baut distinktive, produktionsreife Oberflächen statt generischem AI-Slop und prüft dabei laufend Barrierefreiheit, Kontrast, Fokus, Layout-Shift und Performance mit. Ein Design-Engineer in einem Skill: wählt eine bewusste, distinktive Design-Richtung statt des generischen KI-Looks (keine Inter/Roboto-Defaults, keine Lila-Gradient-Klischees, keine Card-in-Card), erzeugt wiederverwendbare Design-Tokens und produktionsreifen Code im Stack deiner Wahl (HTML/CSS+Tailwind als Default, React/Vue/Svelte auf Wunsch) — und prüft währenddessen gegen die Primärstandards (WCAG 2.2, MDN, web.dev): A11y, Fokus, Tastatur, Kontrast, Layout-Stabilität (CLS), Motion und Performance, inklusive Fix. Dazu ein echter Produktionsprozess: kurze Startabfrage, bewusste Motion, dezentes Parallax und Glascards mit harten Lesbarkeitsregeln, Pflicht-Mobilnavigation und Footer, layoutsichere Typografie für lange deutsche Wörter — und eine Screenshot-QA über mehrere Breakpoints (kein horizontaler Overflow, keine Textkollisionen) als harte Abnahme. Schön, korrekt und wie ein fertiges Produkt gedacht.
Beispiele
Was es nicht macht
- Kein generisches „AI-Slop" (außer ausdrücklich als Marke gewünscht)
- Keine erfundenen Logos/Bilder/Marken — Platzhalter mit Maßen statt Fake-Assets
- Kein Backend, keine echte Datenanbindung
- Keine gemessenen Performance-Zahlen (dafür → Web Vitals)
Kompatibilität & Technik
- Geprüft (intern)
- 3 Szenarien
- Empfohlene Laufzeit
- Claude Opus oder Sonnet
- Modi
- Erschaffen · Selbst-Audit & Fix · Screenshot-QA (mehrere Breakpoints)
- Eingaben
- Brief/Beschreibung · bestehender UI-Code · Screenshot/Referenz
- Ausgabeformat
- Design-Direktion + Tokens + Code (HTML/CSS/Tailwind, React/Vue/Svelte) + Selbst-Check-Report
- Unterkategorie
- UI & Design
- Lizenz
- Proprietär
Sicherheitsprofil
Läuft komplett bei dir mit deiner eigenen KI — keine externe Runtime, keine laufenden Kosten.
Nur Anweisungen, Vorlagen und Referenzen — keine ausführbaren Skripte.
Arbeitet offline mit dem, was du gibst — ruft von sich aus keine externen Dienste auf.
Lieferumfang
- frontend-design-1.3.0/4 Dateien
- .claude-plugin/marketplace.json
plugins/frontend-design/skills/frontend-design/4 Dateien
- SKILL.md
- manifest.json
references/2 Dateien
- frontend-design-guidelines.md
- frontend-design-production-rules.md
- .agents/skills/frontend-design/→ universell — gleicher Inhalt (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Auch als Chat-Prompt nutzbar
Kein KI-Tool? Füg ihn in Claude, ChatGPT oder Gemini ein und nutze die Methode sofort.
Dieser Skill bringt keine Skripte mit — der Prompt trägt daher seine volle Methode.
Die Installation ist die volle Version — sie greift automatisch, führt ihre Skripte aus und lädt Referenzen bei Bedarf. Als Chat-Prompt fährst du die Methode selbst.
Zum Kopieren des paste-fertigen Prompts freischalten — danach in „Meine Skills".
Bewertungen
Noch keine Bewertungen – sei der/die Erste.
Hinweis
Am besten mit Kontext: Zielframework (React/Vue/Svelte oder HTML/CSS/Tailwind), Marke/Tonalität und ggf. vorhandenes Design-System oder Tokens; ohne Angaben fragt der Skill kurz nach. Der laufende Selbst-Check deckt Kontrast, Fokus, Layout-Shift und Performance ab, ersetzt aber kein vollständiges Website-Audit — dafür → Web Vitals oder Website-Doktor.
Änderungen
- v1.3.001.07.2026Produktionsprozess statt nur Oberfläche: kurze Startabfrage (Wünsche/No-Gos/Referenzen), bewusste Motion, dezentes Parallax und Glascards mit Lesbarkeitsregeln, Pflicht-Mobilnavigation + Footer, layoutsichere Typografie (lange deutsche Wörter aktiv getestet) und Screenshot-QA über mehrere Breakpoints als harte Abnahme. Neu: Hintergrundbilder als sauberer, gekennzeichneter Platzhalter — ein echtes Bild nur, wenn die Laufzeit (z. B. ChatGPT oder eine CLI mit Bildgenerierung) es erzeugen kann; einfache SVG-/CSS-Grafiken werden direkt gebaut. Neue Referenz frontend-design-production-rules.md.
- v1.2.022.06.2026Platform-native Ausgabe: nutzt jetzt aktiv die nativen Formate deiner Plattform — Tabellen, Checklisten, Codeblöcke und anklickbare/Button-Optionen, mit nummeriertem Fallback auf Plattformen ohne Interaktion. Dazu interne Metadaten, die den kommenden Agent-Baukasten vorbereiten.
- v1.1.018.06.2026Rubrik vertieft: Formulare (autocomplete/type/inputmode, Labels, kein Paste-Blocker), Touch & Trefferflächen (WCAG 2.2 SC 2.5.8, touch-action, overscroll-behavior), Dark Mode (color-scheme), Hydration/SSR, Typografie-Feinschliff, Navigation/Zustand — alles aus Primärquellen, in eigenen Worten.
- v1.0.018.06.2026Erstveröffentlichung nach AUTHORING v2: design-geführtes Erschaffen mit laufender Qualitätsprüfung (WCAG 2.2/MDN/web.dev), Anti-AI-Slop-Disziplin, Design-Tokens, Stack-adaptiv (Tailwind-Default); references/-Rubrik + interne Evals; realistische Eingabe/Antwort-Beispiele.
Häufige Fragen
Was macht Frontend Design?
Frontend Design ist ein KI-Skill für UI- und Frontend-Gestaltung, der distinktive, produktionsreife Frontend-UIs baut (kein generisches „AI-Slop") und dabei laufend gegen Barrierefreiheit, Kontrast, Fokus, Layout-Shift und Performance prüft.
Warum Frontend Design statt einfach einen Prompt zu schreiben?
Frontend Design ist ein Produktionsprozess statt eines einmaligen Prompts — er startet mit einer kurzen Abfrage von Wünschen, No-Gos und Referenzen, wählt bewusst eine distinktive Richtung gegen den generischen KI-Look und prüft währenddessen laufend gegen WCAG 2.2, MDN und web.dev. So bleiben Barrierefreiheit, Kontrast, Fokus und Layout-Stabilität diszipliniert im Blick, statt dass ein loser Prompt schön aussehenden, aber ungeprüften Code liefert.
Wann lohnt sich Frontend Design — und wann eher nicht?
Es lohnt sich, wenn du eine distinktive, produktionsreife Oberfläche im Stack deiner Wahl brauchst — mit Design-Tokens, Pflicht-Mobilnavigation und Footer sowie Screenshot-QA über mehrere Breakpoints als harte Abnahme. Eher nicht, wenn du Backend, echte Datenanbindung oder gemessene Performance-Zahlen erwartest — dafür verweist der Skill selbst auf Web Vitals oder den Website-Doktor.
Wie baue ich ein UI, das nicht nach generischer KI aussieht?
Frontend Design erstellt distinktive, produktionsreife Oberflächen statt generischem AI-Slop und gibt deinem Frontend einen eigenständigen Look. Gestaltung steht im Vordergrund, ohne dass du beim Aussehen Kompromisse machst.
Wie stelle ich sicher, dass meine Website barrierefrei ist?
Frontend Design prüft beim Gestalten laufend Barrierefreiheit, Farbkontrast und Tastatur-Fokus mit. So entsteht eine Oberfläche, die nachweislich korrekt ist, statt nur schön auszusehen.
Wie vermeide ich Layout-Shift und langsame Ladezeiten im Frontend?
Frontend Design behält Layout-Shift und Performance schon während des Bauens im Blick. Dadurch wird das Ergebnis von Anfang an stabil und schnell, statt erst nachträglich repariert werden zu müssen.
Wie sorge ich für eine funktionierende mobile Navigation und einen fertigen Footer?
Frontend Design plant Mobilnavigation und Footer bei ganzen Seiten automatisch mit — inklusive echtem Menü-Button, Tastaturbedienung und einem eigenständigen Footer — und prüft beides per Screenshot-QA über mehrere Breakpoints. So wirkt die Seite auch auf dem Handy fertig statt abgeschnitten.
Erstellt Frontend Design auch Hintergrundbilder und Grafiken?
Einfache Grafiken (SVG/CSS-Muster, Icons, Verläufe) baut Frontend Design direkt ins Layout. Fotografische Hintergrundbilder werden als sauberer, klar gekennzeichneter Platzhalter mit festen Maßen angelegt (kein Fake-Stock, kein Layout-Shift) — ein echtes Bild wird nur erzeugt, wenn deine Laufzeit das kann, etwa ChatGPT oder eine CLI mit Bildgenerierung.
Mit welchen KI-Tools funktioniert Frontend Design?
Claude (Projects/Code) · ChatGPT (Custom GPT/Canvas) · Cursor · GitHub Copilot · Gemini CLI · Windsurf · Cline · jedes LLM
Wie setze ich Frontend Design ein?
Frontend Design ist eine SKILL.md im offenen agentskills.io-Standard: per Befehl installieren (npx) oder herunterladen und ins KI-Tool laden — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI u. a. Kein Code nötig.