Frontend-Design

Quelle: Inhalt angepasst von Anthropics/Skills (MIT).

Diese Fähigkeit leitet die Erstellung unverwechselbarer Frontend-Schnittstellen in Produktionsqualität an, die eine generische „KI-Slop“-Ästhetik vermeiden. Implementieren Sie echten Arbeitscode mit außergewöhnlichem Augenmerk auf ästhetische Details und kreative Entscheidungen.

Der Benutzer stellt Frontend-Anforderungen bereit: eine zu erstellende Komponente, Seite, Anwendung oder Schnittstelle. Sie können Kontext zum Zweck, zur Zielgruppe oder zu technischen Einschränkungen enthalten.

Design Thinking

Verstehen Sie vor dem Codieren den Kontext und legen Sie eine mutige ästhetische Richtung fest:

• Zweck: Welches Problem löst diese Schnittstelle? Wer nutzt es?
• Ton: Wählen Sie ein Extrem: brutal minimalistisch, maximalistisches Chaos, retro-futuristisch, organisch/natürlich, luxuriös/raffiniert, verspielt/spielzeugartig, redaktionell/magaziniert, brutalistisch/roh, Art Deco/geometrisch, sanft/Pastell, industriell/utilitaristisch usw. Es stehen so viele Geschmacksrichtungen zur Auswahl. Lassen Sie sich davon inspirieren, aber entwerfen Sie eines, das der ästhetischen Richtung treu bleibt.
• Einschränkungen: Technische Anforderungen (Framework, Leistung, Zugänglichkeit).
• Differenzierung: Was macht das UNVERGESSLICH? Was ist das Einzige, woran sich jemand erinnern wird?

KRITISCH: Wählen Sie eine klare konzeptionelle Ausrichtung und setzen Sie diese präzise um. Mutiger Maximalismus und raffinierter Minimalismus funktionieren beide – der Schlüssel liegt in der Absicht, nicht in der Intensität.

Implementieren Sie dann funktionierenden Code (HTML/CSS/JS, React, Vue usw.), nämlich:

• Produktionsqualität und funktionell
• Optisch auffällig und einprägsam
• Zusammenhalt mit klarer ästhetischer Sicht
• Bis ins kleinste Detail sorgfältig verfeinert

Richtlinien zur Frontend-Ästhetik

Konzentrieren Sie sich auf:

• Typografie: Wählen Sie Schriftarten, die schön, einzigartig und interessant sind. Vermeiden Sie generische Schriftarten wie Arial und Inter. Entscheiden Sie sich stattdessen für unverwechselbare Optionen, die die Ästhetik des Frontends verbessern. unerwartete, charaktervolle Schriftartenauswahl. Kombinieren Sie eine markante Display-Schriftart mit einer raffinierten Textschrift.
• Farbe und Thema: Setzen Sie auf eine zusammenhängende Ästhetik. Verwenden Sie CSS-Variablen für Konsistenz. Dominante Farben mit scharfen Akzenten übertreffen verhaltene, gleichmäßig verteilte Farbpaletten.
• Bewegung: Verwenden Sie Animationen für Effekte und Mikrointeraktionen. Priorisieren Sie reine CSS-Lösungen für HTML. Verwenden Sie die Motion-Bibliothek für React, sofern verfügbar. Konzentrieren Sie sich auf Momente mit großer Wirkung: Ein gut orchestrierter Seitenladevorgang mit gestaffelten Enthüllungen (Animationsverzögerung) sorgt für mehr Freude als vereinzelte Mikrointeraktionen. Verwenden Sie Scroll-Trigger und Hover-Zustände, die überraschen.
• Räumliche Komposition: Unerwartete Layouts. Asymmetrie. Überlappen. Diagonaler Fluss. Rasterbrechende Elemente. Großzügiger Negativraum ODER kontrollierte Dichte.
• Hintergründe und visuelle Details: Schaffen Sie Atmosphäre und Tiefe, anstatt standardmäßig auf Volltonfarben zu setzen. Fügen Sie kontextbezogene Effekte und Texturen hinzu, die zur Gesamtästhetik passen. Wenden Sie kreative Formen wie Verlaufsnetze, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, dramatische Schatten, dekorative Ränder, benutzerdefinierte Cursor und Körnungsüberlagerungen an.

Verwenden Sie NIEMALS generische KI-generierte Ästhetiken wie überstrapazierte Schriftfamilien (Inter, Roboto, Arial, Systemschriftarten), klischeehafte Farbschemata (insbesondere violette Farbverläufe auf weißem Hintergrund), vorhersehbare Layouts und Komponentenmuster sowie ein ausgefallenes Design, dem es an kontextspezifischem Charakter mangelt.

Interpretieren Sie kreativ und treffen Sie unerwartete Entscheidungen, die den Eindruck erwecken, dass sie wirklich auf den Kontext abgestimmt sind. Kein Design sollte gleich sein. Variieren Sie zwischen hellen und dunklen Themen, verschiedenen Schriftarten und unterschiedlicher Ästhetik. Konvergieren Sie NIEMALS über Generationen hinweg bei gemeinsamen Entscheidungen (z. B. Space Grotesk).

WICHTIG: Passen Sie die Komplexität der Implementierung an die ästhetische Vision an. Maximalistische Designs erfordern aufwändigen Code mit umfangreichen Animationen und Effekten. Minimalistische oder raffinierte Designs erfordern Zurückhaltung, Präzision und sorgfältige Beachtung von Abständen, Typografie und subtilen Details. Eleganz entsteht durch die gute Umsetzung der Vision.

Denken Sie daran: Claude ist zu außergewöhnlicher kreativer Arbeit fähig. Halten Sie sich nicht zurück, sondern zeigen Sie, was wirklich geschaffen werden kann, wenn man über den Tellerrand hinausschaut und sich voll und ganz einer unverwechselbaren Vision verschrieben hat.

Ressourcendateien

LIZENZ.txt

LICENSE.txt herunterladen

Binäre Ressource

Siehe in GitHub

Siehe in GitHub