Plantilla de UI para una app de presupuestos.
Un diseño de UI completo para una app de presupuestos y control de gastos: ocho pantallas de móvil con un mes de datos financieros realistas, desde el resumen y los presupuestos hasta las estadísticas y las cuentas. Los totales cuadran en todas las pantallas, y cada pantalla es HTML sin más con Tailwind, así que Codex o Claude Code pueden clonarla y convertirla en tu app.
Actualizado el 6 de noviembre de 2026
Mobile app · 8 screens · Free and open source
01Resumen 
02Añadir transacción 
03Transacciones 
04Detalle de la transacción 
05Presupuestos 
06Estadísticas 
07Cuentas 
08Perfil
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 App de presupuestos 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.
- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
Qué incluye la plantilla
| Pantalla | Qué contiene |
|---|---|
| Resumen | El saldo del mes, ingresos y gastos, el progreso de los presupuestos y las transacciones recientes |
| Añadir transacción | Gasto o ingreso, un teclado numérico para el importe, categorías, cuenta, fecha y una nota |
| Transacciones | Búsqueda, filtros y transacciones agrupadas por día con totales diarios |
| Detalle de la transacción | Importe, categoría, cuenta, fecha, nota, un recibo y dividir el gasto con otras personas |
| Presupuestos | Lo que queda por gastar este mes, el presupuesto de cada categoría y una alerta por superar el presupuesto |
| Estadísticas | Gastos por categoría, los últimos seis meses y los comercios donde más gastas |
| Cuentas | Patrimonio neto de las cuentas bancarias, de ahorro, de efectivo, de crédito y de inversión |
| Perfil | Perfil, rachas, moneda, recordatorios, exportación de datos y ajustes |
Los datos de ejemplo son el noviembre de una persona en dólares estadounidenses: $5,500.00 de ingresos, $2,674.38 de gastos, ocho presupuestos que suman $3,020.00 y un patrimonio neto igual a la suma de las cuentas. Los ingresos van en verde con un signo más, los gastos usan el color del texto con un signo menos, y el rojo aparece solo en la categoría que superó el presupuesto.
Cada pantalla es un archivo HTML de 390×844 con estilos de Tailwind CSS v4 y un tokens.css compartido, y los gráficos están dibujados en SVG. Abre cualquier archivo en un navegador; no hay nada que instalar ni compilar.
Úsala con Codex o Claude Code
Copia solo esta plantilla del repositorio ui-templates:
npx degit ummydev/ui-templates/apps/budgeting my-budget-app
Luego pide a tu agente que la haga tuya:
Esta carpeta es una plantilla de UI de una app de presupuestos. Conviértela en [nombre de tu app], para [a quién va dirigida]. Conserva DESIGN.md y tokens.css como sistema de diseño, cambia la moneda a [tu moneda] y las categorías a [tus categorías], y mantén coherente cada total en todas las pantallas. Después crea estas pantallas en [Expo / SwiftUI / tu stack].
Como el sistema de diseño está escrito en DESIGN.md, las pantallas nuevas que añada tu agente, como metas de ahorro o facturas recurrentes, encajarán con las ocho que ya están.
Basada en el sistema de diseño Wallet
La plantilla usa Wallet, un sistema de diseño para apps de finanzas: saldos claros en Manrope con cifras tabulares, un solo verde sereno, esquinas de 18px y áreas táctiles de 48px. Su página tiene una vista previa en vivo, el DESIGN.md completo y un tema de shadcn.
Preguntas frecuentes
¿Esta plantilla de app de presupuestos es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales.
¿Las cifras cuadran de verdad?
Sí. Los saldos, los presupuestos, los porcentajes de los gráficos y el patrimonio neto son coherentes en las ocho pantallas, así que el diseño sigue teniendo sentido cuando cambias una cifra, o lo hace tu agente, y la propagas por todas las pantallas.
¿Tiene un tema oscuro?
Sí. Añade class="dark" a la etiqueta <html> de cualquier pantalla para pasar al tema oscuro de Wallet.