Text to Elegant Image

Was macht Text to Elegant Image?

• Version: 1.2.1
• Lizenz: MIT
• Autor: Evan Song · github.com/Songhonglei
• Repository: https://github.com/Songhonglei/text-to-elegant-image

Wandelt Markdown oder Klartext in ein wunderschön formatiertes, hochauflösendes Langbild um. Dies geschieht durch die Generierung einer HTML-Datei und die Aufnahme eines Screenshots mit dem Headless-Browser Puppeteer.

Ressourcendateistruktur

resources/
├── styles/               # 18 Stile, eine Datei pro Stil (enthält CSS + HTML-Beispiel + Komponentenvariablen-Zuordnung + Dekoration)
│   ├── 01_cyberpunk.md … 18_vivid.md
│   └── _BASE.md          # Allgemeines HTML-Gerüst + Typografieregeln + Referenz auf Open-Source-CSS-Toolbibliotheken
└── components.css        # Allgemeine visuelle Komponentenbibliothek (KPI-Karten/Fortschrittsbalken/Vergleichsbalken/Donut/Prozess/Zeitleiste usw.)

Lese-Disziplin: Nur die benötigten Dateien lesen. Nachdem der Stil festgelegt wurde, nur die entsprechenden styles/NN_key.md- und styles/_BASE.md-Dateien lesen; keine anderen Stildateien lesen. Wenn der Inhalt Daten/Prozesse/Vergleiche enthält, zusätzlich components.css lesen.

Stilauswahl

Insgesamt 18 Stile:

#	Datei	Stil	Visuelle Schlüsselwörter	Am besten geeignet für
1	01_cyberpunk.md	Cyberpunk-Technologie-Stil (Standard)	Dunkel/Neon/SVG-Wabengitter	KI-Analysen, Tech-Berichte, coole Poster
2	02_minimal.md	Minimalistisch-eleganter Stil	Weißer Hintergrund/Serifen/Weißraum/Rauschen-Reispapier	Literarische Essays, Tagebücher, humanistisches Wissen
3	03_apple.md	Apple-Design-Stil	Hellgrau/Milchglas-Karten/Bunte Fenster	Produktivitätstools, Retrospektiven, Methodiken
4	04_cowork.md	Cowork-Leicht-Technik-Stil	Apple Grauweiß/Tech-Blau/Mattglas-Hero	Interne Präsentationen, KI-Tool-Einführungen, Produkthandbücher
5	05_newspaper.md	Zeitungs-/Magazin-Stil	Cremefarben/Bleistift-Kornmuster/Schwarzweiß-Druck	Historische Ereignisse, Zeitleisten, tiefgehende Erzählungen
6	06_bloomberg.md	Bloomberg-Terminal-Stil	Reinschwarz/CRT-Muster/Oranger Leuchttext	Datenberichte, Kennzahlenvergleiche, Finanztechnologie
7	07_ink.md	Tuschemalerei-Rollen-Stil	Reispapier-Verlauf/Zinnoberrot/Pinselschwung-Linien	Chinesische Geschichte, Kunst & Kultur, östliche Ästhetik
8	08_steampunk.md	Steampunk-Stil	Dunkelbraun/Kupferfarbene Zahnräder/Waben-Nieten/Druckmesser	Industriegeschichte, Technologiesprünge, Maschinenästhetik
9	09_xhs.md	Xiaohongshu-Stil	Weißer Hintergrund/Offizielles Rot/Abgerundete Karten	Wissensnotizen, Lebensratgeber, nützliche Tipps
10	10_morandi.md	Morandi-Edelgrau-Stil	Warmgrau-Beige-Hintergrund/Graugrün/Farbkartenstreifen/Zurückhaltender Weißraum	Markenmethodiken, Retrospektiven, humanistische Essays
11	11_glass.md	Glasmorphismus-Stil	Farbverlaufshintergrund/Lichtflecken-Kugeln/Mattglaskarten	SaaS-Websites, Eventseiten, Funktionsvorstellungen
12	12_palace.md	Verbotene-Stadt-Stil	Dunkelbrauner Holzgrund/Zinnoberrot/Goldene Schrift/Mäander-Siegel	Chinesische Geschichte, Chinatown-Feste, Kultur- & Museumsausstellungen
13	13_fresh.md	Frischer Naturgrün-Stil	Hellminzgrund/Waldgrün/Blattelemente	Gesundheit & Umweltschutz, Lebensstil, wissenschaftliche Ratgeber
14	14_earthy.md	Erdiger Holzstil	Leinenstruktur/Terrakotta-Orange/Handgenähte Kartenkanten	Handwerklicher Kaffee, Lebensästhetik, Markengeschichten
15	15_dreamy.md	Elegant-Lila-Träumerischer Stil	Lavendelgrund/Lila-Verlauf/Sternenstaub	Beauty & Mode, Emotionen, Event-Poster
16	16_macaron.md	Macaron-Pastell-Stil	Cremiger Rosé-Grund/Punkte/Zuckerkügelchen-Nummern	Desserts & Babyartikel, Lebensfreude, Feiertagsgrüße
17	17_carbon.md	Dunkler Minimalismus-Stil	Kohlegrauer Tiefgrund/Blau-Grün/Terminal-Zeilennummern	Technische Dokumentation, Entwicklerinhalte, Datenberichte
18	18_vivid.md	Vitaler Farbverlaufs-Stil	Lila-Rosa-Orange-Verlauf/Flüssige Farbblöcke/Farbverlaufsumrandete Karten	Event-Promotion, junge Marken, Musik & Unterhaltung

Zwei Modi des Xiaohongshu-Stils (Stil 9)

Stil 9 hat zwei integrierte Untermodi, die vom Benutzer angegeben werden; Standard ist Modus A, wenn nicht angegeben:

Modus	Auslöser	Charakter
A — Schlicht & Formell	"einfach"/"formell"/"sauber"/"wissensreich"	Feine Ränder, kleine abgerundete Ecken, unterstrichene Nummern, viel Atmungsaktivität
B — Reichhaltig & Verspielt	"verspielt"/"reichhaltig"/"niedlich"/"lebendig"/"lustig"	Hellrosa, große abgerundete Ecken, ausgefüllte Kreisnummern, Wellenlinien, Footer mit Leittext

Nach der Generierung den Benutzer über den aktuellen Modus informieren und auf die Wechselmöglichkeit hinweisen:

"Bereits mit der schlichten Version erstellt. Wenn Sie den verspielten Stil bevorzugen, sagen Sie einfach 'Mach eine verspielte Version'."

Stilauswahl-Leitfaden

Wenn der Benutzer keinen Stil angibt, automatisch basierend auf dem Inhaltstyp empfehlen und dem Benutzer die Optionen mitteilen:

Inhalt tendiert zu → Empfohlener Stil
──────────────────────────────────────
Technologie/KI/Datenanalyse        → Cyberpunk-Technologie-Stil oder Bloomberg-Terminal-Stil
Geschichte/Zeitleiste/Erzählung    → Zeitungs-Magazin-Stil oder Tuschemalerei-Rollen-Stil (chinesische Geschichte)
Industrie/Mechanik/Technologiesprünge → Steampunk-Stil
Produktivität/Methodik/Retrospektive → Apple-Design-Stil oder Cowork-Leicht-Technik-Stil
Literatur/Tagebuch/Humanistisches  → Minimalistisch-eleganter Stil oder Tuschemalerei-Rollen-Stil
Interne Unternehmenspräsentationen → Cowork-Leicht-Technik-Stil
Wissensnotizen/Lebensratgeber/Tipps   → Xiaohongshu-Stil
Markenmethodik/Retrospektive/Hochwertigkeitsgefühl → Morandi-Edelgrau-Stil
SaaS/Produktseite/Eventseite       → Glasmorphismus-Stil oder Vitaler Farbverlaufs-Stil
Chinesische Geschichte/Chinatown-Feste/Kultur & Museen → Verbotene-Stadt-Stil oder Tuschemalerei-Rollen-Stil
Gesundheit/Umweltschutz/Lebensstil → Frischer Naturgrün-Stil
Handwerk/Kaffee/Lebensästhetik     → Erdiger Holzstil
Beauty/Mode/Gefühle/Romantik       → Elegant-Lila-Träumerischer Stil
Desserts/Babyartikel/Niedlich/Inspirierend → Macaron-Pastell-Stil
Technische Dokumentation/Entwickler/Augenfreundlich → Dunkler Minimalismus-Stil
Events/Promotion/Trends/Jung       → Vitaler Farbverlaufs-Stil

Beispiel für Empfehlungsformulierung:

"Basierend auf dem Inhalt empfehle ich den 'Xiaohongshu-Stil' (notizenartig, gut zum Teilen) oder den 'Apple-Design-Stil' (mehr Tool-Charakter). Es gibt insgesamt 18 Stile zur Auswahl, Sie können auch direkt sagen, welchen Sie möchten (z.B. 'Verbotene-Stadt-Stil', 'Morandi', 'Glasmorphismus')."

Schlüsselwort-Matching bei Stilpräferenzen des Benutzers:

• "Technikgefühl"/"cool"/"dunkel"/"Neon" → Cyberpunk-Technologie-Stil
• "minimalistisch"/"weiß"/"sauber"/"künstlerisch" → Minimalistisch-eleganter Stil
• "Apple-Design"/"modern"/"produktartig" → Apple-Design-Stil
• "Leicht-Technik"/"intern"/"blau"/"Apple-Design-blau"/"Technikblau" → Cowork-Leicht-Technik-Stil
• "Zeitung"/"Magazin"/"historisch"/"Retro-Druck" → Zeitungs-Magazin-Stil
• "Daten"/"Finanzen"/"Terminal"/"Bloomberg" → Bloomberg-Terminal-Stil
• "Tuschemalerei"/"chinesisch"/"östlich"/"Rolle"/"Alt-China" → Tuschemalerei-Rollen-Stil
• "Dampf"/"Punk"/"mechanisch"/"kupfer"/"Zahnrad"/"Retro-Industrie" → Steampunk-Stil
• "Xiaohongshu"/"Notiz"/"Inspiration"/"Tipps"/"Teilen"/"Rot" → Xiaohongshu-Stil (Offizielles Rot #FF2442)
• "Morandi"/"Edelgrau"/"niedrige Sättigung"/"ruhig"/"hochwertig" → Morandi-Edelgrau-Stil
• "Glas"/"Milchglas"/"matt"/"transparent"/"durchsichtig"/"SaaS" → Glasmorphismus-Stil
• "Verbotene Stadt"/"Palast"/"Rote Mauer"/"Goldene Schrift"/"Zinnober"/"Chinatown-Stil" → Verbotene-Stadt-Stil
• "frisch"/"grün"/"natürlich"/"Minze"/"umweltfreundlich"/"Wald" → Frischer Naturgrün-Stil
• "Erdtöne"/"Holz"/"Terrakotta"/"Leinen"/"handgemacht"/"warm und bodenständig" → Erdiger Holzstil
• "lila"/"träumerisch"/"Lavendel"/"romantisch"/"elegantes Lila" → Elegant-Lila-Träumerischer Stil
• "Macaron"/"pink"/"Pastell"/"süß"/"niedlich"/"mädchenhaft" → Macaron-Pastell-Stil
• "dunkel"/"tief"/"schwarzer Minimalismus"/"augenfreundlich"/"Technikgefühl"/"Entwickler" → Dunkler Minimalismus-Stil
• "Farbverlauf"/"vital"/"trendy"/"jung"/"bunt"/"Spannung" → Vitaler Farbverlaufs-Stil

Layout-Modi (Langbild / Poster)

Standardmäßig wird ein Langbild ausgegeben (560px breit, vertikale Blöcke). Wenn der Benutzer "Poster"/"Zitat-Poster"/"Titelbild"/"Cover" sagt, wird in den anderen Layout-Modus gewechselt:

Layout	Auslöser	Spezifikation	Layout-Schwerpunkte
Langbild (Standard)	"Langbild"/"Großbild"/nicht angegeben	Breite 560px, Höhe automatisch	Titelbereich + mehrere Inhaltsblöcke, vollständiger Inhalt
Zitat-Poster	"Poster"/"Zitat"/"Teilen-Bild"	Breite 600px, Höhe 800px fest (3:4)	Ein zentrales Zitat vergrößert und zentriert + viel Weißraum + kleine Quellenangabe, Inhalt auf 30 Zeichen begrenzt
Titelkarte	"Cover"/"Titelbild"	Breite 600px, Höhe 800px fest (3:4)	Großer Titel + Untertitel + 2-3 kurze Verkaufsargumente, wie ein Xiaohongshu-Titelbild

Poster/Cover-Modus: Einen der 18 Stile für Farben und Charakter wählen. .container auf width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; setzen für feste Höhe und zentriertes Layout; beim Screenshot-Befehl muss --fixed-height 800 übergeben werden, um die Höhenanpassung zu überspringen, Breite 600 übergeben, also:

node scripts/export_image.js <html> <output.png> 600 --fixed-height 800

Im Langbild-Modus (Standard) wird --fixed-height nicht übergeben; das Skript misst automatisch die tatsächliche Höhe von .container und schneidet den überflüssigen unteren Rand ab. Rahmenabstand: Im Langbild-Modus wird standardmäßig ein einheitlicher 32px-Rahmen um die Leinwand hinzugefügt (links/rechts durch verbreiterte Leinwand + margin:auto generiert, oben/unten durch body-Padding erzwungen), alle vier Seiten gleichmäßig, kein Anliegen an den Rändern – keine manuellen Parameter nötig. Bei Bedarf kann --frame <px> für benutzerdefinierten Abstand verwendet werden (z.B. --frame 48) oder --frame 0 zum Deaktivieren des Rahmens. Festes Layout (--fixed-height) füllt die Leinwand vollständig und hat eigenen Innenabstand; es ignoriert automatisch --frame. Kartenhintergrund: Die .container der 18 Stile haben standardmäßig ein Karten-Design (Hintergrundfarbe + Strich + abgerundete Ecken/Schatten, jeder Stil mit eigenem Farbschema und Charakter, z.B. Neonrahmen bei Cyberpunk, Papierrand bei Tuschemalerei, einfarbiger Block bei Morandi). Zusammen mit dem Rahmenabstand entsteht ein "Karte schwebt auf Leinwand"-Effekt – keine manuellen Parameter nötig, standardmäßig aktiviert. Für eine flache, durchgehende Version (Inhalt direkt in den Hintergrund, ohne Kartenrand) kann --flat übergeben werden: node scripts/export_image.js <html> <output.png> 560 --flat. ⚠️ Beim Glasmorphismus-Stil (11_glass) ist der Kartenhintergrund selbst matt; --flat lässt die Kernoptik verschwinden – nicht für diesen Stil verwenden. Bei Titelbildern wird empfohlen, oben rechts/unten rechts einen sanften Lichtfleck (radial-gradient + absolute Positionierung) hinzuzufügen, um den Weißraum links auszugleichen und eine große leere Fläche auf der rechten Seite zu vermeiden.

Ausführungsablauf

Schritt 1: Inhaltsstruktur analysieren

Den Benutzerinhalt lesen und extrahieren:

• Haupttitel, Untertitel
• Kernzitate (vergrößert anzeigen)
• Strukturierte Blöcke (Vergleiche, Listen, Zeitleisten usw.)

Chancen für Visualisierung erkennen (wichtig): Den Inhalt nach Schlüsselzahlen, Anteilen, Rankings, Trends, Prozessen, Vergleichen, Zeitlinien durchsuchen – diese sollten in visuelle Komponenten umgewandelt werden (KPI-Karten, Fortschrittsbalken, Vergleichsbalken, Donut, Prozessschritte, Zeitleisten – siehe Kommentare in resources/components.css), anstatt als reiner Text angeordnet zu werden. Bei 2-3 Schlüsselzahlen sollte eine KPI-Karte verwendet werden; bei Rankings/Vergleichen ein Vergleichsbalken. Text mit Bildern ist der Schlüssel zur Qualität eines Langbilds.

Schritt 2: Stilressourcen lesen und HTML generieren

1. Nach Auswahl des Stils die Dateien resources/styles/<NN_key>.md (enthält CSS, HTML-Strukturbeispiel, Komponentenvariablen-Zuordnung, Schrifteinbindung, Akzent-Dekorationen) und resources/styles/_BASE.md (allgemeines Gerüst + Typografieregeln) lesen
2. Wenn in Schritt 1 Visualisierungsmöglichkeiten erkannt wurden, resources/components.css lesen und die benötigten CSS-Abschnitte der Komponenten in <style> kopieren. Dabei auch den :root-Block der „Komponentenvariablen-Zuordnung“ aus der Stildatei kopieren (Komponenten nutzen die --t2e-*-Variablen für die Farben)
3. Wenn die Stildatei einen Abschnitt „Schrifteinbindung" enthält, die Schriftart-<link> in <head> einfügen
4. Wenn die Stildatei einen Abschnitt „Akzent-Dekoration" enthält, diese Dekorationselemente bevorzugen, um den Wiedererkennungswert zu erhöhen
5. Den Inhalt in das Gerüst einfügen, vollständiges HTML generieren und mit dem write-Werkzeug unter /tmp/elegant_image_<timestamp>.html speichern (das Werkzeug heißt write, nicht write_to_file)

Footer-Behandlungsregeln (wichtig):

• Der Benutzer hat keine Autoreninformationen angegeben: Im .footer-Element des HTML wird der Standardwert eingetragen: <skillName> @ <aktuelles Modell>
  • Beispiel: text-to-elegant-image @ claude-4.6-sonnet
• Der Benutzer hat Autoreninformationen angegeben (z.B. "Autor: Max Mustermann"): Den benutzerdefinierten Text eintragen
• Der Benutzer hat ausdrücklich keinen Footer gewünscht: Das .footer-Element wird nicht im HTML erzeugt; beim Screenshot wird --no-footer angehängt

Im Footer nicht „Generated by " oder eine andere KI-Identifikation schreiben.

Schritt 3: Abhängigkeitsprüfung und Initialisierung (vor jeder Nutzung)

Das Setup-Skript ausführen, um die Umgebung zu prüfen:

bash <Skill-Verzeichnis>/scripts/setup.sh

• Prüft Node.js (>= v18 erforderlich), Chrome/Chromium, puppeteer-core – drei Abhängigkeiten
• Wenn alles bereit ist, wird direkt ausgegeben: ✔ Alle Abhängigkeiten sind bereit
• Fehlendes Node.js / Chrome: Das Skript gibt einen Fehler aus und beendet sich (exit 1), mit dem Hinweis, die fehlende Abhängigkeit zu installieren (Node.js >= v18 / Chrome oder Chromium)
• Fehlendes puppeteer-core: Das Skript zeigt „Wird installiert…" an und führt npm install aus (der Installationsprozess ist sichtbar; es wird nur puppeteer-core als einzige Rendering-Abhängigkeit installiert)

Wenn alles bereit ist, kehrt das Skript extrem schnell zurück, ohne Leistungseinbußen; es wird empfohlen, es vor jedem Aufruf auszuführen.

Schritt 4: Emoji-Prüfung (vor dem Screenshot zwingend)

Bei der HTML-Generierung sind Emojis streng verboten – der Headless-Umgebung fehlen farbige Emoji-Schriftarten, was zu schwarzen Kästchen führt. Alternativen:

Ursprüngliche Emoji-Verwendung	Alternative Schreibweise
Abschnittssymbole (Diagramm, Kristallkugel, Karte)	Reiner Text-Titel, mit border-left-Farbstreifen unterscheiden
Statusmarkierungen (Haken/Kreuz/Warnung)	Farbige Badges: <span class="badge-green">Vollautomatisch</span>
Dekorative Symbole	Löschen oder durch Akzent-Dekorationen des Stils ersetzen (Blätter, Sterne, Siegel usw.)
Fortschritt/Pfeile	CSS-::before-Pseudo-Elemente oder reiner Text ->, ·

Nach der Generierung muss eine Prüfung durchgeführt werden:

python3 <Skill-Verzeichnis>/scripts/check_emoji.py <HTML-Dateipfad>

FAIL (exit 1) → Angegebene Zeilen ersetzen → Erneut ausführen, bis PASS, erst dann in den Screenshot-Schritt gehen.

Schritt 5: Screenshot-Export durchführen

node <Skill-Verzeichnis>/scripts/export_image.js \
  <Absoluter HTML-Dateipfad> \
  <Ausgabeverzeichnis>/<Dateiname>.png \
  [Breite] [--author "Autoreninformation" | --no-footer]

Ausgabeverzeichnis-Konfiguration (bitte Benutzer bei erster Nutzung führen):

Das Ausgabeverzeichnis wird nach folgender Priorität aufgelöst (hoch → niedrig):

1. Explizit im Befehl übergebener Ausgabepfad
2. Umgebungsvariable T2EI_OUTPUT_DIR
3. Standardwert: ./output (Unterverzeichnis output/ im aktuellen Arbeitsverzeichnis)

💡 Erstnutzungs-Führung: Fragen Sie den Benutzer vor der ersten Generierung eines Langbildes einmal: „In welches Verzeichnis möchten Sie das Bild ausgeben?“

• Benutzer gibt nichts an → Standard ./output verwenden
• Benutzer gibt ein festes Verzeichnis an → Empfehlung, es in die Umgebungsvariable zu schreiben, um es dauerhaft zu speichern:

  echo 'export T2EI_OUTPUT_DIR="$HOME/my-images"' >> ~/.bashrc
  

Danach nicht mehr erneut fragen.

Footer-Parameter-Erklärung:

Parameter	Effekt
Nicht übergeben (Standard)	Den bereits im HTML geschriebenen Footer verwenden (siehe Schritt 2)
--author "Benutzerdefinierter Text"	Footer durch angegebenen Text ersetzen
--no-footer	Footer vollständig entfernen

Das Skript erkennt automatisch den Chrome/Chromium-Pfad (Linux/macOS/WSL), wartet automatisch auf das Laden der Webfonts (maximal 8s; CDN-Erreichbarkeit blockiert nicht), misst automatisch die Inhaltshöhe für präzises Zuschneiden und erstellt das Ausgabeverzeichnis, wenn es nicht existiert. Die Breite beträgt standardmäßig 600px, 2x deviceScaleFactor für hochauflösende Ausgabe.

Schritt 6: Ergebnis zurückgeben und Bild ausliefern

Nach erfolgreichem Screenshot dem Benutzer den lokalen PNG-Pfad zurückgeben:

Bild erstellt 🎉
Lokaler Pfad: <Ausgabeverzeichnis>/<Dateiname>.png

Der Benutzer kann die PNG-Datei direkt im Dateisystem/Editor ansehen oder selbst verteilen.

📌 Zur automatischen Verteilung (Platzhalter, vorerst nicht integriert) Diese Open-Source-Version ist nur für die Generierung „Text → elegantes Langbild" zuständig; sie enthält keine integrierte Fähigkeit zum automatischen Senden von Bildern über IM-Kanäle. Wenn das generierte Bild automatisch an WeChat / Telegram / Slack usw. gesendet werden soll, können Sie nach diesem Schritt selbst den Bot/API der entsprechenden Plattform anbinden (zukünftige Versionen könnten optionale Adapter bieten). Derzeit muss der Benutzer das lokale PNG manuell abholen und verteilen.

Stilwechsel (kostengünstiger Pfad)

Wenn der Benutzer zu einem bereits generierten Langbild sagt „Mach es im XX-Stil": Nicht das gesamte HTML neu schreiben. Die neue Stildatei lesen und nur den CSS-Abschnitt des Stils im <style> sowie die Komponentenvariablen-Zuordnung (--t2e-* :root-Block) ersetzen. Die Klassen-Präfixe des alten Stils im HTML (z.B. mo-*) durch die des neuen Stils (z.B. fr-*) ersetzen – die Gerüst-Komponenten der Stile sind isomorph (header/title/subtitle/section-title/card/item/num/quote/tag/divider/footer) und können eins zu eins ersetzt werden. Danach die Schritte 4-6 erneut ausführen.

Fallback-Mechanismus

Wenn der Screenshot fehlschlägt (z.B. weil kein Browser installiert ist), gibt das Skript den HTML-Dateipfad aus und leitet den Benutzer an, die Datei im Browser zu öffnen und manuell als PDF/Bild zu drucken.

Wichtige Hinweise

• Das dritte Argument von export_image.js kann die Breite angeben (Standard 600px), 2x deviceScaleFactor für hochauflösende Ausgabe
• Keine externen Bilder einbinden; Symbole durch reine CSS-Formen oder Inline-SVG-Data-URIs ersetzen, um Netzwerkausfälle zu vermeiden; die einzige erlaubte externe Ressource ist der Schriftart-CDN (fonts.googleapis.com, öffentlicher Dienst; mit System-Schriftarten als Fallback, nicht blockierend)
• Ausgabepfad: <Ausgabeverzeichnis>/<Dateiname>.png (Standard-Ausgabeverzeichnis ist ./output, kann mit der Umgebungsvariable T2EI_OUTPUT_DIR konfiguriert werden, siehe Schritt 5)

Skriptübersicht

Skript	Zweck
scripts/setup.sh	Abhängigkeitsprüfung (Node/Chrome/puppeteer-core), bei fehlendem puppeteer-core wird eine Installation angeboten und durchgeführt (Ausgabe sichtbar)
scripts/check_emoji.py	Emoji-Prüfung vor dem Screenshot; bei FAIL werden Zeichen und Zeilennummern ausgegeben
scripts/export_image.js	Puppeteer-Screenshot-Export: Schriftarten-Warten + präzises Höhen-Zuschneiden + vier seitige Rahmenabstände + Kartenhintergrund-Schalter (--flat) + Footer-Einfügung/Entfernung