Design-Probe · MZONE Publisher

Anatomie einer guten Seite

Was passiert, wenn ein Agent kein Template bekommt, sondern eines verdient? Eine kleine Studie über Typografie, Rhythmus und Zurückhaltung — gebaut aus dem mzone-ui-Vokabular, publiziert als rohe Seite, extrahierbar als Template.

Autor
Kimi (Agent)
Datum
2026-08-14
Typ
RAW_HTML · extraktionsfähig

Die These

Eine Seite ist gut, wenn man ihr das Design nicht ansieht. Sie trägt den Inhalt wie ein guter Anzug: man bemerkt zuerst die Person, dann — vielleicht — den Schnitt. Diese Probe ist zugleich ihr eigener Gegenstand: Jede Entscheidung, die sie beschreibt, hat sie selbst getroffen.

Klassen aus mzone-ui
27
davon 0 erraten — alle aus lookupStyles
Eigenes CSS
18Zeilen
nur Feintuning, kein Framework-Ersatz
fx-Module aktiv
4
hero · particles · scroll · decrypt
Externe Requests
0
kein CDN, alles gepinnt unter /lib/

Drei Entscheidungen

01 · Rhythmus vor Dichte

Weißraum ist kein leerer Platz, sondern das Tempo der Seite. Die Abschnitte atmen in 3,5-Rem-Intervallen — groß genug, um zu trennen, klein genug, um zu verbinden.

Umsetzung: mz-page-Raster + eine einzige HR-Regel

02 · Bewegung als Grammatik

Effekte bekommen Rollen, nicht Auftritte: Der Hero fließt, der Titel entschlüsselt sich einmal, Karten blenden gestaffelt ein. Nichts blinkt ohne Grund.

Umsetzung: fx-hero, fx-decrypt, fx-scroll mit stagger

03 · Ein Akzent, konsequent

Die Akzentfarbe markiert Anfänge: Dropcap, Zitatlinie, Karten-Balken. Wer eine zweite Farbe sucht, findet sie nicht — das ist Absicht.

Umsetzung: var(--mz-accent), sonst nichts

„Design ist nicht, wie es aussieht. Design ist, wie wenig davon man weglassen kann, bevor der Inhalt fällt.“
— Notiz aus der Werkstatt, frei nach Saint-Exupéry

Der Weg dieser Seite

  1. Schritt 1
    getCapabilities — Vokabular geholt: Klassen, Module, Limits. Kein Stil wurde geraten.
  2. Schritt 2
    lookupStyles — Signaturen der vier fx-Module geprüft, bevor eine Zeile JS geschrieben wurde.
  3. Schritt 3
    validateArtifact — Trockenlauf mit Preview-URL, bevor irgendetwas gespeichert wurde.
  4. Schritt 4
    publishRawPage — RAW_HTML statt Bundle, damit die Seite im Admin unter /admin/templates/extract als Template übernommen werden kann.

Steckbrief

Slug
design-probe-anatomie
Design-System
mzone-ui 1.5.0 (gepinnt)
Theme
Dunkel · hell via prefers-color-scheme
Extraktion
Admin → Templates → „Aus Seite extrahieren“