tasteskill v2 (Anti-Slop Frontend Skill)

tasteskill v2

Eine von einem Modell erstellte Seite sieht meist aus wie der Durchschnitt aller Seiten, die das Modell je gesehen hat: eine zentrierte Überschrift über drei Zeilen, ein kleines Label darüber, eine Reihe von Icon-Karten, ein sanfter Verlauf, ein paar dünne Linien und eine monospace Beschriftung. Nichts daran ist falsch und nichts daran wurde entschieden.

Diese Fähigkeit ersetzt diese Standardeinstellungen durch Entscheidungen, und zwar auf vier Arten:

1. Ein Script teilt die Richtungen aus, du wählst daraus. Wenn ein Modell aufgefordert wird, sich ein Aussehen auszudenken, wählt es immer die Kategorie-Standardvorgabe. scripts/draw.mjs teilt drei von zwanzig recherchierten Richtungen aus; du wählst diejenige, die die Idee des Themas trägt, und das Script teilt dann das zugehörige Schriftsystem, die Palette, die Hero- und Abschnittskompositionen aus einer Bibliothek zu, die aus 247 echten Seiten destilliert wurde.
2. Die Idee kommt vom Thema. In der Studie war das, was die besten Seiten von den vergessbaren unterschied, ein Konzept, das von der Sache selbst stammte, nicht von der Gestaltung.
3. Ein Hausstil ohne Verzierungen, gemessen in einem echten Browser von scripts/inspect.mjs, sodass die Regeln überprüft und nicht nur erhofft werden.
4. Du schaust dir an, was du gemacht hast. Screenshots in drei Breiten, eine Beurteilungsmatrix, korrigieren, erneut betrachten.

Eine während des Testens gelernte Warnung: Das Entfernen der Verzierungen ist nur die Hälfte der Arbeit; eine Seite, die ihre Labels, Linien und Karten verloren hat und nichts an ihrer Stelle gewonnen hat, wirkt dünn, und blinde Juroren bevorzugen zu Recht eine reichhaltigere Seite mit Tellern gegenüber einer leeren Seite ohne sie. Die andere Hälfte ist Substanz: größer gesetzter Text, ganze Farbflächen, echte Bilder aus der Welt dieses Themas (gefunden oder gezeichnet), und jeder Abschnitt mit seinem vollständigen Inhalt. Die Fähigkeit ist darauf ausgelegt, dir das zu geben; tausche es nicht gegen Zurückhaltung ein.

In den folgenden Befehlen ist <skill> der Ordner dieser Fähigkeit. Führe sie vom Stammverzeichnis des Projekts aus, damit die Arbeitsdateien in .taste-skill/ dort landen. Die Scripts benötigen Node 22+ und ein installiertes Chrome, Edge oder Chromium und installieren nichts. assets.mjs benötigt außerdem 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 darüber, ob die Seite gut ist.

1. Lies das Briefing und das Projekt

Finde heraus, was echt ist: das Thema, die Zielgruppe, die eine Sache, die die Seite den Besucher tun lassen muss, der Stack, etwaige vorhandene Markenelemente (Farben, Schriften, Logo), und vor allem welche Bilder wirklich existieren: die eigenen Fotos oder Produktaufnahmen des Projekts, eine echte Benutzeroberfläche, die gezeigt werden kann, ein Bildgenerierungswerkzeug, das du nutzen kannst, oder nichts. Plane nicht mit Bildern, die du nicht hast. „Nichts Eigenes“ ist selten wirklich nichts: Die Stadt, die Straße, die Materialien und die Geschichte des Themas sind in offenen Archiven und Museen zu finden, kostenlos nutzbar mit einer Quellenangabe (Schritt 6, scripts/assets.mjs).

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

Erstelle dann in deinen Notizen ein Inventar des Themas: acht bis zwölf Dinge, die zu diesem Kunden gehören und zu keinem Konkurrenten. 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 seinen Ladenfronten, sein Licht, sein Wetter); den Zahlen im Briefing (Sitzplätze, Zimmer, Minuten 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 Eintrittskarte, ein Schild). Diese Liste ist die Quelle der Idee in Schritt 4. In Blindtests wurde die Seite, die jedes Briefing gewann, aus einem Element einer solchen Liste gebaut (der Name des Kunden und seine Bedeutung, die Straße, in der er steht, die eine Einschränkung, die ihn ausmacht), und die Seiten, die verloren, hatten eine gute Komposition mit einer Kategorienidee. Die Liste ist auch deine Bildersuche: Jeder Ort, jedes Material und jedes gedruckte Ding darauf ist eine Suchanfrage für Schritt 6.

2. Schreibe das Argument

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

3. Ziehe die Richtung

node <skill>/scripts/draw.mjs --sector <Sektor> --brief "<eine Zeile über das Thema>" \
  --sections <Rollen in der Reihenfolge deines Arguments> [--tone <Ton>] [--have <Assets>] [--keep palette,type] \
  --options 3

Dies teilt drei Richtungen aus und gibt eine kurze Zusammenfassung von jeder. Halte jede gegen dein Inventar: Welche Art zu komponieren kann etwas tragen, das nur dieser Kunde hat? Wähle diejenige, nicht die vertrauteste, und schreibe eine Zeile in deinen 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 <die gleichen Argumente, ohne --options> --direction <gewählte ID>

• --sector: node <skill>/scripts/draw.mjs --list sectors. Wähle den nächsten.
• --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. Gib dies nur an, wenn das Briefing eindeutig danach verlangt.
• --have: Assets, die wirklich existieren, Komma-getrennt: photography (die eigenen Fotos des Projekts vom Ort, den Personen oder der Arbeit), product-photo (Fotos des spezifischen Produkts oder ein Bildwerkzeug, das sie erstellen kann), product-ui (echte Screenshots), illustration, video. Lasse es weg, wenn du keine hast: Die Ziehung vermeidet dann Kompositionen, die von ihnen abhängen, und das Blatt sagt, wie man Bildbereiche ehrlich füllt (Software zeigt ihre eigene, in HTML gebaute Oberfläche; ein Produkt ohne Fotos wird gezeichnet und zwischen echten Bildern seiner Welt platziert, niemals ein gefälschtes Produktfoto). 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 Ziehung liefert dann nur die Komposition, und du bildest die Werte der Marke auf die Rollen ab.

Der Befehl gibt ein Richtungsblatt aus. Es ist die Kunstrichtung für diesen Build:

• Übernimm es. Vermische es nicht mit dem Layout, das du ohnehin gemacht hättest. Wenn es sich unvertraut anfühlt, gut: Das vertraute Layout ist das, zu verhindern diese Fähigkeit existiert.
• Zeichne einen Slot nur aus einem Grund neu (--redraw hero | type | palette | photos | section:<Rolle> | direction), den du angeben kannst: Er widerspricht einer angegebenen Markeneinschränkung oder benötigt ein Asset, das nicht existiert. Zeichne niemals neu, um etwas Bequemeres zu bekommen. Dokumentiere jede Neuzeichnung in deinem Bericht.
• Wenn ein ausgeteilter Abschnitt den echten Inhalt nicht aufnehmen kann (er vergleicht drei Pläne und es gibt einen Preis; er möchte fünf Zitate und es gibt keine), verbiege den Inhalt nicht, 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 auf das Thema. Eine ausgeteilte Palette ist eine Reihe von Proportionen (ein Hintergrund, eine Schriftfarbe, ein Akzent, Flächen) genauso wie eine Reihe von Farben. Wenn ihre Farben mit den eigenen Materialien des Themas kämpfen (Bonbon-Pastellfarben 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 außerhalb seiner Fenster), behalte die ausgeteilten Proportionen und nimm stattdessen die Farben vom Thema, und sag das im Bericht.
• Gib es jederzeit mit node <skill>/scripts/draw.mjs --show erneut aus. Lies es in einer langen Sitzung vor jedem Abschnitt, den du baust, erneut.

4. Finde die Idee

Die Richtung ist eine Art zu komponieren. Die Idee ist das, was die Seite zu diesem Thema gehören lässt und zu keinem anderen. Schreibe diesen Satz in deine Notizen und beginne erst mit dem Bauen, wenn beide Lücken aus dem Thema selbst gefüllt sind:

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

Mögliche Quellen für die erste Lücke:

• Seine Ausgabe. Was produziert das Ding? Setze die tatsächliche Ausgabe als Material auf die Seite. (Eine Kamera, die Gedichte ausdruckt, 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, mach es zum Rahmen oder zum einzigen Motiv.
• Sein Name. Können die Buchstaben ein Foto halten, sich zu einer Wand stapeln, sich auf zwei Ecken verteilen?
• Sein Ort. Gibt es eine Aussicht, die jemanden dazu bringt, dort sein zu wollen?
• Sein Ritual. Gibt es eine Sequenz, die die Seite beim Scrollen ausführen kann?
• Sein Artefakt. Welches gedruckte Ding existiert bereits in seiner Welt: Eintrittskarte, Speisekarte, Etikett, Quittung, Einladung, Ordner, Handbuch?
• Sein Gegenteil. Welche andere Kategorie besitzt das Gefühl, das dieser hier fehlt?

Fülle die erste Lücke aus deinem Inventar (Schritt 1), nicht aus der Kategorie. Der Wettbewerber-Test: Setze den nächsten echten Wettbewerber 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 Sites, die das Panel der Studie am schlechtesten 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; gib deinen Namen ein und sieh ihn in den Lettern der Gießerei geschnitten; stelle den Kredit ein und lies die echte monatliche Rate; sieh, ob der Ofen der Hütte gerade brennt und wie lange es bis zur letzten Fähre dauert; wähle eine Größe und sieh sie im Raum. In Blindtests hatte jede Gewinnerseite eine solche Sache, und die Juroren nannten sie zuerst. Regeln: Sie verwendet den echten Inhalt des Themas, sie funktioniert auf einem Telefon mit dem Daumen, sie hat einen einfachen Fallback ohne Script, sie blockiert niemals 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. Schreibe die Worte

Schreibe die gesamte Seite als Textvorlage (reiner Text) 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 für einen Satz entscheidest: Etwa 32 Zeichen sind bei einer selbstbewussten Größe überall sicher. Die untersuchten Galerie-Heros haben einen Median von 5 Wörtern und 32 Zeichen.
• Ein unterstützender Satz. Eine primäre Aktion, 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 ein Ereignis: 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 tun. Jeder Abschnitt, den der Besucher suchte (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 vollere verliert.
• Beispiel-Details werden erwartet, wo das Briefing Lücken lässt (Gerichtenamen, Zimmernamen und -preise, Projekttitel), damit das Design in voller Dichte gesehen wird; liste sie im Bericht zur Bestätigung durch den Kunden auf. Beweise werden niemals erfunden: keine Kunden, Zitate, Rezensionen, Presse, Logos oder Geschäftsstatistiken.

6. Baue es, immer noch

Baue die Seite mit ausgeschalteter Bewegung im 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 nachgelagerte referenziert nur Tokens. <skill>/assets/base.css ist ein neutrales Fundament, von dem du ausgehen kannst (Reset, Token-Namen, flüssige Schriftgrößen-Stufen, Raster, Fokus- und Auswahlstile, die Bewegungshelfer); es hat kein eigenes Aussehen.
2. Der Hero, exakt so, wie der Bauplan ihn beschreibt, bei Desktop- und Telefonbreite. Mach das Große groß und das Kleine klein, bevor irgendetwas anderes existiert.
3. Jeder Abschnitt nach seinem Bauplan, mit dem Inhalt dieses Projekts. Behalte die Geometrie, ändere das Thema. Benachbarte Abschnitte dürfen kein gemeinsames Layout haben. Trage die Idee in jeden Abschnitt, einschließlich Preise, FAQ und Footer: Der häufigste Fehler in der Studie, selbst bei guten Seiten, ist ein unverwechselbarer erster Bildschirm, gefolgt von Standardblöcken.
4. Bildmaterial, in dieser Reihenfolge der Präferenz:
   1. die eigenen des Projekts;
   2. generiert, wenn du ein Bildwerkzeug 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 "<Suchbegriff>" (Openverse, Wikimedia Commons, das Art Institute of Chicago und das Met; nur Lizenzen, die kommerzielle Nutzung erlauben, standardmäßig). Suche im Inventar, nicht in der Kategorie: seine Straße auf alten Postkarten, eine alte Karte der Nachbarschaft, sein Material aus der Nähe, sein Beruf in Stichen, ein Museumsobjekt seiner Art, eine botanische Tafel, eine Sternenkarte. Verwende sie groß und mit Absicht: ein Archivfoto als Hero, ein in das Seitenmotiv vergrößerter Stich, die echte Karte der Straße als Kontaktabschnitt. Schau dir jedes an, bevor du es wählst; --get <Referenz> lädt es in assets/ herunter und zeichnet seine Quelle und Lizenz auf, und --credits gibt die Quellenangabe für den Footer aus. Ein gefundenes Bild zeigt die Welt um den Kunden herum und wird niemals als das eigene Produkt, der Raum, das Gericht, die Person oder das Team des Kunden präsentiert.
   4. gezeichnet in ...

[Liste der offenen Archive und Suchbegriffe...]

7. Inspiziere und korrigiere das Styling

Führe den Browser-basierten Inspektor aus:

node <skill>/scripts/inspect.mjs --url <URL der lokalen Seite> [--rules <Regel>]

Dies öffnet die Seite in einem Headless-Browser, misst die Einhaltung des Hausstils und meldet Verstöße. Korrigiere sie, bevor du fortfährst.

8. Screenshots und Überprüfung

Mache Screenshots bei drei Breiten (z. B. 360px, 768px, 1440px) und überprüfe die Seite gegen eine Juroren-Matrix (siehe references/jury.md). Korrigiere gefundene Probleme.

9. Bewegung und letzte Details

Füge subtile, sinnvolle Bewegung hinzu (Hover-Zustände, Scroll-Animationen, die die Hierarchie unterstützen). Die Seite muss auch ohne Bewegung vollständig funktionieren.

Schlussbericht

Dokumentiere die gewählte Richtung, die entwickelte Idee, alle Neuzeichnungen, die Quellen der gefundenen Bilder und die Ergebnisse der Juroren-Überprüfung.

---

Referenzen: references/copy.md, references/jury.md, <skill>/assets/base.css