grok-bot
649dd54bbe
Hybrid Charter + IBM Plex, Leading 1.20, geometry 20 mm, left-bar-Boxen und abgestimmte Palette nach dem Schwesterprojekt; Spec und Dist-PDF (292 Seiten) synchronisiert.
5.8 KiB
5.8 KiB
Visuelle Bibel — Diagramme & Plates (Deep Signal)
Cover / Titelseite: cover-ki-book.jpg
Plates: plates/
Gesamt-Designsystem: ../meta/DESIGN-SYSTEM.md
Zwei Ebenen, ein System
| Ebene | Name | Einsatz | Surface |
|---|---|---|---|
| L1 | Deep Plate | Kernkonzepte, Kapitel-Einstieg, Marketing | Dunkel Navy, landscape, cinematic |
| L2 | Signal Diagram | Architektur-Details, Sequences, States | Hell #F7F9FC, Electric strokes |
Beide teilen Palette, Typo, Radien, Stroke-Weights und Ikonografie.
Palette
Interior-Chrome (Fließtext-PDF) nutzt gedämpftes Cyan #0E7490 und Amber #B8860B — siehe ../meta/DESIGN-SYSTEM.md v2.
L1-Plates behalten leuchtendes Cyan auf dunklem Navy (hier Kontrast AAA).
Gemeinsam / L1 Deep
| Rolle | Farbe | Verwendung |
|---|---|---|
| Grund | #0A1628 Navy |
Hintergrund, Tiefe |
| Panel | #0F2137 / #152A45 |
Elevated nodes |
| Primär-Akzent | #2F6BFF / #3D7EFF Electric |
Host, Agent, primäre Kanten |
| Daten | #00D4FF / #00B4D8 CyanBright |
MCP-Links, Data flow (nur auf dunklem BG) |
| Fokus | #D4A84B Amber/Gold |
Server, Harness, Wert, Verify |
| Struktur | #5A6A80 Silber-Grau |
sekundäre Edges |
| Text L1 | #E8EEF7 / #9AA8BC |
Labels primary / secondary |
L2 Signal (Print im hellen Body)
| Rolle | Farbe |
|---|---|
| BG | #F7F9FC |
| Node fill | #FFFFFF |
| Node stroke | #2F6BFF 1.25 pt |
| Edge | #5B6B85 1 pt |
| Text | #1A1F2E |
| Highlight node | fill #EEF4FF |
| Amber focus | #D4A84B |
Regel: L1 = dunkel (Cover-Match). L2 = hell mit denselben Akzenten. Kein Default-Mermaid-Lila/Gelb.
Stilregeln
Allgemein
- Clean, modern, minimal; leicht abstrakt, aber architektonisch klar
- Keine reinen Flowchart-Screenshots ohne Theme
- Keine Menschen mit Gesichtern; max. 6 kurze Primär-Labels
- Scharfe Linien, klare Hierarchie, drucktauglich
- Corner radius: Nodes 6–8 px, Container 10–12 px
- Stroke: 1.25–1.5 pt primär; 2 pt nur Fokus-Node
- Isometrie: erlaubt für L1 Hero; verboten für Sequence/State
L1 Deep Plate
- Landscape 16:9 (1600×900) für Interior — kein Hochformat
- Subtile Grid ≤ 35 % Opacity auf Navy
- Labels lesbar (Sans, max. 6 Primär-Labels)
- Keine Buch-Titel-Zeile im Interior-Plate
- Alle 20 Plates Landscape 1600×900 — SVG-Source of Truth unter
plates/plate-*.svg - Generator:
bilder/scripts/generate_l1_landscape.py(vollständig regenerierbar) - Portrait-Originale:
plates/archive-portrait/
L2 Signal (Mermaid / SVG)
- Theme wird von
build/preprocess_mermaid.pyinjiziert (Signal Theme) - Flach, max. ein leichter Schatten
- Kurze Node-Labels,
<br/>für Umbrüche - Deutsch in Labels; Eigennamen (MCP, LLM, RAG) beibehalten
Ikonografie & Farbkodierung (buchweit)
| Konzept | Farbe | Icon-Hinweis |
|---|---|---|
| Host / IDE / Runtime | Electric Blue | Monitor/window |
| MCP Client | Cyan | Port/Stecker |
| MCP Server | Amber | Würfel/Stack |
| LLM / Model | Violet soft #8B5CF6 |
Spark (kein Gesicht) |
| Tool | Teal #0E7490 |
Wrench |
| Resource | Silver-blue | Document |
| Prompt | Amber light | Chat outline |
| Memory | Gold dim | Layers |
| Agent | Electric + Ring | Orbit |
| Trust boundary | Danger dashed | Shield / dashed box |
| Data flow | Cyan arrow | — |
| Control flow | Navy/gray arrow | — |
Dual-Figure-Regel (Manuskript) — angewendet
- Hero-Konzept → nur L1-Plate (
width=100%, landscape) - Technisches Detail / Sequence → nur L2 Mermaid
- Nie Plate + Mermaid untereinander für dieselbe Idee
Script: bilder/scripts/dual_figure_pass.py
Ausnahme Sequence: plate-mcp-context-cycle entfernt → Mermaid sequenceDiagram bleibt.
Einbettung Plates: landscape, max. Höhe via header.tex (0.40 textheight).
Priorisierte Neugestaltung
| Motiv | Aktion |
|---|---|
| Evolutionsstufen | L1 landscape behalten/anpassen; Labels + Fähigkeit pro Stufe |
| MCP Host–Client–Server | L1 redesign: klare 3-Zonen Host → Client → Servers (lesbare Labels) |
| Agent-Loop / PRA | Ring + optional Verify (Amber); Zentrum Model+Harness |
| Multi-Agent-Org | Planner→Supervisor→Workers + MCP-Bus unten |
| Context Engineering Flow | Goal→Policy→Select→Assemble→LLM→Observe→Compact |
Prompt-Template (L1)
Professional tech book illustration, conceptual architecture (not a flowchart screenshot).
Subject: [MOTIV].
Format: landscape 3:2, print-ready, high resolution.
Style: modern minimal technical art, deep navy/anthracite background (#0A1628),
electric blue (#2F6BFF) structure, cyan (#00D4FF) data flows, gold/amber (#D4A84B) focal accents,
subtle circuit/graph motifs, high contrast, sharp clean geometry,
readable labels (max 6, sans-serif, high contrast), architectural clarity over pure cinema.
Inspired by premium O'Reilly/Manning book art but darker and more cinematic.
No human faces, no cluttered UI screenshots, no book title in image.
Composition: clear visual hierarchy, balanced negative space (not empty portrait sky).
Labels only: [LABELS].
Anti-Patterns (verboten)
- Default Mermaid Pastell ohne Theme
- Portrait-Plates mit > 40 % leerem Sternenhimmel
-
12 Nodes ohne Cluster
- Neon-auf-Neon ohne Kontrast
- Plate + volles Mermaid + langer Code auf einer Seite
- Dekor, das Labels überlagert
Rendern
| Weg | Hinweis |
|---|---|
| Build-Pipeline | build/preprocess_mermaid.py → themed PNG unter build/mermaid/ |
| Mermaid Live | nur zum Editieren; Theme nicht vergessen |
| L1 Export | SVG/PDF + PNG 300 dpi landscape |
Dateinamen Export: kapitel-XX-kurzname.svg · L1: plates/l1-{slug}.png