aeentech/thumbnail

Was macht thumbnail?

Verwandle eine Website, ein lokales Webprojekt oder einen einzelnen Artikel in ein fertiges, hochauflösendes Thumbnail, das aussieht, als gehöre es zu dieser Seite. Das Bild wird aus HTML/CSS aus dem eigenen Material der Seite zusammengesetzt und als PNG und verlustfreies WebP gerendert.

Prinzipien

• Von der Seite inspiriert. Jedes Thumbnail ist eine neue Komposition aus den charakteristischen Elementen der Seite: ihrem Helden-Bild, Komponenten, Bildmaterial, Motiven, Typografie und Farben. Ein Screenshot in einem Geräterahmen ist nur eine von neun Kompositionen und niemals die Standardeinstellung.
• Nur echtes Material. Verwende das reale Logo, Bilder, Texte, Zahlen, Farben und Schriftarten der Seite. Erfinde niemals Funktionen, Preise, Statistiken oder Behauptungen.
• Ein Ergebnis pro Durchlauf. Läuft vollständig automatisch ab. Die einzige Frage, die dieses Skill stellen darf, ist die Sprachfrage in Eingaben → Sprache.

Kommunikation

• Arbeite still. Beschreibe keine Schritte, Ergebnisse, Designentscheidungen, Wiederholungen oder Korrekturen. Die Analyse bleibt in Tool-Aufrufen und in brief.md. Halte Tool-Aufruf-Beschreibungen kurz und neutral.
• Sprich nur bei Bedarf: die Sprachfrage, ein blockierendes Problem, das der Benutzer lösen muss (die Seite ist nicht erreichbar, das Projekt kann nicht ausgeführt werden) und die endgültige Auslieferung.
• Sitzungssprache. Schreibe jede benutzerseitige Nachricht (Fragen, Optionen, Fehler, die endgültige Antwort) in der Sprache, die der Benutzer schreibt, unabhängig von der Sprache des Thumbnails.
• Endgültige Antwort. Zeige das Bild, dann gib die PNG- und WebP-Pfade sowie zwei bis vier kurze Zeilen an: Komposition, Format, Satz, Kategorie und woher Logo, Farben und Schriftart stammen. Beende mit einer Zeile, die Änderungen anbietet, und einer Zeile, die ein anderes Format vorschlägt (siehe references/formats.md). Keine Prozesszusammenfassung.

Einrichtung

Pfade sind relativ zu diesem Skill-Verzeichnis (dem Ordner, der diese Datei enthält). Definiere SKILL_DIR als diesen Ordner und S=$SKILL_DIR/scripts.

Script	Zweck
`inspect.mjs <url	file>`
`extract.mjs <url	file> --out `
`extract.mjs <url	file> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	file> --out <file.png> [--width --height --scale --wait]`
render.mjs <file.html> [--out <file.png>]	Rendert eine Komposition in 2x zu PNG und verlustfreiem WebP. Liest die Leinwandgröße aus der Seite und meldet geladene Schriftarten, fehlgeschlagene Schriftarten, defekte Bilder und überlaufenden Text.
history.mjs / history.mjs add <site> "<composition>"	Zeigt oder zeichnet kürzlich verwendete Kompositionen auf.

Die Skripte haben keine npm-Abhängigkeiten. Falls kein Browser gefunden wird, setze CHROME_PATH. Unter macOS kann head von einem Perl-Tool überlagert werden; lese Dateien mit cat, sed -n oder python3.

Eingaben

Löse diese vier Eingaben vor dem Entwurf auf.

Ziel

• URL-Modus: Die Anfrage enthält eine URL oder Domain. Ausgabeordner: ./thumbnail-<domain>/ im aktuellen Arbeitsverzeichnis. Behandle andere Wörter in der Anfrage als Notizen, z. B. eine Sprache, ein Format, eine Komposition oder einen Stilwunsch.
• Projekt-Modus: Keine URL. Ziel ist das aktuelle Projekt. Ausgabeordner: ./thumbnail/ im Projektstammverzeichnis.

Behalte jede Datei für den Durchlauf im Ausgabeordner.

Seitentyp (URL-Modus)

Führe zuerst inspect.mjs aus und lese page.type:

• site: Das Thumbnail handelt von der gesamten Website.
• article: Die URL ist ein einzelner Artikel, Blogbeitrag, Leitfaden oder eine Nachricht. Das Thumbnail handelt vom Thema des Artikels, gestaltet mit der Identität der Seite. Verwende den Ausgabeordner ./thumbnail-<domain>-<slug>/, wobei der Slug das letzte Pfadsegment ist, auf etwa 40 Zeichen gekürzt.

Die Erkennung verwendet og:type, JSON-LD (Article, BlogPosting, NewsArticle…), ein Veröffentlichungsdatum, ein <article>-Element, Blog-ähnliche URL-Pfade und Textlänge. Die Notizen des Benutzers überschreiben dies: "Über die Seite" bedeutet Seite, und "Über den Artikel" oder "Über das Thema" bedeutet Artikel, in jeder Sprache.

Sprache

Bestimme die Inhaltssprache anhand von lang und dir, Überschriften und UI-Text. Im Projekt-Modus überprüfe auch <html lang> und Gebietsschema-Ordner wie locales/<code> oder messages/<code>.json.

1. Wenn die Notizen des Benutzers eine Sprache nennen, verwende sie.
2. Wenn die Seite eine einzige Sprache hat, verwende sie. Arabisch, Persisch, Urdu und Hebräisch werden von rechts nach links angeordnet.
3. Wenn die Seite zwei oder mehr Sprachen vollständig unterstützt, frage den Benutzer, welche verwendet werden soll. Verwende das Frage-Tool des Agents, falls vorhanden; ansonsten frage im Chat und warte. Empfehle das Standard-Gebietsschema der Seite.
4. Wenn die Sprache unklar ist, verwende Arabisch.

Der Satz, die Kategorie und jeder zusätzliche Text werden in der gewählten Sprache verfasst.

Format

• Standard: Ein Portfolio-Thumbnail, 1080 × 720, für eine Seite; Open Graph, 1200 × 630, für einen Artikel.
• Auf Anfrage: Wenn der Benutzer eine Plattform, Platzierung, ein Seitenverhältnis oder eine genaue Größe nennt, löse es mit $SKILL_DIR/references/formats.md auf. Diese Datei enthält auch den Ausgabedateinamen, die sicheren Zonen für vertikale Formate und Layout-Richtlinien.
• Jedes Format wird in 2x gerendert und als PNG und verlustfreies WebP exportiert.

Arbeitsablauf

Arbeite in wenigen Durchgängen. Jeder Durchlauf liest die gesamte Konversation erneut, daher treibt die Anzahl der Durchgänge die Kosten weit mehr als jede einzelne Datei. Fasse unabhängige Befehle in einem Shell-Aufruf zusammen, lese unabhängige Dateien im selben Durchlauf parallel und lese niemals eine Datei oder ein Bild erneut, die du bereits gesehen hast.

1. Erreichbarkeit des Ziels herstellen

• URL-Modus: Verwende die URL.
• Statisches Projekt (eine index.html und kein Build-Schritt): Verwende den Dateipfad. Wenn Assets root-absolute Pfade verwenden, bediene den Ordner im Hintergrund (z. B. python3 -m http.server 4173) und verwende http://localhost:4173.
• Framework-Projekt (eine package.json mit dev, start oder preview): Installiere Abhängigkeiten, falls node_modules fehlt, mit dem Paketmanager, der zur Lock-Datei passt. Starte den Dev-Server im Hintergrund, lese seinen Port aus der Ausgabe und warte, bis curl -s -o /dev/null -w "%{http_code}" <url> antwortet. Stoppe den Server, sobald die Extraktion abgeschlossen ist.
• Kann nicht ausgeführt werden: Verwende eine bereitgestellte URL aus package.json (homepage) oder der README. Wenn es keine gibt, erstelle aus den eigenen Assets des Projekts (Bilder, Komponenten, Styles) und informiere den Benutzer.

2. Inspizieren, extrahieren und Verlauf prüfen (ein Befehl)

Führe alle drei in einem einzigen Shell-Aufruf aus:

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

Wenn inspect.json zeigt, dass die Seite ein Artikel ist, benenne den Ordner in deinem nächsten Shell-Aufruf in ./thumbnail-<domain>-<slug>/ um.

3. Inhalt verstehen und Identität studieren (ein Durchlauf)

Lese im selben Durchlauf die Schlüsselfelder von inspect.json (drucke sie mit einem kurzen Skript, nicht die gesamte Datei) und betrachte extract/overview.png. Die Übersicht ist ein Kontaktblatt jedes Screenshots (Hero, Abschnitte, Elemente, Bilder), jeweils mit dem Dateinamen beschriftet.

Inhalt

• Seite: Was ist sie, für wen ist sie, was bietet sie und was macht sie einzigartig? Verwende inspect.json, extract.json und im Projekt-Modus die README, package.json, Landing- und Hero-Komponenten, Gebietsschema-Dateien, Meta-Tags, Manifest und Styles.
• Artikel: Worum geht es in dem Artikel und was wird der Leser daraus mitnehmen? Verwende page.article (Überschrift, Beschreibung, Abschnitt, Tags, Autor, Datum, Lesezeit, Unterüberschriften, Titelbild, Bilder im Artikel, Code-Blöcke) und den Artikeltext.
• Wenn der Seitentext dünn ist (eine clientseitig gerenderte Seite oder eine Bot-Wand), rufe ihn auf andere Weise ab, z. B. mit einem Web-Fetch-Tool oder curl.

Identität: Notiere aus der Übersicht (plus dem Titelbild für einen Artikel):

• Stimmung und Stil: fotografisch, 3D, flache Illustration, luxuriös, verspielt, technisch, redaktionell, minimalistisch…
• Charakteristische Elemente: die zwei bis vier Dinge, an denen die Leute die Website erkennen, z. B. ein Helden-Bild oder -Objekt, eine markante Karte oder Produktkachel, ein Motiv, ein Codebeispiel, ein Icon-Set, ein Farbverlauf, eine typografische Behandlung.
• Tokens: Farben, Seitenhintergrund, Button-Farben, Radien, Schatten, Farbverläufe, Überschriften-Stil und Badge- oder Button-Stil.

4. Komposition wählen

Wenn der Benutzer explizit nach einer Komposition fragt, verwende sie. Dies gilt, wenn der Benutzer eine nennt (z. B. "Component Collage") oder deren Idee klar beschreibt, in jeder Sprache (z. B. "eine Collage der Karten der Site" oder "ein Raster ihrer Funktionen"). Verwende diese Komposition, auch wenn sie kürzlich verwendet wurde, und überspringe die Verlaufsprüfung. Seine anderen Notizen gelten weiterhin.

Andernfalls wähle selbst:

1. Verwende den in Schritt 2 gedruckten Verlauf.
2. Lese $SKILL_DIR/references/compositions.md und wähle die Komposition, die die charakteristischen Elemente dieser Seite am besten ausdrückt.
3. Vermeide die in den letzten beiden Durchläufen verwendeten Kompositionen, es sei denn, nichts anderes passt.
4. Schreibe <out>/brief.md. Halte es kurz: Identitäts-Schlüsselwörter, charakteristische Elemente und die Dateien, die du verwenden wirst, die gewählte Komposition und warum, sowie eine einzeilige Layout-Skizze.

5. Ausgewählte Assets in voller Größe öffnen (ein Durchlauf)

Die Übersicht dient der Auswahl, nicht den Details. Sobald du weißt, welche zwei bis vier Assets das Design verwenden wird (und das Logo), öffne sie in voller Auflösung, alle parallel in einem Durchlauf, um kleinen Text, feine Motive und Schärfe vor dem Entwurf zu prüfen. Wenn ein benötigter Teil nicht erkannt wurde, erfasse ihn mit extract.mjs --selector im selben Durchlauf.

6. Inhalt schreiben

Satz

• Seite: Was die Seite bietet und warum es wichtig ist. Verwende 5–10 Wörter für Arabisch und 6–12 Wörter für Englisch oder andere Sprachen. Schreibe natürlichen Marketing-Text ohne abschließenden Punkt und wiederhole nicht den Seitennamen.
• Artikel: Die Kernidee des Artikels, entweder die auf die passende Länge gekürzte Überschrift oder eine getreue einzeilige Zusammenfassung. Verwende 5–12 Wörter für Arabisch und 6–14 für andere Sprachen. Füge nichts hinzu, was nicht im Artikel steht.
• Es muss in drei Zeilen passen. Du kannst ein bis drei Schlüsselwörter mit der Akzent- oder Überschriftenbehandlung der Seite hervorheben.

Kategorie

• Zwei oder drei Wörter in der Sprache des Thumbnails.
• Seite: Die Art des Produkts, z. B. Online-Shop, E-Learning-Plattform, Unternehmenswebsite, SaaS-Dashboard, Buchungsplattform oder Portfolio.
• Artikel: Der Abschnitt oder das Thema des Artikels, z. B. Leitfaden, Fallstudie, Tutorial oder das Thema selbst.

Artikel-Zusätze (optional)

• Autor, Datum und Lesezeit, klein gesetzt. Verwende nur reale Werte von der Seite.

Logo

• Verwende immer das reale Logo und betrachte es vor der Verwendung.
  • Projekt: Suche in public/, static/, assets/, src/assets/ und app/ nach logo*.{svg,png,webp}, icon*.svg, favicon.svg, apple-touch-icon.png und icon-512*.png, sowie nach Manifest-Icons und Inline-Logo-Komponenten.
  • URL: Verwende inspect.json: logoSvgs (Inline-SVG), logoBackgrounds (als CSS-Hintergründe gezeichnete Logos, oft ein fertiges SVG), logoImgs und icons. Bevorzuge ein Vektor- oder transparentes Logo; schneide es nur als letzten Ausweg aus extract/elements/*-header.png aus, da ein Ausschnitt den Seitenhintergrund mitbringt. Speichere Dateien im Ausgabeordner.
• Inline-SVGs, die currentColor oder CSS-Variablen verwenden, benötigen echte Füllfarben. Setze keinen Kasten oder Hintergrund hinter das Logo, es sei denn, er wird für den Kontrast benötigt: helle Logos auf dunklen Bereichen, dunkle Logos auf hellen Bereichen.
• Bei einem Artikel ist das Logo eine kleine Signatur, nicht der Held.
• Wenn kein Logo vorhanden ist, verwende ein Lucide-Icon, das die Idee ausdrückt (https://cdn.jsdelivr.net/npm/[email protected]/icons/<name>.svg), gestaltet in den Markenfarben. Zeichne niemals ein gefälschtes Logo.

7. Schriftart

• Quellen: extract/fonts.css (eigene @font-face-Regeln der Seite, mit heruntergeladenen Schriftartdateien) und extract.json (fonts.google). Im Projekt-Modus überprüfe auch next/font, @font-face-Regeln, Google Fonts-Importe, die Tailwind-fontFamily-Einstellung und Schriftartdateien in public/fonts.
• Laden: Füge den <link> direkt nach dem Noto Sans-Link in der Leinwand ein, setze dann --font: "<Site Font>", "Noto Sans Arabic", "Noto Sans", sans-serif.
• Abdeckung prüfen: Die Schriftart muss die Schrift des Thumbnails abdecken. Eine reine Lateinschrift kann keinen arabischen Text rendern, also verwende als Fallback Noto Sans Arabic. Wenn eine Display-Schriftart nur eine Strichstärke hat, verwende diese Strichstärke; täusche niemals Fettdruck vor.
• Fallback: Wenn die Schriftart in der von render.mjs gemeldeten fonts-Liste fehlt oder in failedFonts erscheint, verwende stattdessen Noto Sans Arabic oder Noto Sans.

8. Erstellen und rendern

1. Kopiere $SKILL_DIR/assets/canvas.html nach <out>/<name>.html. Der Name ist thumbnail für das Standardformat und thumbnail-<preset> für andere Formate.
2. Setze die Leinwandgröße mit --w und --h in der ersten :root-Regel (Standard ist 1080px × 720px). Gestalte das Layout für diese Form, und halte bei vertikalen Formaten den Text innerhalb der sicheren Zone.
3. Gestalte in einfachem HTML und CSS; Inline-SVG ist willkommen.
   • Ersetze die Design-Variablen und die .canvas-Hintergrundregel am Ende des <style>-Blocks und füge dann deine eigenen Regeln danach hinzu.
   • Setze das Markup innerhalb von <div class="canvas"> und lasse das schließende <script> unverändert.
   • Verweise auf Assets mit relativen Pfaden, z. B. extract/images/…, extract/elements/… und logo.png.
4. Markiere Text für den Renderer:
   • data-fit="3" am Satz verkleinert ihn, bis er in drei Zeilen passt. data-min setzt die kleinste Größe; es geht niemals unter das lesbare Minimum des Formats.
   • data-text="<name>" an Textelementen ermöglicht dem Renderer, Überlauf zu melden.
   • data-decor an Text, der nicht gelesen werden soll (ein als Type gesetztes Logo, ein großes Hintergrundwort...)

[Fortsetzung gemäß Original-SKILL.md – hier abgeschnitten wegen Kürzung für die Übersetzung]