UI-Vorlage für eine Budget-App.
Ein komplettes UI-Design für eine App zur Budgetplanung und Ausgabenverfolgung: acht Smartphone-Screens mit einem Monat realistischer Finanzdaten, von der Übersicht und den Budgets bis zu Statistiken und Konten. Die Summen gehen auf jedem Screen auf, und jeder Screen ist schlichtes HTML mit Tailwind, sodass Codex oder Claude Code die Vorlage klonen und in deine App verwandeln können.
Aktualisiert am 6. November 2026
Mobile app · 8 screens · Free and open source
01Übersicht 
02Buchung hinzufügen 
03Buchungen 
04Buchungsdetails 
05Budgets 
06Statistiken 
07Konten 
08Profil
Clone it
npx degit ummydev/ui-templates/apps/budgeting my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the Budget-App template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
Design system
WalletAppKlare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst.Überschriften in Manrope- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
Was in der Vorlage steckt
| Screen | Was zu sehen ist |
|---|---|
| Übersicht | Kontostand des Monats, Einnahmen und Ausgaben, Budgetfortschritt und die letzten Buchungen |
| Buchung hinzufügen | Ausgabe oder Einnahme, ein Zahlenblock für den Betrag, Kategorien, Konto, Datum und eine Notiz |
| Buchungen | Suche, Filter und nach Tagen gruppierte Buchungen mit Tagessummen |
| Buchungsdetails | Betrag, Kategorie, Konto, Datum, Notiz, ein Beleg und die Rechnung aufteilen |
| Budgets | Was diesen Monat noch übrig ist, das Budget jeder Kategorie und eine Warnung bei Überziehung |
| Statistiken | Ausgaben nach Kategorie, die letzten sechs Monate und die Händler mit den höchsten Ausgaben |
| Konten | Nettovermögen über Bank-, Spar-, Bargeld-, Kredit- und Anlagekonten |
| Profil | Profil, Serien, Währung, Erinnerungen, Datenexport und Einstellungen |
Die Beispieldaten sind der November einer Person in US-Dollar: $5,500.00 Einnahmen, $2,674.38 Ausgaben, acht Budgets mit insgesamt $3,020.00 und ein Nettovermögen, das der Summe der Konten entspricht. Einnahmen sind grün mit Pluszeichen, Ausgaben nutzen die Textfarbe mit Minuszeichen, und Rot erscheint nur bei der Kategorie, die das Budget überschritten hat.
Jeder Screen ist eine HTML-Datei in 390×844, gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css, die Diagramme sind in SVG gezeichnet. Öffne eine beliebige Datei im Browser; es gibt nichts zu installieren oder zu bauen.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/apps/budgeting my-budget-app
Bitte dann deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine UI-Vorlage für eine Budget-App. Mach daraus [Name deiner App], für [deine Zielgruppe]. Behalte DESIGN.md und tokens.css als Designsystem, stelle die Währung auf [deine Währung] und die Kategorien auf [deine Kategorien] um und halte jede Summe über alle Screens hinweg konsistent. Baue danach diese Screens in [Expo / SwiftUI / deinem Stack].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Screens, die dein Agent ergänzt, etwa Sparziele oder wiederkehrende Rechnungen, zu den acht vorhandenen.
Gebaut auf dem Designsystem Wallet
Die Vorlage nutzt Wallet, ein Designsystem für Finanz-Apps: klare Kontostände in Manrope mit Tabellenziffern, ein ruhiges Grün, 18px-Ecken und 48px-Touch-Ziele. Auf der Seite findest du eine Live-Vorschau, die komplette DESIGN.md und ein shadcn-Theme.
Häufige Fragen
Ist diese Budget-App-Vorlage kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte.
Gehen die Zahlen wirklich auf?
Ja. Kontostände, Budgets, Diagrammprozente und das Nettovermögen sind auf allen acht Screens stimmig, sodass das Design weiterhin Sinn ergibt, wenn eine Zahl von dir oder deinem Agenten geändert und überall nachgezogen wird.
Gibt es ein dunkles Theme?
Ja. Füge class="dark" zum <html>-Tag eines Screens hinzu, um auf das dunkle Theme von Wallet zu wechseln.