Plantilla de UI para una app de running.
Un diseño de UI completo para una app de running y seguimiento fitness: ocho pantallas de móvil con datos realistas, desde el objetivo semanal hasta la carrera en directo y el plan de entrenamiento. 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
01Hoy 
02Iniciar carrera 
03En carrera 
04Resumen de la carrera 
05Historial 
06Detalle de la carrera 
07Plan 
08Perfil
Clone it
npx degit ummydev/ui-templates/apps/running my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the App de running 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
StrideAppGrandes números condensados y un naranja enérgico para apps de movimiento.Headings in Barlow Condensed- Built with
- HTML · Tailwind CSS v4 · Lucide icons
Qué incluye la plantilla
| Pantalla | Qué contiene |
|---|---|
| Hoy | Anillo de distancia semanal, un botón de inicio, la última carrera y el entrenamiento previsto para hoy |
| Iniciar carrera | Estado del GPS, tipo de objetivo (carrera libre, distancia, tiempo o ritmo) y avisos de audio |
| En carrera | Distancia, ritmo, tiempo y frecuencia cardíaca en directo, con pausa y stop al alcance del pulgar |
| Resumen de la carrera | El recorrido, una marca personal, estadísticas clave, parciales por kilómetro y compartir |
| Historial | Un gráfico de distancia semanal y una lista de carreras recientes |
| Detalle de la carrera | Un gráfico de ritmo, zonas de frecuencia cardíaca, el tiempo y las zapatillas |
| Plan | Progreso del plan de media maratón y los entrenamientos de esta semana |
| Perfil | Totales, marcas personales, logros y ajustes |
Cada pantalla es un archivo HTML de 390×844 con estilos de Tailwind CSS v4 y un tokens.css compartido. Abre cualquier archivo en un navegador; no hay nada que instalar ni compilar. Las pantallas son oscuras por defecto, con un tema claro incluido.
Úsala con Codex o Claude Code
Copia solo esta plantilla del repositorio ui-templates:
npx degit ummydev/ui-templates/apps/running my-running-app
Luego pide a tu agente que la haga tuya:
Esta carpeta es una plantilla de UI de una app de running. Conviértela en [nombre de tu app], una app para [lo que hace tu app]. Conserva DESIGN.md y tokens.css como sistema de diseño, sustituye los datos de ejemplo por [tus datos] y renombra las pestañas para que encajen con la app. 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 encajarán con las ocho que ya están.
Basada en el sistema de diseño Stride
La plantilla usa Stride, un sistema de diseño para apps de movimiento: grandes números condensados con cifras tabulares, un único naranja enérgico para las acciones y el progreso, esquinas de 16px, áreas táctiles de 48px y una barra de pestañas inferior. 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 running es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales.
¿Con qué stack está hecha?
Con HTML y Tailwind CSS v4, así que cualquier agente de IA puede leerla y modificarla. Cuando estés listo, pide a tu agente que rehaga las pantallas en React Native, Expo, SwiftUI, Flutter o tu framework web.
¿Puedo usar un tema claro?
Sí. Quita class="dark" de la etiqueta <html> de cualquier pantalla para pasar al tema claro de Stride.