kristianbonnici/sketch-infographic

Sketch Infographic (Skizzen-Infografik)

Du erstellst eine einzelne Seite, die eine Quelle erklärt: einen Titel, ein Raster aus Panels und eine Fußzeile mit der Quellenangabe. Jedes Panel macht einen Punkt mit einem kleinen Diagramm und ein bis zwei Sätzen. Du schreibst die Seite als JSON-Spezifikation; scripts/build.mjs legt das Raster fest, zeichnet es mit Excalidraws eigenem Renderer, prüft es und schreibt ein PNG sowie eine bearbeitbare .excalidraw-Datei.

Das Zeichnen ist der einfache Teil. Die Seite ist nur dann veröffentlichungswürdig, wenn jedes Panel etwas Wahres über die Quelle aussagt – mit weniger Wörtern als die Quelle selbst.

1. Lies die Quelle und plane die Seite

Lies alles. Schreibe dann den Plan in deiner Antwort vor jedem JSON:

• Titel: das Thema in zwei bis fünf Wörtern. Untertitel: Wer es gesagt hat und worum es geht, in einer Zeile („Ein Verkehrsplaner darüber, warum Busse in Kleinstädten neue Bahnstrecken schlagen“).
• Format: 3:4 Hochformat (1500×2000), es sei denn, der Benutzer nennt ein anderes oder das Beispielbild zeigt ein anderes Format. Andere Formate sind in references/spec.md beschrieben.
• Sechs oder sieben Panels, genug, um die Seite zu füllen. Eine 3:4-Seite fasst etwa vier Reihen: drei Reihen mit zwei halben Panels und ein Panel in voller Breite. Jedes Panel hat eine Überschrift, die den Punkt macht (kein Themenlabel), eine Bildidee und ein Fazit von höchstens zwei Sätzen und etwa 30 Wörtern. Das volle Panel enthält das reichhaltigste Beispiel.
• Fußzeile: die Quelle (Autor, Titel, Datum) und alle Einschränkungen, die die Quelle nennt, z. B. „Design-Notizen und ein Prototyp, kein ausgeliefertes Produkt“.

Warte auf die Zustimmung des Benutzers zum Plan, wenn die Quelle lang oder der Blickwinkel unklar ist; andernfalls fahre direkt fort.

Arbeiten mit einem Beispielbild, das der Benutzer teilt: Liste seine Panels zuerst auf und behalte jedes in deinem Plan, es sei denn, der Benutzer wünscht weniger. Das Aussehen zu treffen, aber ein Panel wegzulassen, ist der häufigste Grund, warum die Seite hinter dem Vorbild zurückbleibt.

Bleib der Quelle treu. Jede Zahl, jeder Name und jede Behauptung auf der Seite muss in der Quelle stehen. Schreibe Meinungen zu („Der Autor argumentiert...“). Wenn du eine eigene Illustration eines Punktes hinzufügst, sag es auf der Seite („Ein erfundenes Beispiel, wie das passieren könnte“). Lass weg, was du nicht ehrlich zeichnen kannst, anstatt eine Zahl dafür zu erfinden.

2. Wähle ein Bild für jedes Panel

Verwende ein Diagramm pro Panel, aufgebaut aus den Mustern in references/patterns.md: eine Schrittkette, Vorher und Nachher, Vieles in Eins, eine Schleife zurück zur Quelle, ein Vergleich von Optionen, ein Balkendiagramm, eine Zeitleiste. Wähle das Muster, das zur Aussage passt, nicht das, das am vollsten aussieht. Ein Panel, dessen Punkt eine Liste ist, kann drei beschriftete Kästen sein. Text in Zeichnungen besteht aus wenigen Wörtern, nie einem Satz.

Farben tragen Bedeutung, auf der gesamten Seite gleich: Grün für gut oder den Standardpfad, Orange für Risiko oder was sich geändert hat, Rot für Fehler, Blau für die Sache, die bearbeitet wird, Lila für einen Agenten oder ein Modell, Gelb für den wichtigsten Hinweis auf der Seite. Grau ist neutral. Siehe references/spec.md für die Namen.

3. Schreibe die Spezifikation und baue sie

Speichere jede Seite in einem eigenen Ordner als page.json; frage nach dem Ort, wenn der Benutzer keinen genannt hat. Das Format und alle Elementtypen sind in references/spec.md; assets/example.json ist eine vollständige Seite. Führe dann von diesem Skill-Ordner aus aus:

node scripts/build.mjs <ordner>/page.json

Es gibt die Zeichenbreite jedes Panels aus (zeichne darin; die Höhe wächst, um zu passen) und schreibt page.png und page.excalidraw neben die Spezifikation. Wenn die Laufzeit fehlt, wird erklärt, wie man sie installiert.

4. Prüfe es, dann korrigiere es

• Behebe jede Warnung. Exit-Code 3 bedeutet, dass die Seite mit Warnungen erstellt wurde: Der Inhalt ist höher als die Seite (es wird angegeben, wie viele Pixel gekürzt werden müssen), etwas ragt außerhalb seines Panels, überlappt etwas anderes, hat einen Pfeil, der durch seinen Text verläuft, hat einen Pfeil, der zu kurz ist, um als solcher gelesen zu werden, hat eine Box vergrößert, weil ihre Beschriftung nicht passte, oder verwendet ein Zeichen, das Excalifont nicht hat (Pfeile wie →, Häkchen, Emojis), die dann in einer System-Schriftart dargestellt werden. Zeichne Pfeile und Häkchen stattdessen als Elemente.
• Sieh dir dann das PNG an (öffne die Bilddatei) und überprüfe jedes Panel: Folgt das Auge den Pfeilen in die richtige Richtung? Startet und endet jeder Pfeil und jede Linie an etwas? Sind Pfeilspitzen frei voneinander? Ist Text gedrängt gegen eine Grenze? Sehen Panels in einer Reihe ausgewogen aus? Passt die Überschrift zum Bild? Ist die Seite voll oder ein Panel größtenteils leer? Korrigiere die Spezifikation und baue erneut. Zwei oder drei Runden sind normal.
• Vergleiche bei einem Beispielbild die beiden nebeneinander, Panel für Panel: gleiche Panels, gleiche Art der Zeichnung, ähnliche Dichte. Sage, was sich noch unterscheidet.
• Lies die Wörter noch einmal gegen die Quelle (Schritt 1) auf der gezeichneten Seite.

5. Liefere

Gib dem Benutzer das PNG und den Pfad der .excalidraw-Datei sowie die einzeilige Zusammenfassung des Plans. Sage, dass sich die .excalidraw-Datei unter excalidraw.com oder in der Excalidraw-App für manuelle Bearbeitungen öffnen lässt, und dass nach manuellen Bearbeitungen diese Datei, nicht page.json, die Seite ist: Ein erneuter Build überschreibt sie.

Das Nachbauen einer veröffentlichten Seite einer anderen Person ist als private Studie oder Test in Ordnung; biete keine zum Posten an. Deren Layout, Formulierung und Branding gehören ihnen.