cdesiles/design-doc

Dokument

Ein Dokument wird sequentiell gelesen und auf Papier gedruckt. Beide Tatsachen schränken das Layout ein: eine einzelne Textspalte, echte Seitenumbrüche und nichts, was von Hover abhängt.

Seitenumbruch zuerst festlegen

• Fließend (Standard) — ein durchgehender Textfluss; die Druck-Engine des Browsers teilt ihn auf Seiten auf. Richtig für Berichte, Memos, Briefe, Aufsätze, alles, dessen Länge Sie nicht kontrollieren.
• Feste Seiten — explizite <section class="page"> Blöcke, einer pro Blatt. Richtig, wenn die Seitenzahl zum Design gehört: ein einseitiger Lebenslauf, ein zweiseitiger Flyer, ein Zertifikat, ein Poster.

Wenn die Person „zwei Seiten“ gesagt hat, meinen sie feste Seiten. Wenn sie „einen Bericht“ gesagt haben, meinen sie fließenden Text. Wenn es wirklich unklar ist, fragen Sie nach – das Erstellen des falschen Typs verschwendet das gesamte Dokument.

Geometrie

Verknüpfen Sie die Token-Datei im <head>, plus components.css, wenn das Dokument deren Komponenten verwendet, und verwenden Sie deren Variablen für Farbe, Schriftart und Abstand. Die folgenden Regeln betreffen nur die Papiergeometrie:

@page { size: A4; margin: 0; }        /* oder: size: letter; */
body  { margin: 0; background: white; }
.page { width: 210mm; min-height: 297mm; padding: 24mm 22mm; box-sizing: border-box; }
.page + .page { break-before: page; }

@media screen {
  body { background: gainsboro; padding: 32px 0; }
  .page { margin: 0 auto 24px; box-shadow: 0 2px 24px color-mix(in srgb, black 12%, transparent); }
}

Für fließende Dokumente entfernen Sie die festen .page Blöcke und setzen Sie @page { margin: 22mm } mit einer max-width: 66ch Spalte. Papiergröße: A4, es sei denn, die Person ist eindeutig Amerikaner, dann Letter. Wenn sie eine Größe angegeben haben, verwenden Sie deren.

Typografie

• Grundschrift 11–12pt, Zeilenabstand 1,5–1,6. Niemals unter 10,5pt für alles, was gelesen werden muss.
• Laufweite 60–75 Zeichen. Breiter und das Auge verliert die Zeile.
• Eine Textschrift für den Fließtext, optional eine zweite für Überschriften. Dieselbe Paarung wie im Designsystem, falls vorhanden.
• Überschriften nach einer Skala dimensioniert, wobei die oberste Überschrift deutlich größer ist – 28–36pt – nicht 14pt fett.
• Hervorhebung durch Gewicht und Abstand, nicht nur durch Farbe. Ein Dokument, das in Graustufen gedruckt wird, muss dennoch lesbar sein.

Struktur

• Echte semantische Elemente: h1–h3, p, ul, table, figure, blockquote. Keine gestylten Divs.
• Seitenzahlen über @page Zähler, wenn das Dokument mehr als zwei Seiten umfasst:

  @page { @bottom-center { content: counter(page); } }
  

  Die Unterstützung ist teilweise – eine Fußnoten-artige Nummer auf jeder festen Seite ist ein zuverlässiger Fallback.
• Tabellen: Zahlen rechtsbündig, Text linksbündig, dünne Linien anstelle von vollständigen Rahmen, Kopfzeile über Umbrüche hinweg wiederholt mit thead { display: table-header-group }.
• Vermeiden Sie break-inside: avoid bei Elementen, die höher als ein Drittel einer Seite sind.
• Abbildungen erhalten eine Bildunterschrift. Keine Bildunterschrift, keine Abbildung.

Inhalt

Behalten Sie die Worte der Person. Sie dürfen auf Anfrage kürzen und neu anordnen; Sie dürfen nicht paraphrasieren. Wenn ein Abschnitt leer ist, weil sie ihn noch nicht geschrieben haben, lassen Sie eine deutlich gekennzeichnete Lücke, anstatt Text zu erfinden.

Keine Stockfotografie und kein generiertes Bild, das nur Dekoration ist. Wenn das Dokument ein echtes Bild benötigt, generieren Sie es mit den FLUX-Tools, falls verfügbar; verwenden Sie andernfalls einen Platzhalter mit einer Notiz in Monospace-Schrift, die sagt, was dort hingehört.

Fertigstellung

Führen Sie design-verify in der Druckbreite aus und lesen Sie den Screenshot:

node ~/.config/opencode/lib/design/verify.mjs "design/Report.html" \
  --width 900 --height 1200 --full --out design/.verify/report.png

Prüfen Sie auf: Text, der an Seitenrändern abgeschnitten ist, eine am unteren Seitenrand verwaiste Überschrift, Tabellen, die schlecht geteilt werden, und jeglichen horizontalen Überlauf – was im Druck bedeutet, dass Inhalt am rechten Rand verschwindet.

Drucken Sie dann selbst einmal als PDF (Cmd-P, Als PDF sichern), um die Seitenzahl zu bestätigen und dass sich nichts in echter Papiergröße verschiebt.