frontend-design-direction

Frontend-Design-Richtung

Verwende dieses Skill, wenn die Arbeit nicht nur darin besteht, eine UI funktional zu machen, sondern sie absichtsvoll, poliert und passend zum Produktbereich wirken zu lassen.

Quelle: Gerettet aus dem veralteten Community-PR #1659 von linus707.

Hinweis: ECC bündelt das kanonische Anthropic-Frontend-Design-Skill frontend-design nicht neu. Installiere dieses von anthropics/skills, wenn du das offizielle Upstream-Skill verwenden möchtest. Dieses Skill ist die ECC-spezifische Design-Richtungs-Rettung der nützlichen lokalen Anleitung aus #1659.

Wann verwenden

• Der Benutzer bittet um die Erstellung einer Webseite, App, eines Dashboards, eines Artefakts, einer Komponente oder einer UI.
• Der Benutzer bittet darum, ein Interface polierter, unverwechselbarer, schöner oder weniger generisch zu gestalten.
• Die Implementierung benötigt visuelle Hierarchie, Typografie, Farbe, Bewegung, Layout und Interaktionsentscheidungen.
• Die aktuelle UI funktioniert, wirkt aber flach, generisch, schablonenhaft oder nicht auf die Zielgruppe abgestimmt.

Design-Richtung

Vor dem Codieren eine spezifische Richtung wählen:

1. Zweck: Welche Aufgabe erfüllt das Interface?
2. Zielgruppe: Wer wiederholt diesen Workflow, und was müssen sie zuerst scannen?
3. Ton: Nützlich, redaktionell, verspielt, industriell, raffiniert, technisch, maximal, minimal, dicht, ruhig oder eine andere explizite Richtung.
4. Einprägsames Detail: Eine Designidee, die das Ergebnis absichtsvoll erscheinen lässt.
5. Einschränkungen: Framework, Barrierefreiheit, Leistung, Responsivität und vorhandenes Designsystem.

Richte die Richtung an der Domain aus. Ein SaaS-Operationstool sollte in der Regel dicht, ruhig und scannbar sein. Ein Portfolio, eine Landingpage, ein Spiel oder ein redaktionelles Stück kann ausdrucksstärker sein. Erzwinge keine Landingpage-Komposition für ein Tool, das täglich wiederholt verwendet wird.

Implementierungshinweise

• Baue die tatsächliche nutzbare Erfahrung als ersten Bildschirm, es sei denn, der Benutzer bittet explizit um Marketingtexte.
• Verwende vorhandene Projektkomponenten, Tokens, Icon-Bibliotheken und Routing-Muster, bevor du ein neues visuelles System einführst.
• Verwende echte oder generierte visuelle Assets, wenn das Interface von Bildern, Produkten, Orten, Personen, Spielabläufen, Diagrammen oder überprüfbaren Medien abhängt.
• Bevorzuge kontextbezogene Typografie und Abstände gegenüber generischem übergroßem Hero-Text.
• Halte Paletten mehrdimensional: Vermeide eine UI, die von einer Farbfamilie dominiert wird.
• Verwende CSS-Variablen oder vorhandene Design-Tokens, damit die Richtung über Zustände hinweg kohärent bleibt.
• Gestalte responsive Einschränkungen explizit: Raster, Seitenverhältnisse, Min-/Max-Größen, stabile Werkzeugleisten und fest formatierte Steuerelemente sollten sich nicht verschieben, wenn Beschriftungen oder Hover-Zustände erscheinen.
• Verwende Bewegung sparsam, aber bewusst. Bevorzuge aussagekräftige Übergänge, die den Zustand verdeutlichen, gegenüber dekorativer Animation.
• Überprüfe die Textgröße auf mobilen Geräten und Desktop. Lange Beschriftungen müssen sauber umbrechen oder skalieren statt überzulaufen.

Anti-Patterns

• Verwende keine generischen generierten Muster als Standard: lila Farbverläufe, dekorative Blobs, übergroße Karten, vage Hero-Texte oder stockartige atmosphärische Medien.
• Füge keine UI-Karten innerhalb anderer Karten hinzu.
• Verwende keinen einzigen dekorativen Stil überall, wenn die Domain Zurückhaltung erfordert.
• Verstecke das primäre Produkt, Tool, Objekt oder den Workflow nicht hinter generischen Marketingabschnitten.
• Füge keine neue Abhängigkeit für eine Design-Verschönerung hinzu, es sei denn, sie zahlt sich klar aus.
• Beschreibe die Funktionen der UI nicht innerhalb der UI, wenn die Steuerelemente für sich selbst sprechen können.

Überprüfungs-Checkliste

• Der erste sichtbare Bereich kommuniziert sofort das Produkt, den Workflow oder das Objekt.
• Die visuelle Hierarchie unterstützt das Scannen und die wiederholte Nutzung.
• Die Typografie passt in den Container und überlappt keine benachbarten Inhalte.
• Farbauswahlen haben Kontrast und fallen nicht in eine eintönige Palette.
• Icons werden für vertraute Tool-Aktionen verwendet, wo verfügbar.
• Das responsive Layout hat stabile Abmessungen für Boards, Raster, Werkzeugleisten, Steuerelemente, Kacheln und Zähler.
• Assets werden gerendert und transportieren das Thema, anstatt als Füller zu wirken.
• Bewegung verbessert die Orientierung und maskiert keine Trägheit.
• Das Ergebnis entspricht den vorhandenen Frontend-Konventionen des Repositorys, es sei denn, es gibt einen klaren Grund, davon abzuweichen.