Web-Design

Was macht Web-Design?

Generierte UIs scheitern auf vorhersehbare Weise: dieselben Schriftarten, derselbe violette Gradient, Karten in Karten, ein zentrierter Hero mit drei Icon-Kacheln, Dekoration als Ersatz für eine Haltung. Dieser Skill ersetzt Vorgaben durch Entscheidungen und prüft anschließend das gerenderte Ergebnis.

<skill-dir> unten bedeutet das eigene Verzeichnis dieses Skills. Führe seine Skripte vom Projektstamm aus, sodass die Ausgabe im Projekt landet, nicht im installierten Skill.

1. Designkontext laden oder erstellen

Suche nach DESIGN.md (auch docs/DESIGN.md, BRAND.md). Wenn sie existiert, lies sie, bevor du die UI berührst; ihre Tokens und Regeln haben Vorrang vor deinem Geschmack. Wenn sie nicht existiert und die Arbeit mehr als eine kleine Korrektur ist, erstelle eine aus der Vorlage, indem du den Code liest: echte Tokens aus der CSS/Tailwind-Konfiguration, echte Schriftarten, echte Komponenten. Markiere alles, was du abgeleitet hast, als abgeleitet.

Aktualisiere DESIGN.md, wenn eine Sitzung eine dauerhafte Entscheidung trifft (ein neues Token, eine abgelehnte Richtung und warum). So vermeidet die nächste Sitzung, auf Vorgaben zurückzufallen.

2. Die Richtung festlegen

Benenne zuerst den Modus. Er legt fest, wie viel Kühnheit die Oberfläche verdient:

• Überzeugen (Landing-, Preis-, Startseiten): Das Design ist das Produkt; beziehe eine klare Position.
• Bedienen (App-UIs, Dashboards, Einstellungen, Formulare): Präzision und Zurückhaltung; vertraute Muster verdienen ihren Platz; die Marke lebt in Details.
• Lesen (Dokumentationen, Artikel, Changelogs): Struktur für Verständnis, dann gestalte das Lesen angenehm.
• Erleben (Portfolios, Showcases, Spiele): Die Arbeit führt; die Schnittstelle tritt zurück.

Verfeinerung oder Neugestaltung? Verfeinerung behält die aktuelle Identität, den Text und das Verhalten bei und verbessert innerhalb dieser Grenzen. Neugestaltung behält die Fakten und Funktionen des Produkts, ersetzt aber das gesamte Erscheinungsbild. Poliere niemals ein Aussehen, das du wegwerfen willst, indem du versuchst, den Mittelweg zu gehen.

Dann plane in zwei Durchgängen, bevor du Code schreibst.

Erster Durchgang, der Plan:

• Aufgabe: Wer ist hier, was brauchen sie zuerst, die nächste Aktion.
• Palette: Vier bis sechs benannte Hex-Werte, mit Angabe, wo die Akzentfarbe erlaubt ist.
• Schrift: Schriftarten und ihre Rollen, der Maßstab, Zahlen.
• Layout: Ein Satz und ein grobes ASCII-Layout; Ausrichtung definiert.
• Die eine kühne Sache: Das einzige einprägsame Element. Alles drumherum bleibt ruhig.

Zweiter Durchgang, der generische Test: Würdest du diesen Plan für jeden ähnlichen Auftrag erstellt haben? Überprüfe ihn anhand der aktuellen KI-Standard-Looks, die sich im Laufe der Zeit ändern. Cremefarbener Hintergrund mit einer Serifen-Schrift und einem Terrakotta-Akzent, fast schwarz mit einem säurehaltigen Akzent und Zeitungs-Haarlinien sind die heutigen Cluster, so wie es letztes Jahr violette Gradienten waren. Wenn ein Teil des Plans einem Standard entspricht, den der Auftrag nicht verlangt hat, ersetze ihn und schreibe auf, was du geändert hast und warum. Die eigenen Worte des Auftrags haben immer Vorrang, auch wenn er einen dieser Looks verlangt.

Wähle aus der Welt des Subjekts: seine Materialien, Orte, Artefakte und sein Vokabular. Die Website eines Hundesitters und das Dashboard eines Analysten sollten nicht in der Lage sein, die Paletten zu tauschen.

Wenn der Benutzer Referenzen angibt, studiere sie richtig: Referenzstudie zieht berechnete Styles aus den Live-Seiten, damit du Beziehungen (Maßstab, Rhythmus, Dichte) ausleihst, nicht Oberflächendekoration.

3. Im System des Produkts bauen

• Verwende bestehende Tokens, Primitive und Komponenten. Füge ein Token hinzu, bevor du einen einmaligen Wert verwendest.
• Nur echte Inhalte: echte Namen, lange Namen, echte Zahlen, leere Daten. Niemals Lorem Ipsum, niemals erfundene Metriken, um ein Layout zu füllen.
• Gestalte die Zustände zusammen mit dem Bildschirm: Laden, Leer, Fehler, Erfolg, Deaktiviert, Überlauf. Ein leerer Zustand, der kaputt aussieht, ist ein Fehler.
• Verstecke, was nichts zu sagen hat. Null Zeilen, Null Salden und leere Diagramme werden zu einem ehrlichen leeren Zustand oder verschwinden; keine Wände von Nullen.
• Überschriften sind Beschriftungen. Ein Untertitel, der die Überschrift neu erklärt, wird gelöscht.
• Mobil ist ein eigenes Layout: Ordne nach Priorität neu, verwende horizontale Snap-Leisten, wo der Desktop Raster verwendet, dvh/svh nicht 100vh, Eingabefelder mit 16px oder größer, Touch-Ziele 44px.

Halte die handwerkliche Qualität während des Bauens ein, nicht als letzten Schritt. Lies für jede Animation oder jeden Übergang zuerst Bewegung: ein orchestrierter Moment, ein kleines Timing-System, unterbrechungssicher, reduzierte Bewegung berücksichtigt, und betrachte es als Filmstreifen.

4. Betrachte es

node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --full          # 390 + 1440, hell + dunkel
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --widths 320,390,768,1440 --themes light
node <skill-dir>/scripts/shoot.mjs http://localhost:3000/page --click '[aria-controls=menu]' --widths 390

Öffne jeden Screenshot und lies ihn tatsächlich. Gehe dann in dieser Reihenfolge vor:

1. Erste Lektüre: Kneife die Augen zusammen. Ist das Wichtigste am prominentesten? Kannst du in drei Sekunden erkennen, was das ist und was zu tun ist?
2. Kaputt: Überlauf, abgeschnittener Text, überlappende Ebenen, gestrandete Wörter, unsichtbarer Fokus, Kontrast im dunklen Modus. shoot.mjs markiert mehrere davon; überprüfe seine Ausgabe.
3. Hierarchie und Rhythmus: Mehr Abstand über einer Überschrift als darunter; konsistente Abstände innerhalb von Gruppen, größere zwischen Gruppen; eine primäre Aktion pro Ansicht.
4. Generisch: Führe den Scan von deslop aus oder überprüfe die Anti-Patterns. Würde ein Fremder dieses Produkt anhand eines Screenshots ohne Logo erraten?
5. Handwerk: Pixelgenaue Ausrichtung bei 2x, optisches Gleichgewicht von Symbolen und Text, Tabellenzahlen in Spalten.

Behebe das schlimmste Problem, erstelle erneut einen Screenshot, wiederhole den Vorgang. Vergleiche mit Referenzen bei derselben Breite und demselben Zustand. Zwei oder drei vollständige Durchläufe sind bei neuen Arbeiten normal.

5. Abschluss

Berichte über die Screenshots und Zustände, die du überprüft hast (Breiten, Designs), die Entscheidungen, die du getroffen hast, und alles, was nicht überprüft wurde (authentifizierte Zustände, die du nicht erreichen konntest, echte Daten, die du nicht hattest). Übertrage DESIGN.md-Änderungen zusammen mit der UI.

Regeln

• Der Auftrag des Benutzers und DESIGN.md haben Vorrang vor diesem Skill. Wenn die Marke violette Gradienten ist, dann sind es violette Gradienten.
• Keine neue UI-Bibliothek, kein neues Icon-Set und keine neue Schriftart für eine lokale Änderung.
• Keine erfundenen sozialen Beweise, Testimonials, Logos, Benutzerzahlen oder „Vertrauen von“.
• Keine vorgetäuschte Lebendigkeit: keine pulsierenden „Live“-Punkte, Ticker oder Aktivitäten, es sei denn, sie werden durch echte Daten in dieser Kadenz gestützt („Updates alle 10s“, wenn das stimmt).
• Verschmelze niemals unterschiedliche Zustände (eingereicht, akzeptiert, bestätigt) zu einem einzigen Erfolgshaken.