Site-Signatur

Was macht Site-Signatur?

Du hilfst jemandem, seine persönliche Website neu zu gestalten. Das Ziel: ein erster Bildschirm, den man nirgendwo sonst sieht, und eine Seite, die auf einem kleinen Smartphone, einem Laptop, einem 21:9-Monitor und einem Fernseher gleichermaßen gut aussieht.

Dieses Skill beschreibt eine Entscheidungsmethode. Es liefert weder Vorlage, noch Farbpalette noch fertige Szene – all das entsteht aus der Person und ihrem Inhalt.

Wie entschieden wird

Vier Entscheidungen, in dieser Reihenfolge, jede von der Person bestätigt, bevor die nächste folgt.

1. Der Inhalt zuerst. Wir lesen, was die Seite bereits sagt, und erkennen, was einzigartig ist: ein Satz, eine Zahl, ein Werdegang, eine Rubrik, die andere Sites nicht haben. Der Neugestaltung gibt dem mehr Raum.
2. Eine Szene aus ihrem Leben. Ein Ort, ein Gegenstand oder ein Phänomen, das die Person genau kennt, umgesetzt als Stimmung (eine Tageszeit, Licht, Tiefe) in einem einzigen grafischen Material.
3. Ein echtes Datum in der Szene. Etwas Berechnetes oder Gemessenes, exakt im Moment des Betrachtens. Dieses Detail bringt die Besucher zurück.
4. Bereiche, niemals feste Werte. Jede Größe hat ein Minimum und ein Maximum, und die Seite reagiert auf ihre Form (schmal, breit, niedrig).

Zahlen sortieren Probleme. Screenshots, von der Person betrachtet, entscheiden.

Dateien

• references/decouverte.md: Technologie-Stapel identifizieren, die bestehende Seite vermessen, festhalten, was erhalten bleibt. Zuerst zu erledigen.
• references/scene.md: Gemeinsam mit der Person die Szene finden und konstruieren.
• references/responsive.md: Regeln für Layout und Darstellung auf allen Bildschirmen.
• scripts/check-viewports.mjs: Prüft eine URL auf zehn Bildschirmgrößen, gibt messbare Mängel und einen Screenshot pro Größe aus.

Wenn das Skill ai-patterns-audit installiert ist, lies dessen references/regles.md, bevor du Frontend-Code schreibst, und führe am Ende dessen Audit durch.

Ablauf

1. Entdecken: Technologie-Stapel, Repository-Struktur, Entwicklungs- und Deployment-Befehle, bestehende Funktionen, die erhalten bleiben sollen (references/decouverte.md).
2. Vermessen, bevor du etwas änderst: Starte das Skript auf der Live-Seite oder dem lokalen Server und behalte die Screenshots als Ausgangspunkt. Fasse der Person zusammen, was schon gut ist und was die Seite bremst – mit Messwerten untermauert.
3. Die Szene finden: Stelle die Fragen aus references/scene.md, eine pro Nachricht. Schlage dann drei Ansätze vor, jeder zwei Sätze lang. Kein Code vor ihrer Wahl. Wenn die Seite bereits eine eigene Szene hat, behalte sie: Prüfe sie anhand der vier Bedingungen und der Zeichenregeln derselben Datei und korrigiere nur, was fehlt (Portrait-Zuschnitt, echtes Datum, Pause außerhalb des Bildschirms).
4. Den Bildschirm bauen: Die Szene im Vollbild, der Name, zwei Sätze, die Links. Der restliche Inhalt beginnt unter dem ersten Bildschirm.
5. Den Rest der Seite Sektion für Sektion überarbeiten, mit references/responsive.md.
6. Überprüfen: Skript auf dem lokalen Server, Screenshots einzeln betrachten, dann reine Tastaturnavigation, dann reduzierte Bewegung. Zeige die Screenshots, die Person entscheidet mit eigenen Augen.

Was ohne Zustimmung nicht verändert wird

• Die Texte der Person. Wir verschieben und hierarchisieren sie; Umschreiben wird angefragt.
• Die Zahlen: exakt, niemals gerundet oder aufgebläht.
• Was bereits funktioniert: Sprachen, helles und dunkles Design, Formular, Besucherzählung und deren Einwilligung, RSS-Feed, API-Routen, Suchmaschinenoptimierung.
• Der vorhandene Technologie-Stapel. Wir ändern ihn nur, wenn die Person es wünscht.

Was wir uns verbieten

• Die Szene einer anderen Seite übernehmen, selbst wenn bewundert. Ein Ansatz, der einer bekannten Referenz ähnelt, wird verworfen.
• Ein Raster identischer Karten für eine Liste von Projekten oder Artikeln. Ein Eintrag liest sich wie gesetzter Text: die Zahl oder das Jahr groß, der Titel, eine Zeile mit Konsequenz.
• Eine Etikette in Großbuchstaben mit breitem Zeilenabstand über jedem Block. Höchstens eine pro Bildschirm, wenn sie eine Information trägt.
• Derselbe Fade-In-Effekt auf jeder Sektion, ein Hover, der anhebt, ein pulsierender Glanz.
• Ein Verlauf oder dekorativer Glanz außerhalb der Szene.
• Eine schwere Abhängigkeit für die Szene. Ein 2D-Canvas oder ein kurzer Shader reichen; eine 3D-Bibliothek nur, wenn der gewählte Ansatz wirklich dreidimensional ist.
• Committen, Pushen oder Deployen, ohne dass die Person es verlangt hat.

Wann es fertig ist

• Das Skript meldet keinen horizontalen Überlauf auf den zehn Bildschirmgrößen.
• Bei 2560 und 3840 px Breite füllt die Szene den gesamten Bildschirm, und der Text behält eine lesbare Zeilenlänge.
• Bei 375 px sind Name und Slogan ohne Scrollen lesbar, auch bei geöffneten Infobannern.
• Bei prefers-reduced-motion zeigt die Szene ein vollständiges Standbild.
• Ohne JavaScript zeigt der erste Bildschirm den Namen, den Slogan und die Links.
• Ein Screenshot der reinen Szene (ohne Text) eignet sich als Hintergrundbild.
• Die Person hat die Screenshots betrachtet und erkennt ihre Website wieder.