Blogbeitrag-Skill
Erstelle eine einzelne Seite für einen langen Artikel – redaktionelles Layout, ohne Randleisten.
Arbeitsablauf
- Lies die aktuelle DESIGN.md (oben eingefügt). Nutze die Typografie-Token – bei langen Texten sind 70 % Schrift, 20 % Bild, 10 % Gestaltungselemente.
- Wähle das Thema aus der Aufgabenstellung und verfasse einen echten Artikel – mindestens 600 Wörter, verteilt auf 4–6 H2-Abschnitte. Kein Lorem Ipsum.
- Abschnitte, in dieser Reihenfolge:
- Kopfzeile – kleines Wortzeichen + 4–6 Navigationslinks, schlicht.
- Artikelkopf – Kategorie (Augenbraue), Überschrift (Anzeige-Token, groß), Deckzeile (1–2 Sätze Unterzeile), Autorenname + Rolle + Datum.
- Heldenbild – ein 16:9 Platzhalterblock mit einem aus dem Designsystem abgetönten Verlauf oder einer Volltonfarbe (keine externen Bilder). Füge eine einzeilige Bildunterschrift darunter ein.
- Textkörper – abwechselnd Prosaabsätze mit mindestens:
- 1 hervorgehobenem Zitat (große Anzeigeschrift, Akzentstrich an der Inline-Startkante, damit das Layout bei
dir="rtl"korrekt umschlägt). - 1 Abbildung (Bildplatzhalter + Bildunterschrift).
- 1 Liste (nummeriert oder mit Aufzählungspunkten).
- 1 Inline-Blockzitat.
- 1 hervorgehobenem Zitat (große Anzeigeschrift, Akzentstrich an der Inline-Startkante, damit das Layout bei
- Autorenzeile – Autorenavatar (Initialen in einem Kreis), Biografie-Absatz.
- Verwandte Beiträge – 3 Karten, die auf andere Beiträge verlinken. Jede Karte: kleiner Bildblock, Titel, einzeiliger Auszug, Datum.
- Schreibe ein einzelnes HTML-Dokument:
<!doctype html>bis</html>, CSS inline.- Der Artikeltext verwendet die Schriftart des Designsystems, zentriert, maximale Breite gemäß Layoutregel des Designsystems (normalerweise 680–720 Pixel).
- Initialbuchstaben (
first-letter) nur, wenn die Stimmung des Designsystems redaktionell / serifenbetont ist – bei technischen Designsystemen weglassen. data-od-idauf der Überschrift, dem Heldenbild, dem Textkörper, dem hervorgehobenen Zitat und dem Gitter der verwandten Beiträge.
- Selbstkontrolle:
- Die Schrifthierarchie ist eindeutig – H1 ist klar die Überschrift; H2s sind Abschnittstrenner; hervorgehobene Zitate konkurrieren nicht mit H1.
- Zeilenlänge 60–75 Zeichen für Prosatext.
- Der Akzent erscheint höchstens zweimal (Augenbraue + Regel für hervorgehobenes Zitat oder ein Link).
- Die Seite liest sich wie ein Magazin, nicht wie eine Marketing-Landingpage.
Ausgabeformat
Innerhalb von <artifact>-Tags ausgeben:
<artifact identifier="beitrags-slug" type="text/html" title="Artikelüberschrift">
<!doctype html>
<html>...</html>
</artifact>
Ein Satz vor dem Artefakt, nichts danach.