Dating Dashboard — Skill für Matchmaking- und Community-Übersic…

Dating-Web-Skill

Erstelle ein einseitiges Consumer-Dashboard, das sich wie eine Sonntagsbeilage einer Dating-Kolumne anfühlt, umgesetzt als Software. Editorialer Satz, eine einzige zurückhaltende Akzentfarbe, viel Weißraum, keine Swipe-Karten oder Anmache-Klischees.

Workflow

1. Lies die aktive DESIGN.md (oben eingefügt). Setze stark auf eine Serifen-Anzeigeschrift für die Metrikzahlen – diese Screens leben oder sterben mit den Zahlen.
2. Wähle eine Markenstimme – ironisch, beobachtend, leicht literarisch. Generiere echte, spezifische Texte. Beispiele: „die Leute, die innerhalb eines Tages zurückschreiben“, „überschaubar. zwei sind jetzt Freunde.“, „deine größte Kompatibilitätsstärke.“
3. Layout, in dieser Reihenfolge:
   • Oberer Ticker – einzeiliger horizontaler Streifen oben, serifenloser Augenbrauen-Stil: Tagline links, „NÄCHSTE STUFE BEI 2.080 GEMEINSAMEN“ rechts, beide in Mono-Versalien mit Buchstabenabstand. Dünner Strich darunter.
   • Linke Seitenleiste – 220–260px breite Sidebar. Marken-Wordmarke in kursiver Serife oben. Nutzerkarte (Avatar / Handle / Quote / Stufe). Drei Navigationsgruppen: „HEUTE“ (Muster, Posteingang, Warteschlange, Benachrichtigungen), „DU“ (deine Statistiken, Gemeinsame & Communities, Blockierte, Einstellungen), „ARCHIV“ (vergangene Ausgaben, abgelaufene Matches). Aktives Element erhält Akzentfarbe + Akzentpunkt.
   • Hauptinhalt:
     • KPI-Raster – 3 Spalten × 3 Zeilen (oder 9 Zellen). Jede Zelle: Mono-Beschriftung in Kapitälchen, eine übergroße Serifenziffer (Akzentfarbe oder gedämpftes Grün für positiv, gedämpftes Rot für Warnhinweis), einzeilige kursive Fußnote. Plausible Details – „1.842 ↑ 41 diese Woche · gesundes Wachstum.“, „14 % über dem Median deiner Kohorte.“, „4 / Ex-Partner in deinem Umfeld · überschaubar. zwei sind jetzt Freunde.“
     • Balkendiagramm-Panel – „gemeinsame – letzte 30 Tage“. Hohe dünne schwarze Balken, die letzten zwei Tage in Akzentfarbe hervorgehoben. Darüber Beschriftung mit „↑ IM AUFWÄRTS TREND · +3 NAHE GEMEINSAME DIESEN MONAT · ZWEI ÜBER DASSELBE OFFSITE“ in Mono.
     • Trend-Panel – „Match-Rate – letzte 12 Wochen“. Eine Zeile Fließtext darunter („STETIGER ANSTIEG VON 8 % → 14 %. ZURÜCKZUFÜHREN AUF EINEN COMMUNITY-BEITRITT …“). Fußzeilenstrich.
4. Schreibe ein einzelnes HTML-Dokument:
   • <!doctype html> bis </html>, CSS inline.
   • Hintergrund cremiges Off-White, Fließtext in Serife, Mono-Beschriftungen überall.
   • Verwende font-feature-settings: 'tnum' für die Metrikzahlen.
   • SVG-Balkendiagramm mit ~30 Balken, unterschiedlichen Höhen.
   • data-od-id auf Ticker, Sidebar, KPI-Raster, Diagramm, Trend.
5. Selbstkontrolle:
   • Wirkt zurückhaltend, redaktionell, leicht witzig – nicht geil.
   • Einzelne Akzentfarbe maximal an 3–4 Stellen verwendet (ein KPI, zwei hervorgehobene Balken, ein Navigationsstatus).
   • Kein Swipe-Deck, keine Herzen, keine Feuer-Emojis.

Output-Vereinbarung

Gib zwischen <artifact>-Tags aus:

<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Titel">
<!doctype html>
<html>...</html>
</artifact>

Ein Satz vor dem Artefakt, nichts danach.