Frontend-Designrichtung
Nutze diese Fähigkeit, wenn die Arbeit nicht nur darin besteht, die UI funktionsfähig zu machen, sondern sie zielgerichtet, ausgefeilt und angemessen für die Produktdomäne wirken zu lassen.
Quelle: Aus altem Community-PR #1659 von linus707 geborgen.
Hinweis: ECC bindet die kanonische Anthropic frontend-design-Fähigkeit nicht erneut ein. Installiere diese von anthropics/skills, wenn du den offiziellen Upstream-Skill haben möchtest. Diese Fähigkeit ist die ECC-spezifische Bergung der Designrichtung der nützlichen lokalen Anleitung aus #1659.
Wann verwenden
- Der Benutzer bittet darum, eine Webseite, App, ein Dashboard, Artefakt, eine Komponente oder UI zu erstellen.
- Der Benutzer bittet darum, ein Interface ausgefeilter, unverwechselbarer, schöner oder weniger generisch zu gestalten.
- Die Implementierung benötigt Entscheidungen zu visueller Hierarchie, Typografie, Farbe, Bewegung, Layout und Interaktion.
- Die aktuelle UI funktioniert, wirkt aber flach, generisch, schablonenhaft oder nicht zur Zielgruppe passend.
Designrichtung
Wähle vor dem Codieren eine spezifische Richtung:
- Zweck: Welche Aufgabe erfüllt das Interface?
- Zielgruppe: Wer wiederholt diesen Workflow und was muss zuerst überflogen werden?
- Ton: utilitaristisch, redaktionell, verspielt, industriell, raffiniert, technisch, maximal, minimal, dicht, ruhig oder eine andere explizite Richtung.
- Einprägsames Detail: eine Designidee, die das Ergebnis absichtsvoll wirken lässt.
- Einschränkungen: Framework, Barrierefreiheit, Leistung, Reaktionsfähigkeit und vorhandenes Designsystem.
Passe die Richtung an die Domäne an. Ein SaaS-Betriebstool sollte in der Regel dicht, ruhig und überfliegbar sein. Ein Portfolio, eine Startseite, ein Spiel oder ein redaktionelles Stück kann ausdrucksstärker sein. Erzwinge keine Landingpage-Komposition für ein Tool, das täglich wiederholt genutzt wird.
Implementierungsleitfaden
- Erstelle 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, Gameplay, Diagrammen oder überprüfbaren Medien abhängt.
- Bevorzuge kontextbezogene Typografie und Abstände gegenüber generischen übergroßen Helden-Texten.
- Halte Paletten mehrdimensional: Vermeide eine UI, die von einer einzigen Farbfamilie dominiert wird.
- Verwende CSS-Variablen oder vorhandene Design-Tokens, damit die Richtung über Zustände hinweg kohärent bleibt.
- Entwerfe responsive Einschränkungen explizit: Raster, Seitenverhältnisse, min/max-Größen, stabile Symbolleisten und festformatierte Steuerelemente sollten sich nicht verschieben, wenn Beschriftungen oder Hover-Zustände erscheinen.
- Verwende Bewegung sparsam, aber bewusst. Bevorzuge Übergänge mit hohem Signalwert, die den Zustand verdeutlichen, gegenüber dekorativer Animation.
- Überprüfe die Textpassung auf mobilen Geräten und Desktops. Lange Beschriftungen müssen sauber umbrechen oder sich anpassen, anstatt überzulaufen.
Anti-Patterns
- Verwende nicht standardmäßig generierte Muster: lila Farbverläufe, dekorative Blobs, übergroße Karten, vage Helden-Texte oder stockähnliche atmosphärische Medien.
- Füge keine UI-Karten innerhalb anderer Karten hinzu.
- Verwende nicht überall einen einzigen dekorativen Stil, wenn die Domäne 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 Designverzierung hinzu, es sei denn, sie amortisiert sich eindeutig.
- Beschreibe nicht die Funktionen der UI innerhalb der UI, wenn die Steuerelemente für sich selbst sprechen können.
Überprüfungs-Checkliste
- Der erste Viewport kommuniziert sofort das Produkt, den Workflow oder das Objekt.
- Die visuelle Hierarchie unterstützt das Überfliegen und die wiederholte Nutzung.
- Die Typografie passt in den Container und überlappt keinen angrenzenden Inhalt.
- Farbwahl hat Kontraste und fällt nicht auf eine eintönige Palette zusammen.
- Icons werden für vertraute Tool-Aktionen verwendet, wo verfügbar.
- Das responsive Layout hat stabile Abmessungen für Boards, Raster, Symbolleisten, Steuerelemente, Kacheln und Zähler.
- Assets rendern und tragen das Thema, anstatt als Füllmaterial zu dienen.
- Bewegung verbessert die Orientierung und kaschiert keine Trägheit.
- Das Ergebnis entspricht den vorhandenen Frontend-Konventionen des Repos, es sei denn, es gibt einen klaren Grund, davon abzuweichen.