qwopop/competitor-reels-tool

tasteskill v2

Eine von einem Modell erstellte Seite sieht meist aus wie der Durchschnitt aller Seiten, die das Modell gesehen hat: eine zentrierte Überschrift in 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.

Dieses Skill ersetzt diese Standardeinstellungen durch Entscheidungen, auf vier Arten:

1. Ein Script teilt die Richtungen aus, Sie wählen daraus. Wenn man ein Modell bittet, einen Look zu erfinden, wählt es jedes Mal die Standard-Kategorie. scripts/draw.mjs teilt drei von zwanzig recherchierten Richtungen aus; Sie wählen diejenige, die die Idee des Themas trägt, und das Script teilt dann sein Schriftsystem, seine Palette, die Helden- und Abschnittskompositionen aus einer Bibliothek zu, die aus 247 echten Websites destilliert wurde.
2. Die Idee kommt vom Thema. In der Studie war das, was die besten von den vergessenswerten Websites unterschied, ein Konzept, das von der Sache selbst stammt, nicht von der Gestaltung.
3. Ein Hausstil ohne Verzierungen, gemessen in einem echten Browser durch scripts/inspect.mjs, sodass die Regeln überprüft und nicht nur erhofft werden.
4. Sie sehen an, was Sie gemacht haben. Screenshots in drei Breiten, eine Bewertungsmatrix des Jurors, korrigieren, nochmal ansehen.

Eine im Test gelernte Warnung. Die Verzierungen wegzunehmen ist nur die halbe 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 Hinweisen gegenüber einer leeren Seite ohne. 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, der seinen vollständigen Inhalt trägt. Das Skill ist gebaut, um Ihnen das zu geben; tauschen Sie es nicht gegen Zurückhaltung ein.

In den folgenden Befehlen steht <skill> für den Ordner dieses Skills. Führen Sie sie vom Projektstamm aus, damit die Arbeitsdateien dort in .taste-skill/ 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ühren Sie diese Schritte der Reihe nach aus. Die Schritte 1–5 dauern ein paar Minuten und entscheiden, ob die Seite gut wird.

1. Brief und Projekt lesen

Finden Sie heraus, was real ist: das Thema, die Zielgruppe, die eine Sache, zu der die Seite jemanden bewegen soll, der Stack, etwaige bestehende Marke (Farben, Schriften, Logo), und vor allem welche Bilder wirklich existieren: die eigenen Fotografien oder Produktaufnahmen des Projekts, eine echte Oberfläche, die gezeigt werden kann, ein Bildgenerierungstool, das Sie aufrufen können, oder nichts. Planen Sie nicht um Bilder herum, die Sie nicht haben. Nichts Eigenes ist selten gar nichts: die Stadt, die Straße, die Materialien und die Geschichte des Themas sind in offenen Archiven und Museen, kostenlos nutzbar mit einer Quellenangabe (Schritt 6, scripts/assets.mjs).

Wenn die Anfrage vage ist, entscheiden Sie und geben Sie Ihre Lesart in einem Satz bekannt, anstatt nachzufragen. Fragen Sie nur, wenn eine fehlende Tatsache die Arbeit blockiert (z. B. kein Produktname).

Dann inventarisieren Sie das Thema in Ihren Notizen: acht bis zwölf Dinge, die zu diesem Kunden gehören und zu keinem Konkurrenten. Suchen Sie nach seinem Namen und was der Name bedeutet; seiner Adresse, Hausnummer, Straße und Nachbarschaft, und wie dieser Ort aussieht (seine Fliesen, Schilder, Anstrichfarben, Schriftarten an seinen Ladenfronten, sein Licht, sein Wetter); den Zahlen im Brief (Sitzplätze, Zimmer, Minuten bis zum Meer, der Preis, das Jahr); den Einschränkungen, mit denen es lebt (nur eine Charge pro Monat, im Winter geschlossen, 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 für die Idee in Schritt 4. In Blindtests wurde die Seite, die jedes Brief gewann, aus einem Element einer solchen Liste gebaut (der Name des Kunden und was er bedeutet, 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 Ihre Bildersuche: jeder Ort, jedes Material und jedes gedruckte Ding darauf ist eine Suchanfrage für Schritt 6.

2. Das Argument schreiben

Vor jedem Design listen Sie die Seite als Behauptungen mit ihrem Beweis auf, eine Zeile pro Abschnitt, so wie references/copy.md §1 es zeigt. Die Behauptungen entscheiden, welche Abschnitte existieren und in welcher Reihenfolge. Löschen Sie jeden Abschnitt, der keine Behauptung hat. So vermeiden Sie die Standardsequenz von Hero, Logos, drei Funktionen, Testimonial, Preisgestaltung, 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 Ihres Arguments> [--tone <Ton>] [--have <Assets>] [--keep palette,type] \
  --options 3

Dies teilt drei Richtungen aus und gibt eine kurze Zusammenfassung jeder einzelnen. Halten Sie jede gegen Ihre Inventarliste: welche Art der Komposition kann etwas tragen, das nur dieser Kunde hat? Wählen Sie die, nicht die vertrauteste, und notieren Sie einen Satz dazu, warum. Im Test war eine einzige zufällige Richtung, die nicht zum Thema passte, die häufigste Ursache für eine schwache Seite. Teilen Sie 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ählen Sie 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. Geben Sie ihn nur an, wenn das Brief eindeutig danach verlangt.
• --have: Assets, die wirklich existieren, durch Komma getrennt: photography (die eigenen Fotografien des Projekts vom Ort, den Personen oder der Arbeit), product-photo (Fotografien des spezifischen Produkts oder ein Bildtool, das sie erstellen kann), product-ui (echte Screenshots), illustration, video. Lassen Sie es weg, wenn Sie keine haben: das Draw vermeidet dann Kompositionen, die von ihnen 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 Fotografien wird gezeichnet und zwischen echten Bildern seiner Welt platziert, niemals eine gefälschte Produktaufnahme). Bilder, die Sie in den offenen Sammlungen finden, sind nicht die eigenen des Projekts; lassen Sie sie aus --have heraus.
• --keep palette,type: wenn die Marke bereits Farben oder Schriftarten festlegt. Das Draw teilt dann nur die Komposition zu, und Sie ordnen die Werte der Marke den Rollen zu.

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

• Übernehmen Sie es. Mischen Sie es nicht mit dem Layout, das Sie ohnehin gemacht hätten. Wenn es sich unvertraut anfühlt, gut: das vertraute Layout ist das, das dieses Skill verhindern soll.
• Zeichnen Sie einen Slot neu (--redraw hero | type | palette | photos | section:<Rolle> | direction) nur aus einem Grund, den Sie angeben können: es widerspricht einer genannten Markenrichtlinie oder benötigt ein Asset, das nicht existiert. Zeichnen Sie nie neu, um etwas Bequemeres zu bekommen. Notieren Sie jede Neuzeichnung in Ihrem Bericht.
• Wenn ein zugeteilter 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), biegen Sie den Inhalt nicht zurecht. Listen Sie die anderen mit --alternatives <Rolle> auf, wählen Sie die, deren Annahmen zum Inhalt passen, und übernehmen Sie sie mit --redraw section:<Rolle>=<id>.
• Prüfen Sie die Palette gegen das Thema. Eine zugeteilte Palette ist eine Reihe von Proportionen (ein Grund, eine Tinte, ein Akzent, Felder) ebenso wie eine Reihe von Farben. Wenn ihre Farben mit dem eigenen Material des Themas kämpfen (Bonbonpastelle für einen Torfwhisky, Neon für eine Berghütte), zeichnen Sie die Palette einmal neu; wenn das Thema unverkennbare eigene Farben hat (sein Material, die Farbe seiner Straße, die Landschaft außerhalb seiner Fenster), behalten Sie die zugeteilten Proportionen und nehmen Sie stattdessen die Farben vom Thema, und sagen Sie dies im Bericht.
• Drucken Sie es jederzeit mit node <skill>/scripts/draw.mjs --show erneut. Lesen Sie es in einer langen Sitzung vor jedem Abschnitt, den Sie bauen, noch einmal durch.

4. Die Idee finden

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. Schreiben Sie diesen Satz in Ihre Notizen und beginnen Sie 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 verlangt].

Orte, an denen Sie nach der ersten Lücke suchen können:

• Seine Ausgabe. Was produziert das Ding? Setzen Sie 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ößern Sie es, beschneiden Sie es, machen Sie es zum Rahmen oder zum einzigen Motiv.
• Sein Name. Können die Buchstaben ein Foto halten, sich zu einer Wand stapeln, auf zwei Ecken aufteilen?
• 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 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 einen fehlt?

Füllen Sie die erste Lücke aus Ihrer Inventarliste (Schritt 1), nicht aus der Kategorie. Der Konkurrenztest: Setzen Sie den nächsten echten 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