Dashboard Skill
Erzeuge einen einzigen Bildschirm für ein Admin- / Analytics-Dashboard.
Arbeitsablauf
- Lies die aktuelle DESIGN.md (oben eingefügt). Farben, Typografie, Abstände und Komponentenstyling stammen daraus. Keine neuen Tokens erfinden.
- Klassifiziere, was das Dashboard überwacht (Verkäufe, Traffic, Nutzung, Vorfälle, Betrieb usw.) aus der Aufgabenbeschreibung. Generiere spezifische, plausible Metriknamen und Werte – keine Platzhalter wie „Metrik A / Metrik B“.
- Gestalte die erforderlichen Bereiche:
- Linke Seitenleiste (220–260px): Markenzeichen oben, 6–8 Navigationslinks mit Icons, aktiver Zustand verwendet den DS-Akzent.
- Obere Leiste: Seitentitel links, Suchfeld + Benutzer-Avatar / -Status rechts.
- Hauptbereich:
- Zeile 1: 3–4 KPI-Karten (Bezeichnung + große Zahl + Veränderung zum Vorzeitraum).
- Zeile 2: ein primäres Diagramm (volle Breite oder 2/3) – als inline-SVG-Linien-/Balken-/Flächendiagramm aus realistischen Zahlen gezeichnet.
- Zeile 3: ein sekundäres Diagramm oder eine Tabelle (letzte Ereignisse, Top-Elemente usw.).
- Schreibe ein in sich geschlossenes HTML-Dokument:
<!doctype html>bis</html>, CSS in einem einzigen inline<style>-Block.- CSS Grid für das Gesamtlayout; Flexbox innerhalb der Karten.
- Semantisches HTML:
<aside>,<header>,<main>,<section>. - Jeden logischen Bereich mit
data-od-id="slug"für den Kommentarmodus markieren.
- Diagramme: nur inline-SVG, keine JS-Bibliotheken. Ein Liniendiagramm besteht aus ~10 Zeilen
<polyline>mit einer dezenten Flächenfüllung. Ein Balkendiagramm besteht aus N<rect>-Elementen mit DS-Akzentfüllung. Achsen leicht beschriften (gedämpfter Text, kleinere Skalierung). - Selbstprüfung:
- Jede Farbe stammt aus DESIGN.md-Tokens.
- Akzent maximal zweimal verwendet (Seitenleiste aktiv + eine Diagramm-Hervorhebung).
- Seitenleiste und obere Leiste sind fix; der Hauptinhalt scrollt unabhängig.
- Dichte entspricht der DS-Stimmung – luftige DS erhalten mehr Abstände, dichte DS (Handel, Krypto) ziehen Zeilen enger.
Ausgabe-Vertrag
Ausgabe zwischen <artifact>-Tags:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
Ein Satz vor dem Artefakt, nichts danach.