Plantilla de UI para una app de reparto de comida.
Un diseño de UI completo para una app de pedidos y reparto de comida: ocho pantallas de móvil con restaurantes, platos y precios realistas, desde el feed de inicio hasta el pago y el seguimiento del pedido en directo. 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
01Inicio 
02Restaurante 
03Plato 
04Carrito 
05Pago 
06Seguimiento del pedido 
07Pedidos 
08Cuenta
Clone it
npx degit ummydev/ui-templates/apps/food-ordering my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the App de reparto de comida 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
PantryAppCálido, amable y apetitoso, para apps de comida y pedidos.Headings in Bricolage Grotesque- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
Qué incluye la plantilla
| Pantalla | Qué contiene |
|---|---|
| Inicio | Dirección de entrega, búsqueda, categorías de cocina, una oferta y restaurantes cerca de ti |
| Restaurante | Valoración, tiempo y coste de entrega, pestañas del menú, platos con botón de añadir y una barra de carrito fija |
| Plato | Descripción, tamaño, nivel de picante y extras con precio, cantidad y añadir al carrito |
| Carrito | Productos con selector de cantidad, una nota para el restaurante, un código promocional y el desglose de costes |
| Pago | Dirección, entrega estándar o programada, método de pago, propina para el repartidor y confirmar el pedido |
| Seguimiento del pedido | Un mapa con el repartidor, hora de llegada, pasos del pedido, contacto con el repartidor y resumen del pedido |
| Pedidos | El pedido en curso y los pedidos anteriores que puedes repetir |
| Cuenta | Perfil, totales, una oferta por invitar a amigos, direcciones, métodos de pago y ajustes |
Cada pantalla es un archivo HTML de 390×844 con estilos de Tailwind CSS v4 y un tokens.css compartido. Los platos son 12 ilustraciones SVG planas incluidas en la plantilla, así que no hay imágenes externas. 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/food-ordering my-food-app
Luego pide a tu agente que la haga tuya:
Esta carpeta es una plantilla de UI de una app de reparto de comida. Conviértela en [nombre de tu app], para [tus restaurantes o tu mercado]. Conserva DESIGN.md y tokens.css como sistema de diseño, sustituye los restaurantes, platos y precios de ejemplo por [tu menú] y sustituye las ilustraciones por tus propias fotos. 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 un buscador de restaurantes o una página de fidelidad, encajarán con las ocho que ya están.
Basada en el sistema de diseño Pantry
La plantilla usa Pantry, un sistema de diseño para apps de comida y pedidos: un fondo crema, rojo tomate para pedir, verde hierba para la entrega y el éxito, grandes tarjetas de comida redondeadas, botones en forma de píldora 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 reparto de comida es gratis?
Sí. Es de código abierto con licencia MIT, para proyectos personales y comerciales, ilustraciones de platos incluidas.
¿Puedo usarla en Figma?
La plantilla es HTML, no un archivo de Figma, y eso es lo que permite a un agente de IA leerla y modificarla directamente. Sus capturas sirven como referencia, y los colores y las fuentes de DESIGN.md se pueden configurar como estilos de Figma.
¿Tiene un tema oscuro?
Sí. Añade class="dark" a la etiqueta <html> de cualquier pantalla para pasar al tema oscuro de Pantry.