Plantilla de UI para una app de meditación.
Un diseño de UI completo para una app de meditación y sueño: ocho pantallas de móvil para una app de ejemplo llamada Stillpoint, desde la recomendación del día y un curso de siete días hasta el reproductor, una guía de respiración, cuentos para dormir y el progreso. La racha, los minutos y el avance del curso coinciden en todas las pantallas, y cada una es HTML con Tailwind, así que Codex o Claude Code pueden clonarla y convertirla en tu app.
Actualizado el 7 de noviembre de 2026
Mobile app · 8 screens · Free and open source
01Hoy 
02Explorar 
03Curso 
04Reproductor 
05Respiración 
06Sueño 
07Progreso 
08Perfil
Clone it
npx degit ummydev/ui-templates/apps/meditation my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the App de meditación 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
CalmAppVerde salvia suave, una serif amable y espacio para respirar.Headings in Newsreader- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
Qué incluye la plantilla
| Pantalla | Qué contiene |
|---|---|
| Hoy | La recomendación de esta noche, la racha, los minutos de la semana y la sesión para continuar |
| Explorar | Sueño, concentración, ansiedad y respiración, cada tema con una fila de sesiones y su duración |
| Curso | Un curso de siete días con su profesor, todas las sesiones y las completadas |
| Reproductor | Un anillo de progreso, el tiempo restante, saltos atrás y adelante y un sonido de fondo |
| Respiración | Una guía de respiración 4-4-6 con rondas, duración y una animación que respeta los ajustes |
| Sueño | Siempre oscura: cuentos para dormir, paisajes sonoros y un temporizador que detiene el audio |
| Progreso | Racha, minutos y sesiones totales, el gráfico de la semana y un registro del estado de ánimo |
| Perfil | Suscripción, recordatorios, descargas, sonido y ajustes |
Los datos de ejemplo son la práctica de una persona un sábado por la noche: una racha de 12 días, 75 minutos esta semana y 1.286 minutos en 142 sesiones en total. El curso Steady Mind tiene siete sesiones que suman 69 minutos; tres están hechas y el día 4 muestra 3:40 restantes de 9:00 en las pantallas Hoy, Curso y Reproductor por igual. El ritmo de respiración es 4 segundos para inhalar, 4 de pausa y 6 para exhalar, así que cinco minutos son 21 rondas, y la animación se detiene cuando el dispositivo pide menos movimiento.
Cada pantalla es un archivo HTML de 390×844 con Tailwind CSS v4 y un tokens.css compartido. Las ilustraciones son formas SVG planas con los colores del sistema, sin degradados ni brillos, y los iconos son de Lucide. Abre cualquier archivo en el 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/meditation my-meditation-app
Después pídele a tu agente que la haga tuya:
Esta carpeta es una plantilla de UI para una app de meditación. Conviértela en [nombre de tu app], para [a quién va dirigida]. Mantén DESIGN.md y tokens.css como sistema de diseño, sustituye los cursos, profesores y sonidos por [tu contenido] y haz que la racha, los minutos y el avance de las sesiones coincidan en todas las pantallas. Después construye 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 un diario o una rutina para dormir, encajarán con las ocho que ya existen.
Basada en el sistema de diseño Calm
La plantilla usa Calm, un sistema de diseño para apps de bienestar: fondo verde salvia suave, verde oscuro para las acciones, Newsreader para los títulos y Figtree para el texto, esquinas de 24px, áreas táctiles de 48px y una barra de pestañas de tres elementos. Su página tiene una vista previa en vivo, el DESIGN.md completo y un tema de shadcn. Calm es solo el nombre del sistema de diseño; la plantilla no tiene relación con ninguna app del mismo nombre.
Preguntas frecuentes
¿Esta plantilla de app de meditación es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales.
¿Tiene tema oscuro?
Sí. Añade class="dark" a la etiqueta <html> de cualquier pantalla para cambiarla al tema oscuro de Calm. La pantalla Sueño siempre es oscura, porque se abre de noche.
¿La animación de respiración respeta la opción de reducir movimiento?
Sí. Está hecha solo con CSS y se detiene cuando el sistema operativo tiene activada la reducción de movimiento; la pantalla sigue mostrando cada fase y su duración en texto.