Budget-Dashboard

Erstelle ein interaktives, eigenständiges HTML-Finanz-Dashboard mit Apple-Swiss-Designästhetik — klare weisse Hintergründe, SF-artige Typografie (Instrument Sans + Newsreader von Google Fonts verwenden), grosszügige Weissräume, weiche Schatten, pillenförmige Buttons und Apple-Systemfarben (#34c759 Grün, #007aff Blau, #ff2d55 Pink, #ff9500 Orange, #af52de Violett).

Was geliefert wird

Eine einzelne HTML-Datei, die die Nutzerin/der Nutzer in jedem Browser öffnen kann. Alles aktualisiert sich in Echtzeit, wenn Regler bewegt werden. Kein Backend, keine Abhängigkeiten ausser Chart.js vom CDN.

Erforderliche Funktionen

1. Obere Statistikkarten (4 nebeneinander) — Einnahmen, Ausgaben, Ersparnisse, Sparquote — jeweils mit Icon, Wert und Untertitel
2. Regler-Panel — Regler für Einnahmen und jede Ausgabenkategorie. Jeder Regler zeigt aktuellen Wert und Bereich. Alle Regler lösen bei Eingabe update() aus.
3. Donut-Chart — Zeigt die Ausgabenaufschlüsselung + Ersparnisse als grösstes Segment. Zentraler Text zeigt Sparquote in %. Verwendet Chart.js Doughnut.
4. Legende — Farblich codierte Liste neben dem Donut mit Kategorienamen, Dollarbeträgen und Prozentsätzen.
5. 12-Monats-Prognosechart — Liniendiagramm (Chart.js) mit 3 Szenario-Umschaltbuttons: «Nur Sparen» (0 % Rendite), «Hochverzinsliches Sparkonto» (4,5 % effektiver Jahreszins), «Investiert» (7 % jährlich). Chartfarbe ändert sich je nach Szenario.
6. Meilensteine — Fortschrittsbalken für: Notgroschen 3 Monate, Notgroschen 6 Monate, 100'000, 250'000. Jeder zeigt die geschätzte Erreichungsdauer in Monaten/Jahren.
7. Vergleichswerte — Wohnen, Essen, Sparen, Wünsche vs. Standardrichtlinien (50/30/20-Regel). Visueller Balken mit Richtwertmarkierung.
8. Einsichten-Box — Dynamischer Text, der sich je nach Sparquote ändert (unterschiedliche Botschaften für <20 %, 20-50 %, 50 %+ und negativ).

Anleitung

Schritt 1: Zahlen erfassen

Frage nach (oder hilf bei der Schätzung von):

Für Privatpersonen:

• Monatliches Gesamteinkommen (nach Steuern)
• Fixkosten (Miete, Nebenkosten, Versicherungen, Abos, Kreditraten)
• Variable Ausgaben (Essen, Benzin, Unterhaltung, Einkäufe)
• Aktuelle Sparquote
• Etwaige Schuldenrückzahlungen
• Finanzielle Ziele

Für Unternehmen:

• Monatlicher Umsatz
• Fixkosten (Miete, Software, Löhne, Versicherungen)
• Variable Kosten (Marketing, Auftragnehmer, Materialien, Reisen)
• Wachstumsinvestitionen
• Prozentsatz für Steuerrücklagen
• Gewinnziele

Schritt 2: Dashboard erstellen

Generiere eine eigenständige HTML-Datei mit sämtlichem CSS inline (in einem <style>-Tag) und sämtlichem JS inline (in einem <script>-Tag). Chart.js vom CDN importieren:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>

Schriften von Google Fonts importieren:

<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600&display=swap" rel="stylesheet">

Schritt 3: Designregeln (Apple Swiss)

• Hintergrund: #f5f5f7 (Apple Hellgrau)
• Karten: #ffffff mit border-radius: 20px, weicher Schatten (0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04))
• Typografie: Instrument Sans für Fliesstext/UI, Newsreader (Serif) für grosse Zahlen und Überschriften
• Farben: Apple-Systemfarben verwenden — Grün #34c759, Blau #007aff, Pink #ff2d55, Orange #ff9500, Violett #af52de, Türkis #5ac8fa
• Regler: Saubere weisse Griffe mit blauem Rand, dünne 4px-Spuren
• Buttons: Pillenförmig (border-radius: 100px), aktiver Zustand füllt sich mit Blau
• Abstände: Grosszügig — 24-28px Kartenpolsterung, 16px Rasterabstände
• Animationen: Dezentes FadeIn beim Laden mit gestaffelten Verzögerungen
• Hover-Zustände: Karten heben sich leicht mit verstärktem Schatten
• Kein Dark Mode — hell und klar halten

Schritt 4: Mit den Zahlen der Nutzerin/des Nutzers befüllen

Setze die Standardwerte der Regler und das State-Objekt entsprechend den tatsächlichen Einnahmen- und Ausgabenzahlen der Nutzerin/des Nutzers. Alle Regler sollten sinnvolle Min/Max-Bereiche haben (z. B. Einkommen 2000-30000, Miete 0-5000).

Schritt 5: Speichern und liefern

Speichern als: financial-dashboard.html

Die Datei sollte vollständig eigenständig sein — das Öffnen in jedem Browser sollte das komplette interaktive Dashboard ohne weitere Abhängigkeiten anzeigen.

Schritt 6: Überprüfen

Nochmals kontrollieren:

• Alle Rechnungen stimmen (Einnahmen − Ausgaben = Ersparnisse)
• Donut-Chart-Prozentsätze ergeben zusammen 100 %
• Prognosechart verwendet korrekte Zinseszinsformeln
• Meilenstein-Zeitschätzungen sind korrekt berechnet
• Alle Regler aktualisieren alles in Echtzeit

Regeln

• Nie konkrete Anlageberatung geben. Budgetvisualisierung ist in Ordnung. «Steck dein Geld in Aktie X» ist es nicht.
• Einen kleinen Fusszeilen-Hinweis einfügen, dass dies ein Planungstool und keine Finanzberatung ist.
• Immer die Rechnung nochmals prüfen. Budgetsummen müssen korrekt aufgehen.
• Falls die Nutzerin/der Nutzer sensible Finanzdetails teilt, sorgfältig damit umgehen und sie nicht im Gedächtnis speichern.
• Auf ganze Beträge runden.

---

Zuletzt aktualisiert: 01.08.2026 · Version 1.0.0 · skills.fragroger.ai

Lizenz: CC BY-NC-ND 4.0 (Namensnennung – nicht kommerziell – keine Bearbeitungen). Nutzung nur für den Eigengebrauch. https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de