ChocAndes: una chocolatería digital creada y probada con IA generativa

Crea un prototipo de aplicación móvil navegable para "ChocAndes", una empresa FICTICIA de chocolates artesanales de Bogotá. Es un proyecto universitario: todo es simulado.

OBJETIVO
Que una persona de 18 a 35 años que busca un regalo de chocolate pueda: ver el catálogo, entender cada producto, elegir uno, revisar un resumen y confirmar un pedido de prueba.

RESTRICCIONES (muy importante)
- Diseño mobile-first (ancho de 390 px), pensado para verse y probarse en celular.
- SIN backend, SIN base de datos, SIN Supabase, SIN login, SIN pagos, SIN envío de correos. Todo el estado vive en memoria en el frontend.
- Interfaz completamente en español.
- No inventes beneficios de salud, certificaciones (orgánico, comercio justo, etc.) ni reseñas de clientes.

MARCA
- Colores: café cacao oscuro (#3B2316), crema (#F5EBDD) y acento dorado (#C9A227).
- Tipografía redondeada y amigable para títulos; tono cercano, cálido y con tuteo.
- Eslogan: "El detalle perfecto, hecho en los Andes."

PRODUCTOS (datos simulados; muestra la etiqueta "Precio simulado" junto a cada precio)
1. Barra Sabana 70% — $18.000 COP. Barra de chocolate oscuro de 100 g, sabor intenso. Ingredientes de ejemplo: cacao, azúcar de caña, manteca de cacao. Ideal para: un detalle sencillo o un amante del chocolate intenso.
2. Bombones Monserrate — $42.000 COP. Caja de 9 bombones rellenos de maracuyá, café y arequipe. Ingredientes de ejemplo: chocolate de leche, pulpa de maracuyá, café, arequipe. Ideal para: cumpleaños o agradecimiento.
3. Caja Regalo Andina — $75.000 COP. Barra Sabana + 6 bombones + tarjeta con mensaje personalizado. Ideal para: aniversario o fecha especial.
Usa un recuadro de imagen de marcador de posición para cada producto (luego pondremos nuestras propias imágenes).

PANTALLAS (5, conectadas entre sí)
1. Bienvenida: logo de texto "ChocAndes", eslogan, una frase de propuesta de valor ("Encuentra el detalle ideal para tu ocasión en tres pasos") y botón "Ver catálogo".
2. Catálogo: las 3 tarjetas de producto con imagen, nombre, precio simulado y la etiqueta "Ideal para". Cada tarjeta lleva a su detalle. Agrega filtros por ocasión (Todos, Cumpleaños, Aniversario, Detalle sencillo); si un filtro no tiene productos, muestra un estado vacío amable con botón "Ver todos".
3. Detalle de producto: imagen, descripción, ingredientes de ejemplo, "Ideal para", precio simulado, botón "Elegir este producto" y botón para volver al catálogo.
4. Selección / pedido de prueba: producto elegido, campo de nombre ficticio, selector de cantidad (1 a 10) y, solo para la Caja Regalo Andina, un campo opcional "Mensaje para la tarjeta" (máx. 100 caracteres). Muestra un resumen con el subtotal simulado. Validación: si el nombre está vacío o la cantidad no es válida, muestra un mensaje de error claro en rojo junto al campo y no permite continuar.
5. Confirmación simulada: resumen final (producto, cantidad, nombre, total simulado) y botón "Volver al catálogo", que reinicia la selección.

AVISOS
- En las pantallas 4 y 5 muestra de forma visible: "Demostración: no envía pedidos ni guarda datos".
- En el pie de la app: "Prototipo académico. Productos y precios simulados."

NAVEGACIÓN
Todas las pantallas deben tener una forma de regresar (flecha atrás o botón). Ningún botón debe ser decorativo: cada botón debe hacer algo.

Resultado: Cinco pantallas funcionando; las pruebas encontraron tres fallas.

Corrige estos 3 problemas sin cambiar el diseño, los colores ni los textos existentes:
1. El mensaje "Escribe un nombre para continuar" debe desaparecer en cuanto la persona escriba algo en el campo de nombre, no solo al confirmar.
2. Agrega un filtro "Corporativo" que no tenga productos, para que se pueda ver el estado vacío con el botón "Ver todos".
3. En el catálogo, la fila de filtros se corta en el celular ("Detal…") y muestra una barra de desplazamiento. Haz que los filtros pasen a una segunda línea si no caben, sin barra visible.

Resultado: Las tres fallas corregidas y verificadas.

Adjunto 3 imágenes de producto. Reemplaza los recuadros de marcador de posición por estas imágenes, sin cambiar el diseño ni los textos:
- "Barra_de_chocolate_con_envoltorio_dorado.png" → Barra Sabana 70%
- "Caja_de_bombones_dorados_con_relleno_de_caramelo.png" → Bombones Monserrate
- "Caja_de_chocolates_con_cinta_dorada.png" → Caja Regalo Andina
Úsalas en el catálogo, en el detalle de producto, en la pantalla de pedido y en la confirmación. Que se recorten bien (object-fit: cover) sin deformarse, y agrega un texto alternativo que describa cada imagen.

Resultado: Imágenes en las cuatro pantallas, verificadas.

Agrega estos elementos sin cambiar el diseño, los colores ni los textos existentes:

1. Logo: junto al texto "ChocAndes" de la pantalla de bienvenida, un ícono pequeño de barra de chocolate (cuadro dorado #C9A227 con cuadritos café #3B2316).

2. Carrito: en la barra superior del catálogo y del detalle, a la derecha, un ícono de carrito redondo. Si ya hay un producto elegido, muestra un círculo dorado con la cantidad y al tocarlo lleva a "Tu pedido de prueba". Si no hay producto elegido, no muestra número y al tocarlo lleva al catálogo.

3. Beneficios: en la bienvenida, debajo de la frase principal, una fila pequeña con: "🎁 Ideal para regalar", "🍫 Chocolate oscuro 70 %" y "📍 Hecho en Bogotá".

4. Enlaces a la página web (https://chipper-moxie-80ac9e.netlify.app, siempre en pestaña nueva):
   - En la bienvenida, debajo de "Ver catálogo", un botón secundario con borde: "Ver la página web".
   - En la confirmación, debajo de "Volver al catálogo", un enlace de texto: "Conoce más en nuestra página web".

5. Pie de página en todas las pantallas: "© 2026 ChocAndes · Marca ficticia del curso Trabajando con la IA generativa, Universidad Central. Precios simulados." y al lado un enlace "Página web" al mismo sitio.

No agregues inicio de sesión, correos, teléfonos, redes sociales ni WhatsApp: es un prototipo académico sin datos de contacto reales.

Resultado: Elementos agregados y publicados; la app quedó enlazada con la web.

Fotografía de producto realista, formato horizontal 4:3. Una barra de chocolate oscuro artesanal de 100 g, rectangular, dividida en 12 cuadros (4 x 3), con uno de los cuadros de una esquina partido y apoyado al lado. La mitad izquierda de la barra está envuelta en papel dorado mate liso, sin ningún texto ni logo. Fondo crema liso (#F5EBDD), superficie plana del mismo color. Luz natural suave desde la izquierda, sombras cortas y suaves, vista en ángulo de 45 grados. Paleta: café cacao oscuro, crema y dorado. Estilo limpio y cálido, como catálogo de chocolatería artesanal. Sin texto, sin letras, sin logos, sin marcas, sin personas, sin manos.

Resultado: Imagen aceptada sin cambios.

Fotografía de producto realista, formato horizontal 4:3. Una caja cuadrada abierta de cartón color café cacao oscuro con 9 bombones de chocolate de leche en una cuadrícula de 3 x 3. Un bombón adicional está partido por la mitad delante de la caja y muestra su relleno amarillo de maracuyá. Detalles dorados finos en el borde de la caja, sin texto. Fondo crema liso (#F5EBDD), superficie plana del mismo color. Luz natural suave desde la izquierda, sombras cortas y suaves, vista en ángulo de 45 grados. Paleta: café cacao oscuro, crema y dorado. Estilo limpio y cálido, como catálogo de chocolatería artesanal. Sin texto, sin letras, sin logos, sin marcas, sin personas, sin manos.

Resultado: El relleno salió de caramelo y no de maracuyá; se aceptó porque el arequipe también es un relleno del producto.

Fotografía de producto realista, formato horizontal 4:3. Una caja de regalo rectangular abierta de cartón color café cacao oscuro, con la tapa apoyada detrás. Dentro: a la izquierda una barra de chocolate oscuro envuelta a medias en papel dorado mate, a la derecha 6 bombones de chocolate en dos filas de tres. Delante de la caja, una tarjeta pequeña color crema completamente en blanco. Una cinta dorada delgada suelta junto a la caja. Fondo crema liso (#F5EBDD), superficie plana del mismo color. Luz natural suave desde la izquierda, sombras cortas y suaves, vista en ángulo de 45 grados. Paleta: café cacao oscuro, crema y dorado. Estilo limpio y cálido, como catálogo de chocolatería artesanal. Sin texto, sin letras, sin logos, sin marcas, sin personas, sin manos.

Resultado: Imagen aceptada sin cambios.

Usa la barra de chocolate de la imagen adjunta como referencia exacta (misma envoltura dorada y mismos cuadros). Formato vertical 9:16. Primer plano de la barra sobre fondo crema liso (#F5EBDD), con un cuadro de la esquina apenas separado del resto. Luz natural cálida desde la izquierda, poca profundidad de campo. Fotografía de producto artesanal, realista. Sin texto, sin letras, sin logos, sin personas.

Resultado: Imagen base del clip 1.

Formato vertical 9:16. Fondo abstracto color café cacao oscuro (#3B2316) con textura suave de chocolate derretido en la parte inferior y finas líneas doradas (#C9A227) en diagonal. El centro de la imagen queda limpio y vacío para poner un logo después. Iluminación cálida y elegante. Sin texto, sin letras, sin logos, sin personas, sin objetos en el centro.

Resultado: Imagen base del clip 2.

Usa la caja de la imagen adjunta como referencia exacta (mismo color café cacao, bordes dorados y cinta dorada). Formato vertical 9:16. La caja está cerrada, con la tapa puesta y la cinta dorada atada en un moño simple encima. Fondo crema liso (#F5EBDD), luz natural cálida desde la izquierda, vista en ángulo de 45 grados. Espacio libre en la parte superior. Fotografía de producto realista. Sin texto, sin letras, sin logos, sin personas.

Resultado: Imagen base del clip 3.

Usa la caja de bombones de la imagen adjunta como referencia exacta (misma caja café con borde dorado y mismos bombones). Formato vertical 9:16. La caja abierta con 9 bombones sobre fondo crema (#F5EBDD), y una mano con las uñas naturales a punto de tomar un bombón del centro. Solo se ve la mano, sin rostro. Luz natural cálida desde la izquierda. Fotografía realista. Sin texto, sin letras, sin logos.

Resultado: Imagen base del clip 4.

Usa los tres productos de las imágenes adjuntas como referencia exacta: la barra con envoltura dorada, la caja de 9 bombones y la caja de regalo con cinta. Formato vertical 9:16. Los tres productos ordenados en la mitad inferior de la imagen, sobre fondo crema liso (#F5EBDD). La mitad superior queda limpia y vacía para el logo y un texto. Luz natural cálida desde la izquierda. Fotografía de producto realista. Sin texto, sin letras, sin logos, sin personas.

Resultado: Imagen base del clip 5.

El cuadro de chocolate se termina de separar de la barra y caen pequeñas migas; la cámara se acerca lentamente. Movimiento suave y elegante. Voz en off de mujer joven, cálida y cercana, en español latinoamericano neutro, que dice exactamente: "¿No sabes qué regalar? Tenemos el detalle perfecto." Sin música, sin texto en pantalla.

Resultado: Grok agregó música y no generó la voz; con el mismo prompt, Flow sí lo cumplió.

El chocolate derretido fluye lentamente en la parte inferior y las líneas doradas brillan suavemente. La cámara permanece casi quieta y el centro sigue vacío. Misma voz en off de mujer joven, cálida, en español latinoamericano neutro, que dice exactamente: "En ChocAndes hacemos chocolate artesanal en Bogotá, pensado para regalar." Sin música, sin texto en pantalla.

Resultado: Clip generado en Flow.

El moño dorado se suelta y la tapa de la caja se levanta despacio, mostrando dentro una barra de chocolate envuelta en dorado, seis bombones y una tarjeta en blanco. Cámara fija. Misma voz en off de mujer joven, cálida, en español latinoamericano neutro, que dice exactamente: "Como la Caja Regalo Andina: barra, seis bombones y tu mensaje." Sin música, sin texto en pantalla.

Resultado: Clip generado en Flow.

La mano toma con cuidado un bombón del centro de la caja y lo levanta despacio hacia la cámara. Movimiento natural y suave. Misma voz en off de mujer joven, cálida, en español latinoamericano neutro, que dice exactamente: "Dinos la ocasión y te ayudamos a elegir en tres pasos." Sin música, sin texto en pantalla.

Resultado: Clip generado en Flow.

Acercamiento lento y suave hacia los tres productos; la mitad superior de la imagen permanece vacía. Misma voz en off de mujer joven, cálida, en español latinoamericano neutro, que dice exactamente: "Explora el catálogo. ChocAndes: el detalle perfecto, hecho en los Andes." Sin música, sin texto en pantalla.

Resultado: Clip generado en Flow.

Usa los tres productos de las imágenes adjuntas como referencia exacta: la barra de chocolate con envoltura dorada, la caja café de 9 bombones y la caja de regalo con cinta dorada. No cambies su forma, colores ni cantidad de bombones.

Crea una imagen destacada para un artículo web, formato horizontal 16:9 (1280 x 720 px).

Composición: a la derecha, los tres productos juntos sobre una superficie crema lisa (#F5EBDD). A la izquierda, un smartphone moderno genérico, sin marca, apoyado en ángulo, mostrando en su pantalla una tienda de chocolates con fondo café oscuro y botones dorados. Detrás del celular, desenfocado, un computador portátil abierto con la misma tienda en pantalla. La escena debe transmitir "del video a la web y al celular": una experiencia digital para regalar chocolate.

Estilo: fotografía de producto realista, luz natural cálida desde la izquierda, sombras suaves, poca profundidad de campo. Paleta: café cacao oscuro (#3B2316), crema (#F5EBDD) y dorado (#C9A227). Espacio limpio en la parte superior.

Sin texto legible, sin letras, sin logos ni marcas reales, sin personas, sin manos.

En el tercio superior izquierdo, escribe exactamente "ChocAndes" en letra redondeada grande, con "Choc" en crema y "Andes" en dorado, y debajo, más pequeño, "El detalle perfecto, hecho en los Andes". No agregues ningún otro texto.

Resultado: Imagen aceptada; la caja salió cerrada con moño y las pantallas son ilustrativas, como se aclara en la leyenda.