Skills

frontend-design: Oberflächen mit Haltung machen, nicht wie Vorlagen

Geeignet, wenn Sie eine Oberfläche neu anlegen oder überarbeiten und eine erkennbare visuelle Richtung brauchen. Bestätigen Sie zuerst Thema, Publikum und Hauptaufgabe und vermeiden Sie die übliche Generierten-Kombination aus Cremegrund und Terrakotta-Akzent.

Official source · frontend-design

Install

plan, review against the brief, build, critique

Für wen es geeignet ist

Nutzen Sie frontend-design, wenn Sie eine neue Oberfläche machen oder eine vorhandene ändern und eine bewusste, erkennbare visuelle Richtung brauchen. Es hilft Ihnen, eine ästhetische Richtung, Schriften und Entscheidungen festzulegen, die nicht wie Vorlagen-Standardwerte wirken.

Besser passt es, wenn Sie den Auftrag wie die Designleitung eines Designstudios behandeln: Der Kunde hat bereits Floskeln oder vorlagenhafte Entwürfe abgelehnt und ist bereit, für einen klaren Standpunkt zu zahlen. Sie müssen bei Farbe, Schrift und Layout in diesem Briefing Haltungsentscheidungen treffen und dürfen ästhetisches Risiko eingehen, wenn die Gründe tragen. Das Ausgangsmaterial nennt keine Agent-Produktliste und kein Installationsprogramm; verstehen Sie es nicht als Alleinstellungsmerkmal einer bestimmten Software. Die offizielle Beschreibungsseite ist

https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md

Ersten Versuch in 3 Minuten abschließen

Diese Anleitung gibt keinen Installationsbefehl. Erfinden Sie beim ersten Versuch keinen Repository-Pfad und keine Paketmanager-Anweisung. Der empfohlene Weg ist der Prozess im Ausgangsmaterial: zuerst plan, dann am Briefing prüfen, dann build, zuletzt critique.

Voraussetzung: Sie haben bereits eine Oberflächenaufgabe, auch wenn das Briefing kurz ist. Die risikoarme erste Handlung ist nur Positionierung — keinen Code ändern, keine Dateien schreiben. Stehen Produkt oder Thema im Briefing nicht klar, legen Sie zuerst ein konkretes Thema, ein Publikum und die Hauptaufgabe dieses Entwurfs fest, schreiben Sie das als Vorschlag und bestätigen Sie es mit der Person, die die Anforderung gestellt hat. Vor der Bestätigung nicht in Farbe oder ins Schreiben der Oberfläche gehen.

Erfolgssignal: In drei Sätzen können Sie sagen, für wen es ist, was es löst und was das Thema ist, und Sie ändern erst, nachdem die andere Person nickt oder klar widerspricht. Legen Sie nicht zuerst einen warmen Cremegrund nahe #F4F1EA und kombinieren Sie ihn mit kontrastreichen Serifen-Überschriften und Terrakotta-Tupfern — das Ausgangsmaterial führt das als Merkmal aktueller, sich häufender Generierten-Entwürfe.

Anwendungsfälle

Fall 1: Fehlt Produktinformation im Briefing, zuerst ausrichten, dann gestalten. Laut Ausgangsmaterial zuerst selbst ein konkretes Thema, Publikum und eine Hauptaufgabe vorschlagen, als Vorschlag behandeln und bestätigen. Fertigkriterium ist, dass diese drei Punkte bestätigt sind, nicht dass bereits eine vollständige UI-Version vorliegt. Welches Werkzeug zur Bestätigung zu nutzen ist, steht nicht da; mündlich oder schriftlich ist in Ordnung. Die Oberfläche vor der Bestätigung zu zeichnen, liegt außerhalb dieses Weges.

Fall 2: Schriftentscheidungen für ein bereits ausgerichtetes Briefing. Das Ausgangsmaterial sagt: Überschrift und Fließtext brauchen nicht je eine völlig andere Schrift; eine Familie, oder zwei, die sich klar unterscheiden. Bewusst wählen, nicht greifen nach „der Standardschrift, die jedes Projekt nutzt“. Die Kurzfassung erwähnt auch, die Zeilenlänge unter 80 Zeichen zu halten, aber der Auszug beschreibt kein Prüfverfahren für die Zeilenlänge. Fertigkriterium dieses Falls ist daher, dass Anzahl und Unterschied der Schriftfamilien festliegen, nicht dass eine Satzprüfung schon gelaufen ist. Farbe und Layout müssen weiter zu diesem Briefing passen; die übliche Kombination aus Cremegrund und Terrakotta-Akzent nicht wiederverwenden.

Nutzungsgrenzen

Der Prozess ist plan, Abgleich mit dem Briefing, build, dann critique. Zuerst Thema, Publikum und Hauptaufgabe, dann das Visuelle. Eine Schriftfamilie oder zwei; universelle Standardschriften ablehnen. Die im Ausgangsmaterial benannte Häufung generierter Entwürfe vermeiden: warmer Cremehintergrund (nahe #F4F1EA), kontrastreiche Serifen-Überschriften, Terrakotta- oder Warmton-Ton-Akzente.

Kein Installationsprogramm und keinen Pfad im Repository erfinden. Das Ausgangsmaterial nennt keine Komponentenbibliothek-Liste, keine Standardfarbtafeln-Datei und keine Client-Liste. Bevor Sie Code schreiben oder vorhandene Stile überschreiben, bestätigen Sie, dass der Vorschlag angenommen wurde. Was über diese benannte Positionierung, Schrift und Fallstricke hinausgeht, deckt diese Anleitung nicht ab. Wer nur eine fertige Vorlage anwendet, ohne für dieses Briefing zu wählen, sollte diesen Weg nicht gehen. Zuerst das Briefing ausrichten, dann begründetes ästhetisches Risiko tragen.