tasteskill v2

Was macht 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 Farbverlauf, ein paar dünne Linien und eine Monospace-Beschriftung. Nichts daran ist falsch, und nichts daran wurde entschieden.

Dieser Skill ersetzt diese Standardwerte durch Entscheidungen, und zwar auf vier Arten:

1. Ein Skript gibt die Richtungen vor, du wählst daraus. Wenn ein Modell gebeten wird, ein Aussehen zu erfinden, greift es jedes Mal auf den Kategorie-Standard zurück. scripts/draw.mjs gibt drei von zwanzig recherchierten Richtungen vor; du wählst diejenige, die die Idee des Themas trägt, und das Skript liefert dann das zugehörige Typografie-System, die Farbpalette sowie Helden- und Abschnittskompositionen aus einer Bibliothek, die aus 247 echten Seiten destilliert wurde.
2. Die Idee kommt vom Thema. In der Studie unterschied das, was die besten Seiten von den vergesslichen trennte, ein Konzept, das von der Sache selbst stammte, nicht vom Styling.
3. Ein Hausstil ohne Verzierungen, gemessen in einem echten Browser mit scripts/inspect.mjs, sodass die Regeln überprüft und nicht nur erhofft werden.
4. Du siehst dir an, was du gemacht hast. Screenshots in drei Breiten, eine Bewertungsmatrix, korrigieren, noch einmal ansehen.

Eine Warnung, die sich im Testen gezeigt hat: Die Verzierungen wegzunehmen ist nur die halbe Arbeit; eine Seite, die ihre Labels, Linien und Karten verloren und nichts dafür bekommen hat, wirkt dünn, und blinde Juroren bevorzugen zu Recht eine reichhaltigere Seite mit deutlichen Merkmalen gegenüber einer leeren Seite ohne diese. Die andere Hälfte ist Substanz: größer gesetzte Schrift, ganze Farbflächen, echte Bilder aus der Welt des Themas (gefunden oder gezeichnet), und jeder Abschnitt mit seinem vollständigen Inhalt. Der Skill ist dafür gebaut, dir das zu geben; tausche es nicht gegen Zurückhaltung ein.

In den folgenden Befehlen steht <skill> für den Ordner dieses Skills. Führe sie vom Stammverzeichnis des Projekts aus, damit die Arbeitsdateien in .taste-skill/ dort landen. Die Skripte 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 der Reihenfolge aus. Die Schritte 1–5 dauern ein paar Minuten und entscheiden darüber, ob die Seite gut wird.

1. Lies das Briefing und das Projekt

Finde heraus, was real ist: das Thema, die Zielgruppe, die eine Sache, zu der die Seite jemanden bewegen soll, der verwendete Stack, eine 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 gar nichts. Plane nicht um Bilder herum, die du nicht hast. Nichts Eigenes ist selten wirklich nichts: die Stadt des Themas, seine Straße, seine Materialien und seine 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 (z. B. kein Produktname).

Erstelle dann in deinen Notizen eine Bestandsaufnahme des Themas: acht bis zwölf Dinge, die zu diesem Kunden und zu keinem Wettbewerber gehören. Achte auf seinen Namen und was der Name bedeutet; seine Adresse, Hausnummer, Straße und Nachbarschaft und wie dieser Ort aussieht (seine Fliesen, Schilder, Farben, Schriftarten an seinen Geschäften, sein Licht, sein Wetter); die Zahlen im Briefing (Sitzplätze, Zimmer, Minuten bis zum Meer, der Preis, das Jahr); die Einschränkungen, mit denen es lebt (nur eine Charge pro Monat, im Winter geschlossen, nach Vereinbarung); seine Materialien und Farben; seine Rituale und Öffnungszeiten (der Ofen um fünf angezündet, die Fähre um sieben); die gedruckten Dinge seiner Welt (ein Fahrplan, ein Etikett, eine Eintrittskarte, 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 gebaut (der Name des Kunden und seine Bedeutung, die Straße, in der er steht, die eine Einschränkung, die ihn zu dem macht, was er ist), 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 darin ist ein Suchbegriff für Schritt 6.

2. Schreibe das Argument

Erstelle vor dem Design eine Liste der Seite als Behauptungen mit ihren Beweisen, 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 Standardsequenz 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 gibt drei Richtungen aus und druckt eine kurze Zusammenfassung von jeder. Halte jede gegen deine Bestandsaufnahme: Welche Art zu komponieren kann etwas transportieren, das nur dieser Kunde hat? Wähle diese aus, nicht die vertrauteste, und schreibe eine Zeile in deinen Notizen, warum. In Tests war eine einzelne zufällige Richtung, die nicht zum Thema passte, der häufigste Grund 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ächsten passenden.
• --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 es nur an, wenn das Briefing eindeutig danach verlangt.
• --have: Assets, die wirklich existieren, kommagetrennt: photography (eigene Fotos des Projekts vom Ort, den Leuten oder der Arbeit), product-photo (Fotos des spezifischen Produkts oder ein Bildtool, das welche erstellen kann), product-ui (echte Screenshots), illustration, video. Lass es weg, wenn du keine hast: Der Draw vermeidet dann Kompositionen, die davon abhängen, und das Blatt sagt, wie man Bildslots ehrlich füllt (Software zeigt ihre eigene, in HTML gebaute Oberfläche; ein Produkt ohne Fotos wird gezeichnet und zwischen echte Bilder seiner Welt gesetzt, niemals eine gefälschte Produktaufnahme). Bilder, die du in den offenen Sammlungen findest, sind nicht die eigenen des Projekts; lass sie aus --have heraus.
• --keep palette,type: wenn die Marke bereits Farben oder Schriftarten festlegt. Der Draw gibt dann nur die Komposition aus, und du weist die Markenwerte den Rollen zu.

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

• Übernimm es. Mische es nicht mit dem Layout, das du ohnehin gemacht hättest. Wenn es sich ungewohnt anfühlt, gut: Das vertraute Layout ist genau das, das dieser Skill verhindern soll.
• Zeichne einen Slot nur aus einem Grund neu (--redraw hero | type | palette | photos | section:<rolle> | direction), den du nennen kannst: Er widerspricht einer festgelegten Markenbeschrä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 vorgegebener Abschnitt die realen Inhalte nicht aufnehmen kann (er vergleicht drei Pläne, und es gibt 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 mit dem Inhalt übereinstimmen, und übernimm ihn mit --redraw section:<rolle>=<id>.
• Überprüfe die Palette am Thema. Eine vorgegebene Palette ist eine Reihe von Proportionen (ein Grund, eine Schriftfarbe, ein Akzent, Flächen) genauso 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 vorgegebenen Proportionen und nimm die Farben stattdessen vom Thema, und vermerke dies im Bericht.
• Drucke es jederzeit neu aus mit node <skill>/scripts/draw.mjs --show. Lies es in einer längeren Sitzung vor jedem Abschnitt, den du baust, noch einmal.

4. Finde die Idee

Die Richtung ist eine Art zu komponieren. Die Idee ist das, was die Seite zu diesem Thema und keinem anderen macht. Schreibe diesen Satz in deine Notizen und beginne nicht mit dem Bauen, bis 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 vorgibt].

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

• Seine Ausgabe. Was produziert die Sache? Setze 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 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 Abfolge, die die Seite beim Scrollen durchführen kann?
• Sein Artefakt. Welches gedruckte Ding existiert bereits in seiner Welt: Eintrittskarte, Speisekarte, Etikett, Quittung, Einladung, Ordner, Handbuch?
• Sein Gegenteil. Welcher anderen Kategorie gehört das Gefühl, das dieser fehlt?

Fülle die erste Lücke aus deiner Bestandsaufnahme (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 Seiten, die die Jury der Studie am schlechtesten bewertete, waren die, 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 Zahl; 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, sie funktioniert auf einem Telefon mit einem Daumen, sie hat einen einfachen Fallback ohne Skript, sie blockiert nie das Lesen, und sie 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 Wörter

Schreibe die gesamte Seite als Textvorlage (reiner Text) vor dem Markup, nach references/copy.md:

• Jede Überschrift passt in zwei Zeilen oder weniger bei jeder Breite. Mache die Berechnung in copy.md §2, bevor du dich auf einen Satz festlegst: etwa 32 Zeichen sind überall sicher bei einer selbstbewussten Größe. Die untersuchten Galerie-Helden haben im Median 5 Wörter 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 ein Event: Was es ist, wann und wo (die Daten gehören in die Überschrift oder in die zweite Größe, niemals nur in Kleingedrucktem). 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 sucht (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 unruhigere verliert.
• Beispielhafte Details werden dort erwartet, wo das Briefing Lücken lässt (Gerichtenamen, Zimmertypen und -preise, 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 trotzdem

Baue die Seite mit in deinem Kopf ausgeschalteten Animationen; 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 eine neutrale Grundlage, von der du starten kannst (Reset, Token-Namen, fließende Schriftgrößen, Raster, Fokus- und Auswahlstile, die Bewegungshilfen); es hat keinen eigenen Look.
2. Der Hero, genau wie der Bauplan ihn beschreibt, in Desktop- und Handybreite. 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. 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 "<suchbegriff>" (Openverse, Wikimedia Commons, das Art Institute of Chicago und das Metropolitan Museum of Art; nur Lizenzen, die kommerzielle Nutzung erlauben, standardmäßig). Suche in der Bestandsaufnahme, nicht in der Kategorie: seine Straße in alten Postkarten, eine alte Karte der Nachbarschaft, sein Material aus der 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 Stich, der zum Seitenmotiv vergrößert wurde, die echte Karte der Straße als Kontaktabschnitt. Sieh dir jedes an, bevor du wählst; --get <ref> lädt es in das Verzeichnis assets/ herunter und zeichnet seine Quelle und Lizenz auf, und --credits