marvinmcv-svg/SCCS-Landing-Page

In den untenstehenden Befehlen ist <skill> der Ordner dieses Skills. Führe sie vom Stammverzeichnis des Projekts aus, sodass die Arbeitsdateien dort in .taste-skill/ landen. Die Skripte benötigen Node 22+ und einen installierten Chrome-, Edge- oder Chromium-Browser und installieren nichts. assets.mjs benötigt auch Netzwerkzugriff; es verwendet keine API-Schlüssel.

Der Ablauf

Führe diese Schritte in dieser Reihenfolge aus. Die Schritte 1–5 dauern ein paar Minuten und entscheiden, ob die Seite gut wird.

1. Das Briefing und das Projekt lesen

Finde heraus, was real ist: das Thema, die Zielgruppe, die eine Sache, die die Seite den Besucher tun lassen soll, den Stack, etwaige bestehende Marke (Farben, Schriftarten, Logo) und vor allem welche Bilder wirklich existieren: die eigenen Fotos des Projekts oder Produktaufnahmen, eine echte Benutzeroberfläche, die gezeigt werden kann, ein Bildgenerierungstool, das du verwenden kannst, oder nichts. Plane nicht um Bilder herum, die du nicht hast. Nichts Eigenes ist selten wirklich nichts: die Stadt des Themas, die Straße, Materialien und Geschichte sind in offenen Archiven und Museen zu finden, kostenlos nutzbar mit einer Quellenangabe (Schritt 6, scripts/assets.mjs).

Wenn die Anfrage vage ist, entscheide und formuliere deine Interpretation in einem Satz, anstatt nachzufragen. Frage nur, wenn eine fehlende Tatsache die Arbeit blockiert (zum Beispiel kein Produktname).

Erstelle dann eine Bestandsaufnahme des Themas in deinen Notizen: acht bis zwölf Dinge, die zu diesem Kunden und zu keinem Konkurrenten gehören. Suche nach seinem Namen und was der Name bedeutet; seiner Adresse, Hausnummer, Straße und Nachbarschaft, und wie dieser Ort aussieht (seine Fliesen, Schilder, Farben, Schriftarten an den Ladenfronten, sein Licht, sein Wetter); den Zahlen im Briefing (Sitzplätze, Zimmer, Minuten bis zum Meer, der Preis, das Jahr); der Einschränkung, mit der es lebt (nur eine Charge pro Monat, im Winter geschlossen, nur nach Vereinbarung); seinen Materialien und Farben; seinen Ritualen und Öffnungszeiten (der Ofen wird um fünf angezündet, die Fähre um sieben); den gedruckten Dingen seiner Welt (ein Fahrplan, ein Etikett, eine Fahrkarte, ein Schild). Diese Liste ist die Quelle für die Idee in Schritt 4. In Blindtests wurde die Seite, die jedes Briefing gewann, aus einem Element einer solchen Liste aufgebaut (der Name des Kunden und seine Bedeutung, die Straße, in der er sich befindet, die eine Einschränkung, die ihn zu dem macht, was er ist), und die Seiten, die verloren, hatten eine gute Komposition mit einer kategoriespezifischen Idee. Die Liste ist auch deine Bildsuche: Jeder Ort, jedes Material und jedes gedruckte Ding darin ist eine Suchanfrage für Schritt 6.

2. Das Argument schreiben

Vor jedem Design liste die Seite als Behauptungen mit ihren Beweisen auf, eine Zeile pro Abschnitt, so wie es references/copy.md §1 zeigt. Die Behauptungen entscheiden, welche Abschnitte existieren und in welcher Reihenfolge. Lösche jeden Abschnitt, der keine Behauptung hat. So vermeidest du die Standard-Abfolge von Hero, Logos, drei Funktionen, Testimonial, Preisen, Call-to-Action.

3. Die Richtung zeichnen

node <skill>/scripts/draw.mjs --sector <sektor> --brief "<ein Satz über das Thema>" \
  --sections <rollen in der Reihenfolge deines Arguments> [--tone <ton>] [--have <ressourcen>] [--keep palette,type] \
  --options 3

Dies teilt drei Richtungen aus und druckt eine kurze Zusammenfassung von jeder. Halte jede gegen deine Bestandsliste: Welche Art zu komponieren kann etwas transportieren, das nur dieser Kunde hat? Wähle diejenige aus, nicht die vertrauteste, und schreibe eine Zeile in deine Notizen, warum. In Tests war eine einzelne zufällige Richtung, die nicht zum Thema passte, die häufigste Ursache für eine schwache Seite. Gib dann das vollständige Blatt aus:

node <skill>/scripts/draw.mjs <dieselben Argumente, ohne --options> --direction <gewählte id>

• --sector: node <skill>/scripts/draw.mjs --list sectors. Wähle den nächstgelegenen.
• --sections: Rollen aus --list roles (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). Der Hero ist impliziert.
• --tone (optional): quiet, bold, warm, technical, playful, luxury, editorial. Verwende es nur, wenn das Briefing eindeutig danach fragt.
• --have: Ressourcen, die wirklich existieren, durch Kommata getrennt: photography (die eigenen Fotos des Projekts von Ort, Personen oder Arbeit), product-photo (Fotos des spezifischen Produkts oder ein Bildtool, das sie erstellen kann), product-ui (echte Screenshots), illustration, video. Lasse es weg, wenn du nichts hast: Die Zeichnung vermeidet dann Kompositionen, die davon abhängen, und das Blatt sagt, wie man Bildplätze ehrlich füllt (Software zeigt ihre eigene in HTML gebaute Oberfläche; ein Produkt ohne Fotos wird gezeichnet und unter echte Bilder seiner Welt gesetzt, niemals eine gefälschte Produktaufnahme). Bilder, die du in den offenen Sammlungen findest, sind nicht die eigenen des Projekts; lasse sie aus --have heraus.
• --keep palette,type: Wenn die Marke bereits Farben oder Schriftarten festlegt. Die Zeichnung teilt dann nur die Komposition aus, und du ordnest die Markenwerte den Rollen zu.

Der Befehl druckt ein Richtungsblatt. Es ist die künstlerische Leitung für diesen Bau:

• Übernimm es. Mische es nicht mit dem Layout, das du ohnehin erstellt hättest. Wenn es sich ungewohnt anfühlt, gut: Das vertraute Layout ist das, das dieses Skill verhindern soll.
• Zeichne einen Slot nur aus einem Grund neu (--redraw hero | type | palette | photos | section:<rolle> | direction), den du angeben kannst: Er widerspricht einer genannten Markenbeschränkung oder benötigt eine Ressource, die nicht existiert. Zeichne niemals neu, um etwas Bequemeres zu bekommen. Dokumentiere jede Neugestaltung in deinem Bericht.
• Wenn ein ausgeteilter Abschnitt den realen Inhalt nicht aufnehmen kann (er vergleicht drei Pläne und es gibt nur einen Preis; er möchte fünf Zitate und es gibt keine), verbiege nicht den Inhalt, um ihn anzupassen. Liste die anderen mit --alternatives <rolle> auf, wähle denjenigen, dessen Annahmen zum Inhalt passen, und übernimm ihn mit --redraw section:<rolle>=<id>.
• Überprüfe die Palette am Thema. Eine ausgeteilte Palette ist eine Reihe von Proportionen (ein Grund, eine Tinte, ein Akzent, Felder) ebenso wie eine Reihe von Farben. Wenn ihre Farben mit den eigenen Materialien des Themas kämpfen (Bonbonpastellfarben für einen Torfwhisky, Neon für eine Berghütte), zeichne die Palette einmal neu; wenn das Thema unverkennbare eigene Farben hat (sein Material, die Farbe seiner Straße, die Landschaft vor seinen Fenstern), behalte die ausgeteilten Proportionen und nimm die Farben stattdessen vom Thema, und sage das im Bericht.
• Gib es jederzeit erneut aus mit node <skill>/scripts/draw.mjs --show. Lies es bei einer langen Sitzung vor jedem Abschnitt, den du baust, erneut.

4. Die Idee finden

Die Richtung ist eine Art zu komponieren. Die Idee macht die Seite zu diesem Thema und zu keinem anderen. Schreibe diesen Satz in deine Notizen und beginne nicht mit dem Bau, bis beide Lücken aus dem Thema selbst gefüllt sind:

Auf dieser Seite wird [etwas, das zum Thema gehört] zu [dem Gerät, das die Richtung erfordert].

Orte, an denen du nach der ersten Lücke suchen kannst:

• Seine Ausgabe. Was produziert das Ding? Bringe die reale Ausgabe als Material auf die Seite. (Eine Kamera, die Gedichte druckt, lieferte ihren Text als Papierstreifen.)
• Sein Objekt oder seine Form. Wie sieht es physisch aus, im Querschnitt, in der Silhouette? Vergrößere es, beschneide es, mache es zum Rahmen oder zum einzigen Motiv.
• Sein Name. Können die Buchstaben ein Foto aufnehmen, zu einer Wand gestapelt, auf zwei Ecken aufgeteilt werden?
• Sein Ort. Gibt es eine Aussicht, die jemanden dazu bringt, dort sein zu wollen?
• Sein Ritual. Gibt es eine Abfolge, die die Seite beim Scrollen aufführen kann?
• Sein Artefakt. Welches gedruckte Ding existiert bereits in seiner Welt: Fahrkarte, Speisekarte, Etikett, Quittung, Einladung, Ordner, Handbuch?
• Sein Gegenteil. Welche andere Kategorie besitzt das Gefühl, das diesem fehlt?

Fülle die erste Lücke aus deiner Bestandsaufnahme (Schritt 1), nicht aus der Kategorie. Der Konkurrententest: setze den nächsten realen Konkurrenten in den Satz (die Bäckerei zwei Straßen weiter, ein anderer Eichenmöbelhersteller, eine andere Hütte auf demselben Berg). Wenn der Satz immer noch funktioniert, gehört die Idee zur Kategorie: Ein Laib Brot ist jede Bäckerei; die sieben Türen der Straße, nach der diese benannt ist, sind nur diese eine. „Sauber und modern“ ist keine Idee. Die Seiten, die das Jury-Panel der Studie am niedrigsten bewertete, waren diejenigen, deren Idee als „keine über die Standardformel hinaus“ aufgezeichnet wurde.

Eine lebendige Sache. Gib der Seite eine Sache, die der Besucher tun kann, oder die bei jedem Besuch anders ist, gemacht aus der Idee: Wähle ein Holz und sieh den Stuhl darin; tippe deinen Namen ein und sieh ihn in den Lettern der Gießerei geschnitten; stelle den Kredit ein und lies die monatliche Rate; sieh, ob der Ofen der Hütte gerade brennt und wie lange bis zur letzten Fähre; wähle eine Größe und sieh sie im Raum. In Blindtests hatte jede Gewinnerseite eine, und die Juroren nannten sie zuerst. Regeln: Sie verwendet die echten Inhalte des Themas, funktioniert auf einem Telefon mit dem Daumen, hat einen einfachen Fallback ohne Skript, blockiert nie das Lesen, und es ist eine Sache, kein Spielplatz. Sie wird in Schritt 6 als Teil der Seite gebaut, nicht als Bewegung in Schritt 9 hinzugefügt.

5. Die Wörter schreiben

Schreibe die gesamte Seite als Textvorlage (Klartext) vor dem Markup, gemäß references/copy.md:

• Jede Überschrift passt in zwei Zeilen oder weniger bei jeder Breite. Mache die Arithmetik in copy.md §2, bevor du dich auf einen Satz festlegst: Etwa 32 Zeichen sind überall bei einer selbstbewussten Größe sicher. Die untersuchten Galerie-Helden haben einen Median von 5 Wörtern und 32 Zeichen.
• Ein unterstützender Satz. Eine primäre Handlung, benannt nach dem, was sie tut, als echter Button auf dem ersten Bildschirm.
• Der erste Bildschirm beantwortet die erste Frage des Besuchers in großer Schrift. Für eine Veranstaltung: was es ist, wann und wo (die Daten gehören in die Überschrift oder in der zweitgrößten Größe, niemals nur in kleinem Text). Für ein Produkt: was es ist und was es kostet oder tut. Für eine Person: wer und was sie tut. Jeder Abschnitt, wegen dem der Besucher gekommen ist (das Line-up, die Speisekarte, die Zimmer, der Preis), hat seine eigene Überschrift und seinen eigenen Platz in der Navigation.
• Schreibe den vollständigen Inhalt. Jeder Abschnitt, den das Briefing verlangt, liefert seine Informationen vollständig: die gesamte Speisekarte mit Preisen, jedes Zimmer mit seinen eigenen Details, jeder Redner und Vortrag, der Preis mit dem, was er beinhaltet, eine Antwort auf jede echte Frage. Dünne Abschnitte sind der häufigste Grund, warum eine saubere Seite gegen eine geschäftigere verliert.
• Beispielhafte Details werden erwartet, wo das Briefing Lücken lässt (Gerichtenamen, Zimmenamen und -raten, Projekttitel), damit das Design in voller Dichte gesehen wird; liste sie im Bericht auf, damit der Kunde sie bestätigen kann. Beweise werden niemals erfunden: keine Kunden, Zitate, Bewertungen, Presse, Logos oder Geschäftszahlen.

6. Baue es, immer noch

Baue die Seite mit ausgeschalteter Bewegung in deinem Kopf; eine Seite, die Animation braucht, um fertig auszusehen, ist nicht fertig. Arbeitsreihenfolge:

1. Tokens. Farb- und Schriftrollen aus dem Blatt als CSS-Custom-Properties. Alles Weitere bezieht sich nur auf Tokens. <skill>/assets/base.css ist ein neutrales Fundament, von dem du ausgehen kannst (Reset, Token-Namen, fließende Schriftgrößenschritte, Raster, Fokus- und Auswahlstile, die Bewegungshelfer); es hat kein eigenes Aussehen.
2. Der Hero, genau wie der Blueprint es beschreibt, auf Desktop- und Telefonbreite. Mach das Große groß und das Kleine klein, bevor irgendetwas anderes existiert.
3. Jeder Abschnitt aus seinem Blueprint, mit dem Inhalt dieses Projekts. Behalte die Geometrie, ändere das Thema. Benachbarte Abschnitte dürfen kein Layout teilen. Trage die Idee in jeden Abschnitt, einschließlich Preisgestaltung, FAQ und Footer: Der häufigste Fehler in der Studie, selbst bei guten Websites, ist ein unverwechselbarer erster Bildschirm, gefolgt von Standardblöcken.
4. Bilder, in dieser Reihenfolge der Präferenz:
   1. die eigenen des Projekts;
   2. generiert, wenn du ein Bildtool hast;
   3. echte Bilder aus der Welt des Themas aus den offenen Sammlungen, wann immer ein ehrliches existiert. Suche sie mit node <skill>/scripts/assets.mjs "<abfrage>" (Openverse, Wikimedia Commons, das Art Institute of Chicago und das Metropolitan Museum of Art; nur Lizenzen, die eine kommerzielle Nutzung erlauben, standardmäßig). Suche die Bestandsaufnahme, nicht die Kategorie: seine Straße auf alten Postkarten, eine alte Karte der Nachbarschaft, sein Material aus nächster Nähe, sein Gewerbe in Stichen, ein Museumsobjekt seiner Art, eine botanische Tafel, eine Sternenkarte. Verwende sie groß und mit Absicht: ein Archivfoto als Hero, ein vergrößerter Stich als Seitenmotiv, die echte Karte der Straße als Kontaktabschnitt. Sieh dir jedes an, bevor du auswählst; --get <ref> lädt es in das Verzeichnis assets/ herunter und zeichnet seine Quelle und Lizenz auf, und --credits druckt die Quellenangabe für den Footer. Ein gefundenes Bild zeigt die Welt um den Kunden herum und wird niemals als das eigene Produkt, der eigene Raum, das eigene Gericht, die eigene Person oder das eigene Team des Kunden präsentiert;
   4. gezeichnet mit einem Bildtool, wenn die ersten beiden Optionen fehlschlagen und die Zeichnung eine Illustration erfordert (der Kunde wird nie ein Foto seiner Fabrik haben; zeichne sein Material, seine Form, seinen Plan). Erzwinge niemals eine Zeichnung, um einen realen Platz zu füllen, den ein offenes Bild belegen könnte;
   5. platziert als reines HTML, wenn die Seite ein Bild eines Produkts oder einer Oberfläche benötigt und das Ding in HTML gebaut werden kann (Software-Screenshots sind immer besser als Mockups; ein einfaches Produkt kann mit Formen und Text aufgebaut werden, das als Bild fotografiert wurde, das du nicht hast). Erfinde niemals ein Bild (eine Illustration von einem Ort, den du nicht kennst, ein Foto von einem Produkt, das nicht existiert, ein Bild eines Kunden, den du noch nie gesehen hast).
5. Die eine lebendige Sache aus Schritt 4, implementiert.
6. Die Quellenangaben aus Schritt 4 in den Footer.

7. Überprüfe es, noch nicht produktiv

Führe aus:

node <skill>/scripts/inspect.mjs --check <pfad/zur/datei>

Dies öffnet die Seite in einem echten Browser, liest die visuellen Stile und meldet jeden Token, der einen absoluten Wert verwendet (kein Custom Property), jede Bedingung, die keine Mediensyntax verwendet (@media fehlt, @media(max-width) ist falsch), jede Zeilenhöhe, die kleiner als 1,4 ist (Standard der Studie, nicht dein Standard), Schriftgrößen unter 16px erklärt, zu dichte Token-Namen (h1-h2-h3 sind getrennt), doppelte Überschriften in <h1> bis <h6> (der nächste Abschnitt beginnt immer eine Ebene tiefer), Zeilen der Liste, die breiter als 75 Zeichen sind, und Schriftfamilien-Token, hinter denen kein Fallback steckt. Behebe jede gefundene Regelverletzung: Sie ist ein Beweis dafür, dass die Seite nach der Art von Look-and-Feel gebaut wurde, das dieses Skill ersetzen soll. Wenn das Skript keinen Browser findet, installiere einen und führe es erneut aus.

Dokumentiere die Prüfung mit ihrem Datum und der Browser-Version in deinem Bericht.

8. Texte auf dem Gerät prüfen

Lies den ersten Bildschirm laut vor. Überschriften, die bei einem schnellen Vorlesen hängen bleiben, funktionieren; solche, bei denen du innehalten musst, um sie zu entschlüsseln, nicht. Schreibe sie um.

Lies jeden Abschnitt nacheinander auf einem Telefonbildschirm (mit Entwicklertools oder eingegeben). Wenn ein Abschnitt (sein Titel, sein Inhalt) auf dem Telefon wie eine andere Seite aussieht, gehört er nicht hierher, oder er ist nicht vollständig.

9. Eine Bewegung, falls nötig

Die Seite muss ohne Animation funktionieren, wenn der Besucher die Bewegung reduziert hat. Füge genau eine Bewegung hinzu: einen einzigen Übergang auf der einen lebendigen Sache, beim Eintritt in den Viewport, und sonst nichts. Die Heldenüberschrift erscheint bereits, wenn der Besucher sie braucht. Jede andere Animation ist ein Zugeständnis an einen Browser-Inspektor, der das Standardlayout nicht erkennt.

Verwende die Bewegung aus dem Richtungsblatt (scroll-driven, reveal, offset, parralax) und implementiere sie so, dass sie auf einem Telefon mit geringer Leistung funktioniert: @media(prefers-reduced-motion:no-preference) als Wrapper.

10. Screenshots und Bericht

Erstelle drei Screenshots der Seite in voller Länge:

• 375 × screenshots/mobile.png
• 1024 × screenshots/tablet.png
• 1440 × screenshots/desktop.png

Jeder Screenshot hat die Seite bei ihrer natürlichen Breite, ohne künstliches Beschneiden der Höhe. Das Layout muss auf jeder sichtbar sein: Der mobile Screenshot zeigt einen einspaltigen Fluss; der Desktop-Screenshot zeigt die Abschnitte in ihrer beabsichtigten Rasteranordnung.

Erzeuge dann den Bericht:

node <skill>/scripts/report.mjs --direction <id> --screenshots dir --changes <logdatei>

Dies druckt eine Rubrik mit drei Fragen pro Abschnitt für eine Jury (ein Entwickler, ein Designer, ein Redakteur), einen Link zur Vorschau und die Liste der Änderungen. Der Befehl akzeptiert auch --check-output <pfad> vom Inspektionslauf.

11. Beheben und erneut prüfen

Betrachte die Screenshots, während du die Berichtsfragen laut beantwortest. „Ja“ ist die Seite, die du behalten wirst. „Nein“ ist eine Sache, die zu beheben ist. Behebe sie, mache erneut Screenshots (Schritt 10) und aktualisiere den Bericht. Wiederhole den Vorgang, bis alle Fragen mit „Ja“ beantwortet sind.

Referenzen

Die Dateien in references/:

• copy.md §1 Die Behauptungen und Beweise einer Tastyseite. §2 Zeichenzählung. §3 Die erste Frage des Besuchers.
• rubric.md Die drei Fragen für jeden Abschnitt.
• house-style.md Was nicht erlaubt ist: Karten, Gradienten, Unterstreichungen, abgeschrägte Kanten, Kästchen, Icons ohne Wörter, Monospace außerhalb von Codeblöcken, verschwommene Hintergründe, abgerundete Ecken auf Blockelementen, Linien außer horizontalen Regeln, Schatten außer einer, Layouts, die auf 3-2-1-Verhältnissen basieren, und das Wort „moderne.

Globale Werkzeuge

• scripts/assets.mjs — Sucht Openverse, Wikimedia Commons, das Art Institute of Chicago und das Metropolitan Museum of Art. --get <ref> Herunterladen. --credits druckt die Quellenangabe. Setze OPENVERSE_TOKEN nur, wenn du ausgelastet bist; du brauchst ihn für gelegentliche Suchanfragen.
• scripts/draw.mjs — Die Richtung. --list, --show, --redraw, --alternatives.
• scripts/inspect.mjs — Echter Browser-Check. --check <datei>, --server, --devtools.
• scripts/report.mjs — Jurybericht. Übergib --screenshots screenshots/, --changes <protokoll>.
• scripts/gallery.mjs — Suche nach Referenzen im Kurs oder einer Richtung. node scripts/gallery.mjs --sector <sektor> --direction <id>