ChocAndes: de una idea a una experiencia digital mediante inteligencia artificial generativa
Categoría: Inteligencia Artificial · Proyectos | Autores: Erika Tatiana Martínez Barón y Julián Mateo Vásquez Riaño | Fecha: 11/11/2026
ChocAndes es una marca ficticia de chocolates artesanales de Bogotá, Colombia, creada por un grupo de estudiantes como parte de un proyecto académico enfocado en el uso de la inteligencia artificial generativa. La idea principal fue desarrollar una propuesta de negocio que permitiera explorar cómo diferentes herramientas de IA pueden apoyar la creación de una marca, desde su identidad visual y la presentación de sus productos hasta el desarrollo de plataformas digitales para acercarse a posibles clientes.
Para llevar a cabo este proyecto, se utilizaron herramientas como ChatGPT, Claude, Google AI Studio y Google Vids, cada una con una función específica dentro del proceso. Con su apoyo, se desarrollaron una página web, una aplicación móvil y dos videos que permiten presentar la marca, conocer sus productos y simular la experiencia de realizar un pedido. Durante el desarrollo también fue necesario revisar los resultados, identificar errores y realizar diferentes ajustes para mejorar tanto el diseño como el funcionamiento de las plataformas.
A lo largo de este artículo se explica cómo surgió ChocAndes, qué herramientas de inteligencia artificial se utilizaron, cómo se desarrolló cada uno de los componentes del proyecto y cuáles fueron los principales retos y aprendizajes. Más allá de mostrar los resultados finales, se busca dar a conocer cómo la inteligencia artificial puede convertirse en una herramienta de apoyo para transformar una idea de negocio en una experiencia digital, siempre acompañada de la creatividad, las decisiones y la supervisión humana.
Eslogan: “ChocAndes, pequeños detalles, grandes momentos”
Ficha del proyecto
1. El problema de negocio
| Dato | Detalle |
| Empresa | ChocAndes, chocolates artesanales de Bogotá (ficticia) |
| Público simulado | Personas de 18 a 35 años que buscan un regalo de chocolate o un detalle para una ocasión especial |
| Piezas | Página web, prototipo móvil de 6 pantallas, 2 videos |
| IA usada | Claude (prompts), ChatGPT Pro (guion, storyboard y revisión de errores), Google AI Studio (app móvil y página web) y Google Vids (videos) |
| Estado | Prototipo académico con datos simulados |
| Aviso fijo | “Demostración: no envía pedidos ni guarda datos” |
Aunque ChocAndes es una empresa ficticia, el proyecto parte de una situación que puede presentarse en muchos emprendimientos: la dificultad de dar a conocer sus productos, organizar la información y ofrecer a los clientes una experiencia sencilla al momento de elegir y realizar un pedido. En este caso, se planteó que la marca necesitaba contar con diferentes canales digitales que permitieran presentar sus chocolates artesanales, explicar las características de cada producto y facilitar la elección de un regalo según las preferencias y el presupuesto de cada persona.
Para responder a esta necesidad, se propuso desarrollar una página web, una aplicación móvil y dos videos que estuvieran relacionados entre sí. La página web permitiría conocer la marca, explorar su catálogo y recibir recomendaciones mediante una guía interactiva. Por su parte, la aplicación móvil ofrecería una experiencia más directa, donde los usuarios podrían consultar los productos, seleccionar cantidades, elegir opciones de empaque y realizar una solicitud de pedido simulada. Los videos complementarían estas herramientas, uno promocionando la marca y sus productos, y otro mostrando el funcionamiento de la aplicación.
El principal reto del proyecto consistió en lograr que todas estas herramientas mantuvieran una misma identidad visual, presentaran información coherente y fueran fáciles de utilizar. Además, se buscó comprobar hasta qué punto la inteligencia artificial generativa podía facilitar su desarrollo, identificando tanto sus ventajas como las dificultades que surgieron durante el proceso. Por esta razón, fue necesario revisar los resultados, corregir errores de diseño y navegación, y verificar que las funciones principales respondieran a lo que se había planteado inicialmente.
De esta manera, ChocAndes se convirtió en un ejercicio práctico para comprender cómo diferentes herramientas de inteligencia artificial pueden trabajar de forma complementaria en la creación de una propuesta de negocio digital, sin necesidad de desarrollar una empresa real ni implementar sistemas de pago o almacenamiento de información personal.
2. El catálogo de prueba (datos simulados)
| Producto | Descripción | Precio simulado |
| Caja Sierra Nevada | Bombones de chocolate oscuro 70% con relleno de café | $38.000 COP |
| Barra Páramo | Barra de chocolate con leche con sal marina | $18.000 COP |
| Trufas Andinas | Trufas rellenas de arequipe | $28.000 COP |
Para el desarrollo de ChocAndes se creó un catálogo de prueba compuesto por tres productos de chocolate artesanal, cada uno con características, sabores y precios diferentes. La intención fue ofrecer distintas alternativas para las personas que buscan un regalo, un detalle para una ocasión especial o simplemente disfrutar de un chocolate. Aunque los productos y sus precios son simulados, se buscó que la propuesta fuera coherente con lo que podría ofrecer una chocolatería artesanal en Bogotá.
El primer producto es la Caja Sierra Nevada, una presentación de bombones elaborados con chocolate oscuro al 70 % de cacao y rellenos de café colombiano, con un precio simulado de $38.000 COP. El segundo es la Barra Páramo, que combina chocolate con leche y delicados cristales de sal marina, con un precio de $18.000 COP. Finalmente, se encuentran las Trufas Andinas, elaboradas con una cobertura suave de chocolate, espolvoreadas con cacao y rellenas de arequipe tradicional, con un precio de $28.000 COP. Estos tres productos permiten ofrecer diferentes opciones según los gustos y el presupuesto de cada persona.
Además de definir los productos, se trabajó en la identidad visual de ChocAndes para que la marca transmitiera una imagen cercana, cálida, juvenil y elegante. Para ello, se utilizaron principalmente tonos marrones inspirados en el cacao, colores crema y detalles dorados, buscando relacionar la presentación de los chocolates con una experiencia de regalo especial. Esta identidad se mantuvo en el logotipo, las imágenes de los productos, la página web, la aplicación móvil y los videos desarrollados.
Uno de los aspectos importantes fue mantener la misma información en las diferentes plataformas. Por esta razón, se establecieron nombres, descripciones y precios para cada producto, de manera que los usuarios pudieran reconocerlos fácilmente al pasar de la página web a la aplicación móvil. Asimismo, el catálogo sirvió como base para desarrollar la guía interactiva de recomendaciones, que permite sugerir un chocolate según la ocasión, el presupuesto y las preferencias de sabor.
De esta forma, el catálogo no se limitó a presentar tres productos, sino que se convirtió en un elemento central del proyecto, ya que permitió conectar la identidad de ChocAndes con las funciones de las plataformas digitales y ofrecer una experiencia de navegación y selección de productos más organizada.
3. El mapa del recorrido
Para el proyecto ChocAndes se diseñó un recorrido que permite conectar el video promocional, la página web y la aplicación móvil, con el objetivo de ofrecer una experiencia sencilla y organizada. La idea es que una persona pueda conocer la marca, explorar sus productos, recibir recomendaciones y realizar un pedido simulado.
El recorrido comienza con el video promocional, donde se presenta ChocAndes y se invita a los espectadores a explorar su catálogo. A partir de ahí, los usuarios pueden ingresar a la página web para conocer la propuesta de la marca, consultar las características de los tres chocolates y utilizar una guía interactiva que recomienda un producto según la ocasión, el presupuesto y las preferencias de sabor. Después, pueden seleccionar el chocolate, indicar la cantidad y completar un formulario que muestra el resumen y la confirmación del pedido simulado.
Por otra parte, la aplicación móvil ofrece una experiencia similar, pero adaptada al celular. Desde la pantalla de inicio, el usuario puede acceder al catálogo, utilizar la guía “¿Cuál elijo?”, consultar los detalles de cada producto y personalizar su pedido seleccionando la cantidad y el tipo de empaque. Finalmente, puede revisar el valor total, completar los datos obligatorios y obtener una confirmación ficticia, con la posibilidad de regresar al catálogo.
Este recorrido permitió relacionar los diferentes componentes del proyecto y mantener una experiencia coherente entre las plataformas. Además, se elaboró un video tutorial que muestra paso a paso cómo utilizar la aplicación, facilitando la comprensión de sus funciones y del proceso de pedido simulado.
Mapa del recorrido de ChocAndes: ruta web, ruta del prototipo móvil y Video 2. En la ruta móvil, la guía “¿Cuál elijo?” se abre desde el catálogo o el inicio y recomienda un producto.
4. Qué se construyó
Página web
Para el desarrollo de ChocAndes se creó una página web que funciona como el principal espacio de presentación de la marca y sus productos. Su objetivo es permitir que los visitantes conozcan la propuesta de la chocolatería, exploren las diferentes opciones disponibles y puedan realizar una solicitud de pedido simulada de manera sencilla. La página fue desarrollada con ayuda de Google AI Studio, utilizando HTML, CSS y JavaScript, y se diseñó para funcionar tanto en computadores como en dispositivos móviles, adaptando su contenido al tamaño de cada pantalla.
La página está organizada en cuatro secciones principales: inicio, catálogo, guía para elegir y solicitud de prueba. En la primera se presenta la identidad de ChocAndes, acompañada de una descripción de la marca y una imagen de sus productos. En el catálogo se encuentran las tres opciones disponibles: Caja Sierra Nevada, Barra Páramo y Trufas Andinas. Cada producto cuenta con su fotografía, descripción, precio y una opción para consultar información más detallada. Además, se incorporaron botones que permiten pasar directamente de la información del producto al formulario de solicitud, facilitando la navegación.
Una de las funciones más interesantes de la página es la guía interactiva para elegir un chocolate. Esta herramienta surgió con la intención de ayudar a las personas que no saben qué producto regalar. Para utilizarla, el visitante responde tres preguntas relacionadas con la ocasión del regalo, el presupuesto disponible y las preferencias de sabor de la persona que lo recibirá. A partir de estas respuestas, el sistema recomienda uno de los productos del catálogo y permite consultar sus características. De esta manera, la página no se limita a mostrar chocolates, sino que también ofrece una orientación para tomar una decisión.
Por otra parte, se desarrolló un formulario de solicitud de prueba que permite simular el proceso de realizar un pedido. En este apartado, el usuario debe ingresar un nombre ficticio, seleccionar el producto y elegir una cantidad entre 1 y 10 unidades. El sistema verifica que los campos obligatorios estén completos y que los valores ingresados sean válidos. Cuando la información es correcta, se genera un resumen con el producto seleccionado, la cantidad, el valor total y un número de pedido ficticio, sin necesidad de recargar la página. Es importante aclarar que esta función es únicamente demostrativa, por lo que no se realizan compras reales ni se almacenan datos personales.
Durante la elaboración de la página también se realizaron diferentes ajustes con ayuda de ChatGPT, principalmente para mejorar la presentación de los productos, la organización de las secciones y la navegación. Uno de los cambios fue reemplazar la imagen principal, que inicialmente mostraba únicamente la Caja Sierra Nevada, por una fotografía donde aparecen los tres productos de ChocAndes. También se trabajó en mantener una identidad visual uniforme, utilizando tonos marrones, crema y dorados, además de revisar que los botones y las funciones de selección estuvieran conectados correctamente.
Finalmente, la página web permitió integrar en un mismo espacio la presentación de la empresa, el catálogo y una experiencia de compra simulada. Su desarrollo también sirvió para comprender que, aunque la inteligencia artificial puede facilitar la creación de una plataforma digital, es necesario revisar sus resultados, realizar pruebas y dar instrucciones claras para conseguir que el diseño y las funcionalidades respondan a lo que se busca desarrollar.
Pantalla de inicio de la web ChocAndes
Prototipo móvil
Pantalla de inicio de la app ChocAndes
Como parte del proyecto ChocAndes, se desarrolló un prototipo de aplicación móvil utilizando Google AI Studio, con el objetivo de ofrecer una experiencia sencilla e interactiva para conocer los productos y realizar pedidos simulados. La aplicación cuenta con seis pantallas conectadas entre sí y mantiene la identidad visual de la marca mediante colores marrones, crema y dorados.
Al ingresar, el usuario encuentra una presentación de ChocAndes, su eslogan y una breve descripción de los chocolates artesanales. También se destacan algunas características de la marca y se incluye el botón “Explorar catálogo”, que permite acceder directamente a los productos disponibles. En la parte inferior se encuentra un menú de navegación que facilita el acceso a las diferentes funciones de la aplicació
Catálogo de productos
En el catálogo se presentan los tres productos de ChocAndes: Caja Sierra Nevada, Barra Páramo y Trufas Andinas. Cada uno cuenta con una fotografía, una descripción de sus características, su precio simulado y opciones para consultar más información o seleccionarlo.
Además, se incorporaron filtros por ocasión, como regalos para pareja o agradecimientos, que permiten organizar los productos según el motivo de compra. Esta función facilita la búsqueda y ayuda a que los usuarios encuentren una alternativa que se ajuste a sus necesidades. Desde esta pantalla también se puede acceder a la guía de recomendaciones para quienes todavía no saben qué chocolate elegir.
Catálogo de la app con filtro por ocasión y la tarjeta de la Caja Sierra Nevada a $38.000
Guía interactiva de recomendaciones
Una de las funciones más interesantes de la aplicación es la guía “¿Cuál elijo?”, creada para orientar a las personas que tienen dudas sobre qué chocolate regalar. Esta herramienta funciona mediante un cuestionario de tres preguntas relacionadas con la ocasión del regalo, el presupuesto disponible y las preferencias de sabor.
En la primera pregunta, por ejemplo, el usuario puede seleccionar si busca un detalle para su pareja, un agradecimiento o un regalo de cumpleaños. A partir de las respuestas, la aplicación recomienda uno de los productos del catálogo, mostrando sus características y precio. De esta manera, se ofrece una experiencia más personalizada y se facilita la elección del chocolate.
Guía ¿Cuál elijo? en la pregunta 1 de 3
Detalle del producto y personalización
Cuando el usuario selecciona un producto, puede acceder a una pantalla donde encuentra su descripción, precio unitario y las opciones disponibles para personalizar el pedido. También se incluye un selector que permite aumentar o disminuir la cantidad de unidades que desea solicitar.
Una de las características que se incorporaron fue la posibilidad de elegir entre dos tipos de presentación. La primera es el Empaque Artesanal Estándar, incluido en el precio del producto. La segunda es la Presentación Regalo Premium, que tiene un costo adicional simulado de $4.000 COP por unidad e incluye una presentación más elaborada y una tarjeta para dedicatoria.
Esta función se diseñó pensando en las personas que buscan un detalle para una ocasión especial, permitiéndoles adaptar la presentación del chocolate según sus preferencias.
Detalle de la Caja Sierra Nevada con selector de cantidad y opciones de presentación
Seleccl pedidoión y resumen del pedido
Después de seleccionar el producto, la cantidad y el tipo de presentación, el usuario puede ingresar a la sección “Mi pedido”. Allí debe escribir el nombre de quien realiza la solicitud y, si lo desea, agregar una dedicatoria personalizada de hasta 120 caracteres.
La aplicación calcula automáticamente el valor total teniendo en cuenta el precio del producto, la cantidad seleccionada y el costo adicional del empaque. Por ejemplo, al seleccionar cuatro unidades de la Caja Sierra Nevada con Presentación Regalo Premium, el sistema calcula $152.000 COP por los chocolates y $16.000 COP por los empaques, para un total simulado de $168.000 COP.
Antes de continuar, el usuario puede revisar toda la información y verificar que su selección sea correcta.
Pantalla Mi pedido con nombre, dedicatoria y resumen del pedido simulado por $168.000
Validación de datos y mensajes de error
Para mejorar el funcionamiento de la aplicación, se incorporaron validaciones que permiten identificar cuando falta información necesaria para completar una solicitud. Una de ellas se presenta cuando el usuario intenta confirmar el pedido sin haber ingresado su nombre.
En este caso, el sistema resalta el campo en rojo y muestra un mensaje indicando que debe escribir un nombre real o ficticio para personalizar el pedido. Hasta que no se complete este campo, la aplicación no permite continuar con la confirmación.
Esta función es importante porque demuestra que el prototipo responde a las acciones del usuario y ayuda a evitar solicitudes incompletas, ofreciendo indicaciones claras para corregir los errores.
Pantalla Mi pedido con el aviso de error por nombre vacío, la dedicatoria y el resumen del pedido simulado por $64.000
Confirmación del pedido simulado
Finalmente, cuando el usuario completa correctamente la información y confirma su solicitud, la aplicación muestra una pantalla con el mensaje “¡Pedido Simulado con Éxito!”.
En esta sección se genera un comprobante ficticio que incluye un código de pedido, una fecha simulada, el producto seleccionado, la cantidad, el tipo de presentación, la dedicatoria y el valor total. También se muestra un aviso aclarando que no se realizó ninguna compra real ni se efectuó un cobro, ya que todo el proceso corresponde a una demostración académica.
Para terminar, se incluye el botón “Volver al catálogo”, que permite regresar a los productos y comenzar una nueva selección. Con esta pantalla se completa el recorrido de la aplicación, desde la exploración inicial hasta la confirmación de un pedido simulado.
Confirmación del pedido simulado de dos Trufas Andinas con Presentación Regalo Premium por $64.000
Video 1: promoción
Como parte del proyecto, se desarrolló un video promocional con el objetivo de presentar ChocAndes de una manera atractiva y dar a conocer los productos que ofrece la marca. Para su elaboración se utilizó Google Vids, una herramienta que permitió organizar las imágenes, los textos y las diferentes escenas a partir de un guion previamente elaborado con ayuda de ChatGPT.
El proceso comenzó con la creación y selección de los recursos visuales que se utilizarían en el video, principalmente el logotipo de ChocAndes y las imágenes de sus tres productos: Caja Sierra Nevada, Barra Páramo y Trufas Andinas. Posteriormente, estos elementos se cargaron en Google Vids, donde se organizaron las escenas siguiendo las indicaciones del guion, que establecía qué debía aparecer en cada momento, los textos que acompañarían las imágenes y el orden de presentación.
El video inicia mostrando una caja de regalo acompañada de la frase “Un detalle especial”, buscando transmitir la idea de que los chocolates pueden convertirse en un regalo para diferentes ocasiones. Después, se presenta la identidad de ChocAndes y sus productos, destacando especialmente la Caja Sierra Nevada, elaborada con chocolate oscuro al 70 % y relleno de café colombiano, con un precio simulado de $38.000 COP.
Para finalizar, aparece el eslogan “ChocAndes, pequeños detalles, grandes momentos”, acompañado del llamado “Explora el catálogo”, con el propósito de invitar a los espectadores a conocer los productos a través de la página web y la aplicación móvil. También se incluye el aviso “Demostración: datos simulados”, aclarando que se trata de una propuesta desarrollada únicamente con fines académicos.
El resultado fue un video de aproximadamente 35 segundos, en formato horizontal 16:9 y resolución de 1920 × 1080 píxeles. Su elaboración permitió complementar las plataformas digitales con una pieza audiovisual que mantiene la identidad visual de la marca mediante colores cálidos, tonos marrones y detalles dorados.
Esta parte del proyecto permitió comprender cómo las herramientas de inteligencia artificial pueden facilitar la producción de contenido publicitario, desde la planificación de un guion hasta la organización de los elementos visuales. Sin embargo, también fue necesario revisar las escenas y realizar ajustes para conseguir que el mensaje fuera claro y que el video mantuviera una presentación coherente con el resto de ChocAndes.
Video promocional ChocAndes
Video 2: uso
Como parte del proyecto ChocAndes, también se realizó un video tutorial con el propósito de mostrar de manera práctica el funcionamiento de la aplicación móvil y las diferentes opciones que ofrece a los usuarios. A diferencia del video promocional, que se enfocó en presentar la marca y sus productos, este segundo video busca explicar cómo una persona puede navegar por la aplicación, conocer los chocolates disponibles, recibir recomendaciones y realizar un pedido simulado.
Para su elaboración, se realizó una grabación de pantalla del prototipo móvil en formato vertical, con una duración de 1 minuto y 15 segundos. Previamente, se organizó un guion con ayuda de ChatGPT, en el que se estableció el recorrido que debía mostrarse y los aspectos más importantes que se explicarían durante la demostración. Esto permitió presentar las funciones de la aplicación de manera ordenada, siguiendo los pasos que realizaría un usuario al utilizarla por primera vez.
El video comienza mostrando la pantalla de inicio de ChocAndes, donde se encuentra el nombre de la marca, su eslogan y una breve descripción de la propuesta de chocolates artesanales. También se presentan algunas características de los productos y el botón que permite ingresar al catálogo. Desde este apartado, el usuario puede comenzar a explorar las diferentes opciones disponibles.
Posteriormente, se muestra el catálogo, donde aparecen los tres productos de la marca: Caja Sierra Nevada, Barra Páramo y Trufas Andinas. Cada uno cuenta con su respectiva imagen, descripción y precio simulado. Además, se presenta la guía interactiva “¿Cuál elijo?”, una herramienta que mediante tres preguntas relacionadas con la ocasión del regalo, el presupuesto y las preferencias de sabor permite recomendar un chocolate. Durante la demostración, el cuestionario recomienda las Trufas Andinas, mostrando cómo esta función puede facilitar la elección de un regalo.
Después de recibir la recomendación, el video continúa con la selección del producto. En esta parte se muestra cómo consultar sus características, revisar el precio y elegir la cantidad deseada. También se explican las dos opciones de presentación disponibles: el Empaque Artesanal Estándar, incluido en el precio, y la Presentación Regalo Premium, que tiene un costo adicional simulado de $4.000 COP por unidad. Esta última opción permite complementar el regalo con una presentación más elaborada y una dedicatoria personalizada.
A continuación, se presenta la sección “Mi pedido”, donde el usuario puede revisar los productos seleccionados, la cantidad, el tipo de empaque y el valor total calculado automáticamente. También se muestra una de las validaciones incorporadas en la aplicación: cuando se intenta confirmar el pedido sin ingresar el nombre de quien realiza la solicitud, el sistema genera un mensaje de error y solicita completar el campo obligatorio antes de continuar.
Finalmente, el tutorial permite comprender cómo las diferentes pantallas están conectadas para ofrecer una experiencia de navegación sencilla y organizada. La aplicación también cuenta con una opción de sonido que acompaña algunas interacciones del usuario, haciendo que la experiencia sea más dinámica.
La realización de este video fue importante porque permitió mostrar el funcionamiento del prototipo más allá de las imágenes y capturas de pantalla. Además, sirvió para evidenciar cómo las herramientas de inteligencia artificial contribuyeron al desarrollo de una aplicación que integra información de productos, recomendaciones personalizadas y pedidos simulados, manteniendo una misma identidad visual con la página web de ChocAndes.
Video explicativo ChocAndes
5. Cómo se usó la IA: bitácora de tres decisiones
Durante el desarrollo de ChocAndes utilizamos cuatro herramientas de inteligencia artificial, cada una con una función diferente. Claude nos ayudó a elaborar los prompts iniciales, ChatGPT se utilizó para crear imágenes, desarrollar guiones y proponer correcciones, Google AI Studio permitió construir la página web y la aplicación móvil, mientras que Google Vids se empleó para elaborar el video promocional.
Aunque estas herramientas facilitaron gran parte del trabajo, fue necesario revisar los resultados y realizar ajustes para conseguir que los diferentes componentes mantuvieran una misma identidad visual y funcionaran correctamente.
En el siguiente video mostramos cómo utilizamos cada una de estas herramientas durante el proceso de creación de ChocAndes, desde la elaboración de los prompts hasta el desarrollo de la página web, la aplicación móvil y el video promocional.
| Herramienta | Para qué se usó | Registro |
| Claude | Redacción de los prompts del proyecto | Decisión 1 |
| Google AI Studio | Construcción del prototipo móvil y de la página web | Decisión 2 |
| ChatGPT Pro | Guion y storyboard del video, revisión de errores y prompts de revisión | Decisión 3 y sección 6 |
| Google Vids | Generación de las imágenes y clips del video | Decisión 3 |
Video explicativo de IA utilizada, como funciona google AI studio y Google Vids
Decisión 1: texto y decisiones
| Campo | Registro |
| Necesidad | Redactar los prompts de la web, la app y los videos |
| Herramienta | Claude |
| Prompt inicial | “Mira, tengo que hacer este trabajo en la materia de IA generativa, necesito hacer esa función en una IA, yo escogí Google AI Studio, así que necesito que me ayudes a darme un prompt para ponerlo en esa IA para que comience a diseñar la aplicación. Prompt completo.” |
| Resultado | Cuatro prompts estructurados (app, web, guion del Video 1 y guion del Video 2), reunidos en el Anexo (Prompts 1 a 4). |
| Problema detectado | El prompt inicial era un mensaje general, sin catálogo, sin público y sin reglas, por lo que hubo que reescribirlo con rol, productos, pantallas y límites. Aun con esa versión estructurada, al probar los resultados aparecieron problemas que el prompt había dejado abiertos. No fijaba un eslogan, y salieron tres versiones distintas: una en la app, otra en el titular de la web y otra en el video. Prohibía inventar certificaciones y beneficios de salud, pero no datos de origen, así que la IA añadió frases como “100% Cacao Origen Colombia” y “café de altura colombiano”. Pedía una barra inferior con tres opciones, pero la app salió con una cuarta pestaña, Sonido. Y aunque exigía imágenes con licencia verificada, no prohibía fotos con marcas ajenas, de modo que la portada de la app muestra cajas de otra marca. |
| Prompt mejorado | Se agregó al final de los Prompts 1 y 2, antes de la entrega, el siguiente bloque. Es una propuesta que deben ejecutar y documentar: Reglas de coherencia obligatorias: usa un único eslogan exacto, y no crees otros eslóganes ni titulares de marca. Usa únicamente las descripciones de producto de este prompt y no agregues origen, altitud, porcentajes de cacao total ni certificaciones que no aparezcan aquí. La barra inferior tiene exactamente tres opciones: Inicio, Catálogo y Mi pedido, sin otras. Las imágenes deben ser ilustraciones genéricas o generadas, sin logotipos de otras marcas ni personas reales. |
| Resultado elegido | Se conservaron los Prompts 1 a 4 del Anexo como base de trabajo y se incorporó el bloque de coherencia para las correcciones. |
| Cambio humano final | Se definió “ChocAndes, pequeños detalles, grandes momentos” como eslogan único y lo actualizó en la aplicación, donde ya aparece en el Video 2. |
Decisión 2: diseño y construcción
| Campo | Registro |
| Necesidad | Construir el prototipo móvil navegable de seis pantallas y la web funcional |
| Herramienta | Google AI Studio (app y web) |
| Prompt inicial | App: “Actúa como diseñador de producto y desarrollador front-end. Crea un prototipo navegable de aplicación móvil para ChocAndes, una empresa ficticia de chocolates artesanales de Bogotá…” (texto completo en el Anexo, Prompt 1). Web: “Actúa como diseñador web y desarrollador front-end. Crea una página web funcional de una sola página para ChocAndes, una empresa ficticia de chocolates artesanales de Bogotá…” (texto completo en el Anexo, Prompt 2). |
| Resultado | Prototipo de seis pantallas conectadas, con filtro por ocasión, guía de tres preguntas y resumen de pedido con total simulado (capturas en la sección 4) |
| Problema detectado | Los Prompts 1 y 2 produjeron un prototipo móvil y una página web funcionales, pero al revisarlos se encontraron aspectos por corregir. En la web, la portada mostraba únicamente la Caja Sierra Nevada, cuando la marca debía presentar sus tres productos. En ambas piezas era necesario verificar la navegación de todos los botones, reforzar los mensajes de error y el estado vacío, y asegurar que la guía para elegir terminara en una recomendación coherente con el presupuesto y los precios del catálogo. En la app, además, el resultado incluyó una cuarta pestaña (Sonido) que no estaba en el prompt, textos de origen que no figuraban en el brief, como “100% Cacao Origen Colombia”, y una imagen de portada con cajas de otra marca visibles. Como el trabajo ya funcionaba, las correcciones debían hacerse sin reconstruir todo desde cero. |
| Prompt mejorado | Se redactaron dos prompts de corrección que trabajan sobre el proyecto existente y piden conservar el diseño, los colores y las funciones que ya servían. El Prompt 5 se aplicó a la app y exige verificar las cinco pantallas obligatorias (la guía “¿Cuál elijo?”, que ya existía, funciona como sexta pantalla) y el recorrido completo, de la bienvenida al regreso al catálogo. También pide un estado vacío con botón para explorar el catálogo, mensajes de error para pedido vacío y cantidad inválida, una confirmación simulada con número de pedido ficticio y el aviso de demostración, y una revisión final de todos los botones. El Prompt 6 se aplicó a la web y pide reemplazar la portada por la fotografía adjunta con los tres productos, mejorar las tarjetas del catálogo y verificar el menú. Además, solicita que la guía muestre una recomendación con su botón, que el formulario valide los campos, calcule el total y muestre un resumen antes de confirmar, que haya un pie de página y que el proyecto funcione de forma local, sin servicios externos. |
| Resultado elegido | En la app se conservó la versión que completa el recorrido de pedido: la pantalla de pedido marca en rojo el nombre vacío y muestra el mensaje de error, y la confirmación presenta el mensaje “¡Pedido Simulado con Éxito!”, un código ficticio, la fecha simulada, el producto, la presentación, el mensaje de la tarjeta, el total y el aviso de que no se realizó ninguna compra real. La guía “¿Cuál elijo?” quedó accesible desde el catálogo y desde la pantalla de inicio. |
| Cambio humano final | Se revisaron los resultados de la web y la app para comprobar cada función y se decidió qué versión conservar. |
Decisión 3: video y audio
| Campo | Registro |
| Necesidad | Video promocional de 20 a 30 segundos que presente la marca y la Caja Sierra Nevada y lleve al catálogo |
| Herramienta | Guion y storyboard: ChatGPT Pro Video: Google Vids |
| Prompt inicial | Video 1: “Actúa como director creativo y guionista de video corto. Necesito el guion y el storyboard de un video promocional de 20 a 30 segundos para ChocAndes…” más un prompt por escena (texto completo en el Anexo, Prompt 3). Video 2: “Actúa como guionista de tutoriales en video. Necesito el guion y el plan de grabación de un video de 30 a 45 segundos…” (texto completo en el Anexo, Prompt 4). Para generar el Video 1 se usó el Prompt 7 del Anexo (27 segundos, vertical 9:16). |
| Resultado | Video de 35,7 segundos, horizontal, con las escenas descritas arriba |
| Problema detectado | El video no respetó lo pedido: el Prompt 7 indicaba 27 segundos en formato vertical 9:16 y el resultado es horizontal y dura 35 segundos, por encima del máximo de 30. Además, las pantallas de web y app del cierre eran ilustraciones generadas, con productos y precios que no coincidían con el catálogo. |
| Prompt mejorado | El Prompt 3 se convirtió en el Prompt 7, que describe el video escena por escena, con el tiempo, la descripción visual, el texto en pantalla y la narración de cada una. También fija el estilo (marrón cacao, crema y dorado), una duración exacta de 27 segundos y la regla de no agregar productos ni inventar información. Para el Video 2 se usó el Prompt 4, que pide un guion de hasta 100 palabras y un plan de grabación con los nombres, precios y botones exactos de la app. |
| Resultado elegido | Para el Video 1 se conservó la versión generada en Google Vids, en formato horizontal 16:9, porque respeta la secuencia de escenas, los textos en pantalla, el llamado “Explora el catálogo” y el aviso de datos simulados. Todavía excede la duración permitida y debe ajustarse. El Video 2 se resolvió como una grabación de pantalla del prototipo móvil, con el eslogan unificado. |
| Cambio humano final | Se revisó la video escena por escena frente al guion y a las reglas del proyecto, y así se detectaron los problemas de duración, de pantallas del cierre y de eslogan. Se unificó el eslogan en “ChocAndes, pequeños detalles, grandes momentos”, que ahora aparece igual en el video y en la app. No se ajustó la duración del Video 1, que se mantiene en 35 segundos, por encima del máximo de 30. |
La estructura de los prompts
Para utilizar las herramientas de inteligencia artificial, elaboramos prompts con instrucciones claras sobre los objetivos del proyecto, las características de ChocAndes, sus productos y las funciones que debía tener cada plataforma.
Sin embargo, los primeros resultados no siempre cumplían con lo que necesitábamos, por lo que fue necesario mejorar las instrucciones. Por ejemplo, en la página web solicitamos cambiar la imagen principal para mostrar los tres productos en lugar de uno solo, mientras que en la aplicación móvil pedimos mejorar la navegación, la selección de productos y la validación de los pedidos simulados.
De esta manera, fuimos haciendo los prompts más específicos, explicando qué debía corregirse y qué elementos debían conservarse. Esto nos permitió obtener resultados más cercanos a lo que buscábamos y comprender la importancia de dar instrucciones precisas a la inteligencia artificial.
6. Las pruebas
| # | Pieza | Prueba | Resultado | Problema y corrección |
| 1 | Web | Todos los enlaces y botones llevan a su destino | Correcto: los 5 botones del menú, “Ver detalle”, “Elegir este producto” y los botones de la guía llevan a su sección | Al llenar la encuesta de recomendación no enviaba al resultado generado |
| 2 | Web | Formulario con campo vacío muestra error | Correcto: aparece un mensaje debajo de cada campo vacío y no avanza | Complementos de añadir mensaje debajo del nombre |
| 3 | Web | Envío válido muestra resumen y número ficticio | Correcto: muestra producto, cantidad, total simulado y número de pedido ficticio | Sin necesidad de correcciones |
| 4 | Web | Vista móvil de 360 px sin desbordes | Correcto: no hay desplazamiento horizontal | Sin necesidad de correcciones |
| 5 | App | Recorrido de las seis pantallas, regreso al catálogo y estado vacío | Se completó el recorrido hasta la confirmación simulada (capturas de la sección 4). Regreso al catálogo y estado vacío: Correcto | Sin necesidad de correcciones |
| 6 | Video 1 | Duración dentro de 20 a 30 s y precios iguales al catálogo | No cumple: dura 35 s (el máximo es 30 s). El precio de $38.000 COP coincide con el catálogo. | Sin necesidad de correcciones |
| 7 | Completa | Una persona del equipo pasa del video al producto y completa la solicitud | Correcto: Tatiana completó el recorrido video → web o app → confirmación en 5 minutos | Sin necesidad de correcciones |
| 8 | App | Nombre vacío en el pedido muestra un mensaje de error | Correcto: el campo se marca en rojo y aparece el mensaje “Ingresa tu nombre o un nombre ficticio para personalizar el pedido” (captura de la sección 4). | Ninguno |
Revisión de errores con IA: el equipo usó ChatGPT Pro con prompts de revisión para buscar fallos antes de la entrega. COMPLETAR: qué detectó la IA, qué confirmó el equipo al probarlo y qué corrigió.
7. Límites, fuentes y licencias
Todo el proyecto usa datos ficticios, sin pagos, cuentas ni servidor. No se inventaron certificaciones, premios, beneficios de salud ni reseñas, y no se clonaron voces ni rostros reales. Ningún resultado de IA se asumió libre de derechos.
| Recurso | Herramienta o fuente | Licencia o permiso |
| Video 1 (imagen y clips) | Google Vids | Google Plus |
| Voz / música del video | Google Vids | Google Plus |
| Imágenes de productos (web y app) | Chat Gpt | Pro |
| Logo | Chat Gpt | Plro |
8. Quién hizo qué
| Integrante | Aporte |
| Erika Tatiana Martínez Barón | Elaboración del video tutorial y redacción del artículo |
| Julián Mateo Vásquez Riaño | Desarrollo de la aplicación móvil, la página web y el video promocional. |
9. Conclusiones
El desarrollo de ChocAndes nos permitió comprender cómo la inteligencia artificial generativa puede facilitar la creación de un proyecto digital, desde la idea inicial hasta la elaboración de una página web, una aplicación móvil y contenido audiovisual. Mediante herramientas como ChatGPT, Claude, Google AI Studio y Google Vids, logramos desarrollar una propuesta que integra diferentes funciones y mantiene una identidad visual relacionada con la marca.
Uno de los aprendizajes más importantes fue entender que la calidad de los resultados depende en gran parte de las instrucciones que le damos a la inteligencia artificial. Inicialmente, utilizamos Claude para elaborar los prompts con los que desarrollamos la página web y la aplicación móvil en Google AI Studio. Sin embargo, al revisar los primeros resultados, encontramos aspectos que necesitaban mejoras. Por esta razón, recurrimos a ChatGPT para crear nuevos prompts de corrección, en los que explicábamos de manera más detallada qué queríamos cambiar, cómo debía funcionar cada elemento y qué características del diseño original debían conservarse.
Por ejemplo, en la página web identificamos que la imagen principal mostraba únicamente uno de los chocolates, por lo que modificamos las instrucciones para incluir una fotografía con los tres productos. También solicitamos mejorar la navegación, los botones y el formulario de pedidos simulados. En la aplicación móvil, los nuevos prompts se enfocaron en conectar correctamente las pantallas, mejorar la selección de productos, incorporar opciones de presentación y verificar los mensajes de error y confirmación. De esta manera, pasamos de utilizar instrucciones generales a prompts más específicos, que permitieron realizar ajustes sin tener que desarrollar nuevamente todo el proyecto.
Finalmente, comprendimos que trabajar con inteligencia artificial requiere un proceso constante de revisión, prueba y corrección. No se trata únicamente de pedirle a una herramienta que genere un resultado, sino de identificar qué funciona, qué necesita mejorar y cómo comunicar esos cambios de manera clara. Esta experiencia nos demostró que la inteligencia artificial puede ahorrar tiempo y facilitar tareas técnicas, pero que la creatividad, la planificación y las decisiones humanas siguen siendo fundamentales para transformar una idea en una propuesta digital más completa y funcional.
Anexo: prompts utilizados
Estos son los siete prompts completos que se usaron en el proyecto.
Prompt 1: prototipo móvil (Google AI Studio)
Actúa como diseñador de producto y desarrollador front-end. Crea un PROTOTIPO NAVEGABLE de aplicación móvil para “ChocAndes”, una empresa FICTICIA de chocolates artesanales de Bogotá, Colombia. Es un proyecto académico: todo es simulado.
PÚBLICO: personas de 18 a 35 años que buscan un regalo de chocolate o un detalle para una ocasión especial.
TONO Y MARCA: cercano, cálido, juvenil y elegante. Paleta inspirada en cacao (marrones oscuros, crema, un acento dorado o terracota). Tipografía legible, botones grandes, diseño mobile-first (ancho ~390px), centrado en pantalla como si fuera un teléfono cuando se vea en escritorio.
CATÁLOGO (3 productos ficticios, datos simulados):
1. “Caja Sierra Nevada” – bombones de chocolate oscuro 70% con relleno de café. Ingredientes de ejemplo: cacao, azúcar, café, mantequilla de cacao. Precio simulado: $38.000 COP.
2. “Barra Páramo” – barra de chocolate con leche con sal marina. Ingredientes de ejemplo: cacao, leche en polvo, azúcar, sal marina. Precio simulado: $18.000 COP.
3. “Trufas Andinas” – trufas rellenas de arequipe. Ingredientes de ejemplo: cacao, crema, arequipe, cacao en polvo. Precio simulado: $28.000 COP.
Cada producto tiene: nombre, descripción corta (2 frases), ingredientes, precio, una imagen (usa imágenes placeholder o ilustraciones generadas, con un comentario en el código indicando que deben reemplazarse por imágenes con licencia verificada) y una etiqueta de “ideal para” (ej. cumpleaños, agradecimiento, pareja).
PANTALLAS (mínimo 5, todas conectadas):
1. Bienvenida: logo, eslogan, breve propuesta de valor y botón “Explorar catálogo”.
2. Catálogo: tarjetas de los 3 productos con imagen, nombre, precio y botón “Ver detalle”. Incluye un acceso a una mini guía “¿Cuál elijo?” (3 preguntas rápidas sobre ocasión, presupuesto y gusto que recomiendan uno de los 3 productos).
3. Detalle de producto: imagen grande, descripción, ingredientes, precio y botón “Elegir este producto”. Botón de volver.
4. Selección / pedido de prueba: selector de cantidad (1 a 10), opción de presentación (ej. empaque regalo o empaque normal), campo de nombre ficticio y un mensaje de dedicatoria opcional. Debe VALIDAR: si el nombre está vacío o la cantidad es 0, mostrar un mensaje de error claro y no avanzar. Muestra un resumen del pedido (producto, opción, cantidad, total simulado) antes de confirmar.
5. Confirmación: mensaje de éxito simulado con el resumen y un número de pedido ficticio. Botón “Volver al catálogo” que reinicia el pedido.
ESTADO VACÍO / ERROR: incluye un carrito o “Mi pedido” con estado vacío (“Aún no has elegido ningún producto”) y el mensaje de error de validación descrito arriba.
RECORRIDO COMPLETO que debe funcionar sin fallos: Bienvenida → Catálogo → Detalle → Elegir opción → Resumen → Confirmar → Volver al catálogo.
REGLAS IMPORTANTES:
Muestra en las pantallas de pedido y confirmación este aviso visible: “Demostración: no envía pedidos ni guarda datos”.
Sin pagos reales, sin backend, sin base de datos, sin cuentas ni login. Maneja todo el estado en memoria con React (useState), sin localStorage.
NO inventes certificaciones, beneficios de salud, premios ni reseñas de clientes.
Todos los datos son ficticios y deben verse como simulados.
No uses ni pidas API keys.
Todos los botones deben tener una acción real; nada decorativo.
Barra de navegación inferior con: Inicio, Catálogo, Mi pedido.
ENTREGA: código limpio y comentado en español, con los datos de los productos en un solo arreglo fácil de editar. Al final, explícame brevemente qué simulaste y cómo probar el recorrido.
Prompt 2: página web (Google AI Studio)
Actúa como diseñador web y desarrollador front-end. Crea una PÁGINA WEB FUNCIONAL de una sola página para “ChocAndes”, una empresa FICTICIA de chocolates artesanales de Bogotá, Colombia. Es un proyecto académico: todo es simulado.
FORMATO DE ENTREGA: un único archivo index.html con HTML, CSS y JavaScript puro (sin frameworks, sin npm, sin dependencias externas ni CDN), que funcione abriéndolo directamente en el navegador. Código limpio y comentado en español.
PÚBLICO: personas de 18 a 35 años que buscan un regalo de chocolate o un detalle para una ocasión especial.
MARCA (debe coincidir con la app móvil): tono cercano, cálido, juvenil y elegante. Paleta de cacao (marrones oscuros, crema, acento dorado o terracota). Tipografía legible. Diseño adaptable (responsive) a celular y computador, sin desbordes horizontales en pantallas de 360px.
CATÁLOGO (datos simulados, en un solo arreglo de JavaScript fácil de editar):
1. “Caja Sierra Nevada” – bombones de chocolate oscuro 70% con relleno de café. Ingredientes de ejemplo: cacao, azúcar, café, mantequilla de cacao. $38.000 COP (simulado). Ideal para: pareja, agradecimiento.
2. “Barra Páramo” – barra de chocolate con leche con sal marina. Ingredientes de ejemplo: cacao, leche en polvo, azúcar, sal marina. $18.000 COP (simulado). Ideal para: detalle pequeño, cumpleaños.
3. “Trufas Andinas” – trufas rellenas de arequipe. Ingredientes de ejemplo: cacao, crema, arequipe, cacao en polvo. $28.000 COP (simulado). Ideal para: cumpleaños, celebración.
Cada producto con imagen (placeholder o ilustración, con un comentario en el código indicando que debe reemplazarse por una imagen con licencia verificada).
CUATRO SECCIONES con navegación real (menú fijo con enlaces a anclas y desplazamiento suave; menú tipo hamburguesa en celular):
1. Inicio / propuesta de valor: título, eslogan, explicación breve de qué hace diferente a ChocAndes (sin inventar certificaciones, premios ni beneficios de salud) y botón “Ver catálogo” que lleva a la sección 2.
2. Catálogo: tarjetas de los 3 productos con imagen, nombre, descripción, precio y botón “Ver detalle”. Cada botón abre el detalle del producto (modal o panel) con ingredientes y un botón “Elegir este producto” que lleva al formulario con ese producto ya seleccionado.
3. Guía para elegir: cuestionario de 3 preguntas (ocasión, presupuesto, gusto) que recomienda uno de los 3 productos con una explicación breve y un botón para elegirlo.
4. Solicitud de prueba (formulario): campos nombre ficticio, producto (lista desplegable) y cantidad (1 a 10). Validación con JavaScript: si algún campo está vacío o la cantidad no es válida, mostrar mensajes de error claros junto a cada campo y no avanzar. Si es válido, mostrar en pantalla un resumen/confirmación local (producto, cantidad, total simulado, número de pedido ficticio) sin recargar la página. Mostrar siempre, visible y cerca del formulario, el aviso: “Demostración: no envía pedidos ni guarda datos”.
REGLAS IMPORTANTES:
Ningún botón decorativo: todos deben tener una acción real.
Sin pagos, sin correos automáticos, sin backend, sin base de datos, sin localStorage, sin API keys.
No inventes reseñas, certificaciones, premios ni beneficios de salud.
Todos los datos deben verse como ficticios/simulados. Incluye un pie de página que diga que es un proyecto académico con datos simulados.
Accesibilidad básica: contraste suficiente, texto alternativo en imágenes, etiquetas en los campos del formulario.
ENTREGA: el archivo completo y, al final, una explicación breve de qué simulaste y cómo probar cada función (navegación, detalle, guía, validación y confirmación).
Prompt 3: guion y storyboard del Video 1
Actúa como director creativo y guionista de video corto. Necesito el GUION y el STORYBOARD de un video promocional de 20 a 30 segundos para “ChocAndes”, una empresa FICTICIA de chocolates artesanales de Bogotá, Colombia. Es un proyecto académico.
PÚBLICO: personas de 18 a 35 años que buscan un regalo de chocolate o un detalle para una ocasión especial.
TONO: cercano, cálido, juvenil y elegante. Formato vertical 9:16.
PRODUCTO DESTACADO: “Caja Sierra Nevada” – bombones de chocolate oscuro 70% con relleno de café, $38.000 COP (precio simulado).
Otros productos de la marca (solo mención opcional): “Barra Páramo” y “Trufas Andinas”.
OBJETIVO: presentar la empresa y un producto, y terminar con el llamado a explorar el catálogo en la web y la app (prototipo).
ENTREGA:
1. Un guion de locución de máximo 60 palabras (para que quepa en 30 segundos).
2. Un storyboard en tabla con 5 a 6 escenas: número, duración en segundos, descripción visual, texto en pantalla (subtítulo) y audio/locución. La suma de duraciones debe estar entre 20 y 30 segundos.
3. Para cada escena, un prompt en español listo para pegar en un generador de imágenes o video, con estilo visual consistente (paleta de cacao: marrones oscuros, crema, acento dorado).
4. Un cierre con el eslogan y el llamado: “Explora el catálogo”.
REGLAS: no inventes certificaciones, premios, reseñas ni beneficios de salud. No uses personas reales ni famosas. No menciones marcas ni música con derechos de autor. Incluye en el cierre el texto “Demostración: datos simulados”.
Prompt 4: guion y plan de grabación del Video 2
Actúa como guionista de tutoriales en video. Necesito el GUION y el PLAN DE GRABACIÓN de un video de 30 a 45 segundos que enseñe cómo usar la experiencia digital de “ChocAndes” (empresa FICTICIA de chocolates artesanales de Bogotá; proyecto académico).
RECORRIDO A MOSTRAR (grabación de pantalla del prototipo móvil o de la web):
Bienvenida → Catálogo → Detalle de “Caja Sierra Nevada” → Elegir cantidad y opción de presentación → Resumen del pedido → Confirmación simulada → Volver al catálogo.
Incluye un momento corto donde se vea el mensaje de error al dejar el nombre vacío.
TONO: claro, amable y directo. Formato horizontal 16:9 o vertical 9:16 si grabo el móvil.
ENTREGA:
1. Guion de locución de máximo 100 palabras.
2. Tabla de escenas: número, duración, qué muestra la pantalla, texto en pantalla (subtítulo) y locución. La suma debe estar entre 30 y 45 segundos.
3. Lista de textos de subtítulos listos para copiar.
4. Un recordatorio visible al final: “Demostración: no envía pedidos ni guarda datos”.
REGLAS: usa exactamente los nombres de productos, precios simulados y textos de botones de la app. No inventes funciones que el prototipo no tiene.
Prompt 5: correcciones de aplicación móvil
Necesito que revises y mejores mi aplicación móvil ChocAndes, una marca ficticia de chocolates artesanales de Bogotá, Colombia, desarrollada como proyecto académico.
IMPORTANTE: No quiero que crees una aplicación nueva desde cero. Trabaja sobre la aplicación que ya está desarrollada, conserva su diseño, colores, logotipo, imágenes, productos y funcionalidades existentes. Implementa únicamente las mejoras necesarias para cumplir los siguientes requisitos.
OBJETIVO PRINCIPAL
Garantizar que la aplicación sea un prototipo móvil completamente navegable y funcional, donde un usuario pueda explorar productos, seleccionar uno, realizar un pedido simulado, revisar el resumen, confirmar el pedido y regresar al catálogo.
1. PANTALLAS OBLIGATORIAS
Verifica que existan y funcionen correctamente estas cinco pantallas:
– Bienvenida: mostrar la presentación de ChocAndes, su identidad visual y el botón para explorar el catálogo.
– Catálogo: mostrar los tres productos de ChocAndes con imágenes, nombres, descripciones breves y botones para consultar sus detalles.
– Detalle del producto: mostrar la imagen, nombre, descripción, precio y opciones disponibles para seleccionar.
– Selección y pedido: permitir elegir la cantidad de productos, revisar los productos seleccionados y visualizar el valor total del pedido.
– Confirmación: mostrar un mensaje de pedido simulado exitoso, un número de pedido ficticio, el resumen de la compra y un botón para regresar al catálogo.
2. PRODUCTOS DEL CATÁLOGO
Mantén los siguientes productos:
Caja Sierra Nevada: bombones de chocolate oscuro 70 % con relleno cremoso de café de altura colombiano. Precio simulado: $38.000 COP.
Barra Páramo: barra de chocolate con leche y delicados cristales de sal marina.
Trufas Andinas: trufas espolvoreadas con cacao y rellenas de arequipe artesanal.
Conserva los precios que ya estén configurados en la aplicación. No inventes precios nuevos sin indicarlo claramente.
3. RECORRIDO INTERACTIVO
El usuario debe poder realizar el siguiente recorrido:
Inicio → Catálogo → Detalle del producto → Seleccionar cantidad u opción → Agregar al pedido → Revisar resumen → Confirmar pedido simulado → Regresar al catálogo.
Todos los botones deben funcionar y estar conectados correctamente.
El usuario también debe poder regresar a las pantallas anteriores sin perder innecesariamente la información seleccionada.
4. ESTADOS VACÍOS Y MENSAJES DE ERROR
Implementa los siguientes comportamientos:
– Si el pedido está vacío, mostrar: “Tu pedido está vacío. Explora nuestro catálogo y encuentra tu chocolate favorito”.
– Incluir un botón “Explorar catálogo” que lleve al catálogo.
– Si el usuario intenta confirmar un pedido sin productos, mostrar un mensaje indicando que primero debe seleccionar al menos uno.
– Si la cantidad seleccionada es inválida, mostrar un mensaje claro y permitir corregirla.
– Cuando se agregue un producto, mostrar una confirmación visual.
5. CONFIRMACIÓN SIMULADA
Cuando el usuario confirme su pedido:
– Mostrar un mensaje de confirmación.
– Generar un número de pedido ficticio.
– Mostrar los productos seleccionados, sus cantidades y el valor total.
– Indicar claramente que es una demostración académica.
– Incluir un botón “Volver al catálogo”.
– Permitir iniciar un nuevo pedido.
No implementar pasarelas de pago reales, cobros, registros obligatorios ni conexiones con servicios externos.
6. DISEÑO Y EXPERIENCIA MÓVIL
Mantén el diseño actual de ChocAndes, con colores marrón cacao, crema y dorado.
La aplicación debe adaptarse correctamente a una pantalla móvil, con botones fáciles de pulsar, textos legibles y navegación intuitiva.
Conserva la barra de navegación inferior con Inicio, Catálogo y Mi pedido.
No elimines la función de mini guía de productos que ya existe. Verifica que funcione correctamente y que permita regresar al catálogo.
7. INFORMACIÓN DE DEMOSTRACIÓN
Mantén visible en la aplicación el siguiente aviso:
“Entorno de demostración académica: precios, productos y pedidos son simulados”.
En la pantalla de confirmación también debe indicarse que no se ha realizado ninguna compra real.
8. ENTREGA DEL PROYECTO
Asegúrate de que el proyecto siga siendo editable en Google AI Studio.
Indica cómo abrirlo, ejecutarlo y probarlo en una vista móvil.
No es necesario publicarlo en tiendas, instalarlo en un teléfono, crear cuentas reales ni utilizar un servidor.
9. VERIFICACIÓN FINAL
Revisa todos los botones, enlaces, pantallas y estados de la aplicación.
Comprueba que se pueda completar el recorrido de pedido simulado de principio a fin.
Corrige cualquier error de navegación o funcionalidad que encuentres.
No modifiques elementos que ya funcionen correctamente.
Al finalizar, indícame qué funcionalidades ya existían, cuáles agregaste y cómo puedo probar cada requisito de la actividad académica.
Prompt 6: mejoras de página web
Necesito que revises y mejores mi página web actual de ChocAndes, una empresa ficticia de chocolates artesanales de Bogotá, Colombia, para cumplir los requisitos de un proyecto académico.
IMPORTANTE: No crees una página nueva. Trabaja sobre el proyecto existente, conserva su diseño, identidad visual, logotipo, colores marrón cacao, crema y dorado, tipografías y funcionalidades que ya funcionan correctamente.
Realiza las siguientes mejoras:
1. CAMBIAR LA IMAGEN PRINCIPAL
Actualmente, en la portada aparece únicamente la Caja Sierra Nevada.
Quiero reemplazar esa imagen por la nueva fotografía que estoy adjuntando, donde aparecen juntos los tres productos de ChocAndes: Caja Sierra Nevada, Barra Páramo y Trufas Andinas.
La imagen debe verse completa, nítida y proporcionada, sin cortar los productos ni los textos que contiene.
Adapta su tamaño para que funcione correctamente en computadores y celulares. Si es necesario, ajusta la distribución de la portada para darle mayor protagonismo a la fotografía, sin afectar la legibilidad del título y la descripción.
No generes una imagen diferente ni utilices imágenes externas. Utiliza exactamente la imagen adjunta y guárdala como recurso del proyecto.
2. MEJORAR EL CATÁLOGO
Asegúrate de que el catálogo muestre los tres productos en tarjetas individuales:
– Caja Sierra Nevada: bombones de chocolate oscuro 70 % con relleno cremoso de café de altura colombiano.
– Barra Páramo: chocolate con leche y delicados cristales de sal marina.
– Trufas Andinas: trufas espolvoreadas con cacao y rellenas de arequipe artesanal fundente.
Cada tarjeta debe incluir fotografía, nombre, descripción breve, precio simulado y botón “Ver producto”.
El botón debe abrir una vista de detalle del producto seleccionado, mostrando su imagen, descripción completa, precio y un botón para seleccionarlo en la solicitud de prueba.
Mantén los precios que ya estén configurados en la página. La Caja Sierra Nevada tiene un precio simulado de $38.000 COP.
En computadores, presenta las tres tarjetas en una misma fila cuando haya espacio suficiente. En celulares, organízalas verticalmente.
3. VERIFICAR LA NAVEGACIÓN
Comprueba que funcionen correctamente los botones del menú:
– Inicio
– Catálogo
– Guía para elegir
– Solicitud de prueba
– Pedir muestra
Todos deben llevar a la sección correspondiente, sin botones decorativos o enlaces que no funcionen.
Mantén el menú visible durante el desplazamiento y evita que tape los títulos de las secciones.
4. MEJORAR LA GUÍA PARA ELEGIR
Conserva las tres preguntas actuales sobre ocasión, presupuesto y preferencias de sabor.
Cuando el usuario termine de responder, debe aparecer una recomendación de uno de los tres productos de ChocAndes, con su imagen, nombre, explicación breve y precio simulado.
Incluye un botón “Ver producto recomendado” que lleve al detalle de ese producto.
La recomendación debe considerar las respuestas y los precios reales configurados en el catálogo simulado. Si ningún producto corresponde al presupuesto seleccionado, informa al usuario en lugar de recomendar una opción fuera de presupuesto.
Incluye también un botón para repetir la guía.
5. MEJORAR LA SOLICITUD DE PRUEBA
Conserva el formulario actual, pero verifica que tenga estos campos:
– Nombre ficticio del contacto.
– Producto seleccionado.
– Cantidad solicitada, entre 1 y 10.
Todos los campos deben validarse.
Si un campo obligatorio está vacío, debe mostrarse un mensaje claro debajo de él.
Si la cantidad es inválida, no debe permitirse continuar.
Al seleccionar un producto y una cantidad, calcula automáticamente el total en pesos colombianos.
Antes de confirmar, muestra un resumen con el nombre ficticio, producto, cantidad, precio unitario y valor total.
Incluye un botón “Confirmar solicitud simulada”.
Después de confirmar, muestra un mensaje de éxito y un comprobante ficticio con número de solicitud generado localmente.
Agrega un botón para regresar al catálogo y otro para realizar una nueva solicitud.
No envíes correos, no guardes datos personales, no realices pagos ni conectes bases de datos.
Mantén visible el aviso exacto:
“Demostración: no envía pedidos ni guarda datos”.
6. MEJORAR LA EXPERIENCIA VISUAL
Mantén la apariencia elegante y artesanal de ChocAndes.
Mejora los espacios entre secciones, la alineación de las tarjetas y la legibilidad de los textos.
Agrega efectos suaves al pasar el cursor sobre botones y productos, sin utilizar animaciones exageradas.
Evita que las imágenes se deformen, se recorten incorrectamente o se vean pixeladas.
En celulares, verifica que no exista desplazamiento horizontal y que los botones sean cómodos de utilizar.
7. AGREGAR UN PIE DE PÁGINA
Si todavía no existe, agrega un pie de página sencillo con:
– Logotipo y nombre ChocAndes.
– Texto: “Chocolates artesanales de Bogotá”.
– Enlaces internos a Inicio, Catálogo, Guía para elegir y Solicitud de prueba.
– Aviso: “Proyecto académico. Empresa, productos y pedidos simulados”.
No inventes direcciones, teléfonos, redes sociales ni información de contacto real.
8. ENTREGA Y FUNCIONAMIENTO LOCAL
El proyecto debe continuar siendo editable en Google AI Studio.
Asegúrate de que pueda ejecutarse localmente y que todos sus recursos, incluidas las imágenes, estén incluidos en el proyecto.
No debe depender de servicios de pago, bases de datos ni servidores externos para completar la demostración.
Prepara instrucciones sencillas para descargar, abrir y ejecutar el proyecto localmente.
9. VERIFICACIÓN FINAL
Antes de terminar, comprueba:
– Que las cuatro secciones principales estén presentes.
– Que la imagen de portada muestre los tres productos.
– Que cada producto tenga una vista de detalle funcional.
– Que todos los botones permitan navegar correctamente.
– Que la guía genere recomendaciones coherentes.
– Que el formulario valide los datos.
– Que el resumen calcule correctamente el total.
– Que se pueda confirmar una solicitud ficticia.
– Que aparezca el aviso de demostración.
– Que la página funcione en computadores y celulares.
Corrige los errores que encuentres sin eliminar funcionalidades existentes.
Al finalizar, explícame brevemente qué cambios realizaste y cómo comprobar que la página cumple cada requisito del proyecto académico.
Prompt 7: video promocional del Video 1 (Google Vids)
Crea un video promocional de 27 segundos para ChocAndes, una marca ficticia de chocolates artesanales de Bogotá, Colombia. El video debe tener un estilo elegante, cálido y juvenil, con colores marrón cacao, crema y dorado. Utiliza un formato vertical 9:16, transiciones suaves, música instrumental de fondo y una narración en español latinoamericano con voz natural.
Escena 1 (0 a 4 segundos):
Se muestra una caja de regalo sobre una mesa elegante, iluminada con luz cálida. La cámara se acerca lentamente a la caja, creando una sensación de expectativa.
Texto en pantalla: “Un detalle especial ✨”.
Narración: “Hay detalles que hacen especial cualquier momento”.
Escena 2 (4 a 9 segundos):
Aparece el logotipo de ChocAndes acompañado de una selección de chocolates artesanales. La cámara realiza un movimiento suave mostrando los diferentes chocolates y sus detalles.
Texto en pantalla: “ChocAndes · Bogotá”.
Narración: “En ChocAndes, creamos chocolates artesanales en Bogotá, pensados para compartir y sorprender”.
Escena 3 (9 a 14 segundos):
Se muestra la Caja Sierra Nevada abriéndose lentamente, revelando sus bombones de chocolate oscuro al 70 % con relleno de café colombiano. La cámara se acerca para destacar la presentación del producto.
Texto en pantalla: “Caja Sierra Nevada”.
Narración: “Descubre nuestra Caja Sierra Nevada: bombones de chocolate oscuro al 70 % con un delicioso relleno de café”.
Escena 4 (14 a 18 segundos):
Primer plano de un bombón de chocolate partido por la mitad, mostrando su relleno cremoso de café. Se destacan las texturas del chocolate y el relleno mediante una iluminación cálida y un acercamiento cinematográfico.
Texto en pantalla: “Chocolate 70 % + café”.
Audio: Música instrumental suave, sin narración.
Escena 5 (18 a 22 segundos):
Se presenta la Caja Sierra Nevada completa sobre una superficie elegante, con detalles dorados y una iluminación que resalta el producto. El precio aparece de manera destacada.
Texto en pantalla: “$38.000 COP”.
Narración: “Un regalo especial por solo 38 mil pesos”.
Escena 6 (22 a 27 segundos):
Aparece el logotipo de ChocAndes en el centro de la pantalla, acompañado de un teléfono y un computador que muestran los prototipos del catálogo digital de la marca. El fondo mantiene los colores marrón cacao y dorado.
Texto principal en pantalla: “Explora el catálogo”.
Eslogan: “ChocAndes, pequeños detalles, grandes momentos”.
Texto adicional: “Disponible en nuestra web y app”.
En la parte inferior debe aparecer: “Demostración: datos simulados”.
Narración: “ChocAndes, pequeños detalles, grandes momentos. ¡Explora el catálogo en nuestra web y app!”.
Indicaciones generales:
El video debe parecer un comercial profesional de chocolates artesanales, con imágenes realistas, movimientos de cámara suaves y transiciones elegantes. Mantén la identidad visual de ChocAndes durante todas las escenas y utiliza el mismo diseño de los productos y del logotipo.
La narración debe sincronizarse con las imágenes, sin sonar robótica. La música debe mantenerse a un volumen bajo para que se escuche claramente la voz.
No agregues productos diferentes a los mencionados ni inventes información de la empresa. El resultado debe durar exactamente 27 segundos y estar en formato vertical 9:16, ideal para redes sociales.
ChocAndes es una empresa ficticia. Todos los datos, precios y productos son simulados; no se realizan ventas ni envíos. Proyecto desarrollado con IA generativa. Enlace al paquete del proyecto: COMPLETAR.
