ChocoGalaxia
Un universo de sabor en cada caja
ChocoGalaxia es una marca de brownies artesanales con temática espacial. Construimos una experiencia digital completa (dos videos, una tienda web y una app móvil conectadas entre sí) para que una persona descubra un producto, entienda en qué se diferencia y prepare un pedido desde el celular. Usamos varias herramientas de IA generativa (para texto y código, imágenes y video y voz) y documentamos cómo comprobamos y corregimos lo que generaron.
El reto
El punto de partida fue un problema simulado que tienen muchos negocios pequeños: el catálogo vive disperso en mensajes, la gente no entiende en qué se diferencian los productos y las consultas sobre regalos se repiten una y otra vez. Los pedidos llegan incompletos.
Nuestro público son personas de 18 a 35 años en Bogotá que buscan un regalo de chocolate o un detalle para una ocasión especial. La experiencia tenía que resolver tres necesidades:
- Explicar la oferta de ChocoGalaxia: qué es cada brownie, qué lleva y cuánto cuesta.
- Ayudar a elegir: cuál conviene según la ocasión, el gusto y las alergias.
- Preparar una solicitud sin perder información: producto, presentación, cantidad y datos de entrega en un solo recorrido.
Creamos tres productos con nombres del universo (Materia Oscura (70 % cacao, poco dulce), Cinturón de Asteroides (relleno de maní y macadamia) y Agujero Negro (centro fundente de avellana)), cada uno en caja de 2 o de 6 unidades, con precios entre $16.000 y $52.000.
La solución: un recorrido conectado
Diseñamos el recorrido antes de generar las piezas: la persona descubre la marca (ChocoGalaxia) en un video, la entiende y elige en la web, y pide desde el celular.
- Video 1 (promoción): Presenta ChocoGalaxia y los tres brownies, e invita a explorar el catálogo.
- Tienda web: portada con el video, catálogo con ingredientes y alérgenos, guía para elegir con 3 preguntas, carrito, registro, inicio de sesión, recuperación de contraseña y confirmación con número de pedido.
- App móvil: prototipo navegable que se instala desde el navegador. Comparte cuenta, carrito y pedidos con la web: lo que pides en un canal aparece en el otro.
- Video 2 (uso): Enseña el recorrido completo de la web a la app.
- Panel de administración: ChocoGalaxia ve los pedidos, cambia su estado y consulta estadísticas por semana, mes, producto, localidad y método de pago.
Cómo usamos la IA: tres decisiones
No tratamos la IA como un catálogo de apps, sino como apoyo para resolver cada necesidad. En cada caso hubo un primer intento, un problema y una mejora.
1. Imágenes de producto (ChatGPT)
Escribimos prompts de fotografía gastronómica muy específicos: medidas reales de cada brownie, ingredientes visibles, superficie de pizarra oscura y fondo de galaxia. Para la carta y el banner de marca pedimos reutilizar exactamente las fotos ya creadas, con los colores de la marca en código hexadecimal y el texto exacto de los precios, para que todo luciera coherente. Pendiente: qué problema tuvo el primer resultado y cómo lo corregimos.
Imagen 1 · Materia oscura
Professional food photography of two artisan dark chocolate brownies on a matte dark slate surface. One brownie whole, one cut in half showing a dense, fudgy, very dark interior. Square brownies, about 7 cm wide and 3.5 cm tall, with a thin crackly top and a light dusting of cocoa powder. No toppings, no nuts, no filling. Background: deep navy and violet tones with soft out-of-focus star-like bokeh lights, subtle galaxy atmosphere. Soft side lighting with warm golden highlights. Three-quarter angle, shallow depth of field. Square format 1:1, high detail, realistic.
Imagen 2 · Cinturón de asteroides
Professional food photography of two artisan chocolate brownies on a matte dark slate surface. One brownie whole, one cut in half showing a layer of creamy peanut butter filling with visible chunks of almond inside the chocolate brownie. The top is covered with thin slices of macadamia nuts. Square brownies, about 7 cm wide and 4 cm tall. Background: deep navy and violet tones with soft out-of-focus star-like bokeh lights, subtle galaxy atmosphere. Soft side lighting with warm golden highlights. Three-quarter angle, shallow depth of field. Square format 1:1, high detail, realistic.
Imagen 3 · Agujero negro
Professional food photography of two round artisan chocolate lava brownies on a matte dark slate surface. One whole, one cut open with a glossy molten hazelnut-chocolate center slowly flowing out. The top is covered with a smooth layer of white chocolate. Round brownies, about 8 cm in diameter and 4 cm tall. Background: deep navy and violet tones with soft out-of-focus star-like bokeh lights, subtle galaxy atmosphere. Soft side lighting with warm golden highlights. Three-quarter angle, shallow depth of field. Square format 1:1, high detail, realistic.
Imagen 4 · Carta de productos
Crea una carta de productos vertical (formato 2:3) para la marca ChocoGalaxia, con el mismo estilo de las imágenes de brownies que creaste antes en esta conversación. Usa esas mismas fotos, sin cambiar la apariencia de ningún brownie.
Prioridad visual: las fotos de los productos deben ser grandes y protagonistas. Muy poco texto.
Estilo: fondo azul noche (#14112B) con estrellas sutiles; precios en dorado (#D9A441); nombres en blanco hueso (#F5EFE6). Diseño limpio, moderno, con mucho espacio libre. Tipografía geométrica sin serifa.
Arriba, centrado: logo simple de un planeta color cacao con anillo dorado, junto a “ChocoGalaxia”. Debajo, pequeño: “Un universo de sabor en cada caja”.
Tres productos, cada uno con su foto grande y solo este texto:
“Materia Oscura”
“x2 $16.000 · x6 $44.000”
“Cinturón de Asteroides”
“x2 $19.000 · x6 $52.000”
“Agujero Negro”
“x2 $18.000 · x6 $49.000”
Al pie, muy pequeño: “Precios simulados con fines académicos.”
No agregues ningún otro texto, descripción, sello ni reseña.
Imagen 5 · Banner de marca
Usando exactamente el mismo estilo fotográfico, iluminación, superficie y fondo de las tres imágenes de brownies que cargue, crea una imagen de presentación para la marca.
Composición: los tres brownies juntos en un arco suave sobre la misma superficie de pizarra oscura, idénticos a como aparecen en sus imágenes individuales:
Materia Oscura: cuadrado, muy oscuro, sin topping ni nueces.
Cinturón de Asteroides: cuadrado, con macadamia fileteada encima.
Agujero Negro: redondo, cubierto de chocolate blanco, con el centro fundente de crema de avellanas y cacao visible.
Fondo: cielo nocturno azul profundo (#14112B) y violeta (#3B2A6B) con estrellas desenfocadas y un planeta con anillo lejano. Luz lateral cálida dorada (#D9A441).
En el tercio izquierdo, sobre el cielo, escribe exactamente este texto:
“ChocoGalaxia” (grande, blanco hueso, tipografía moderna geométrica)
“Un universo de sabor en cada caja” (debajo, más pequeño, en dorado)
Formato horizontal 16:9. Sin manos, sin empaques, sin otros textos ni logos.
2. Web y app
Empezamos en Lovable con un plan por fases, pero los créditos gratuitos se agotaron antes de terminar. Descartamos Google Sites porque no permite cuentas, recuperación de contraseña ni carrito. Construimos la web desde cero con Claude, conectada a una base de datos de prueba (Supabase) y publicada en Netlify.
Al revisar el resultado contra la guía del docente, encontramos que faltaba la sección obligatoria “Guía para elegir” y que los precios no se marcaban como simulados. Los corregimos. Las decisiones de diseño fueron nuestras: carrito abierto para cualquiera, inicio de sesión solo al finalizar, y un panel de administración con estadísticas por localidad de Bogotá y exportación a PDF y Excel.
3. Video de uso (Claude + ElevenLabs + CapCut)
El primer guion solo mostraba la app; queríamos enseñar primero la web y luego la app. Rehicimos el recorrido, esto intentando facilitar el proceso de uso de cómo crear una cuenta, de cómo hacer un pedido o cómo se ve el panel de administrador.
Pruebas y mejoras
No aceptamos nada generado sin probarlo. Hicimos pruebas automáticas en navegador (computador y celular) y pruebas manuales en el sitio publicado. De 12 pruebas, 6 encontraron fallos que corregimos:
| ¿Qué falló? | Cómo lo corregimos |
|---|---|
| Faltaba la sección obligatoria “Guía para elegir”. | Guía de 3 preguntas (ocasión, dulzor, qué evitar) y tabla comparativa |
| El menú móvil se veía transparente sobre el contenido. | Fondo sólido y sombra |
| El aviso de “agregado al carrito” se aplastaba en el celular. | Ancho completo y nueva posición |
| El contador del carrito de la app mostraba “0”. | Se oculta cuando el carrito está vacío. |
| El sitio en Netlify era privado: nadie más podía abrirlo. | Visibilidad cambiada a pública y comprobada en incógnito |
| Precios sin aviso de “simulado” | Etiqueta en catálogo, detalle y checkout |
Responsabilidad y límites
- Todo es simulado: marca (ChocoGalaxia), productos, precios, testimonios y pedidos son ficticios, y así se indica en la web, la app y los videos. No hay pagos ni entregas reales.
- Datos de prueba: Los pedidos se guardan en una base de datos de demostración con reglas de acceso por usuario; no usamos datos personales reales. El panel de administración incluye pedidos de demostración marcados como tales, que no se presentan como ventas.
- Sin afirmaciones inventadas: no mencionamos certificaciones, beneficios de salud ni reseñas reales.
- Licencias: Las tipografías (Fredoka e Inter) tienen licencia libre, las librerías de código son de código abierto, la música del Video 2 es original y la voz proviene de la biblioteca de ElevenLabs. Las imágenes generadas llevan la marca de agua de la herramienta usada, registrada en la bitácora.
Aprendizajes
- Un prompt preciso ahorra iteraciones. Las imágenes salieron coherentes cuando les dimos medidas, ingredientes y colores exactos, sacados de nuestra propia hoja de productos.
- Revisar contra el enunciado es una prueba más. La falla más importante no fue técnica: faltaba una sección obligatoria, y la detectamos al comparar la web con la guía.
- Una herramienta puede fallar por razones ajenas. Lovable se quedó sin créditos y Netlify publicó el sitio como privado. Tener un plan B y verificar en una ventana de incógnito nos ahorró una entrega rota.
- La IA propone; el equipo decide. Cómo funciona el carrito, qué muestra el panel o cuánto dura el video fueron decisiones nuestras, no de la herramienta.
El resultado es un sistema pequeño pero conectado: el pedido que alguien hace en la web aparece en la app y en el panel de administración, y la marca, los nombres y los precios coinciden en todas las piezas.
Créditos:
Autor: Cristian Eduardo Diaz Carvajal
Editor: Mg. Ing. Carlos Iván Pinzón Romero
Código: UCIAG1-8
Universidad : Universidad Central
Referencias
ByteDance. (2026). CapCut (versión web del 8 de noviembre) [Software de edición de video]. https://www.capcut.com
Brandão, M., & Hafontia. (2021). Fredoka [Tipografía]. Google Fonts. https://fonts.google.com/specimen/Fredoka
Anthropic. (2026). Claude (Claude Opus, versión del 8 de noviembre) [Modelo de lenguaje grande]. https://claude.ai
Díaz Carvajal, C. E. (2026a). ChocoGalaxia: Aplicación móvil [Prototipo de aplicación web progresiva]. https://elegant-marshmallow-eea0e5.netlify.app/app/
ElevenLabs. (2026). ElevenLabs Text to Speech (modelo eleven_v4; voz “Daniela – Warm, Professional, Persuasive”) [Software de síntesis de voz]. https://elevenlabs.io
Google. (2026). Gemini (versión del 8 de noviembre) [Modelo de generación de imágenes]. https://gemini.google.com [confirmar si se usó para el banner]
Netlify. (2026, 28 de julio). Start with private project URLs [Registro de cambios]. https://www.netlify.com/changelog/2026-07-28-start-with-private-project-urls/
OpenAI. (2026). ChatGPT (versión del 8 de noviembre) [Modelo de lenguaje grande con generación de imágenes]. https://chatgpt.com
Rasmus Andersson. (2020). Inter [Tipografía]. Google Fonts. https://fonts.google.com/specimen/Inter
Supabase. (2026). Supabase [Plataforma de base de datos y autenticación]. https://supabase.com
Arase, K. (2023). qrcode-generator (Versión 1.4.4) [Software]. https://github.com/kazuhikoarase/qrcode-generator
Chart.js Contributors. (2024). Chart.js (Versión 4.4.4) [Software]. https://www.chartjs.org
Hall, J. (2024). jsPDF (Versión 2.5.2) [Software]. https://github.com/parallax/jsPDF
SheetJS. (2022). SheetJS Community Edition (Versión 0.18.5) [Software]. https://sheetjs.com
Supabase. (2024). supabase-js (Versión 2.45.4) [Software]. https://github.com/supabase/supabase-js
