Communitygithub.com

JP-Magazin-Poster

Codex-Skill zur Erstellung von Postern im Stil japanischer moderner Editorial-Designs aus einem Benutzerthema, Quelltext oder Bildersatz.

Was ist JP-Magazin-Poster?

Diese Fähigkeit wandelt ein vom Benutzer vorgegebenes Thema, einen Quelltext oder eine Bildersammlung in einen Satz von Postern im Stil japanischer moderner Magazine um. Sie ist nützlich, weil sie einen vollständig automatisierten Workflow bietet: von der Template-Auswahl über die Inhaltserstellung bis hin zum Rendern und Validieren von HTML- und PNG-Dateien. Unterstützt werden die Codex-Plattform und die Ausführung über Node.js-Skripte. Der Workflow beginnt mit einer einzigen Klärungsrunde, in der konkrete Optionen zu Stil, Anzahl, Bildquellen und Ton abgefragt werden. Danach wählt das Skill passende Templates aus, erstellt kompakte Inhalte (Titel, goldenQuote, Details) und bezieht Bilder streng priorisiert: zuerst benutzerbereitgestellte, dann systemgenerierte Bitmaps und als letzte Option polierte SVG-Grafiken, die vor dem Rendern zu PNG rasterisiert werden. Abschließend werden die Poster mittels render_poster.js generiert und mit validate_poster.js auf Fehlerfreiheit geprüft. Fehlende Angaben werden mit praktischen Standardwerten ergänzt, und die finale HTML-Ausgabe darf keine SVG-Referenzen enthalten. Das Skill ist ideal für Entwickler, die automatisiert hochwertige, japanisch-inspirierte Editorial-Poster aus beliebigen Inhalten erstellen möchten.

Funktioniert mit~Claude Code✓Codex CLI~Cursor
npx skills add Buds-2025/jp-magazine-poster

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

JP Magazin Poster

Arbeitsablauf

Nutzen Sie dieses Skill, um ein Benutzerthema, einen Quelltext oder eine Bildersammlung in japanische Magazin-Poster-Dateien umzuwandeln.

  1. Lesen Sie references/template-contract.md, bevor Sie Vorlagen auswählen oder Füllfelder belegen.
  2. Stellen Sie vor der Produktionsarbeit genau eine formularartige Klärungsrunde:
    • Fassen Sie die aktuelle Anfrage des Benutzers in 1–3 kurzen Sätzen zusammen.
    • Fragen Sie nach fehlenden oder bestätigbaren Entscheidungen zu Stil/Thema, Posteranzahl, Bildquellen, Vorlagenauswahl, Textton, Ausgabeverzeichnis sowie Pflicht- oder Vermeidungsinhalten.
    • Bevorzugen Sie kompakte nummerierte Fragen mit konkreten Optionen, wo sinnvoll.
    • Fragen Sie nur einmal. Wiederholen Sie die Klärung nicht, nachdem der Benutzer geantwortet hat.
    • Falls der Benutzer weiterhin Lücken lässt, fahren Sie mit angemessenen Standardwerten fort und dokumentieren Sie diese Annahmen in der Spezifikation oder Manifest.
  3. Verstehen Sie das Thema des Benutzers und die gewünschte Ausgabeanzahl aus der ursprünglichen Anfrage plus dieser einen Antwort.
  4. Wählen Sie Vorlagen:
    • Verwenden Sie die explizit vom Benutzer angegebenen Vorlagen-IDs, wenn vorhanden.
    • Verwenden Sie alle 8 Vorlagen, wenn der Benutzer jeden Stil wünscht.
    • Wählen Sie andernfalls die wenigsten Vorlagen, die zur Inhaltsform passen.
  5. Erstellen Sie prägnante Inhalte für jede Zone:
    • title: ohne Satzzeichen am Ende. Kurze Nebensätze dürfen Kommas im Titel enthalten.
    • goldenQuote: muss mit einem chinesischen oder englischen Satzabschlusszeichen enden.
    • detail: normale Zeichensetzung und faktenbasierte Quellenangaben.
    • Ersetzen Sie chinesische Anführungszeichen durch spitze Klammern, es sei denn, der Benutzer fordert ausdrücklich den Originaltext mit Anführungszeichen.
    • Vermeiden Sie einzeilige Zeichen sowie Zeilen aus einem Zeichen und einem Satzzeichen.
  6. Wählen Sie Bilder nach strenger Priorität:
    • Vom Benutzer bereitgestellte Bildpfade oder URLs.
    • Rufen Sie ein systemverfügbares Modell oder Werkzeug auf, um themenangepasste Bitmap-Bilder zu generieren. Speichern Sie die ausgewählten Rasterdateien dann vor dem Rendern im Ausgabeverzeichnis.
    • Zeichnen Sie polierte SVG-Grafiken nur dann, wenn Benutzerbilder fehlen und verfügbare Bildgenerierungsmodelle/-werkzeuge nicht verfügbar sind, fehlschlagen oder keine projektspezifischen Bitmap-Dateien zurückgeben können. Dokumentieren Sie diesen Grund in assumptions oder manifest.
    • SVG darf nur als interne Zeichnungsquelle verwendet werden und muss vor dem finalen HTML-Rendering zu PNG rasterisiert werden.
  7. Schreiben Sie eine JSON-Eingabespezifikation und führen Sie aus:
node scripts/render_poster.js --spec input.json --out output/<run-name>
node scripts/validate_poster.js --html output/<run-name>/*.html

Wenn die Validierung fehlschlägt, kürzen oder überarbeiten Sie den Text, passen Sie explizite Zeilenumbrüche an, ändern Sie den Bildfokus und rendern und validieren Sie erneut.

Qualitätsanforderungen

  • Starten Sie weder Rendering, Bildgenerierung noch Textanpassung, bis das einmalige Aufnahmeformular gestellt und beantwortet wurde, es sei denn, der Benutzer sagt ausdrücklich, dass Fragen übersprungen werden sollen.
  • Fehlende Details nach der einmaligen Aufnahme müssen durch praktische Standardwerte ergänzt werden, anstatt weitere Fragen zu stellen.
  • Das finale HTML darf keine .svg-Dateien oder data:image/svg+xml referenzieren.
  • Die Bildquellen müssen der strengen Priorität folgen: benutzerbereitgestellte Bilder, dann systemverfügbare Bitmap-Generierung, dann poliertes SVG-Zeichnen als letzter Ausweg.
  • Generierte, gezeichnete oder fallback-Bilder müssen als PNG/JPEG/WebP-Dateien im Ausgabeverzeichnis gespeichert werden, bevor sie in Bildzonen platziert werden.
  • Behandeln Sie Vorlagen-Fallback-Grafiken oder SVG-Rasterisierung nicht als gleichwertig mit Modell-/Werkzeug-Bitmap-Generierung. Wenn die Modell-/Werkzeug-Generierung übersprungen wird oder fehlschlägt, dokumentieren Sie den genauen Grund.
  • Der PNG-Poster-Export standardmäßig im 2x-Maßstab für schärfere Prüfausgabe.
  • Notizen zur Vorlage 03 Objektkarte müssen sehr kurz sein, da jede Karte eine feste Zeilenhöhe von 216px hat.
  • Bildzonen von Vorlage 06 müssen .jp-photo-zone { width: 100%; max-width: 100%; } beibehalten, damit das linke Bild nicht in die rechte Textspalte eindringen kann.

Spezifikationsformat

Minimale Eingabe:

{
  "theme": "white",
  "templates": ["vertical-02"],
  "sourceText": "Benutzerthema oder Quelltext",
  "assumptions": ["Alle nach der einmaligen Aufnahme verwendeten Standardwerte."],
  "images": [
    {
      "slot": "single-photo-feature",
      "src": "D:/path/to/image.png",
      "fit": "cover",
      "focus": "center 50%"
    }
  ],
  "content": {
    "title": "Postertitel",
    "goldenQuote": "Ein klarer editorialer Satz.",
    "details": ["Detail eins.", "Detail zwei."]
  }
}

Hinweise:

  • theme akzeptiert white, midnight, light oder dark.
  • templates akzeptiert Vorlagen-IDs wie vertical-02, Vorlagennamen wie vertical-single-photo-headline oder all.
  • content.details kann ein Array von Zeichenfolgen oder Objekten mit heading, title und body sein.
  • images[].slot sollte mit einer data-slot-id oder data-relation-id übereinstimmen, die im Vorlagenvertrag aufgeführt ist.

Ausgabe

Das Renderscript erstellt:

  • Eine HTML-Datei pro Poster.
  • Eine PNG-Datei pro Poster, wenn Playwright installiert und Chromium verfügbar ist.
  • manifest.json mit Vorlage, Thema, Bildquelle, Ausgabedateipfaden sowie Validierungs-/Exportstatus.
  • generated-images/*.png, wenn generierte, Fallback- oder SVG-Quellbilder rasterisiert werden.

Lassen Sie das ursprüngliche Vorlagenlayout intakt. Ändern Sie keine Schriftgrößen, Zeilenhöhen, Breiten, Sicherheitsabstände, Rastereinstellungen oder visuelle Struktur, um Inhalt einzupassen. Passen Sie stattdessen den Inhalt an.

Verwandte Skills