marker-sketch

Was macht marker-sketch?

Eine Idee in einen Filzstift-Skizze verwandeln: dicker, leicht zittriger schwarzer Strich, versetzte graue Fläche mit Filzstift-Streifen, grauer Schlagschatten, kurze handgeschriebene Text, Punktpapier. Das Ergebnis ist jedes Mal gleich, weil der Stil in einem festen Kern lebt (assets/template.svg, assets/glyphes.svg) und das Denken immer dem gleichen Protokoll folgt. Nichts wird aus dem Gedächtnis neu gezeichnet: Es wird zusammengesetzt.

Pfade und Abhängigkeiten

In den Befehlen wird ${CLAUDE_SKILL_DIR} durch das Verzeichnis dieser Skill ersetzt (Claude Code macht das automatisch). In claude.ai, falls die Variable unverändert erscheint, den relativen Pfad vom Skill-Verzeichnis im Ausführungskontext verwenden (scripts/compose.py). Arbeitsdateien (draft.svg, croquis.svg) werden im Arbeitsverzeichnis geschrieben, niemals in der Skill.

Abhängigkeiten: Python 3 reicht für compose.py (der Text bleibt in <text> mit der eingebetteten Schrift). fonttools wandelt Text in Pfade um (--outline, identische Darstellung überall), playwright mit Chromium erzeugt die Kontroll-PNGs (render.py). Installation: pip install fonttools playwright && playwright install chromium. Fehlt eine Abhängigkeit und lässt sich nicht installieren, wird das SVG ausgeliefert mit dem Hinweis, dass die visuelle Kontrolle nicht durchgeführt wurde.

1. Den Modus in zehn Sekunden wählen

Situation	Modus	Ausgabe	Angestrebte Zeit
Frage oder Aufforderung nach Schema, bebilderte Antwort	Skizze (Standard)	ein SVG	eine einzige Generierung
Meeting, Workshop, mündlicher Austausch, „zeig, was gerade gesagt wurde“	Live	ein gut lesbares 16:9-SVG, bei jedem Austausch nachgebessert	wenige Sekunden pro Nachbesserung
Dichtes Schema (mehr als 10 Objekte), viele Verknüpfungen, kontrollierte Ausgabe	Atelier	SVG per Skript erstellt, Kontroll-PNG	eine Minute
„Jetzt, dann, später“, „aktuell, morgen“, Entwicklung, Trend, verschiebbare Elemente	Interaktiv	eine eigenständige HTML-Seite	eine JSON-Konfiguration

Im Zweifelsfall mit Skizze beginnen. Niemals standardmäßig three.js verwenden: Es wird nur im Atelier-Modus benötigt, um ein fehlendes Symbol in Perspektive zu erzeugen (siehe references/glyphes.md, Abschnitt 3D).

2. Mentales Protokoll, immer das gleiche (vor dem Zeichnen)

Diese sechs Fragen in der richtigen Reihenfolge mental beantworten. Das garantiert Konsistenz, nicht Talent.

1. Botschaft in einem Satz. Was soll der Leser in drei Sekunden verstehen? Dieser Satz wird der Titel oder die blaue Anmerkung.
2. Diagrammfamilie. Auswählen in references/familles-diagrammes.md (fünfzehn Familien: Fluss, Schleife, Baum, Mengen, Schichten, Nabe, Rad, Kurve, Matrix, Netzwerk, Szene, Mockup, Vorher/Nachher, Zeitstrahl, Trichter).
3. Eventuelle Metapher. Ist die Idee abstrakt (Spannung, Wachstum, Schulden, Reibung), ein physisches Objekt suchen, das die Spannung trägt und sich in etwa einem Dutzend Strichen zeichnen lässt (references/metaphores.md). Sonst bei der Familie bleiben.
4. Budget. 5 bis 9 Objekte, 40 % Weißraum, Texte von ein bis drei Wörtern (maximal eine Legende mit einem Satz). Im Live-Modus: maximal 7 Objekte.
5. Tintenhierarchie. Schwarz = die Kernbotschaft (höchstens ein Objekt vollflächig schwarz). Grau = der Kontext. Blauer Kugelschreiber = Anmerkungen, Kommentarpfeile, Nummern. Ein einziger Füllakzent pro Zeichnung (gelber Textmarker, Orange, Rot, Himmelblau oder Sand), weniger als 10 % der Fläche, niemals zur Dekoration.
6. Komposition. Leserichtung von links nach rechts und von oben nach unten, ein Blickfang, Ausrichtung auf einem lockeren Raster, Platz für Anmerkungen.

Dann schreiben. Dann kontrollieren (Abschnitt 8).

3. Unverhandelbare Stilregeln

• Niemals Farbverläufe, niemals dünne, gleichmäßige Konturen, niemals weiche Schatten. Schatten = graue, um (-7, 10) versetzte Kopie.
• Drei Grautöne + Schwarz + Papier: f1 hell, f2 mittel, f3 dunkel, f4 Vollschwarz.
• Offene V-förmige Pfeile (Klassen arr, arrb, arrg), S-förmige Kurven statt rechtwinkliger Knicke.
• Breite grau gepunktete Flüsse (flow), schwarze Punktlinien (dotk), Strichelungen (dash).
• Text: Schriftart Patrick Hand, Klassen t (36), tl (52, Titel), ts (27, Mini), tb (blau), tg (grau), tw (weiß auf schwarz). Sorgfältiges Französisch: Akzente auf Großbuchstaben, œ, Guillemets « », kein langer Gedankenstrich, geschweifter Apostroph ’.
• Die Wörter sind die des Lesers. Kein erfundener Jargon, keine Sätze.
• Keine Emojis, keine Markenlogos, keine geschützten Figuren.

Exakte Zahlenwerte, Farben und Sonderfälle: references/grammaire-visuelle.md.

4. Skizzen-Modus: Direkt schreiben

Die rohe Zeichnung enthält nur den Inhalt. Der Stilkern wird von compose.py hinzugefügt.

Muster eines Objekts (vier Ebenen, gleiche id):

<use href="#a1" x="-7" y="10" class="sh"/>        <!-- Schatten -->
<use href="#a1" class="pp"/>                       <!-- deckendes Papier -->
<use href="#a1" x="-2.5" y="2.5" class="f1"/>     <!-- versetzte Fläche -->
<g class="ink"><path id="a1" d="M300 300 L560 296 L556 420 L296 424 L302 296"/></g>
<text class="t" x="430" y="372">Idee</text>

Die Ecken ragen leicht über (der Pfad schließt sich nicht exakt), die Seiten sind nie pixelgenau parallel. Für Symbole (Person, Fenster, Datenbank, Wolke, Lupe ...) die Bibliothek verwenden:

<use href="#g-person" x="540" y="260" class="cb"/>   <!-- Farbklassen: cb co cr cs ch c1 c3 c4 -->

Katalog: python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py --catalog oder references/glyphes.md. Visuelle Übersicht: references/planche-symboles.png.

Zusammenbau und Kontrolle:

python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg -o croquis.svg --outline      # Papier, Punkte, Filter, Text in Pfade
python3 ${CLAUDE_SKILL_DIR}/scripts/check.py draft.svg                                  # Budget, Akzente, Symbole, Farbakzente
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py croquis.svg                               # Kontroll-PNG (Chromium)

Optionen von compose.py: --paper cream|white|kraft|yellow|blue, --no-dots, --transparent (zum Einfügen in eine Folie), --size 1200x1200, --embed-font (Text bleibt editierbar), --title.

Ohne Codeausführung (einfache Konversation in claude.ai): Den <defs>-Block von assets/template.svg unverändert kopieren, dort nur die verwendeten Symbole aus assets/glyphes.svg einfügen, dann den Inhalt in <g id="drawing" filter="url(#wob)">. Explizit sagen, dass die visuelle Kontrolle nicht durchgeführt werden konnte.

5. Live-Modus: Meeting, Workshop, mündlich

Vor der ersten Nachbesserung references/mode-live.md lesen. Das Wesentliche:

• Zuhören, nicht schreiben. Aus dem Austausch 3 bis 7 Elemente extrahieren: Die Namen werden zu Objekten, die Verben zu Pfeilen, „aber“ und „sonst“ zu Verzweigungen, „vorher/nachher“ zu zwei Spalten, „zuerst, dann“ zu einem Fluss.
• Format 16:9, Text mindestens 36 px (t), Titel 52 px (tl), niemals ts. Auf vier Meter lesbar.
• Stabile Positionen. Bei jeder Nachbesserung nur das verschieben, was sich ändert. Dieselben Identifikatoren und Koordinaten wiederverwenden. Das Team soll die Orientierung nicht verlieren.
• Mündliche Nachbesserungen: „füge hinzu“, „verbinde“, „streiche“, „hebe hervor“ (Vollschwarz oder Textmarker), „saubere Version“ (neu ausrichten, nur einmal am Ende).
• Projektion: python3 ${CLAUDE_SKILL_DIR}/scripts/live.py draft.svg öffnet eine Seite, die sich bei jedem Neuschreiben der Datei automatisch aktualisiert (Vollbild mit Taste f). In claude.ai: Denselben Artifact erneut veröffentlichen oder das SVG bei jeder Nachbesserung als PNG rendern.
• Mockups und Flows live: Rezepte in references/wireframes-flows.md.

6. Atelier-Modus: Dichte, skriptgesteuerte Schemata

Für mehr als zehn Objekte oder viele Verknüpfungen ein paar Zeilen mit scripts/sketch.py schreiben: Die Verknüpfungen werden an den Kanten der Objekte berechnet, inklusive S-Kurven und offener Pfeile.

import sys; sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from sketch import Sketch
s = Sketch()
s.box("a", 260, 420, "Erkunden", fill="f1")        # (id, centre x, centre y, text)
s.box("b", 800, 420, "Definieren", fill="fh")
s.glyph("c", "g-flag", 1340, 400, "Liefern")
s.link("a", "b"); s.link("b", "c", label="validieren")
s.perimeter(["a", "b"], "Discovery")
s.note(1330, 640, "hier messen wir", target="c")
s.save("draft.svg")

Objekte: box (Formen box, pill, oval, Option solid=False für sich überschneidende Mengen), glyph, text, label, wf (Mockup-Elemente), badge (blaue Nummer). Verknüpfungen: link(kind="ink|gray|flow|dash|blue|line"), arrow, perimeter, note, highlight, raw (freies SVG). Vollständige Beispiele in examples/build_examples.py.

Für automatisches Layout eines großen Graphen die Positionen mit ELK oder dagre (npm) berechnen, dann die Koordinaten an sketch.py übergeben.

7. Interaktiver Modus: Entwicklung über die Zeit

Wenn die Anfrage von Entwicklung, aufeinanderfolgenden Zuständen, „jetzt, dann, später“, einer Trendänderung, einer sich wandelnden Organisation oder verschiebbaren Teilen spricht: Eine eigenständige HTML-Seite erstellen. references/interactif.md lesen (sechs Muster, Schema der Konfiguration, Fallstricke).

Prinzip: Eine rohe Zeichnung (Elemente haben eine id) + eine JSON-Konfiguration (Zustände, Keyframes pro Element: x y s r o d draw txt, Ebenen, Notizen):

python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg --interactive scenes.json -o page.html
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py page.html --state 1        # jeden Zustand kontrollieren

Die Seite bietet: Zustands-Buttons, Zeitschieber, Abspielen, ein-/ausblendbare Ebenen, Drag & Drop für markierte Elemente, Doppelklick zum Umbenennen von Texten, Verknüpfungen, die den Elementen folgen, Export des Zustands als SVG, Kopieren des Layouts (JSON), Tastatur (Pfeiltasten, Leertaste, f). Keine Abhängigkeiten, funktioniert offline. Beispiele: examples/migration-organisation.html, examples/tendance-adoption.html.

8. Kontrolle vor der Antwort

1. check.py ohne Fehler (bekannte Symbole, keine langen Gedankenstriche, nur ein Farbakzent).
2. Gerendertes PNG ansehen: Text lesbar, nichts überlappt, Schatten sichtbar, Blickfang offensichtlich, ausreichend Weißraum.
3. Die Botschaft muss in einem Satz erkennbar sein, wenn man die Zeichnung ansieht, ohne den Text zu lesen.
4. Falls eine visuelle Kontrolle unmöglich ist, dies anmerken.

9. Auslieferung je nach Umgebung

• Claude Code: croquis.svg (und das PNG) im Arbeitsverzeichnis schreiben, den Pfad angeben. Im Live-Modus live.py starten.
• claude.ai mit Codeausführung: Generieren, kontrollieren, SVG und PNG senden. Für eine interaktive Seite oder eine Zeichnung, die behalten und geteilt werden soll, als Artifact veröffentlichen (zuerst die Skill artifact-design laden, Titel aus zwei bis vier Wörtern). Das von compose.py --interactive erzeugte HTML ist bereits eigenständig.
• Ohne Codeausführung: Vollständiges SVG von Hand gemäß Abschnitt 4 schreiben, mit dem Hinweis, dass es nicht kontrolliert ist.

Antworten auf Französisch: francais-parfait sowohl auf die Beschriftungen der Zeichnung als auch auf den umgebenden Text anwenden.

10. Index der Referenzen

Datei	Wann lesen
references/grammaire-visuelle.md	exakte Stilwerte, Klassen, Papiere, Grenzfälle
references/familles-diagrammes.md	eine der fünfzehn Familien auswählen und komponieren
references/metaphores.md	abstrakte Idee sichtbar machen
references/glyphes.md	Katalog der 47 Symbole, Symbol hinzufügen, optionale 3D
references/mode-live.md	Meeting, Workshop, mündlich
references/wireframes-flows.md	Mockups, Abläufe, Bildschirmzustände
references/interactif.md	animierte Seiten, Zustände, verschiebbare Elemente
references/planche-symboles.png	Übersicht aller Symbole
examples/	sechs Skizzen (SVG und PNG), zwei interaktive Seiten, brut/ (Quellzeichnungen und Konfigurationen), build_examples.py