Einleitung & Anlass
Du hast dich entschieden, dass Wissen künftig als gestaltetes HTML-Dokument bei dir ankommt — nicht als Fließtext-Wüste. Dieses Dokument ist die Referenz: Es zeigt alle Bausteine und wie sie zusammenspielen.
Jede KI, die dir etwas erklären soll, kann sich an dieser Struktur orientieren. Das Ziel: Du scannst, du verstehst, du behältst — ohne dich durch monotone Textwüsten kämpfen zu müssen.
Die Grundidee
Gute Wissensübergabe funktioniert in drei Schritten: kontextuieren, erklären, festhalten. Das Layout unterstützt genau diesen Fluss.
Kontext
Warum ist das relevant? Eyebrow, Einleitung und Metadaten setzen den Rahmen.
Erklärung
Nummerierte Abschnitte, Callouts und Beispiele führen Schritt für Schritt.
Festhalten
Eine „Das Wichtigste“-Box fasst am Ende zusammen, was hängenbleiben soll.
Bausteine im Überblick
Die Vorlage bringt alles mit, was ein verständliches Dokument braucht. Kombiniere die Bausteine je nach Thema frei.
- Hero-Kopf mit Titel, Einleitung, Datum, Lesezeit und Tags
- Sticky Inhaltsverzeichnis mit Aktiv-Markierung beim Scrollen
- Nummerierte Abschnitte für eine klare Linie
- Callouts in fünf Varianten für Hinweise jeder Art
- Karten-Raster für Konzepte nebeneinander
- Code-Blöcke, Tabellen, Zitate
- Key-Learnings-Box als Abschluss
Hinweise & Hervorhebungen
Nicht jede Information gleich wichtig. Die Callouts setzen visuelle Akzente und lenken die Aufmerksamkeit genau dorthin, wo sie hin soll.
Reine Zusatzinfo, ohne die der Text auch funktioniert — aber das Verständnis vertieft.
Eine Idee oder Best Practice, die das Arbeiten mit dem Thema erleichtert. Im Orange-Look mit Glow.
Wenn etwas so funktioniert hat oder eine klare Empfehlung ausgesprochen wird.
Etwas, das leicht falsch gemacht wird — lieber zweimal lesen.
Wenn eine Aktion zu Datenverlust, Kosten oder Sicherheitsproblemen führen kann.
Code & Beispiele
Code-Blöcke sind dunkel, haben eine Sprache-Kennzeichnung oben rechts
und eine dezente Syntax-Hervorhebung. Inline-Code wie
this.doSomething() hebt sich im Fließtext ab.
Kurze Beispiele immer direkt beim Erklärtext platzieren, nicht am Ende sammeln.
// Wissen so übergeben, dass es klebt
function erkläre(thema) {
const kontext = holeHintergrund(thema);
const kern = filterWesentliches(kontext);
return formatiere(kern, { stil: "schön" });
}js„Gutes Design ist so wenig Design wie möglich — aber nicht weniger.“ — Dieter Rams
Daten & Vergleiche
Wenn es um Eigenschaften oder Entscheidungen geht, hilft eine Tabelle mehr als ein langer Absatz.
| Baustein | Wann verwenden | Wirkung |
|---|---|---|
| Callout | Bei Hinweisen, Risiken, Tipps | Lenkt den Blick, schafft Struktur |
| Karte | Bei 3–6 verwandten Konzepten | Macht Vergleiche leicht |
| Code-Block | Bei Befehlen & Snippets | Klar abgesetzt, kopierbar |
| Tabelle | Bei Eigenschaften nebeneinander | Spart viel Prosa |
Das Wichtigste
Zum Abschluss eine Key-Learnings-Box mit dem Wesentlichen in Sätzen — das, was hängenbleiben soll, auch wenn der Rest vergessen ist.
Mitnehmen
- Diese HTML-Vorlage ist der Standard, wie dir Wissen künftig übergeben wird.
- Struktur vor Textwüste: Abschnitte, Callouts, Karten, Tabellen.
- Dark Mode ist Standard — Hell lässt sich oben rechts umschalten.
- Farben und Glow lassen sich oben unter
:rootzentral anpassen.