frangkli/design-regeln

Designregeln

Wende diese an, wenn die Aufgabenstellung, die DESIGN.md des Projekts und der verwendete Design-Skill (normalerweise Impeccable) die Wahl offen lassen. Wo eine dieser Quellen spricht, hat sie Vorrang. Lies sie vor der ersten UI-Änderung und bevor du eine Kritik oder Prüfung schreibst.

Copy

• Ein Label eines Steuerelements benennt sein Ergebnis, und dasselbe Wort zieht sich durch den Ablauf: Ein „Veröffentlichen“-Button erzeugt eine „Veröffentlicht“-Bestätigung.
• Fehlertext sagt, was fehlgeschlagen ist und wie es behoben wird, in der Stimme des Produkts, ohne Entschuldigung.
• Ein Label pro Absicht in Navigation, Hero und Footer (wähle entweder „Sales kontaktieren“ oder „Sprich mit uns“, nicht beides). Ein primärer Buttonlabel passt auf eine Zeile mit drei Wörtern oder weniger.
• Überschriften und Buttons folgen der Schreibweise, die das Projekt bereits verwendet; ein neues Projekt verwendet Satzgefüge (erster Buchstabe groß, Rest klein).
• Ein Register pro Seite: Hype und knappe Produktbeschreibungen teilen sich keinen Bildschirm.
• Geschwungene Anführungszeichen und Apostrophe, eine echte Auslassung (…), keine Gedankenstriche (verwende Punkt, Komma oder Doppelpunkt), maximal ein Mittelpunkt pro Zeile.
• Testimonials haben drei Zeilen oder weniger und enthalten den Namen und die Rolle der Person.
• Vor der Übergabe lies jeden sichtbaren Text auf der gerenderten Seite einmal durch, einschließlich Alt-Text, Leerzuständen und Footer, und entferne Happy Talk: Sätze, die nur aussagen, wie gut etwas ist.

Dinge, die weggelassen werden sollten, wenn die Achse frei ist

• Palette: Ein warmer cremefarbener Hintergrund um #F4F1EA mit einem terrakottafarbenen Akzent um #D97757 (Claudes eigene Oberflächenfarben); das Premium-Consumer-Set #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714; getöntes Fast-Schwarz (#0B0B0B, #111) als Ersatz für Schwarz.
• Schrift: Ein Wort einer Überschrift hervorgehoben durch Kursiv, Gewicht oder Farbe; gesperrte Großbuchstaben-Labels; „→“ an Link- und Button-Text angehängt; Labels aufgebaut als „WORT — Fragment“.
• Chrome: Versions-Tags im Hero (V0.6, BETA) oder ein Versions-Footer; Scroll-Down-Hinweise; Orts-, Uhrzeit- oder Wetterleisten; dekorative Statuspunkte oder Pills über Bildern; dekorative Bildnachweise; Slogan-Strips wie „MARKE. BEWEGUNG. RÄUMLICH.“; „Ruhig vertraut von“.
• Daten: Listen mit mehr als fünf Elementen, die als Zeilen mit oberem und unterem Strich gezeichnet werden; gefüllte Fortschrittsbalken zum Vergleich von Werten.

Überzeugungsseiten

• Hero: Überschrift mit zwei Zeilen oder weniger bei Desktop-Breite, unterstützender Text mit 20 Wörtern oder weniger, die primäre Aktion ohne Scrollen sichtbar, vier Textelemente oder weniger, oberer Abstand von 6rem oder weniger und nichts unter den Aktions-Buttons (kein Tagline, Vertrauensstreifen oder Preis-Teaser).
• Setze die Überschrift in einen breiten Container mit fließender Größe (ungefähr clamp(3rem, 5vw, 5.5rem)), sodass sie bei jeder Breite zwei bis drei Zeilen hält.
• Navigation sitzt auf einer Zeile, 64–72px hoch, niemals über 80px.
• Maximal ein Marquee pro Seite und maximal zwei abwechselnde Bild/Text-Aufteilungen hintereinander.
• Ein Bento-Raster mit N Elementen hat genau N Zellen und keine leeren; bei dichter Packung überprüfe, ob die Spannen an jedem Breakpoint ineinandergreifen.
• Benenne das eine, was ein Besucher nach dem ersten Blick behalten sollte, und sorge, dass spätere Entscheidungen ihm dienen.

Komponenten und Details

• Verschachtelte abgerundete Ecken: Innenradius = Außenradius − der Abstand dazwischen.
• In einer Reihe von Karten pinne die Aktion jeder Karte an ihren unteren Rand, sodass die Buttons auf einer Höhe sind; Preis-Feature-Listen beginnen in jeder Spalte auf derselben Höhe.
• Kursiver Anzeigesatz mit Unterlängen erhält line-height: 1.1 oder mehr plus etwas unteren Abstand, damit nichts abgeschnitten wird.
• Absätze des Fließtextes verwenden text-wrap: pretty, damit kein Absatz auf einem einzelnen Wort endet.
• Besuchte Links sehen anders aus, wo Leute zu Inhalten zurückkehren (Dokumentation, Artikellisten). Keine href="#"-Platzhalter werden ausgeliefert.
• Eine einklappbare Seitenleiste ist 56–72px breit, behält ihre Labels im DOM, hat 44×44px Ziele, setzt aria-expanded auf den Toggle und inert auf ausgeblendete Inhalte.
• Abschnitte in voller Höhe verwenden dvh oder svh, niemals 100vh.
• Kein horizontales Scrollen bei keiner Breite. Überlauf von animierten oder versetzten Elementen mit overflow-x: clip abschneiden; hidden bricht Sticky-Positionierung.
• Scrollgebundene Effekte laufen mit CSS-Scroll-gesteuerten Animationen oder einem IntersectionObserver, nicht mit Framework-State, der pro Scroll-Ereignis oder pro Frame geschrieben wird.
• Das Viewport-Meta erlaubt Zoom (kein user-scalable=no, kein maximum-scale=1). Transitionen benennen ihre Eigenschaften statt transition: all.
• Eine öffentliche Seite liefert einen Skip-to-Content-Link, eine benutzerdefinierte 404, ein Favicon, Titel, Meta-Beschreibung und Open-Graph-Tags sowie rechtliche Links im Footer.
• Halte die CSS-Spezifität flach und überprüfe, dass Bereichsregeln (.section) und Komponentenregeln (.cta) sich nicht gegenseitig Padding oder Margin aufheben.

Dark Mode

• color-scheme: dark auf dem Root, damit Formularsteuerelemente und Scrollleisten dem Thema folgen.
• Fließtext ist Off-White (etwa #E0E0E0, aus der Palette getönt), nicht reines Weiß.
• Akzente verlieren 10–20% Sättigung gegenüber ihren Hellthema-Werten.

Kritik und Prüfung

Melde diese als Erkenntnisse innerhalb der Kritik- oder Prüfungsstruktur des Design-Skills; sie fügen keine neuen Berichtsabschnitte hinzu.

• Trunk-Test, pro Seite: Könnte ein Erstbesucher sagen, welche Seite das ist, auf welcher Seite er sich befindet, was die Hauptbereiche sind, welche Optionen er hier hat, wo er in der Struktur ist und wie er suchen kann? Drei oder weniger klare Antworten sind ein Befund mit hohem Schweregrad.
• Goodwill: Beginne bei 70. Ziehe 15 ab für versteckte Preise oder Kontaktdaten oder eine erzwungene Tour; 10 für bestrafende Eingabeformate (Ablehnung von Leerzeichen in einer Kartennummer) oder das Anfordern von Informationen, die die Aufgabe nicht benötigt; 5 pro mehrdeutiger Wahl. Melde den Punktestand mit jedem Abzug.
• Erster Blick: Nenne die ersten drei Dinge, auf die das Auge fällt, und ob es die drei sind, die zählen.
• Happy Talk: Melde die Wortanzahl der Seite und den Anteil, der Happy Talk ist.

Redesigns

Bevor du das Aussehen einer Live-Seite ersetzt, erstelle eine SEO-Baseline (Titel, Meta-Beschreibungen, Überschriften, indexierte URLs). Behalte URL-Slugs, Navigationslabels, Formularfeldnamen und -reihenfolge, das Logo, rechtliche und Einwilligungstexte sowie Analyse-IDs bei, es sei denn, der Benutzer genehmigt eine Änderung.

Varianten, Kompositionen und Schriftarten

• Zwei Varianten sind zu ähnlich, wenn ihre Überschriften getauscht werden könnten, ohne dass es auffällt; treibe eine davon weiter.
• Um Details in einer generierten Komposition zu lesen, generiere diesen Bereich größer neu, anstatt das Board zuzuschneiden.
• Die gestapelte Screenshot-Runde deckt 375, 768 und 1440px Breite ab.
• Behebe eine gebaute Seite mit gezielten Bearbeitungen an den Teilen, die fehlschlagen; generiere ganze Dateien nur bei einem Neubau neu.
• Bestätige jede Schriftart auf ihrer offiziellen Auflistung (Google Fonts, Fontshare oder die Foundry) und nimm ihre URL von dort; markiere eine unbestätigte Schriftart als „ausstehend“, anstatt einen Namen oder eine URL zu erraten.