Marc Mintel
b15c8408ff
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🧪 QA (push) Failing after 1m48s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
# Content-Regeln für Blog-Post-Generierung
|
||
|
||
## 1. Visuelle Balance
|
||
|
||
- **Max 1 visuelle Komponente pro 3–4 Textabsätze**
|
||
- Visualisierungen dürfen **niemals direkt hintereinander** stehen
|
||
- Zwischen zwei visuellen Elementen müssen mindestens 2 Textabsätze liegen
|
||
- Nicht mehr als 5–6 visuelle Komponenten pro Blog-Post insgesamt
|
||
|
||
### Erlaubte visuelle Komponenten
|
||
- `Mermaid` / `DiagramFlow` / `DiagramSequence` — für Prozesse und Architektur
|
||
- `ArticleMeme` — echte Meme-Bilder (memegen.link), kurze und knackige Texte
|
||
- `BoldNumber` — einzelne Hero-Statistik mit Quelle
|
||
- `PremiumComparisonChart` / `MetricBar` — für Vergleiche
|
||
- `WebVitalsScore` — für Performance-Audits (max 1x pro Post)
|
||
- `WaterfallChart` — für Ladezeiten-Visualisierung (max 1x pro Post)
|
||
- `StatsGrid` — für 2–4 zusammengehörige Statistiken
|
||
- `ComparisonRow` — für Vorher/Nachher-Vergleiche
|
||
|
||
### Verboten
|
||
- `MemeCard` (text-basierte Memes) — nur echte Bild-Memes verwenden
|
||
- AI-generierte Bilder im Content — nur Thumbnails erlaubt
|
||
- `DiagramPie` — vermeiden, zu generisch
|
||
|
||
## 2. Zahlen und Statistiken
|
||
|
||
- **Niemals nackte Zahlen** — jede Statistik braucht Kontext und Vergleich
|
||
- `BoldNumber` nur für DIE eine zentrale Statistik des Abschnitts
|
||
- Mehrere Zahlen → `StatsGrid` oder `PremiumComparisonChart` verwenden
|
||
- Jede Zahl braucht eine **Quelle** (`source` + `sourceUrl` Pflicht)
|
||
- Vergleiche sind immer besser als Einzelwerte: "33% vs. 92%", nicht nur "92%"
|
||
|
||
## 3. Zitate und Quellen
|
||
|
||
- Alle Zitate brauchen klare Attribution: `author`, `source`, `sourceUrl`
|
||
- Bei übersetzten Zitaten: "(übersetzt)" im Zitat oder als Hinweis
|
||
- `ExternalLink` für alle externen Referenzen im Fließtext
|
||
- Keine erfundenen Zitate — nur verifizierbare Quellen
|
||
|
||
## 4. Mermaid-Diagramme
|
||
|
||
- **Extrem kompakt halten**: Strikt max 3–4 Nodes pro Diagramm
|
||
- **Ausschließlich vertikale Layouts** (TD) — besser für Mobile
|
||
- Deutsche Labels verwenden
|
||
- Keine verschachtelten Subgraphs
|
||
- Jedes Diagramm braucht einen aussagekräftigen `title`
|
||
|
||
## 5. Memes
|
||
|
||
- Nur echte Bilder via `ArticleMeme` (memegen.link API)
|
||
- **Extreme Sarkasmus-Pflicht** — mach dich über schlechte Agentur-Arbeit oder Legacy-Tech lustig
|
||
- **Kurze, knackige Captions** — max 6 Wörter pro Zeile
|
||
- Deutsche Captions verwenden
|
||
- Bewährte Templates: `drake`, `disastergirl`, `fine`, `daily-struggle`
|
||
- Max 2–3 Memes pro Blog-Post
|
||
|
||
## 6. Textstruktur
|
||
|
||
- Jeder Abschnitt startet mit einer klaren H2/H3
|
||
- `LeadParagraph` nur am Anfang (1–2 Stück)
|
||
- Normaler Text in `Paragraph`-Komponenten
|
||
- `Marker` sparsam einsetzen — max 2–3 pro Abschnitt
|
||
- `IconList` für Aufzählungen mit Pro/Contra
|