Was macht Ersteller von Premium-Landingpages?
Sie erstellen Landingpages, die einer Bewertung durch einen Senior-Designer standhalten. Die Messlatte ist nicht „es funktioniert und sieht gut aus“. Die Messlatte ist, dass die Seite von einem echten Produktteam zu sein scheint, dem die Qualität am Herzen liegt.
Diese Datei ist die Methode: die Regeln, die alle anderen außer Kraft setzen, die 11 Tore des Prozesses und die Lieferung. Die technischen Details jedes Tores finden Sie in references/. Folgen Sie der Reihenfolge.
Verwendung dieser Skill
Laden Sie nur das, was das jeweilige Tor verlangt. Jedes Tor unten endet mit einer Zeile Lesen Sie, die auf die Referenzdatei für diesen Moment verweist. Öffnen Sie nicht alle Referenzen auf einmal: Sie summieren sich auf fast 4.000 Zeilen, und was in jedem Schritt wichtig ist, passt in ein oder zwei Dateien.
Die Nummerierung ist in allen Dateien identisch. Wenn ein Text „siehe 10.4“ oder „Abschnitt 12.7“ sagt, suchen Sie in der Karte am Ende dieser Datei, welche Referenz diesen Abschnitt enthält. Die Abschnitte 0, 1, 3 und 19 befinden sich hier; die anderen in references/.
Die Skripte übernehmen die schwere Prüfung. Führen Sie sie aus, anstatt sie neu zu schreiben:
| Skript | Wofür | Erfordert |
|---|---|---|
scripts/contraste.py | Misst die Kontrastpaare der Tokens vor der Anwendung (Tor 4) | Python 3.8+ |
scripts/checar-texto.py | Anti-Schludrigkeits-Prüfung, Schaltflächen und Textrhythmus (Tore 2 und 10) | Python 3.8+ |
scripts/auditar-responsivo.mjs | Audit über Breiten von 320 bis 1920 px, mit 200% Zoom und reduzierter Bewegung (Tor 9) | Node 18+ und Playwright |
Die Pfade sind relativ zum Ordner dieser Skill. Wenn die Umgebung die Ausführung eines Skripts nicht zulässt (z. B. kein Browser für Playwright), teilen Sie dem Benutzer mit, welche Prüfung ausstehend ist, und geben Sie den genauen Befehl an, den er auf seinem Rechner ausführen soll. Deklarieren Sie niemals eine Prüfung, die nicht durchgeführt wurde.
Die Codebeispiele sind in reinem HTML, CSS und JavaScript. In React, Next.js, Astro, Tailwind, Webflow oder einem anderen Builder übersetzen Sie, während Sie die Token-Namen, Zustände und Regeln beibehalten.
0. Vor jedem Pixel
Vier Regeln, die alle anderen außer Kraft setzen, wenn sie verletzt werden:
- Kein Pixel ohne abgeschlossenes Briefing (Tor 1). Der Großteil der Nacharbeit entsteht, wenn man zu zeichnen beginnt, bevor man weiß, was man zeichnet.
- Kein Wert basierend auf visuellem Eindruck. Jedes Maß von Typografie, Farbe, Abstand und Dauer stammt von einem Token, einer Messung oder einer Tabelle. Niemals von „sieht gut aus“.
- Mach das, was verlangt wurde, nichts darüber hinaus. Wenn Sie eine bessere Idee haben, setzen Sie die Anforderung um und bieten Sie die Idee separat an. Ein selbst hinzugefügter Extra-Effekt ist garantierte Nacharbeit.
- Übernehmen Sie niemals die Identität eines anderen Projekts. Jede Seite entsteht aus der Marke ihres Projekts. Das Kopieren einer Palette, Typografie oder visuellen Signatur eines Beispiels erzeugt genau die generische Seite, die Abschnitt 1 verbietet.
0.1 Was Methode und was Identität ist
Dies ist die wichtigste Unterscheidung des Dokuments. Die Methode ändert sich nicht. Die Identität ändert sich in jedem Projekt.
| Invariante: immer verwenden | Variable: vom Projekt erfassen |
|---|---|
| Der 11-Tore-Prozess | Palette und die Rolle jeder Farbe |
| Die Token-Struktur, d. h. die Namen | Die Werte der Tokens |
Fließende Skala mit clamp() und Einheit in rem | Schriftfamilien und das Skalenverhältnis |
Rasterregel, 8-Px-Basis, minmax(0,1fr) | Containerbreite und Dichte |
| Geschichteter Schatten, mit einer Obergrenze von zwei Tokens | Farbton und Intensität des Schattens |
| Bewegungsvokabular: eine Kurve, zwei Bereiche | Bewegungsintensität und Hover-Signatur |
| Eigenes visuelles Material, niemals von einer Datenbank | Welche Materialtechnik zur Marke passt |
| Barrierefreiheit WCAG 2.2 AA und das QA der Abschnitte 12 und 16 | Nichts. Dies ist nicht verhandelbar |
| Die Anti-Schludrigkeits-Regeln aus Abschnitt 1 | Nichts. Dies ist nicht verhandelbar |
Jeder konkrete Wert in diesem Dokument ist ein Beispiel für die Befüllung, kein zu kopierender Standard. Die Beispiele stammen aus einem bereits validierten realen Projekt und dienen dazu, das erwartete Maß an Genauigkeit zu zeigen, nicht das zu reproduzierende Erscheinungsbild. Eine Modemarke, eine Bank und ein Spielestudio füllen dieselben Felder mit völlig unterschiedlichen Werten und erreichen dasselbe Qualitätsniveau.
Wenn zwei mit dieser Skill erstellte Seiten wie Schwestern aussehen, wurde die Skill falsch verwendet.
1. Grundregel: Null KI-Schludrigkeit
„KI-Schludrigkeit“ ist die Menge von Merkmalen, die kritiklosen generierten Inhalt verraten. Eine Seite kann technisch korrekt sein und dennoch aus diesem Grund abgelehnt werden. Dieser Abschnitt hat Vorrang vor jeder anderen ästhetischen Entscheidung.
1.1 Visuelle Schludrigkeit: verboten
| Verboten | Warum | Was tun |
|---|---|---|
| Lila oder Indigo-zu-Blau-Verlauf | Visuelle Signatur einer KI-Vorlage | Von der Marke abgeleitete Palette mit definierter Rolle pro Farbe |
| Glassmorphismus überall | Effekt ohne Funktion angewendet | Unschärfe nur bei schwebender Navigation und Überlagerung |
| Roboter-, Gehirn-, Schaltkreis-, Hologramm-, Chip-Symbol | KI-Klischee | Symbol des realen Objekts der Domäne (Termin, Nachricht, Diagramm) |
| Stockfoto | Generisch und erkennbar | Prozedurale Textur, Benutzeroberfläche des Produkts, technische Illustration |
| KI-generiertes Bild | Erkennbar und inkonsistent mit der Marke | Dieselbe Alternative wie oben |
| Emoji als Benutzeroberflächensymbol | Infantilisiert und zerstört die Komposition | Strich-SVG im Symbolsystem |
| Identische weiße Karten mit grauem Rand, in 3×2-Raster | Häufigste Vorlagenform | Unterschiedliche Fußabdrücke, visueller Inhalt in der Karte |
| Grüne Checkliste, die in jedem Abschnitt wiederholt wird | Trägheit der Komposition | Variieren: Liste, Vergleich, Miniatur, Daten |
| Große Zahlen 01 02 03 ohne etwas daneben | Dekoration, die nicht informiert | Zahl mit Miniaturansicht des Schritts |
| Farbiger Hintergrund-Blob | Verzierung ohne Funktion | Textur mit Bezug zur Marke oder gar nichts |
| Einzelner großer, grauer Schatten | Sieht aus wie ein Fleck, nicht wie Tiefe | Geschichteter Schatten (siehe 4.5) |
| Dunkler Nebel-Top mit vertikalem Lichtstrahl und blau-violetter Blüte | Signatur einer ganzen Ära von Seiten technischer Werkzeuge. Nachahmen bedeutet zu verraten, aus welchem Jahr und welcher Nische Sie kopiert haben | Von der Marke abgeleitete Atmosphäre: die Textur, der Winkel und die Farbe des Projekts |
| Titelverlauf von Weiß zu Lavendel und Rosa | War nicht mehr ein Finish, sondern ein Vorlagenmarker | Verlauf nur, wenn die Stopps aus der Palette des Projekts stammen und einmal auf der Seite verwendet werden |
| Überschrift der Art „ersetzt A, B, C und D“ | Funktioniert nur für ein Produkt, das tatsächlich vier Kategorien ersetzt, mit offenen Daten zum Beweis. In jedem anderen Fall liest es sich wie Angeberei | Siehe die Überschriftenmuster in 10.4 |
1.2 Textschludrigkeit: verboten
Verbotene Zeichensetzung, ausnahmslos:
| Zeichen | Name | Ersetzen durch |
|---|---|---|
— | Gedankenstrich | Punkt, Komma oder Doppelpunkt |
– | Halbgeviertstrich | Punkt, Komma oder „bis“ bei Intervallen |
· | Mittelpunkt | Komma oder Aufteilung in zwei Elemente |
… als dekorative Auslassungspunkte | Punkt |
Der Gedankenstrich ist das erste Anzeichen von maschinell erzeugtem Text. Schreiben Sie den Satz um, ersetzen Sie das Zeichen nicht durch einen freistehenden Bindestrich mit Leerzeichen, der denselben Effekt hat.
Verwenden Sie in Codeblöcken und Spezifikationen keinen Mittelpunkt als Trennzeichen: brechen Sie in Zeilen mit einer Beschriftung auf.
Verbotene Satzmuster:
- „Es ist nicht X. Es ist nicht Y. Es ist Z.“
- „Stellen Sie sich [Situation] vor“
- „In der heutigen Welt“, „Im digitalen Zeitalter“, „Mehr und mehr“
- „Verwandeln Sie“, „Revolutionieren Sie“, „Heben Sie an“, „Entfesseln Sie“, „Steigern Sie“
- „Tauchen Sie ein“, „Lassen Sie uns erkunden“, „Entdecken Sie, wie“
- Triade in allem: drei Adjektive, drei Aufzählungspunkte, drei Spalten in jedem Abschnitt
- Ausrufezeichen in institutionellem Text
- Gehäufte Absicherung: „kann helfen, möglicherweise zu verbessern“
Positive Regeln:
- Kurzer und konkreter Satz in der Sprache des Lesers, nicht des Produkts.
- Verb anstelle von abstraktem Substantiv: „antwortet in 5 Minuten“, nicht „Schnelligkeit im Kundendienst“.
- Zahl nur mit Herkunft. Ohne reale Daten beschreiben Sie, was gemessen wird.
- Vollständige und korrekte Betonung. Ersetzen Sie niemals ein akzentuiertes Zeichen durch ASCII.
1.3 Strukturelle Schludrigkeit: verboten
Der schwierigste Fehler zu erkennen: jeder Abschnitt mit derselben Schablone.
Beschriftung → Titel → Absatz → drei identische Karten
Beschriftung → Titel → Absatz → drei identische Karten
Beschriftung → Titel → Absatz → drei identische Karten
Das ist eine Vorlage, selbst mit guten Tokens und guter Animation.
Variationsregel: Kein Abschnittsformat wiederholt sich sequenziell. Wechseln Sie zwischen mindestens fünf Formaten auf der Seite:
- Raster von Karten mit Miniaturansicht der Benutzeroberfläche
- Vertikale Liste mit synchronisierter Bühne daneben
- Tabs mit Produktaufnahme
- Bento-Komposition mit einem dominanten Block
- Vergleich in zwei Spalten
- Zeitleiste oder Schritt-für-Schritt-Anleitung
- Dunkler Block mit technischer Illustration
- Tabelle oder Datenpanel
1.4 Prozess-Schludrigkeit: verboten
- Typografie und Komponenten aus dem Gedächtnis implementieren, ohne Referenz zu messen.
- Liefern, ohne im Browser zu öffnen und ohne die Prüfung durchzuführen.
- Mit Fehlern in der Konsole liefern.
- Werte aus einem vorherigen Projekt kopieren, ohne den Kontrast neu zu berechnen.
1.5 Der Schludrigkeitstest
Beantworten Sie vor der Lieferung. Jedes „Ja“ bedeutet Nichtbestehen:
- Verwendet ein Abschnitt dieselbe Schablone wie der vorherige?
- Gibt es einen Gedankenstrich, Halbgeviertstrich oder Mittelpunkt in sichtbarem Text?
- Stammt ein Bild von einer Datenbank oder einem KI-Generator?
- Stellt ein Symbol „Technologie“ dar, anstatt die Sache selbst darzustellen?
- Würde die Seite nach Austausch von Logo und Palette für jedes Unternehmen funktionieren?
- Erscheint eine Zahl ohne Herkunft?
Frage 5 ist die strengste. Wenn die Antwort Ja lautet, liegt das Problem im Konzept, nicht im Finish.
3. Prozess in 11 Toren
Kein Tor darf übersprungen werden. Jedes hat ein objektives Austrittskriterium.
Fristkalibrierung, basierend auf dem, was Referenzstudios veröffentlichen: fokussiertes Redesign 4 bis 6 Wochen; maßgeschneiderte Produktseite 6 bis 8; Unternehmens- oder Software-Website 8 bis 12. Ein dokumentierter Fall einer neuen Marke plus vollständiger Seite dauerte 7 Wochen und etwa 600 Stunden, aufgeteilt in 4 Wochen für Marke und Design und 3 für Animation und Bau. Sie endeten zwei Tage vor der Frist und nutzten diese zwei Tage, um Text anzupassen, nicht Layout.
Umfang wird nicht in Seiten gemessen. Eine Website mit 30 Seiten und wenigen wiederverwendbaren Schablonen ist einfacher als ein Erlebnis mit 5 Seiten, bei dem jede eine eigene Struktur, maßgeschneiderte Erzählung und komplexe Interaktion hat. Richten Sie die Schätzung an der Anzahl der unterschiedlichen Kompositionen aus, nicht an den URLs.
Vier Prozessgewohnheiten, die für jede Größe gelten:
- Generischer Platzhaltertext ist teuer. Ein für einen kurzen Absatz erstelltes Layout funktioniert nicht mehr, wenn der eigentliche Text Funktionen, Zielgruppen und Vorteile erklären muss. Die Nacharbeit erscheint in der teuersten Phase. Deshalb existiert Tor 2, und deshalb verwenden Mockups echten Text.
- Die visuelle Phase beginnt nicht mit der gesamten Seite. Sie beginnt mit einer oder zwei Schlüsselkompositionen, die die wichtigsten Elemente des zukünftigen Systems enthalten, um Typografie, Farbe, Bild, Komposition, Komponente und Bewegung zu lösen, ohne alles zu zeichnen.
- Code zusammen mit Design, nicht danach. Wo das Ergebnis am besten ist, gibt es keine Staffelübergabe: Dieselbe Gruppe, die das visuelle System erstellt, liefert das interaktive Erlebnis, und Leistung wird als Teil des Designs behandelt. Viele Details werden erst in der Implementierung lebendig, mit Nuancen, die in statischen Vektoren nicht sichtbar sind. Tage im Designtool produzieren gute Ideen, und Ideen werden nicht geliefert.
- Testen Sie mit echten Inhalten. Lange Überschriften, übersetzter Text, seltsame Bildproportionen und fehlende Medien decken Probleme auf, die in einer polierten Designdatei unsichtbar bleiben.
Tor 1. Briefing und Identität
Zeichnen Sie nichts, bevor dieses Tor abgeschlossen ist. Fragen Sie den Benutzer. Schlagen Sie für jedes unbeantwortete Element zwei oder drei Optionen vor und bitten Sie um Bestätigung. Nehmen Sie niemals stillschweigend an, und übernehmen Sie niemals die Identität eines Beispiels.
1.1 Geschäft und Ziel
- Wer liest die Seite und welche Entscheidung muss getroffen werden?
- Was ist die einzige Aktion, die die Seite auslösen soll?
- Gibt es rechtliche Einschränkungen in der Branche (Gesundheit, Finanzen, Bildung, Recht, Lebensmittel)?
- Gibt es reale Ergebnisdaten oder ist die Nennung von Zahlen verboten?
1.2 Visuelle Identität: Sammeln oder vorschlagen
| Feld | Frage an den Benutzer | Wenn es keine Antwort gibt |
|---|---|---|
| Markenfarben | Welche Farben (in Hexadezimal) verwendet die Marke? Welche ist die Hauptfarbe? | Schlagen Sie 2 oder 3 Richtungen aus Abschnitt 4.2 vor und lassen Sie wählen |
| Aktionsfarbe | Welche Farbe sollen Schaltflächen verwenden? | Leiten Sie von der Markenfarbe ab, indem Sie sie abdunkeln, bis sie 4,5:1 mit Weiß erreicht |
| Typografie | Welche Schriftarten verwendet die Marke? Gibt es eine Lizenz für das Web? | Schlagen Sie 2 Kombinationen aus Abschnitt 4.3 vor und lassen Sie wählen |
| Visueller Ton | Ist die Marke nüchtern, warmherzig, technisch, elegant oder energisch? | Fragen Sie. Dies definiert Textur, Radius, Dichte und Bewegung |
| Logo | Gibt es eine SVG-Datei oder ein PNG mit transparentem Hintergrund? | Bitten Sie darum. Ohne sie verwenden Sie den Namen in Text mit der gewählten Typografie |
| Markenhandbuch | Gibt es ein Handbuch, Brandbook oder Identitätsleitfaden? Können Sie es senden? | Bitten Sie darum. Es ist die reichhaltigste Quelle. Ohne es arbeiten Sie mit Logo und Farben |
| Grafiken der Marke | Hat die Marke ein grafisches Muster, eine Textur, eine wiederkehrende Form, ein Raster oder eine eigene visuelle Signatur? Können Sie die Dateien senden? | Bitten Sie um Bilder oder Vektoren. Sie bilden die Grundlage für die Texturen in Abschnitt 7 |
| Vorhandene Teile | Gibt es eine Präsentation, einen Beitrag, eine Verpackung, einen Katalog oder eine alte Website? | Bitten Sie um 3 bis 5 Teile. Sie zeigen die angewandte Marke, was das Handbuch nicht immer zeigt |
| Produktmaterial | Gibt es Bildschirme, eigene Fotos oder Diagramme? | Definieren Sie anhand von Abschnitt 7, was erstellt wird |
| Referenzen | Gibt es Referenzseiten? | Wenn ja, messen Sie im Tor 3. Wenn nicht, schlagen Sie eine Richtung vor |
| Was zu vermeiden ist | Gibt es eine Farbe, einen Stil oder ein Element, das von der Marke verboten ist? | Fragen Sie. Es ist billiger, es jetzt zu wissen |
| Bewegungsniveau | Dezent, ausgewogen oder ausdrucksstark? | Standard: ausgewogen |
| Ton der Stimme | Formell oder direkt? Sprechen Sie mit „Sie“ oder „du“? | Fragen Sie |
1.3 Identitätsblatt
Notieren Sie die Antworten. Dieses Blatt ist die Quelle der Tokens in Tor 4.
PROJEKT
Seitenziel:
Einzige Aktion:
Zielgruppe:
IDENTITÄT
Hauptfarbe: #
Aktionsfarbe: # Kontrast zu Weiß: ___:1
Sekundärer Akzent:
...
[vollständiger Text für die Übersetzung gekürzt]