kami-landing

Was macht kami-landing?

Erstelle ein einseitiges Dokument im Kami (紙 / 纸)-Designsystem. Die Ästhetik orientiert sich an editorialem Print, technischen Whitepapers und alten Schreibmaschinen-Korrespondenzen – das Ziel ist guter Inhalt auf gutem Papier, nicht moderne App-Oberfläche.

Hauptreferenz des Designsystems: design-systems/kami/DESIGN.md. Lies es vor der Auslieferung. Tokens, Typregeln, die „zehn Invarianten“ und verbotene Farben stehen dort.

Was du erhältst

Eine einzelne, in sich geschlossene HTML-Datei mit:

• Warmer Pergamentleinwand (#f5f4ed) – niemals #ffffff.
• Einem chromatischen Akzent – Tintenblau (#1B365D), verwendet für die Abschnittsnummer, das hervorgehobene Wort der Überschrift, die linke Linie des Manifests und die Metrikwerte. Tintenblau darf an keiner anderen Stelle mehr als 5 % der Dokumentoberfläche bedecken.
• Serifenschrift in einer Strichstärke (500) für die Hierarchie – Charter (EN), TsangerJinKai02 / Source Han Serif (CN) oder YuMincho (JA), ausgewählt über den language-Parameter. Keine Kursivschrift an irgendeiner Stelle.
• Engem Druckrhythmus – Zeilenhöhen 1,10–1,55, Zeichenabstand sprachabhängig (0 für EN, 0,35px für CN, 0,02em für JA).
• Zahlenstapeln mit font-variant-numeric: tabular-nums, damit Metrikspalten und Seitenzahlen sauber ausgerichtet stehen.
• Tiefe durch 1px-Ringe und flüsternde Schatten (0 4px 24px rgba(0,0,0,0.05)). Keine harten Schlagschatten, kein Neumorphismus, keine backdrop-filter-Unschärfen.
• Tag-Füllungen als solide Hex-Werte (z. B. #E4ECF5), niemals rgba() – Druck-Renderer übermalen Alpha-Tags doppelt.
• Responsiv bei 1280 / 980 / 768 / 560.

Seitenstruktur

1. Augenbrauenzeile – Sprachwechsler · Ausgabe · Version (12px Sans Serif, Großbuchstaben)
2. Hero            – Überschrift (96–106px Serif 500), Untertitel (21px),
                     drei Hero-Token-Chips (papiergetönt)
3. Manifest        – Hervorgehobener Absatz in Serif 400, 20px, 1,65 ZA, mit
                     tintenblauer linker Linie und Signaturfußzeile
4. Metrikzeile     – 3-6 Zellen: Wert (24px Serif 500 Tintenblau, tabular-nums),
                     Bezeichnung (12px Serif 500 Oliv)
5. Kapitel         – nummeriert (`01`, `02`, …) Tintenblau Serif 500 14px,
                     Abschnittstitel 28-32px, Textkörper 14-15px
6. Fußzeile        – Kick-Wort (mega Serif 500), Lizenz · Jahr · Kontakt,
                     dreispaltiger Seitenindex in 12px Serif 500

Workflow-Vereinbarung

1. Sammle die Markeninformationen

Verwende AskQuestion (oder eine gleichwertige Methode), um die Markeninformationen in Teilen zu sammeln. Gib die gesamte Eingabeliste nicht auf einmal aus; frage in zwei Runden:

1. Identitätsrunde – Name, Slogan, Standort, Ausgabe / Version, primäre URL, dominante Sprache.
2. Inhaltsrunde – Manifest-Absatz + Signatur, 3-6 Metrik-Kacheln, 3-5 Kapitel (Titel + Einleitung + Textkörper) Einträge.

2. Wähle den Sprach-Stack

Der language-Parameter steuert, welcher --serif-Stack auf :root gesetzt wird. Wähle basierend auf der dominanten Sprache des Manifests und des Kapiteltextkörpers:

language	--serif	Anmerkungen
en	Charter, Georgia, Palatino, Times New Roman, Serif	Standard
zh-CN	TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia	Zeichenabstand 0.35px im Textkörper
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	Überschreibe zusätzlich --olive mit #4d4c48 (YuMincho-Striche sind dünner)

Gemischte Schriftsysteme im Fließtext sind in Ordnung – der Browser kümmert sich um die glyphenweise Fallback-Kette. Verkette nicht alle drei Schriftfamilien innerhalb einer einzigen font-family-Deklaration; das verwässert den Charakter.

3. Schreibe index.html

Gib eine einzelne Datei mit allen inline eingebetteten CSS-Regeln aus. Spiegele die Struktur von example.html und verwende ausschließlich die Tokens aus design-systems/kami/DESIGN.md. Erfinde keine neuen Farben, Strichstärken oder Schriftfamilien.

Komponenten-Primitive, die der Agent einfügen kann (alle im <style>-Block des Beispiels definiert):

• .eyebrow, .label – Serifenlose Überstreichungen
• .metric – Wert + Bezeichnung als vertikales Paar
• .section-num + .section-title + .section-lede
• .tag.standard, .tag.brush – Tags mit soliden Hex-Farben (maximal ein Brush-Tag pro Seite)
• .quote – Zitat mit linker Linie in Serif 500
• ul.dash – Aufzählungspunkte mit Gedankenstrichen in Tintenblau
• .code – Codeblock mit elfenbeinfarbenem Hintergrund und 1px Rahmen
• .footer-kicker – Mega-Serif-500-Wort

Versehe jedes bearbeitbare Element mit data-od-id="<eindeutiger-slug>", damit der Kommentarmodus der Host-App darauf abzielen kann.

4. Selbstprüfung vor der Auslieferung

• Seitenhintergrund ist Pergament (#f5f4ed), niemals #ffffff.
• Tintenblau (#1B365D) bedeckt ≤ 5 % der sichtbaren Fläche – zähle die Abschnittsnummern, die Manifest-Linie, die Metrikwerte, den Überschriftenakzent. Gesamt ≤ 5 %.
• Alle Grautöne sind warm (R ≈ G > B). Kein slate-*, kein #f3f4f6.
• Serifenschrift bleibt bei Stärke 500 – kein font-weight: 700 oder 900 an irgendeiner Stelle von Serifentext.
• Kein font-style: italic an irgendeiner Stelle. Hervorhebungen erfolgen stattdessen durch tintenblaue Farbe oder einen .tag.
• Alle Zahlenstapel (Metrikwerte, Seitennummerierung, Daten, finanzielle Angaben) tragen font-variant-numeric: tabular-nums.
• Alle Tag-Füllungen sind solide Hex-Werte (z. B. #E4ECF5), niemals rgba().
• Schatten: höchstens ein 1px-Ring oder ein 0 4px 24px rgba(0,0,0,0.05) flüsternder Schatten. Keine harten Schlagschatten.
• Überschrift ≤ 6 Wörter in Anzeigegröße; CJK ≤ 8 Zeichen.
• Bei 768px und 560px fällt das Layout auf eine Spalte zusammen, ohne horizontales Scrollen.

Dateien dieser Anleitung

design-templates/kami-landing/
├── SKILL.md                 # Diese Vereinbarung
├── README.md                # Kurzanleitung für Menschen
└── example.html             # Kanonische SplatStudio-Darstellung

Grenzen

• Erfinde keine neuen Farben oder Schriften. Die Kami-Palette ist festgelegt; wenn eine Aufgabenstellung eine Markenfarbe verlangt, lehne ab oder rendere die Markenfarbe als einzelnen .tag.brush-Akzent.
• Führe keine zweite Akzentfarbe ein. Wähle Tintenblau oder nichts.
• Mische nicht alle drei Schriftstapel in einer Deklaration; wähle die dominante Sprache, überschreibe --serif auf :root und überlasse dem Browser die glyphenweise Fallback-Auflösung für gemischte Schriftsysteme im Fließtext.
• Verwende kein rgba() für Tag-Füllungen – Druck-Renderer übermalen Alpha-Tags doppelt. Verwende die vormischten soliden Hex-Werte aus der Tabelle in design-systems/kami/DESIGN.md §2.
• Füge kein JavaScript für Animationen hinzu. Die Seite ist Papier, keine App – Bewegung gehört zum Leser, der scrollt.

Siehe auch

• design-systems/kami/DESIGN.md – die vollständige Token-Spezifikation.
• design-templates/kami-deck/ – Schwester-Anleitung, die eine Folienpräsentation in derselben Kami-Sprache erstellt.
• Upstream: tw93/kami – ursprüngliche Claude-Fertigkeit (MIT), die das Designsystem adaptiert.