Design (lean)

Die Oberfläche arbeitet in drei Modi, die als Abfolge von Gates durchlaufen werden. Jedes Gate hat eine Bestehensbedingung, die von ihm hinterlassenen Nachweise, eine Obergrenze für Wiederholungen und was im Fehlerfall passiert. Faux-Produkt-UI (Hero-Demos, Bento-Kacheln, Cursor-Durchläufe) ist die Aufgabe von design-demo, das dieses Skill für seine Regeln lädt.

Warum dieses Skill existiert. Die Standard-UI eines Modells ist der Durchschnitt aller UIs, die es gesehen hat: zentrierte Überschrift mit einem Label darüber, eine Reihe von Icon-Karten, weiche Farbverläufe, ein Radius und ein grauer Schatten auf allem. Die Absicht lebt in Prosa, aber die Codegenerierung zieht aus Mustern, daher führt das Schreiben von "warm und spezifisch" immer noch zur Vorlage. Jede Wahl wird daher auf eine schriftliche Entscheidung zurückgeführt und überprüft. Wenn ein anderes Modell bei einer ähnlichen Aufforderung im Wesentlichen den gleichen Bildschirm produzieren würde, war die Arbeit erfolglos. Das Entfernen von Schlonz ist die halbe Arbeit; ein sauberer Bildschirm, der zu jedem Produkt gehören könnte, ist die nächste Vorlage.

Was diesem Skill übergeordnet ist. (1) Eine echte Marke, ein schriftliches Pflichtenheft oder eine benannte visuelle Richtung: diese exakt befolgen, auch wenn sie etwas verlangt, das dieses Skill als Standard bezeichnet; jeden Konflikt im Bericht mit der einzeiligen Änderung auflisten, die die Regel anwenden würde. Ein Violett-zu-Blau-Verlauf, Glitzer oder Leuchten gelten als Schlonz, selbst in einem Logo, es sei denn, der Benutzer sagt, sie sind die Marke. (2) .design/system.md (oder veraltet .interface-design/system.md): zuerst lesen; diese Entscheidungen sind bereits gefallen; Abweichungen kennzeichnen. (3) Dieses Skill, für alles, was offen gelassen wurde.

Arbeitsablauf

G0 Route

In der angegebenen Reihenfolge fragen; die erste zustimmende Antwort entscheidet.

Nur Ergebnisse, keine Änderungen? → Review
Faux-Produkt-UI als Illustration? → design-demo laden
Vorhandene UI, deren Funktionen, Inhalt und Abschnittsreihenfolge erhalten bleiben müssen? → Polieren
Alles andere, einschließlich eines Redesigns, das Inhalt oder Struktur ändern kann → Bauen

Oberfläche: Seite (gelesen und gescrollt: Landingpage, Marketing, Portfolio, Event, Organisationsseite; stützt sich auf Hero, Text, Bildmaterial, Abschnittsrhythmus) oder App-Bildschirm (bearbeitet: Dashboard, Admin, Einstellungen, Tabellen, Posteingang, Werkzeuge; stützt sich auf Hierarchie, Dichte, Zustände, Token). Eine Produktseite, die ihre App zeigt, ist eine Seite; App-Fragmente darauf folgen den App-Bildschirm-Regeln.

Gate-Register

Gate	Bestehensbedingung	Hinterlassener Nachweis	Obergrenze	Bei Erreichen der Obergrenze
G1 Richtung	Namensentfernter Test bestanden; die Person bestätigt oder eine Ausnahmeregel greift	Richtungsblock	2 Explorationsrunden	Die stärkste Option nehmen, im Bericht als Annahme kennzeichnen
G2 Planprüfung	Jede Stelle, an der eine ähnliche Aufforderung das Gleiche landen würde, ist überarbeitet; `.design/decisions.md` geschrieben	decisions.md	1 Überarbeitung	Fortfahren; die verbleibenden Standardeinstellungen im Bericht auflisten
G3 Komponente	`gate.js --only <name>` besteht bei 1440 und 390, und die Komponente folgt decisions.md oder protokolliert eine Ausnahme	Eine Gate-Log-Zeile	2 Korrekturversuche pro Prüfung	Als offenes Problem mit Ursache protokollieren; nur fortfahren, wenn nichts anderes davon abhängt
G4 Seite	Vollständiger `gate.js`-Durchlauf bestanden; die vier Tests und die Bewertungscheckliste bestanden	Gate-Gesamtergebnisse, Desktop- und Telefon-Screenshots	3 Renderdurchläufe	Melden, was immer noch fehlschlägt
G5 Bericht	Jedes Feld der Berichtsvorlage ausgefüllt oder als 'keine' markiert	Der Bericht	—	—
R1 Erkenntnisse (Review)	Jede Erkenntnis hat ein Kriterium, einen Ort, eine Schwere und eine konkrete Lösung	Erkenntnisliste	—	Erkenntnisse ohne Nachweise verwerfen

Bauen durchläuft G1–G5. Polieren durchläuft G1, dann G4 und G5: seine Durchläufe betreffen den gesamten Bildschirm, daher prüft es einmal am Ende statt pro Komponente. Review durchläuft G0 und R1.

Ausnahmeregeln für die G1-Wartezeit: Die Person sagte, machen Sie es einfach; eine Marke oder ein Pflichtenheft legt die Richtung bereits fest; eine einzelne kleine Komponente innerhalb eines bestehenden Designs.

Unbeaufsichtigte Durchläufe. Wenn niemand da ist, um zu antworten (ein geplanter Durchlauf, die Person sagte, sie würde später nachsehen, oder eine Frage blieb unbeantwortet), nicht bei G1 warten. Die Richtung nehmen, sie oben im Bericht als Annahme mit der einen Zeile, die sie ändern würde, angeben und fortfahren. Bezahlte Bildgenerierung überspringen und die nächste Option in „Visuelles" verwenden. Ein Polier-Durchlauf, der keinen Schlonz findet, meldet seine vorgeschlagenen Verbesserungen, ohne sie anzuwenden. Eine spätere Umleitung sollte eine Nachricht kosten.

Beim Bauen: immer nur eine Komponente gleichzeitig bearbeiten. Sie durch das Gate prüfen, protokollieren, dann mit der nächsten beginnen. Ein Fehler wird sofort behoben, nicht für das Ende gesammelt: Probleme summieren sich.

Richtung

Absicht

Vor jeder visuellen Entscheidung antworten; als kompaktes Briefing halten.

Wer ist dieser Mensch? Die tatsächliche Person: wo sie ist, was sie vor fünf Minuten getan hat, was sie als Nächstes tun wird.
Was müssen sie erreichen? Das Verb: diese Einreichungen benoten, die kaputte Bereitstellung finden. Es entscheidet, was führt, was folgt, was sich verbirgt.
Wie soll es sich anfühlen? Wörter, die etwas bedeuten: warm wie ein Notizbuch, kalt wie ein Terminal, dicht wie ein Börsenparkett. „Sauber und modern" bedeutet nichts.

Wenn das Briefing das Subjekt nicht nennt, ein konkretes Subjekt, Publikum und primäre Aufgabe vorschlagen und bestätigen lassen; wenn der Kontext eine verantwortungsbewusste Annahme erlaubt, in einer Zeile angeben und fortfahren. Absicht ist systemisch: wenn das Gefühl warm ist, sind Oberflächen, Text, Ränder, Akzente und Schriftart alle warm. „Es ist üblich" oder „es funktioniert" ist kein Grund.

Domänenerkundung

Alle vier produzieren: Domäne (5+ Konzepte und Metaphern aus der Welt des Subjekts); Farbwelt (5+ Farben aus seiner physischen Version); Signatur (ein Element, das nur dieses Produkt haben kann, konsequent dort verwendet, wo es hingehört); Standardwerte zum Ablehnen (die drei offensichtlichen Wahlen, jede mit ihrer Alternative). Namensentfernter Test: das Angebot mit entferntem Produktnamen lesen; wenn niemand sagen könnte, wofür es ist, erneut erkunden (Obergrenze: 2 Runden).

Richtungsblock

Produkt:    [was es tut, für wen, ein Satz]
Charakter:  [2–3 konkrete Wörter, nicht sauber/modern/schlank/minimal/premium]
Welt:       [Ort oder Material, zu dem es gehört; setzt neutralen Farbton, Akzent, Bilder]
Momente:    [1–2 Stellen, die reiche Farbe und Details erhalten, aus dem Inhalt gewählt]
Signatur:   [das eine Detail, das nur dieses Produkt hat]
Abgelehnt:  [Standard → Alternative] × 3

Mit einem kleinen Muster zeigen, wenn Rendering verfügbar ist (echte Farbmuster, die Schriftgrößenskala in der echten Schriftart, die Signatur als echte Komponente), dann fragen „Fühlt sich diese Richtung richtig an?" (G1).

Standardwerte, um die sich generierte Designs gruppieren. Jeder ist für manche Briefings legitim, taucht aber unabhängig vom Subjekt auf; wo das Briefing eine Achse frei lässt, sie hier nicht verbrauchen: (1) warmer Creme nahe #F4F1EA mit einer kontrastreichen Serife und einem Terrakotta-Akzent nahe #D97757; (2) Fast-Schwarz mit einem säuregrünen oder zinnoberroten Akzent; (3) Zeitungs-Haarlinien, Radius Null, dichte Zeitungskolumnen; (4) das SaaS-Karten-Kit: identische abgerundete Karten, ein Radius, der gleiche weiche graue Schatten, Farbverlaufswaschungen; (5) Vorlagen-Chrom: gesperrte Großbuchstaben-Eyebrows, A · B · C-Meta-Strings, WORT — Fragment-Labels, getöntes Fast-Schwarz für Schwarz, Monospace-Datenlabels, → auf Buttons, violette oder indigofarbene Akzente.

Entscheidungsdatei

Nach der Richtung einmal .design/decisions.md schreiben: Paletten-Token und warum, Schriftarten und -skala und warum, Tiefenstrategie und warum, Abstands-Basis und -Dichte und warum, die Signatur und wo sie erscheint, die drei abgelehnten Standardwerte. Dies ersetzt die erneute Rechtfertigung jeder Komponente. Bei G3 ist die Bewertungsfrage eine Zeile: Folgt diese Komponente decisions.md? Wenn sie abweicht, die Ausnahme und ihren Grund in der Gate-Log-Zeile protokollieren.

Gestaltungsregeln

Mit (geprüft) markierte Regeln werden von gate.js gemessen; die G4-Checkliste deckt nur den Rest ab.

Hierarchie und Komposition

Ein Fokuspunkt pro Ansicht: nennen, wozu die Person gekommen ist, und ihn durch Größe, Kontrast, Position oder Abstand gewinnen lassen.
Gewicht und Farbe leisten mehr als Größe. Eine 14px-Größe umfasst drei Ebenen: Wert 600 primär, Label 500 sekundär, Meta 400 dezent.
Dichte ist eine Entscheidung in Pixeln, vorab gewählt und wiederholt: Tool-Panels mit 12–16 Padding fühlen sich eng an; 24 fühlen sich wie ein Prospekt an.
Ungleichmäßig atmen: eng innerhalb einer Gruppe, lockerer zwischen Gruppen.
Proportionen sprechen: eine 280px-Seitenleiste sagt, Navigation dient dem Inhalt; 360 sagt, sie sind gleichberechtigt.
Zurückhaltung: etwa 60/30/10 neutral, Sekundärton, Akzent. Kühnheit an einer Stelle einsetzen, dann ein Accessoire entfernen.

Abstände

Jeder Margin, Padding, Abstand und jede feste Höhe ist ein Vielfaches von 4 (geprüft); ein 2px-Nudge innerhalb kleiner Bedienelemente ist in Ordnung.
Gleiche Dinge sind gleich: eine Zeilenhöhe und ein Abstand pro Liste, ein Padding pro Kartensatz; symmetrisches Padding, es sei denn, der Inhalt erfordert etwas anderes.
Dinge sind ausgerichtet: Symbole in einer Spalte, Labels auf einer Grundlinie, Zahlen rechtsbündig.
Seiten: Abschnitte 80–128 auseinander auf Desktop, deutlich mehr als jeder Abstand innerhalb eines Abschnitts. Apps: Seiten-Padding 24–32.

Farbe

Eine neutrale Rampe, die zur Welt hin abgetönt ist, für Hintergrund, Oberflächen, Rahmen und Text; ein Farbton über Oberflächen hinweg, der nur die Helligkeit ändert. In Apps bleiben Oberflächen nahezu neutral und der Inhalt trägt die Farbe.
Vier Textrollen: primär, sekundär, dezent, deaktiviert.
Ein Akzent im Chrom, selten verwendet: die primäre Aktion, Auswahl, die eine Zahl, die zählt. Innerhalb der gewählten Momente kann Farbe reichhaltig sein, wenn jede Farbe etwas bedeutet. Eine echte Markenfarbe wird zum Akzent und verlässt die Oberflächen.
Kontrast 4,5:1 für Fließtext und Akzent-mit-Text, 3:1 für großen Text (geprüft).
Semantische Farben tragen nur Bedeutung, auf die Palette abgestimmt, auf Dunkel leicht entsättigt. Laufender Text in voller Deckkraft.
Farben stammen aus Token, niemals aus Rohwerten in Komponenten-CSS (geprüft).
Keine Farb-zu-Farb-Verläufe auf Oberflächen, Verlaufstext, farbige Leuchteffekte oder Schatten, radiale Waschungen, Blobs oder Neonränder. Ein Farbverlauf ist nur als Tonverschiebung innerhalb eines Neutraltons oder als neutraler Schleier unter Text auf einem Foto erlaubt.

Oberflächen, Rahmen und Tiefe

Eine Tiefenstrategie: nur Rahmen (technisch, dicht), subtile Schatten (zugänglich), geschichtete Schatten (premium) oder Oberflächentonverschiebungen.
Erhebung ist dezent. Hell: jeder Schritt ein paar Punkte Helligkeit (Seite → Karte → angehoben) plus Haarlinien. Hell: Ruhezustand 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05), schwebend 0 8px 24px rgba(0,0,0,.06). Dunkle Anhebung: 0 0 0 1px rgba(255,255,255,.08).
Haarlinien: Primäre Textfarbe bei 6–10% Deckkraft (12% auf Dunkel), in einer kleinen Progression: Trennlinie, Standard, Betonung, Fokusring.
Seitenleiste: gleich wie die Seite oder bei Dunkel eine Stufe tiefer, getrennt durch eine Haarlinie, niemals ein anderer Farbton. Popover eine Ebene über ihrem Elternelement. Eingabefelder etwas dunkler als ihre Umgebung.

Typografie

Die Schriftart trägt die Persönlichkeit. Eine Schriftfamilie ist normal, zwei das Limit und klar unterscheidbar; eine Display-Schrift nur für große Überschriften. Eine echte Markenschriftart bleibt.
Ein Verhältnis schrittweise: etwa 1.2 dichte UI, 1.25 die meisten Produkt-UIs, 1.333 ausdrucksstarke Seiten. Maximal fünf Größen pro Seite.
Strichstärken 400 und 500; 600 für Zahlen und seltene Betonung; 700–900 nur, wenn eine Markenvorgabe dies sagt.
Satzfall überall; keine Großbuchstaben gesperrten Labels, keine kursiven Betonungen, kein einzelnes Überschriftwort, das durch Kursiv, Fett oder Farbe hervorgehoben ist.
Buchstabenabstand 0 unter 16px, etwa −0.02em ab 40px, −0.03em ab 56px. Zeilenabstand etwa 1.5, Serifen-Fließtext etwas mehr. Zeilenlänge 45–75 Zeichen.
Zahlen: Tabellenziffern (geprüft), ein Format durchgängig.
text-wrap: balance auf Überschriften, pretty auf Fließtext; -webkit-font-smoothing: antialiased auf dem Root-Element.

Symbole

Als Symbole oder Dekoration verwendete Emojis werden zu Liniensymbolen aus einem Satz (projekteigen, sonst Lucide), 16 oder 18px, Strichstärke 1.5, in der Farbe ihrer Textrolle, gleiche Boxbreite pro Zeile, 8–10px vom Label entfernt. Symbole verwerfen, die nichts hinzufügen; eine Kategorie, die Farbe benötigt, erhält einen Statuspunkt.

Text

Aus der Perspektive der Person schreiben (sie verwaltet Benachrichtigungen, nicht Webhook-Konfiguration); beschreiben, nicht verkaufen.
Überschriften sagen, was das Produkt für wen tut, unter Verwendung von Fakten auf der Seite. Wenn der Name eines Mitbewerbers noch passt, umschreiben.
Buttons sagen, was passiert („Änderungen speichern"); eine Aktion behält ihren Namen durch den Ablauf („Veröffentlichen" → „Veröffentlicht").
Fehler sagen, was passiert ist und wie es zu beheben ist, ohne Entschuldigung. Leere Zustände laden zur nächsten Aktion ein.
Aktive Stimme, einfache Verben; keine Ausrufezeichen, Begrüßungsüberschriften, Hype-Wörter (supercharge, nahtlos, entfesseln, magisch, game-changing) oder überall KI-gestützt. Kurze Labels („Suche"). Eine Änderung nennt ihren Vergleich („+12% vs. letzten Monat"). Kein abschließender Punkt auf Überschriften, Labels, Buttons oder Toasts.
Niemals Beweise erfinden: keine Kunden, Zitate, Bewertungen, Logos oder Statistiken. Beispielinhalte, wo das Briefing Lücken lässt, sind in Ordnung und gehen zur Bestätigung in den Bericht.

Struktur bedeutet etwas

Umrisse, Rahmen, Nummerierungen, Augenbrauen und Trennlinien kodieren Informationen. 01 / 02 / 03 nur für eine echte Sequenz. Abzeichen wie PRO, Neu ✨ entfernen, es sei denn, sie tragen Bedeutung; dann werden sie zu dezentem Text. Zählungen und Meta sind dezenter Text, keine Pillen.

Layout: Seiten

Der Hero beginnt mit dem charakteristischsten Element in der Welt des Subjekts, in seiner am besten passenden Form. Eine große Zahl mit einem kleinen Label und einem Farbverlauf nur, wenn es wirklich das Beste ist.
Der erste Bildschirm beantwortet die erste Frage des Besuchers in großer Schrift, trägt die h1, eine primäre Aktion und höchstens eine sekundäre.
Stärkste Hero-Varianten: ein Szenenbild randlos mit der Überschrift auf seinem ruhigen Teil, oder eine asymmetrische Aufteilung mit dem Bildmaterial auf mindestens der Hälfte. Zentrierte Stapel nur für kurze Heroes ohne Bildmaterial.
Navigation: Wortmarke, die vorhandenen Links, ein Button; Anmelden als Textlink. Keine schwebenden Pillen oder Glas.
Jeder Abschnitt: eine Überschrift, eine andere Komposition als seine Nachbarn, sein voller Inhalt. Keine toten Zonen. Der Footer ist ein gestalteter Abschluss, keine Sitemap.
Kleine Bildschirme: in Lesereihenfolge stapeln und neu zusammensetzen; kein Text unter 11px; kein horizontales Scrollen (geprüft).

Layout: App-Bildschirme

Echte Proportionen: Shell füllt den Viewport, Seitenleiste 240–280, Inhalt fließend und auf maximal 1440–1600 begrenzt, obere Leiste 56–64. Niemals eine schmale zentrierte Spalte.
Größen variieren: kompakte Statistiken über einem breiten Diagramm, niemals eine Reihe identischer Karten. Das Hauptdiagramm nimmt mindestens zwei Drittel der Breite und 280–360 Höhe ein.
Statistik-Karten: Label, Zahl, Änderung mit ihrem Vergleich; keine Füll-Sparklines oder Symbole; keine Zahl, die woanders wiederholt wird.
Daten wählen: die Zahl, die die Person als nächstes wissen muss, in ihrer aussagekräftigsten Form.
Ellbogenfreiheit: eine Aktion pro Ansicht, eine sekundäre Aktion oben rechts; der Rest in einem Menü mit drei Punkten.
Eine Tabelle auf einmal auf dem Bildschirm, mit allen benötigten Spalten; Überlauf scrollen und den Überlaufhinweis schreiben (ein Spaltenname sagt dem Kopf, dass er horizontal gescrollt werden muss).
Leere Zustände beschreiben, warum die Seite leer ist, und die primäre Aktion wiederholen, die sie füllt.
Schmale Modi: Layout neu anordnen (Seitenleiste zu unterem Tab, seitliches Panel zu übereinander); zweispaltig aufhören, nicht einspaltig.

Oberflächen und Zustände

Ein Formular hat genau eine primäre Aktion. Ein abgesetzter Button an letzter Stelle, keine visuelle Haken-Button-Reihe. Das primäre Eingabefeld fokussiert beim Laden.
Dropdowns, Datumswähler, Farbwähler sind native Browser-Widgets, es sei denn, der Browser des Benutzers ist gezielt targetiert (geprüft).
Hover-Zustände auf allen interaktiven Elementen. Ein Button hat Hover, Fokus, aktiv, deaktiviert, und wartend. Ein deaktivierter Button hat einen Grund: den Zustand erklären, wenn man mit der Maus darüber fährt.
Tastaturfokus: ein fokussierter Button hat einen anderen Rahmen als ein Hover; niemals nur auf Farbe verlassen.
Reibungslose Übergänge: Zustandsänderungen werden mit der Farbe, nicht der Zeit, getroffen; ein sanfter Übergang trainiert das Auge.

Bilder

Hochwertige, rechteckige Fotos ohne Rahmen oder Schatten, randlos, nie in einer Karte. Ein Bild pro Abschnitt, es sei denn, die Komposition verlangt mehr. Fotos sind keine Links.
Illustrationen folgen den Farbpaletten-Token, niemals Photorealismus. Ein Stil pro Projekt: Liniengrafik, monochromatisch mit einem Akzent, oder gefüllt flach.
Wenn das Briefing keine Bilder erwähnt, konkrete Bildideen im Bericht vorschlagen und kurz beschreiben. Niemals Platzhalter-Bilder oder KI-generierte Personen.

Animation

Feine, leichte Übergänge: Opazität auf 100–200ms, Transformation auf 200–300ms, Brett auf 350ms. Keine wiederholten Schleifen, Eingangs- oder Parallax-Effekte ohne Benutzerinteraktion oder Sichtbarkeitsauslöser. Scrollbasierte Animation von Inhalt in Sichtweite ist in Ordnung.

Ausgabe

HTML + CSS, als einzelne Datei, mit <style> im <head>, alles mit einem <link> im <head>, keine <script>: letzterer wird von gate.js hinzugefügt. Inline-SVG ist in Ordnung. Das Raster ist Flexbox, Grid oder beides; keine Frameworks (Tailwind, Bootstrap, Chakra, MUI) und kein @import.

Immer einen <title> und eine Meta-Beschreibung setzen. Den Viewport <meta> Tag auf width=device-width, initial-scale=1 setzen.

Gate-Prüfungen

gate.js prüft: Farbe — Abstandsvielfache — Fließtext-Kontrast — Schriftarten — Tabellenziffern — horizontales Scrollen — native Widgets — CSS-Token. Diese sind streng: ein Fehler bedeutet, dass die Seite nicht durch das Gate kommt.

Die Abstandsprüfung hat zwei Modi: locker (Multiplikator der Seiten-Padding-Basis, Standard 8) für Polieren; präzise (Rest 0 nach Division durch 4, aber 2px erlaubt) für Bauen.

Bewertungs-Checkliste (G4)

Wenn nicht bestanden, auf eine Zeile reduzieren.

Gehört diese Seite zu einem anderen Produkt, wenn der Name fehlt? → G1 erneut prüfen.
Folgt sie der Richtung und den Entscheidungen? → decisions.md lesen. – Sind der Charakter/Welt/Momente lesbar, ohne sie zu erklären? → Eine Zeile, wo die Richtung nicht durchkommt.
Ist die Hierarchie unbestreitbar: der Fokus gewinnt? → Den zweiten Fokus (der keine ist) benennen.
Abstände + Ausrichtung gleichmäßig? → Eine Inkonsistenz melden.
Ist die Farbnutzung diszipliniert? → Einen überflüssigen Akzent benennen.
Ist die Schriftwahl begründet? → Nur wenn ein Wechsel den Charakter unterstützen würde.
Ist es auf Mobilgeräten nutzbar? → Ein Problem unter 390px.
Ist der Bericht vollständig? → Fehlende Felder auflisten.

Berichtsvorlage

## Routenentscheidung

[Based on user request and G0 questions, the selected mode and surface are:]
Route:      [Build | Polish | Review | design-demo loaded]
Surface:    [page | app screen]
Mode:       [attended | unattended]

## G1 Richtungsprüfung

### Absicht
Who:        [the actual person and what they just did]
Verb:       [what they must accomplish]
Feel:       [real words from the brief or the direction block]
Proposed subject: [if the brief left it open]

### Domänenerkundung
Domain:     [5+ concepts/metaphors]
Color world: [5+ real colors]
Signature:  [one unique element]
Defaults to reject: [default → alternative] × 3

### Richtung bestätigt?
[Yes / No / Assumed, with a one-line change that would reverse it]

## G2 Planprüfung

### decisions.md geschrieben und angewendet
[Yes, or No – list skipped rules here]

### Entscheidungen (aus decisions.md)
Palette tokens and why:
Type faces and scale and why:
Depth strategy and why:
Spacing base and density and why:
Signature placement:
Rejected defaults:

### Verbleibende Standardeinstellungen
[If any, list each with its location and the one-line fix]

## G3 Komponentenprüfung

| # | Component | gate.js | Follows decisions.md? | Exception reason |
|---|-----------|---------|----------------------|------------------|
| 1 | ...       | pass/fail | yes/no              | (if no, why)    |

**Gesamtzahl geöffneter Probleme:** X

## G4 Seitenprüfung

| Prüfung | Ergebnis |
|---------|----------|
| Farbe   | pass/fail |
| Abstände | pass/fail |
| Kontrast | pass/fail |
| Schriften | pass/fail |
| Tabellenziffern | pass/fail |
| Horizontales Scrollen | pass/fail |
| Native Widgets | pass/fail |
| CSS-Token | pass/fail |

### Screenshots
…

### Bewertungs-Checkliste
[Each item: pass, or one line describing the remaining issue]

## G5 Offene Elemente

| Element | Grund | Ort | Behebung |
|---------|-------|------|----------|
| …       | …     | …    | …        |

## Anhänge

### Bildspezifikation
[If the brief left imagery open: concrete subject, style, source, one reason]

### Annahmen
[One line each: what was assumed, what would change it]

### R1 Erkenntnisse (nur Review-Modus)
| # | Kriterium | Ort | Schwere | Lösung |
|---|-----------|------|----------|--------|
| … | …         | …    | …        | …      |

Visuelles

Wenn eine Illustration oder ein Foto benötigt wird, ein konkretes Subjekt, Stil und Quelle vorschlagen. Keine KI-generierten Personen, keinen Unsinn über das KI-Bild hinaus. Platzhalter nur als einfarbiger Kasten mit einer Beschriftung, die den Inhalt benennt, in einem der neutralen Töne der Palette.

Wenn eine Lizenz für Bilder benötigt wird, sind die Quellen in der Reihenfolge: Unsplash, Pexels, ein projekteigener Satz; niemals ein Bild, das Menschen markiert oder autorisiert. Preise zahlen, wenn das Briefing es verlangt.

Wenn Szenenbilder benötigt werden: eine Sache, nah, in einer Umgebung, die nicht ablenkt. Ein Mensch, der den Bildschirm des Produkts ansieht, aber nicht lächelt oder zeigt. Keine Anordnungen von Personen, keine Unternehmensfotos.

Aufträge

Wenn nicht anders angegeben, verwende Inter für die Schriftart auf dem Bildschirm. Wähle eine, nicht mehr. Keine Schriftart mit Adjektiv (Inter Bold).

Konfiguration für gate.js: makegate.js --config {"mode":"build"} oder {"mode":"polish"}.

Standard gate.js-Standort: projektstamm/gate.js. Wenn nicht gefunden, führe die Prüfungen manuell durch und melde die Ergebnisse im Bericht.

Hier endet der Text des Skills design-lean.

In Ihrer bevorzugten KI fragen

Dokumentation