Killer Design

Was macht Killer Design?

Die Messlatte ist eine Website, die jemand lädt und denkt: "Wow" – eine, die ein Top-Studio für dieses Projekt hätte machen können. Sauber, korrekt und geschmackvoll ist die Untergrenze, nicht das Ziel. Eine Seite, die nur Fehler vermeidet, ist vergesslich. Drei Gewohnheiten bringen dich dorthin, und dieses Skill ist um sie herum aufgebaut:

1. Entscheide das Design, bevor du Code schreibst. Generische Websites entstehen, wenn nie eine Entscheidung getroffen wird. Schriftarten, Farben und Layout werden standardmäßig auf das reduziert, was jede Vorlage verwendet. Eine kurze schriftliche Richtung, die im Thema (oder in der Marke, falls vorhanden) verwurzelt ist, gibt jeder späteren Entscheidung einen Grund.
2. Design einen Wow-Moment. Gib dem ersten Bildschirm ein Herzstück, das im Konzept verwurzelt ist und jemanden innehalten lässt: eine Live-Demo, mutige Typografie, Licht, das auf den Zeiger reagiert, eine Szene, die sich beim Scrollen aufbaut. Führe es auf hohem Niveau aus und halte alles um es herum ruhig, damit es Raum hat. Siehe references/motion-and-wow.md.
3. Sieh dir das Ergebnis an. Blind geschriebenes CSS ist immer falsch: enge mobile Layouts, schwache Hierarchie, grauer Text, den niemand lesen kann, Animationen, die sich ziehen. Rendere die Seite, inklusive Motion, betrachte sie wie ein Kritiker, behebe die Probleme und sieh noch einmal hin.

Die Arbeit läuft in sechs Schritten ab: Projekt verstehen, Richtung festlegen, Inhalt schreiben, bauen, Screenshots überprüfen und beheben, dann polieren und übergeben. Neugestaltungen fügen zuerst einen Inventur-Schritt hinzu (siehe "Neugestaltung einer bestehenden Website").

1. Das Projekt verstehen

Lies, was bereits existiert, bevor du etwas fragst. Das bedeutet README, Doku, Paket- oder App-Metadaten, vorhandenen Text, Logos und Brand-Dateien, Screenshots und jede DESIGN.md. Finde heraus:

• Was es ist, in einem Satz, den ein Fremder verstehen würde.
• Wer ankommt und was sie entscheiden oder tun müssen. Nenne die einzelne primäre Aktion: installieren, vorbestellen, anmelden, Kontakt aufnehmen.
• Die Besonderheiten: echte Befehle, Zahlen, Namen, Stunden, Orte, Funktionen, Einschränkungen, Geschichte. Das ist das Rohmaterial für Text und Bilder, und spezifische Details sind es, die eine Website davon abhalten, generisch zu wirken.
• Persönlichkeit: drei Adjektive, plus eine Sache, die es nicht ist. "Präzise, ruhig, vertrauenswürdig; nicht verspielt."
• Einschränkungen: Hosting (z. B. statische GitHub Pages), alles, was bleiben muss, und vorhandene Marken-Assets.
• Dokumentierte Absicht: Was README oder Doku sagen, wofür die Seite gedacht ist, und was sie bewusst auslässt ("eine Seite, ein Button zu GitHub; die vollständige Liste lebt woanders"). Das ist eine Entscheidung, die bereits getroffen wurde. Halte dich daran und biete alles, was darüber hinausgeht, als Vorschlag in der Übergabe an, anstatt es zu bauen.
• Ob ein Markensystem existiert: ein Markenleitfaden (BRAND.md, ein Styleguide, ein Marken-Repo), Design-Tokens, eine DESIGN.md oder ein konsistenter Satz fertiger Marken-Assets (Social Cards, Banner, README-Cover, die aktuelle Website). Wenn eines existiert, funktioniert Schritt 2 anders. Siehe "Arbeiten innerhalb einer bestehenden Marke" unten.

Frage den Benutzer nur nach Dingen, die du nicht finden oder sinnvoll ableiten kannst und die das Design ändern würden. Das offensichtliche Beispiel ist, was das Produkt tatsächlich tut. Für alles andere triff eine vernünftige Entscheidung und liste deine Annahmen in der Übergabe auf. Auf eine echte Seite zu reagieren, ist für sie einfacher, als einen Fragebogen zu beantworten.

2. Die Designrichtung festlegen

Wenn das Projekt bereits ein Markensystem hat, ist seine Marke die Richtung. Springe vor zu "Arbeiten innerhalb einer bestehenden Marke" und komme für Schritt 3 zurück. Was folgt, ist für Projekte, die ein erfundenes Design benötigen.

"Sauber und modern" ist keine Richtung. Es ist das, was du bekommst, wenn keine Entscheidung getroffen wurde.

Finde das Konzept im Thema. Frage, in welcher Welt das Projekt lebt. Eine Geigenreparaturwerkstatt deutet auf Fichte und Lack, handgezeichnete Etiketten, Maßzeichnungen hin. Ein städtisches Open-Data-Portal deutet auf Verkehrsnetzpläne, Beschilderungssysteme und Fahrpläne hin. Eine Kletterhalle deutet auf Topo-Karten, Kreide und Routenschwierigkeitsgrade hin. Gehe über die erste Assoziation hinaus zu etwas Spezifischem: "Papier und Tinte" trifft auf fast alles zu, während "eine Saatgutpackung aus einem Katalog der 1950er Jahre" das nicht tut. Das Konzept sollte die Schriftart, Palette, Textur und das Layout prägen. Es sollte sich nicht in Clipart oder Wortspiele verwandeln.

Skizziere drei wirklich unterschiedliche Richtungen in ein oder zwei Zeilen, die sich im Konzept, der Schriftart, der Farbtemperatur und der Layout-Haltung unterscheiden. Wähle dann diejenige, die am besten zum Publikum und zur Persönlichkeit passt. Die erste Idee, die dir in den Sinn kommt, ist normalerweise die generischste, weshalb du drei schreibst. Überprüfe die gewählte Richtung anhand von "Was eine Website KI-gemacht aussehen lässt" am Ende dieser Datei. Wenn es auf eine der Standardpaletten plus die üblichen Abschnitte hinausläuft, treibe es weiter.

Wähle den Wow-Moment. Frage, was die interessanteste wahre Sache über das Projekt ist und wie der erste Bildschirm sie zeigen könnte, anstatt sie zu sagen. Schreibe zwei oder drei Kandidatenmomente und wähle den, der am konzeptuellsten ist und den du schön umsetzen kannst. Lies references/motion-and-wow.md für das Technikmenü und getestete Rezepte. Frage dich dann ehrlich, ob jemand, der das sieht, "Wow" oder "Schön" sagen würde. Wenn die Antwort "Schön" ist, sei mutiger: gehe größer im Maßstab, schaffe einen stärkeren Kontrast, mache den Moment lebendiger.

Schreibe die Richtung auf in DESIGN.md im Site-Root, unter Verwendung der Vorlage unten. Die Datei sorgt für Konsistenz zwischen zukünftigen Seiten und zukünftigen Sitzungen. Wenn bereits eine DESIGN.md existiert, folge und erweitere sie, anstatt ein neues Aussehen zu erfinden, es sei denn, der Benutzer hat nach einer neuen Richtung gefragt.

Bevor du Schriftart und Farbe auswählst, lies references/typography.md und references/color.md. Sie enthalten Schriftkombinationen und eine Palettenmethode, die die üblichen Standardeinstellungen vermeiden. references/layout.md behandelt Kompositionen jenseits von "Hero plus drei Karten".

# Design: <Projekt>

## Konzept
Ein oder zwei Sätze: die Welt, in der dies lebt, und das Gefühl, mit dem ein Besucher gehen soll.

## Zielgruppe und primäre Aktion
Wer ankommt, was sie wissen müssen, die eine Sache, die sie tun sollen.

## Schrift
Auszeichnung: <Familie, Stärken>, und warum. Text: <Familie, Stärken>, und warum. Mono, falls vorhanden.
Skala: Basisgröße und Verhältnis (aus scripts/scale.mjs).

## Farbe
Rolle -> Wert: bg, surface, ink, ink-muted, line, accent, on-accent, focus.
Verwendungsregeln (z. B. "Akzent nur bei der primären Aktion und aktiven Zuständen").

## Layout
Raster und Breiten, Abschnittsrhythmus, Gesamthaltung (editorial, dicht, luftig, asymmetrisch...).

## Markenzeichen
Der eine oder zwei Moves, an die sich die Leute von dieser Seite erinnern werden.

## Wow-Moment
Was jemanden auf dem ersten Bildschirm innehalten lässt und wie es funktioniert. Auch wie es ohne JS, mit reduzierter Bewegung und auf einem Telefon aussieht.

## Bilder und Textur
Was die Bilder sind und wie sie erstellt werden, angesichts der vorhandenen Assets.

## Bewegung
Was sich bewegt, wie und wie viel. Respektiert reduzierte Bewegung.

## Stimme
Wie sich der Text anhört; Wörter, die verwendet werden sollen, und Wörter, die vermieden werden sollen.

## Alternativen, die in Betracht gezogen wurden
Die anderen beiden Richtungen, jeweils eine Zeile, damit der Benutzer umlenken kann.

Wähle eine Richtung und baue sie aus. Halte nicht inne, um den Benutzer bitten zu lassen, zwischen Abstraktionen zu wählen. Liste die Alternativen in der Übergabe auf, damit sie umlenken können, sobald sie eine echte Seite gesehen haben.

3. Zuerst den Inhalt schreiben

Layout folgt dem Inhalt. Ein Design, das um Lorem Ipsum herum gezeichnet wurde, erzeugt generische Boxen, und generischer Text bringt selbst ein gutes Layout dazu, wie eine Vorlage zu wirken. Schreibe die echten Wörter, bevor du etwas anordnest:

• Überschrift: Was es ist oder was sich für den Besucher ändert, in einfachen Worten. Spezifisch schlägt clever. "Buche einen Platz in jedem öffentlichen Tennisclub in Leeds" schlägt "Dein Spiel, erhöht."

• Verwende die Besonderheiten des Projekts: echte Befehle, echte Zahlen, echte Namen, die tatsächlichen Öffnungszeiten und den Ort.

• Entferne Marketing-Standardsprache: unlock, elevate, seamless, empower, revolutionize, supercharge, effortless, cutting-edge, robust, leverage, game-changer, "take X to the next level", "in today's fast-paced world". Wenn ein Satz auf jeder Website erscheinen könnte, schreibe ihn neu.

• Vermeide sowohl KI-Satzformen als auch KI-Wörter. Achte auf:

  • jeden Abschnittsüberschrift, die auf derselben Zweitakt-Formel aufgebaut ist ("One binary. Pick how you get it.", "Get it back, as of now or as of then.");
  • "No X. No Y. Just Z.";
  • Triolen von Adjektiven;
  • ein Wortspiel in jeder Überschrift.

  Ein einfaches Etikett ("Installieren", "Einen Snapshot wiederherstellen") ist oft stärker als eine clevere Zeile, und es gibt der einen Überschrift, die tatsächlich ausgearbeitet ist, Raum, hervorzustechen.

• Button-Beschriftungen sagen, was passiert: "Lade die App herunter", "Reserviere einen Tisch", "Buche eine Reparatur", nicht "Loslegen" oder "Mehr erfahren".

• Präsentiere niemals erfundene Fakten als echt. Keine erfundenen Preise, Adressen, Öffnungszeiten, Statistiken, Testimonials, Kundenlogos oder "vertrauenswürdig für 10.000 Teams". Dies sind die eigenen Projekte des Benutzers, und erfundene Behauptungen sind eine Verbindlichkeit, die dazu neigt, versehentlich ausgeliefert zu werden. Wenn ein Abschnitt wirklich einen Fakt benötigt, den du nicht hast, füge einen sichtbaren Platzhalter ein, wie z. B. <span class="todo">[Preis]</span>, der so gestylt ist, dass er hervorsticht, und liste jeden in der Übergabe auf.

4. Bauen

Tokens zuerst. Definiere vor jeder Komponente das System als CSS-Custom-Properties am Anfang von styles.css: Farbrrollen, Schriftschritte, Raumschritte, Radien, Schatten, Textmaß und Bewegungs-Timings. Generiere die fließenden Schrift- und Raumskalen mit:

node <skill-dir>/scripts/scale.mjs --min-ratio 1.2 --max-ratio 1.333   # wähle Verhältnisse passend zur Richtung

Verwende danach Tokens anstelle von hartcodierten Zahlen. Hartcodierte Zahlen driften, und die Drift ist es, die Abstände überall leicht daneben aussehen lässt.

Die Skripte benötigen Node 20 oder neuer. Wenn node nicht im PATH ist, führe sie stattdessen mit ~/.cache/killer-skills-node/node.exe aus: Der Windows-Installer platziert Node dort, wenn es fehlt.

Schriften. Hoste sie selbst aus dem Killer-Skills-Schriftpaket, das jedes Gesicht aus references/typography.md enthält:

node <skill-dir>/scripts/fonts.mjs list                       # Familien mit ihren Stärken oder Achsen
node <skill-dir>/scripts/fonts.mjs add path/to/site "Newsreader" "IBM Plex Mono" --weights 400,600

add kopiert die Dateien und ihre Lizenzen in assets/fonts/ und schreibt assets/fonts/fonts.css. Verlinke dieses Stylesheet vor styles.css und lade nur das Gesicht vor, das der erste Bildschirm benötigt (das Skript gibt die Zeile aus). Es benötigt kein Netzwerk, und die fertige Seite fordert nichts von einem Font-Host an. Wenn das Paket nicht installiert ist oder das Gesicht nicht enthält, lade es von Google Fonts, wie in references/typography.md beschrieben.

Dateien. Für eine neue Website, sofern das Projekt nichts anderes vorgibt:

site/            (oder wo immer der Benutzer oder das Projekt es möchte)
  index.html
  styles.css
  DESIGN.md
  icon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, manifest.webmanifest
  assets/        (svg, images, fonts/)
  script.js      (der Wow-Moment und kleine Interaktionen; halte es kurz)

HTML. Verwende semantische Landmarks (header, nav, main, section mit Überschriften, footer), ein h1 und Überschriften in der richtigen Reihenfolge. Verwende <button> für Aktionen und <a> für Navigation, und gib jedem Formularfeld ein <label>. Jede Seite benötigt lang, das Viewport-Meta-Tag, einen echten <title>, eine Meta-Beschreibung, Open-Graph-Tags und ein vollständiges Favicon- und App-Icon-Set.

CSS. Modernes, reines CSS, Mobile First:

• grid und flex für Layouts, mit intrinsischen Mustern wie repeat(auto-fit, minmax(min(100%, 18rem), 1fr)).
• Fließende Tokens via clamp() und ein Lesemaß von etwa 60–70ch.
• :focus-visible-Styles, die zum Design passen. Hover-Effekte innerhalb von @media (hover: hover).
• text-wrap: balance bei Überschriften und text-wrap: pretty bei Absätzen.
• @media (prefers-reduced-motion: reduce).

JavaScript. Verwende es, wo es die Erfahrung verbessert: den Wow-Moment, Zeigereffekte, einen Theme-Switch, der überblendet, eine Live-Demo, einen mobilen Nav-Umschalter (ein <button aria-expanded>, oder <details>). Halte es Vanilla und handgeschrieben in den eigenen Dateien der Website: keine Frameworks, keine CDNs, nichts von woanders geladen, und normalerweise unter hundert Zeilen. Baue es als Verbesserung auf. Inhalte müssen ohne JS sichtbar sein. Verstecke niemals Abschnitte mit opacity: 0, während du darauf wartest, dass ein Skript sie enthüllt, denn wenn das Skript fehlschlägt, ist der Inhalt weg. Bevorzuge CSS für alles, was CSS tun kann (Eingänge, Tipp-Effekte, scrollgesteuerte Szenen).

Bewegung. Bewegung bleibt überall sonst schnell und leise: 150–250 ms Hover- und Fokus-Übergänge, kleine Eingänge. Diese Ruhe ist es, die den Wow-Moment wirken lässt. Jede Animation befindet sich innerhalb von @media (prefers-reduced-motion: no-preference) oder hinter einem matchMedia-Check, und die Version mit reduzierter Bewegung ist ein fertiges statisches Design. Rezepte und Leistungsregeln findest du in references/motion-and-wow.md.

Favicon und App-Icons. Gestalte das Favicon genauso ernst wie den Helden: Es ist das am häufigsten gesehene Stück des Designs. Bei 16px wird ein Wortmarke zu Matsch, daher benötigen die meisten Marken eine reduzierte Version für kleine Größen, wie einen fetten Buchstaben oder eine Form, auf einer Kachel, die sowohl auf hellen als auch auf dunklen Tabs lesbar ist. Lies references/favicons.md. Baue dann das Set aus einem SVG und überprüfe es:

node <skill-dir>/scripts/icons.mjs build mark.svg --out path/to/site --bg "#hex" --name "Site" --theme-color "#hex"
node <skill-dir>/scripts/icons.mjs audit path/to/site     # Vorschau-Blatt: Tabs bei 1x/2x, hell/dunkel, Startbildschirme

Visuelle Elemente ohne Stockfotos:

• Software: Baue die tatsächliche Oberfläche des Produkts in HTML und CSS, wie z. B. eine gestylte Terminal-Sitzung mit echten Befehlen und Ausgaben oder ein App-Fenster mit realistischen Daten. Es ist überzeugender als jede Illustration und bleibt im Brand.

• Typografie als Bild: übergroße Überschriften, Ziffern, Zitate, ein Menü, das wie eine gedruckte Karte gesetzt ist.

• SVG und CSS: geometrische Formen, Diagramme, Karten, Charts, Muster, Körnungstextur (ein SVG feTurbulence-Filter bei niedriger Deckkraft), einfache Inline-Icons mit einer konsistenten Strichstärke.

• Sei vorsichtig, wenn du reale Dinge von Hand zeichnest. Essen, Menschen, Tiere, Pflanzen, Gebäude und Werkzeuge sind die Bereiche, in denen handcodiertes SVG am häufigsten scheitert. Proportionen driften, und ein Detail (eine Kerbe auf einem Brotlaib, eine Glanzlicht, eine Hand) liest sich als etwas anderes und zieht die Aufmerksamkeit aus dem falschen Grund. Eine unbeholfene Illustration schadet einer Seite mehr, als gar keine zu haben. Bevorzuge daher die Bilder, die Code macht: CSS-Muster, geometrische Abstraktionen, typografische Kompositionen, Terminal-Sessions usw.

  • Figur und Grund einen Schritt weiter: Verwandle den leeren Raum in eine texturierte Oberfläche – ein Raster, eine Karte, ein handschriftlicher Hintergrund, eine subtile lineare oder radiale Überblendung. Das macht den Raum absichtlich, ohne dass etwas Konkretes gezeichnet werden muss.

Responsive. Teste bei jeder relevanten Größe. Überprüfe die Startbildschirme auf den gängigsten Geräten, um Layoutbrüche oder unerwünschte horizontale Überläufe zu erkennen. Achte besonders auf:

• ob der erste Bildschirm auf einem Telefon noch funktioniert (der Wow-Moment muss dort wahrscheinlich vereinfacht oder aufteilt werden);
• ob Navigationslinks groß genug zum Tippen sind (mindestens 44 pt);
• ob das primäre Formular oder die Call-to-Action auf einem Telefon nicht über den unteren Bildschirmrand hinausragt.

Reduzierte Bewegung. Führe die Seite mit reduzierter Bewegung auf einem Telefon, Tablet und Desktop aus. Der anfängliche Zustand für jeden animierten Teil muss ein fertiges statisches Layout sein, nicht "verschwunden". Die check.md-Datei enthält eine Checkliste für reduzierte Bewegung.

5. Überprüfe die Screenshots und behebe Probleme

Sobald der Code für eine Seite fertig ist und {branch-name}/index.html dem Dateibaum folgt, führe das Rezensions-Skript aus:

node <skill-dir>/scripts/review.mjs path/to/site

Das Skript erstellt in path/to/site/screenshots/ für jede von drei Telefon-, drei Tablet- und drei Desktop-Bildschirmgrößen eine PNG-Datei (totale Seite und Ausschnitt des oberen Bildschirms), ein GIF, das über die Seite scrollt, ein MP4 des Scrollens (in screen-captures/), und eine review.html-Seite, die das erste Bild jeder Größe zeigt. Es dokumentiert auch die Bewegung und das Dateigewicht jeder Seite. Das Skript verwendet Playwright. Wenn Playwright nicht installiert ist, installiere es mit:

npm init playwright

oder verwende:

node <skill-dir>/node_modules/.bin/playwright install chromium

Wenn das Skript einen Fehler ausgibt, behebe ihn und führe es erneut aus.

Überprüfe dann die Screenshots und repariere das CSS, bis die Seite auf allen Bildschirmgrößen gut aussieht:

• Ist der Wow-Moment noch beeindruckend?
• Ist irgendein Text zu klein? (14 Pixel ist die minimale Schriftgröße)
• Brechen Linien an natürlichen Stellen um?
• Es gibt keine horizontalen Überläufe?
• Der erste Bildschirm ist auf einem Telefon nicht überladen?
• Die Animationen sind flüssig?
• Die Seite ist auf dem Telefon nicht träge?

Wenn du Änderungen vornimmst, erstelle die Screenshots erneut und überprüfe sie erneut.

6. Polieren und übergeben

Wenn die Seite auf allen Bildschirmgrößen fertig aussieht, schreibe die Übergabe an den Benutzer. Sie sollte enthalten:

• Einen kurzen Überblick: was die Richtung ist, was der Wow-Moment ist, was die Seite tut.
• Die DESIGN.md und ihr Inhalt (oder einen Link dazu).
• Annahmen, die du gemacht hast: "Ich habe angenommen, dass die App auf Englisch ist und ein helles Theme hat. Wenn das nicht der Fall ist, bin ich mir unsicher, ob die Farbwahl passt."
• Ausstehende Entscheidungen: "Ich habe einen Preis von 19 € pro Monat angenommen; bitte bestätige."
• Offene Fragen: "Ich habe gesehen, dass es bereits einen Blog gibt – soll ich einen Link hinzufügen?"
• Die drei anfänglichen Richtungen: "Ich habe drei Ideen skizziert: ... Die ausgewählte Richtung war ..., die Alternativen sind ..."
• Erklärung des Wow-Moments: wie er funktioniert, wie er mit reduzierter Bewegung aussieht und wie er auf einem Telefon funktioniert.
• Ein Commit, der die Änderungen zusammenfasst (wenn die Website in einem Repository lebt).

Anleitung, wie der Benutzer die Seite bereitstellt. Gib einen einzelnen Befehl zum Hochladen, z. B. git push, oder einen Befehl zum Kopieren der Dateien an einen bestimmten Ort. Wenn die Seite auf GitHub Pages lebt, sage dem Benutzer, wie er sie veröffentlichen kann.

Wenn der Wow-Moment komplex ist, gib eine kurze Anleitung, wie er angepasst werden kann (z. B. wie man die Farbe eines Lichteffekts ändert).

Überlasse dem Benutzer die Entscheidung. Frage nicht um Erlaubnis, sondern präsentiere eine fertige Seite mit Optionen zur Anpassung. "Wenn dir die Richtung gefällt, hier ist, wie du die Farbe änderst" ist besser als "Soll ich die Farbe ändern?".

Neugestaltung einer bestehenden Website

Füge einen Schritt 0 vor Schritt 1 ein, um die vorhandene Seite zu inventarisieren:

0. Inventur der bestehenden Seite

• Klone oder lade die aktuelle Seite herunter.
• Führe den Audit-Script aus: node <skill-dir>/scripts/audit.mjs path/to/site, der einen Bericht über die aktuelle Seite erstellt.
• Öffne die Seite und notiere:
  • Was funktioniert: gutes Branding, klare Hierarchie.
  • Was nicht funktioniert: kaputtes Layout, schlechte Lesbarkeit, generisches Design.
  • Was bleiben muss: das Logo, bestimmte Inhalte, das Farbschema.
  • Was sich ändern muss: alles andere.
• Notiere die Browsergröße, bei der sie bricht.
• Wenn der Benutzer keinen Zugriff auf den Quellcode hat, erstelle eine statische Kopie der Seite, um daran zu arbeiten.

Fahre dann mit Schritt 1 fort, aber mit dem Wissen, dass die existierende Seite der Ausgangspunkt ist.

Arbeiten innerhalb einer bestehenden Marke

Wenn das Projekt ein Markensystem hat, sind die Marke und ihr Leitfaden die Richtung. Verwende sie. Die Arbeit besteht darin, die Marke anzuwenden, nicht sie neu zu erfinden:

• Markenfarben und -schriften, die genau wie angegeben verwendet werden. Wenn der Leitfaden keine Web-Schriftarten enthält, wähle eine aus, die zur Typografie der Marke passt, und dokumentiere die Wahl.
• Markenlogo und -Bildsprache, die wie im Leitfaden platziert werden.
• Markenstimme, die in den kopierten Inhalt einfließt.
• Markenrichtlinien für Layout, Abstände, Hierarchie usw.

Wenn der Leitfaden keine Web-Schriftarten enthält, wähle eine aus, die zur Typografie der Marke passt, und dokumentiere die Wahl. Wenn der Benutzer kein Markensystem hat, erstelle eines: eine BRAND.md mit den Entscheidungen aus Schritt 2.

Was eine Website KI-gemacht aussehen lässt

Eine Website wirkt KI-gemacht, wenn sie eine oder mehrere dieser Eigenschaften aufweist:

• Standard-Vorlage: Hero-Bild, Überschrift mit einer Unterüberschrift, drei Vorteile, ein CTA, ein Footer. Diese Struktur ist so häufig, dass sie automatisch wie eine Vorlage aussieht.
• Standard-Farben: Blau, Blaugrau, Grau, ein bisschen Weiß. Eine der vier KI-Farbkombinationen (dunkle Marine + Grün, helle Marine + Orange, Schwarz + Weiß + Akzent, Grau + helles Grau + Akzent).
• Standard-Schriften: Inter, Lora, Playfair Display, JetBrains Mono, Fira Code. Eine Stock-Schriftkombination ist ein toter Hinweis.
• Standard-Sätze: "In der heutigen schnelllebigen Welt", "nahtlose Erfahrung", "Ihre Privatsphäre ist uns wichtig", "Datengesteuert", "KI-gestützt", "Optimieren Sie Ihren Arbeitsablauf", "Revolutionieren", "Nutzen Sie die Kraft von".
• Keine Tiefe, keinen Sinn für Material: Alles ist flach, keine Schatten, keine Textur, keine Details. Die Seite wirkt wie ein Bildschirmfoto.
• Kein Sinn für Typografie: Alle Überschriften haben die gleiche Größe, kein Rhythmus, keine Hierarchie.
• Kein Sinn für Bewegung: Alles ist statisch, keine Mikrointeraktionen, keine Scroll-Animationen.
• Kein Sinn für Inhalte: Der Inhalt ist generisch, keine Besonderheiten, keine echten Details.
• Zu viel von einer guten Sache: Eine Animation, die zu lange dauert, eine Schrift, die in der Größe zu groß ist, eine Farbe, die zu hell ist.
• Keine Designentscheidungen: Die Seite hat keine Persönlichkeit, keine Richtung, nichts Einprägsames.

Eine effektive KI-Vermeidungsstrategie besteht darin, den Code, die Inhalte und die Designentscheidungen regelmäßig anhand dieser Liste zu überprüfen.

Referenzen

Das Verzeichnis enthält Referenzen für:

• references/typography.md: Schriftarten, Paarungen, Skalen.
• references/color.md: Paletten, Kontraste, Zugänglichkeit.
• references/layout.md: Kompositionstechniken, Raster, responsive Strategien.
• references/motion-and-wow.md: Bewegungsrezepte, Wow-Moment-Techniken, Leistungsregeln.
• references/favicons.md: Favicon-Strategien, Größen, Markengestaltung.

Skripte

Das Skill enthält diese Skripte in <skill-dir>/scripts/:

• scale.mjs: Erzeugt eine fließende Schrift- und Raumskala.
• fonts.mjs: Verwalte selbst gehostete Schriftarten aus dem Killer-Skills-Paket.
• icons.mjs: Favicon- und App-Icon-Set aus einer SVG-Datei bauen und prüfen.
• review.mjs: Screenshots und Bewegungserfassung der Seite generieren.
• audit.mjs: Audit einer bestehenden Website auf Designprobleme.

Führe alle Skripte von überall mit dem <skill-dir>-Pfad aus (z. B. node <skill-dir>/scripts/scale.mjs).