stevensun1005/stock-html

stock-html: Auf einen Blick verständliche Handzeichnungs-Seite

Aus Materialien wird eine einzelne HTML-Datei: Zwei Handzeichnungs-Theme (Kästchenpapier / Tafel), feste Comic-Figuren, alle Zahlen nachrechenbar. Zwei Verwendungsarten:

• Aktienbericht (kind="stock", Standard): Eine Aktie, ein Geschäftsbericht, eine Übernahme oder große Nachricht → vollständiger illustrierter Bericht.
• Allgemeine Lernseite (kind="general"): Artikel, Paper, technische Dokumente, Kursnotizen → Hauptlinie + Konzeptabhängigkeitskette + Comic-Karten + Lernroute.

Dieses Verzeichnis enthält ein Toolkit – schreiben Sie HTML nicht von Hand:

Datei	Zweck
scripts/sketch.py	Leinwand, Zwei-Bild-Comics, fertige Diagramme, Seitenaufbau; save() macht automatisch eine Offline-Layout-Prüfung
scripts/blocks.py	Halbfertige Bausteine: Hauptliniendiagramm, Burggraben, Fernabgleich-Diagramm, drei Zwei-Bild-Comic-Layouts, Aktienkursszenario-Tabelle – nützlich, wenn mehrere Berichte auf einmal erstellt werden
scripts/verify.py	Rendert mit headless Chrome, liest die eingebauten Selbstprüfungsergebnisse der Seite, macht Screenshots von Abschnitten
assets/template.html	Seitenvorlage: zwei Theme, Zitter-Filter, Stempelfortschritt, eingebautes Selbstprüfungsskript
examples/boba_merger.py	Vollständiges Referenzbeispiel (Aktienbericht eines fiktiven Unternehmens) – lesen Sie es sich durch, bevor Sie beginnen
references/stock-report.md	Wie jeder Abschnitt eines Aktienberichts geschrieben wird, Datendisziplin
references/visual-style.md	Visuelle Konventionen, Leinwandkoordinaten, Regeln für handgeschriebene SVGs
references/qa.md	Drei Ebenen der Selbstprüfung, Hinweise zum Betrachten der Bilder, Ersatzmethode ohne Chrome

Drei unverhandelbare Regeln

1. Leser sind Anfänger. Jeder Fachbegriff wird beim ersten Auftreten in einem Satz erklärt, mit dem englischen Original in Klammern. Verbotene Formulierungen: „Wie Sie wissen“, „offensichtlich“, „nicht schwer zu verstehen“.
2. Erst die Schlussfolgerung, dann die Erklärung. Der erste Satz jedes Abschnitts muss die Schlussfolgerung sein, keine Hintergrundbeschreibung.
3. Zahlen nicht aus dem Gedächtnis. Alle Zahlen werden zuerst überprüft, mit Skripten abgeglichen, dann gezeichnet. Abgeleitete Werte mit „rechnerisch“ kennzeichnen, Wahrscheinlichkeiten mit „subjektive Schätzung, keine Prognose“.

Arbeitsablauf

1. Material vollständig lesen – alle vom Benutzer bereitgestellten Dateien, Screenshots, Links, ohne Ausnahme.

2. Online verifizieren – Primärquellen priorisieren (Unternehmensmitteilungen, 8-K, Pressemitteilungen, Geschäftsberichte), jede zu verwendende Zahl verankern. Einzelheiten in der „Datendisziplin“ in references/stock-report.md.

3. Build-Skript schreiben, Zahlen an den Anfang – sämtliche Eingaben und Ableitungen als Variablen, mit assert gegeneinander abgleichen (Kursänderungszerlegung, Spanne, Verdünnung/Stärkung, Vielfaches × EPS). Wenn es nicht aufgeht, nicht weiterzeichnen.

4. Konzeptabhängigkeitskette erstellen (8–13 Konzepte) – anordnen nach „Das nächste Konzept löst ein Problem, das das vorherige geschaffen hat“, nicht in der ursprünglichen Reihenfolge des Materials. Wenn ein Konzept nicht erklären kann, welches Problem des vorherigen es löst, ist die Reihenfolge falsch.

5. Seite zusammenbauen – nach dem Schema von examples/boba_merger.py:

   import sys; sys.path.insert(0, "<dieses Skill-Verzeichnis>/scripts")
   from sketch import *
   p = Page("Titel", "Untertitel")            # Standard kind="stock"
   p.mainline(...); p.checkup(...); p.section(..., role="moat"); p.chain(...); p.card(...)  # …
   p.save("out.html")                     # Datei schreiben + Offline-Prüfung, bei ERROR so lange ändern, bis weg
   

6. Echtes Rendering prüfen – python3 scripts/verify.py out.html --shots shots/. [CHECK light] PASS und [CHECK dark] PASS müssen erscheinen. Dann Screenshots einzeln ansehen (von Hell- und Dunkel-Theme je mindestens zwei Abschnitte). Details in references/qa.md.

7. Abgabe – falls die Umgebung ein Artifact-Veröffentlichungswerkzeug hat, veröffentlichen (nach der Veröffentlichung Konsole lesen, um sicherzustellen, dass beide Theme PASS sind); falls nicht, HTML-Datei dem Benutzer übergeben.

8. Antwort an den Benutzer – zuerst mit 2–3 Sätzen direkt seine Frage beantworten (z.B. „Hat sich das Geschäftsmodell geändert?“), dann in 5–8 Punkten erklären, was auf der Seite ist, Abweichungen vom Erwarteten erwähnen (Datum nicht bestätigt, rückwärts gerechnete Zahlen, Font-Fallback), zuletzt Quellen auflisten.

Standardstruktur des Aktienberichts

Jeder der folgenden Abschnitte ist standardmäßig vorhanden (Page.save() warnt bei fehlenden Abschnitten). Dies ist „mindestens vorhanden“, nicht „nur dies“: Enthält das Material weitere Schwerpunkte (Bewertung im Vergleich zur Konkurrenz, Management und Kapitalallokation, Cashflow und Verschuldung, Kundenkonzentration …), fügen Sie section() hinzu. Jeder Abschnitt ≤ 4 Sätze, hauptsächlich Grafiken.

#	Abschnitt	Aufruf	MUSS beantworten	Welche Grafik
1	Hauptlinie	mainline()	Was genau passiert hier? (Hauptschleife / Produktionslinie / Kernproblem – drei Optionen)	Ein Satz + eine Grafik
2	Gesundheitscheck	checkup()	Hat sich das Geschäftsmodell geändert? Jede Zeile mit Zahl und Definition	✓ grüner Haken / — orangener Strich / ✗ rotes Kreuz
3	Kernkompetenzen	section(role="moat")	Welche 2–3 Dinge können andere wirklich nicht kopieren? Welche Zahl ist der Beweis? Schwachstellen?	Burggraben-Diagramm + tiles
4	Konzeptabhängigkeitskette	chain()	Welche 8–13 Konzepte muss man zuerst verstehen, um diese Firma / diese Nachricht zu verstehen?	Schlangenförmiges Flussdiagramm
5	Konzeptkarten	card() × N	Jedes Konzept: Problem ohne es → seine Lösung → was es löst und was es kostet	Zwei-Bild-Comic
6	Tech-Roadmap	section(role="roadmap")	Wo stehen sie jetzt, was kommt als nächstes, was ist nur Vision?	roadmap() Stufendiagramm
7	Langfristige Planung	section(role="vision")	Wohin will das Management in 3–5 Jahren? Ist das mit dem aktuellen Tempo erreichbar, und wenn nicht, um wie viel?	Ziel vs. aktuelles Tempo Vergleichsgrafik
8	Versteckte Risiken	section(role="risks")	4–6 Dinge, die in den Ankündigungen und Bullen-Narrativen nicht stehen; jeweils das Warnsignal (welche Zahl)	risk_matrix() + Warntabelle
9	Wichtige Termine	section(role="timeline")	Welche Tage in den nächsten 6–12 Monaten bringen Ergebnisse? Welche Daten sind noch nicht bestätigt?	timeline() + Terminplan
10	Kursszenarien	section(role="paths")	2–3 Pfade: Was muss jeweils passieren, in welchem Kursbereich, subjektive Wahrscheinlichkeit?	paths_chart() + Szenariotabelle
11	Maßstab	section(role="ruler")	2–3 Indikatoren zur Bewertung; welche Methode verbessert welchen, welcher leidet darunter?	ruler_chart() + Vergleichstabelle
12	ELI5-Version (bei Bedarf)	section(role="eli5")	Der unintuitivste Mechanismus, Schritt für Schritt mit Rechnung	Wasserfalldiagramm + Schritte + Vergleichstabelle
13	Lernroute	route()	3–4 Stationen: Warum hinfahren, wie lange, Links	U-Bahn-Linienkarte
—	Fußzeile	sources()	Alle Quellen + „Nur zu Lernzwecken, keine Anlageberatung“	—

Die Schreibweise jedes Abschnitts, häufige Phrasen und Gegenbeispiele finden Sie in references/stock-report.md (vor dem Schreiben eines Aktienberichts lesen).

Struktur der allgemeinen Lernseite

Page(..., kind="general"): Hauptlinie → Konzeptabhängigkeitskette → Konzeptkarten → Maßstab (2–3 Indikatoren der Domäne auf einer Grafik) → ELI5-Version (bei Bedarf) → Lernroute. Kein Gesundheitscheck, keine Kursszenarien und kein Haftungsausschluss.

Seiteübergreifende Regeln

• Feste Figuren. Alle Grafiken der gesamten Seite verwenden denselben Figurensatz; in verschiedenen Konzepten nicht austauschen. Standard bei Aktien: A, B, C = drei Altaktionäre + D = ein Neuaktionär; Kuchen = Aktienanteile, Münzen = Gewinn. Unterhalb der Hauptliniengrafik in einer kleinen Zeile die Figuren erklären.
• Verkleinerte Zahlen. 921 Millionen Aktien als 6 Kuchenstücke, 1 Milliarde Dollar Gewinn als 10 Münzen; das Verhältnis muss mit den echten Daten übereinstimmen, in der Grafik „Anschauungswerte“ angeben.
• Konzeptkarten schreiben nur zwei Zeilen: „Was löst es“ und „Was kostet es“. Die Kosten nie leer lassen, nie „so gut wie keine Kosten“ schreiben – wenn keine Kosten gefunden werden, ist es nicht durchdacht.
• Feste Farbbedeutung (seitenweit einheitlich): Grün = laufend (Geschäft, Gewinn); Orange = neu (neues Ereignis, neuer Aktionär); Blau = angesammelt (Aktien, Bargeld, Wert); Rot gestrichelt = aufgegeben / freigesetzt (Verlust). Stempel in Lila.

Harte Anforderungen (vor Veröffentlichung Punkt für Punkt prüfen)

1. Jeder Comic-Bild-Erklärtext ≤ 15 Zeichen (Zahlen und Symbole mitzählen; englische Seite ≤ 32 Zeichen).
2. Text niemals den Rand berühren, niemals überlappen.
3. Hauptsächlich Grafiken, Text pro Abschnitt ≤ 4 Sätze.
4. Alle Grafiken sind handgeschriebene inline-SVGs (erzeugt mit sketch.py). Kein Chart.js / D3 / Mermaid.
5. CSS, JS, SVG alle inline in einer HTML-Datei; keinerlei externe Links (inkl. Google Fonts – die CSP einiger Artifact-Umgebungen blockiert sie).
6. Text nicht in den Zitter-Filter, kein transform (Canvas.text() stellt das sicher; bei handgeschriebenen SVGs selbst darauf achten).
7. Links in Lernrouten MÜSSEN mit einem Crawler geöffnet und verifiziert werden; nur wenn der Inhalt übereinstimmt, verified=True setzen. Falls blockiert oder nicht erreichbar, anderen Link wählen oder kein url angeben (Seite zeigt dann „Selbst suchen“). Erfundene Links sind der schwerwiegendste Fehler dieses Skills.
8. Keine eigenen Positionen oder Optionen erwähnen, nur die Aktie selbst analysieren; keine Kauf-/Verkaufsanweisungen geben.
9. verify.py bestehen für beide Theme UND Screenshots angesehen.

Toolkit Schnellreferenz

# Leinwand: Farben nur mit semantischen Namen ink / ink2 / green / orange / blue / red / purple
c = Canvas(760, 300, "Name")                    # Große Zeichnung 760 breit, Schriftgröße ≥ 12
c.rect / line / arrow / curve / circle / path / poly / bar      # fill="green" hell, "green!" voll
c.text(x, y, "Text", size=14, anchor="middle", color="ink", bold=False)
c.person(cx, top, "A", "blue", mood="happy")    # Feste Figur (ca. 30×60)
c.pie(cx, cy, r, ["blue"] * 6 + ["orange"] * 2, labels)   c.coins(x, y, 12, "green", cols=4)
c.shop(cx, base, label="BOBA")   c.doc(x, y)   c.bubble(x, y, w, h)   c.tick / cross / minus

# Zwei-Bild-Comic: 560×232; linkes Bildzentrum x=140, rechtes Bildzentrum x=420; Ihr Zeichenbereich y 44–188
k = Comic("Linke Bildbeschreibung ≤15 Z.", "Rechte Bildbeschreibung ≤15 Z.")

# Fertige Diagramme (alle geben Canvas zurück)
snake(nodes)   metro(stations)   timeline(events)   roadmap(stages)   risk_matrix(items)
paths_chart(history, scenarios)   ruler_chart(points, xr, yr, iso, gauge)   waterfall(steps)

# Seite
p = Page(titel, untertitel, kind="stock", notice=None)
p.mainline(ein_satz, canvas, kind="kernproblem", note="Feste Figuren: …")
p.checkup([("ok" | "mid" | "bad", "Einzeiler mit Zahl"), …])
p.chain([(konzeptname, "von ihm verursachtes neues Problem"), …])
p.card(name, en, definition, comic, solves, cost, stamp="next" | "redo" | "done")
p.section(title, prose, canvas=, table=(kopf, zeilen), steps=[…], tiles=[…], after=, note=, role=)
p.route([Stop(name, warum, dauer, url, link_text, verified=True), …])
p.sources([(titel, url), …]);  p.save("out.html")

Für englischsprachige Seiten: Vor dem Erstellen eines Comic / Page set_lang("en") aufrufen. Detaillierte Parameter jeder Funktion direkt in den Docstrings in scripts/sketch.py.

Wenn Sie mehrere Berichte auf einmal erstellen (z.B. die Top-10-Holdings eines ETFs), verwenden Sie die Bausteine aus scripts/blocks.py. Für jeden Bericht müssen Sie nur die Zahlen und Texte angeben:

from blocks import *          # importiert gleichzeitig alle Werkzeuge von sketch
m  = mainline_tug(linker_titel, [(label, wert, ist_führung?) ×3], einheiten_hinweis, problem, subproblem, [(kraft, farbe) ×3], rechter_titel, [(datum, kurs), …], "−6%")
mo = moat(["① Tiefst", "② Zweittiefst", „③ Dritttiefst“], "TICK")
vi = vision([(wert, label1, label2, farbe, gestrichelt) ×3], gap_between=(1, 2), note="Algorithmus…")
c1 = C_bars(linke_beschreibung, rechte_beschreibung, [(label, wert, farbe)], [(label, wert, farbe)], lnote=, rnote=, fmt="%g")   # Vorher-Nachher-Balken
c2 = C_talk(linke_beschreibung, rechte_beschreibung, "A", "Sprechblasentext", "Problemobjekt", "D", „Lösungsobjekt”, „Einzeilige Notiz“)          # Figuren + Objekte
c3 = C_flow(linke_beschreibung, rechte_beschreibung, ["Kasten", "Kasten"], ["Kasten", "Kasten", "Kasten"], rnote="Einzeilige Notiz")                 # Flusskästen
sc = [scen("Pfad", wahrscheinlichkeit, angenommenes_EPS, niedriger_faktor, hoher_faktor, "green"), …];  expect(sc);  scen_table(sc, was_passieren_muss)
p = Page(…, notice=disclaimer("2026-11-11"))

Die mit Bausteinen gezeichneten Grafiken sind eher „Standardteile”; für einen einzelnen Bericht, der aufwändiger gestaltet werden soll, zeichnen Sie weiterhin direkt mit Canvas / Comic. Beides kann gemischt werden.

Wenn die fertigen Diagramme nicht ausreichen, zeichnen Sie einfach mit den grundlegenden Canvas-Formen selbst – das Toolkit ist ein Startpunkt, kein Käfig; solange der gesamte Text durch c.text() läuft, funktioniert die Prüfung weiterhin.

Wenn Python nicht ausgeführt werden kann

Kopieren Sie assets/template.html, ersetzen Sie {{BODY}} durch handgeschriebenes HTML + inline SVG, die übrigen Platzhalter ({{TITLE}}, {{LANG}}, {{CAPMAX}}, {{PAGE_KEY}}, {{LABELS}}) gemäß den Werten aus sketch.py's Page.html(). Handgeschriebene SVGs MÜSSEN die Leinwandkoordinaten und class-Konventionen aus references/visual-style.md einhalten (svg.chk, rect.panel, text.cap), damit die eingebaute Selbstprüfung sie erkennt. Öffnen Sie seite.html?check=1 im Browser; die Prüfleiste unten muss grün PASS anzeigen.

Häufige Fehlermodi

• ❌ Konzepte in der Originalreihenfolge des Materials → Abhängigkeitskette hat keinen Informationsgehalt, neu anordnen
• ❌ „Was kostet es“ als „kaum Kosten“ geschrieben → nicht durchdacht, nochmal überlegen
• ❌ Figuren in verschiedenen Konzeptgrafiken ausgetauscht → Leser müssen sich neu orientieren, vereinheitlichen
• ❌ Kernkompetenzen nur Adjektive („starke Marke“, „Technologieführerschaft“), keine Zahlen und Definitionen → durch Belege ersetzen
• ❌ Management-Vision als Leistungsprognose in die langfristige Planung geschrieben → als Ziel kennzeichnen und mit aktuellem Tempo abgleichen
• ❌ Versteckte Risiken als Floskeln wie „makroökonomische Unsicherheiten“, „zunehmender Wettbewerb“ → konkreten Übertragungsweg und die zu überwachende Zahl nennen
• ❌ Nicht angekündigte Daten als fest schreiben → „Voraussichtlich Anfang Dezember (letztes Jahr am 2.12., endgültig gemäß Unternehmensankündigung)“
• ❌ Wahrscheinlichkeiten und Kurse nicht als „subjektive Schätzung / Anschauungswert“ kennzeichnen → Leser halten es für Prognose
• ❌ Sekundärquelle sagt „keine Neuigkeiten“ – das so glauben → zuerst Unternehmensankündigungen und SEC-Einreichungen prüfen
• ❌ Link einer Lernroute nicht geöffnet und verifiziert → schwerwiegendste
• ❌ Text lang und breit → jeder Abschnitt ≤ 4 Sätze
• ❌ verify.py nicht ausgeführt, Screenshots nicht angesehen vor Abgabe → Seite mit überlappendem Text ausgeliefert