Trazo Propio: una experiencia digital creada con IA generativa

De un video a una página web y una app móvil: cómo usé la IA generativa para diseñar, probar y mejorar cada pieza de una empresa ficticia de ropa personalizada.

En resumen

• Qué construí: una página web funcional, un prototipo navegable de app móvil y un video promocional, todos conectados por la misma marca, los mismos productos y los mismos precios simulados y un video promocional. Además, todos están conectados por la misma marca, los mismos productos y los mismos precios simulados.
• Cómo usé la IA: cinco herramientas de IA generativa (Claude, Copilot, Gemini, Flow y Canva) en tres decisiones documentadas, cada una con su prompt inicial, su problema, su prompt mejorado y mi edición final.
• Qué aprendí: la IA acelera el trabajo, pero hay que pedirle con precisión, verificar lo que inventa y probar todo antes de aceptarlo.

Trazo Propio es una empresa ficticia. Todos los productos, precios, pedidos y datos de este proyecto son simulados.

Introducción: la IA generativa en un proyecto real

La IA generativa permite producir textos, imágenes, código y video en minutos. Pero ¿alcanza para construir una experiencia digital completa para una empresa pequeña? Para el proyecto integrador del curso Trabajando con la IA generativa me propuse responder esa pregunta con un caso concreto: conectar un video, una página web y una aplicación móvil. La idea era que una persona pudiera conocer una oferta, elegir un producto y preparar una solicitud de prueba sin perder información en el camino.

Este artículo cuenta cómo lo hice. Primero explico el reto, las piezas que construí, las herramientas de IA generativa que usé y, sobre todo, las decisiones que tomé: qué le pedí a la IA, qué salió mal, cómo lo corregí y qué cambié yo a mano. También incluyo las pruebas que hice y las limitaciones que quedaron.

1. El reto de negocio

Trazo Propio es una empresa ficticia de ropa personalizada en Bogotá. Su eslogan es “Tu estilo, tu trazo”. Además, su público son personas de 18 a 35 años que buscan un regalo o un detalle para una ocasión especial. El problema que planteé era muy cotidiano: el catálogo estaba disperso en mensajes y las personas no entendían las diferencias entre los productos. Además, las consultas sobre regalos se repetían una y otra vez.
De ese problema salieron tres necesidades que guiaron todo el proyecto:

• Explicar la oferta: que quien llega entienda rápido qué vende Trazo Propio.
• Ayudar a elegir: que la persona sepa qué producto le conviene según la ocasión.
• Preparar una solicitud sin perder información: que pueda dejar listos talla, color, diseño y datos de entrega en un solo recorrido.

Después, para probar la solución usé un catálogo simulado de tres productos:

Producto	Para qué sirve	Precio simulado
Camiseta “Tu Frase”	Un mensaje corto o un regalo rápido: una frase, un nombre o una fecha.	$45.000
Buzo “Tu Diseño”	Algo con más personalidad: un diseño o una ilustración.	$95.000
Set “Tu Grupo”	Celebrar en grupo: 3 camisetas o 3 buzos, con talla y color por prenda.	Desde $120.000 (3 camisetas) o $255.000 (3 buzos)

2. Un recorrido conectado

La idea central fue que las tres piezas no funcionaran por separado, sino como un solo camino: una persona descubre la marca en un video, conoce y elige en la web, y prepara su solicitud desde el celular. Por eso definí el recorrido antes de generar cualquier pieza con IA generativa.

Etapa	Pieza	Necesidad que resuelve
Descubrir	Video promocional	Explicar la oferta e invitar a explorar el catálogo.
Conocer y elegir	Página web	Explicar la oferta y ayudar a elegir: catálogo, asistente de diseño con 6 preguntas y galería de diseños.
Preparar la solicitud	Web y app móvil	Preparar la solicitud: personalizar, agregar al carrito, llenar datos y confirmar.

Para que se sintiera una sola marca, usé los mismos nombres, precios y eslogan en todas las piezas. También repetí los colores: terracota, mostaza y oliva sobre un fondo crema, con los bordes negros y las sombras marcadas que caracterizan a la web.

3. La página web

La web es un único archivo, index.html, que se abre con doble clic en cualquier navegador y no necesita internet. Además, se adapta a computador, tablet y celular, y tiene navegación real entre sus secciones: inicio, catálogo, cómo funciona, diseños con IA, solicitud y qué sigue.

A continuación, dos partes merecen explicación:

• El asistente de diseño. Hace seis preguntas: para quién es, si es para mujer, hombre o cualquiera, la ocasión, el estilo, el tono y el elemento gráfico. Luego recomienda diseños de una galería de 24 ilustraciones, que también se puede filtrar por mujer, hombre o unisex.
• La solicitud. Primero, la persona elige la prenda, un diseño con IA o su propia frase, la talla y el color. Además, ve una vista previa en vivo. Luego agrega la prenda al carrito, que aplica descuentos automáticos: 5% con 2 prendas, 10% con 3 y 15% con 5 o más. A eso se suma un 5% por combinar productos, con un tope total de 20%. Después se llenan los datos de entrega y se confirma con un resumen.

Como todo es una demostración, el formulario valida los campos, pero no envía pedidos ni guarda datos. Por eso, la página lo avisa con claridad: “Demostración: no envía pedidos ni guarda datos”. No hay pagos reales, correos automáticos ni base de datos.

Figura 1. Inicio de la página web de Trazo Propio.

Figura 2. Sección de catálogo, con los tres productos y sus botones de acción.

4. La aplicación móvil

La app es un prototipo navegable: no se instala en el teléfono ni se publica en tiendas, pero se puede probar de principio a fin en el navegador. Tiene el mismo contenido de la web en formato de celular, con una barra de navegación inferior. Además, incluye las pantallas de inicio, catálogo, diseños, pedido, carrito, datos de entrega, confirmación y “¿Qué sigue?”.

Así, el recorrido completo es: elegir un producto, seleccionar sus opciones, revisar el resumen, confirmar de forma simulada y volver al catálogo. También incluye los casos que suelen olvidarse: un mensaje de error cuando falta un dato, por ejemplo la talla, y un estado vacío cuando el carrito no tiene prendas. Por último, todo lo que es simulado está indicado en pantalla.

Figura 3. Pantallas de inicio, catálogo y asistente de diseño de la app móvil.

Figura 4. Personalización de la prenda con vista previa, carrito con descuentos y confirmación de la solicitud.

5. El video promocional

El Video 1 presenta a Trazo Propio y a un producto, la Camiseta “Tu Frase”, y termina invitando a explorar el catálogo en la web. Además, dura menos de 30 segundos y se organiza en cuatro escenas. Primero, un gancho con la pregunta “¿Buscas el detalle perfecto?”. Luego, la presentación del producto y un plano del estampado. Por último, el cierre con el nombre de la marca, el eslogan y el llamado a la acción.

Por otro lado, el guion lo escribí con Gemini. Los clips los generé en Flow a partir de las imágenes de producto. El montaje lo hice en Canva, con cortes, transiciones, animación, textos en pantalla y una pista de música. Además, decidí que el video no mostrara el precio ni repitiera en texto la frase estampada en la camiseta, para que la imagen y el mensaje no compitieran.

Figura 5. Clips del Video 1 generados en Flow.

Figura 6. Edición del Video 1 en Canva: línea de tiempo, textos y clips.

6. Cómo usé la IA generativa: tres decisiones

Usé cinco herramientas de IA generativa, agrupadas en tres decisiones: texto, diseño y video. En cada una seguí el mismo método: escribir un prompt inicial, revisar el resultado, detectar el problema, mejorar el prompt, elegir la mejor respuesta y hacer una edición humana final. Además, cada paso quedó registrado en la bitácora con capturas.

Resumen de las tres decisiones:

Decisión	Herramienta	Problema del primer resultado	Qué cambió en el prompt
1. Texto: propuesta de valor	Claude (Sonnet 5.5)	Respuesta genérica; inventó productos (chaquetas, uniformes) y afirmaciones de calidad.	Añadí público, catálogo con precios, tres ideas a cubrir, tono, máximo de 80 palabras y lo que no debía inventar.
2. Diseño: imágenes de producto	Copilot	Fondo con objetos y textos inventados, etiqueta ilegible y estilo imposible de repetir.	Pedí fondo liso crema, luz suave, vista frontal, frase exacta y sin etiquetas, logos ni texto adicional.
3. Video: guión y clips	Gemini, Flow y Canva	Guión de 60 segundos con productos inventados (gorras, sudaderas) y “calidad garantizada”.	Fijé 25 segundos, un solo producto, imágenes fijas, formato en tabla y cierre que invita al catálogo.

Decisión 1: la propuesta de valor con IA generativa

Mi primer prompt fue demasiado corto: le pedí a Claude la propuesta de valor de una empresa de ropa personalizada en Bogotá. La respuesta sonaba bien, pero hablaba de chaquetas, uniformes y bordados que no existen en mi catálogo. Por eso, en el segundo intento le di el contexto completo y le pedí expresamente que no inventara certificaciones, materiales, tiempos de entrega ni beneficios. El resultado fue un texto de 61 palabras, mucho más fiel a la empresa.

Mi aporte humano fue recuperar el eslogan de la primera versión y añadir el aviso de que es una demostración. También separé los productos en una lista corta para que se lea bien en web y móvil. La versión final quedó así:

Trazo Propio: Regalos que sí dicen algo. Tu estilo, tu trazo. ¿Buscas un detalle para una ocasión especial? Desde Bogotá personalizamos ropa a tu estilo: ¿Un mensaje corto? Camiseta “Tu Frase” ($45.000). ¿Algo con más personalidad? Buzo “Tu Diseño” ($95.000). ¿Para celebrar en grupo? Set “Tu Grupo” ($120.000). Cuéntanos talla, color y tu texto o diseño, y preparamos tu solicitud. Demostración: productos y precios simulados.

Decisión 2: las imágenes de producto

Con Copilot empecé pidiendo “una camiseta blanca personalizada con una frase estampada”. La imagen salió con un fondo decorado, carteles con textos inventados y una etiqueta ilegible. Además, un estilo así no se podía repetir en el buzo y en el set. Lo resolví con una fórmula de prompt: fotografía de producto, vista frontal, fondo liso color crema, luz suave y uniforme y sin objetos alrededor. Además, pedí la frase “Tu estilo, tu trazo” en letra manuscrita negra y sin etiquetas, logos ni texto adicional.

Figura 7. Antes y después: primer resultado de Copilot (izquierda) y resultado con el prompt mejorado (derecha).

Luego apliqué la misma fórmula al buzo, con una flor minimalista dibujada a mano, y al set, con tres camisetas numeradas del 1 al 3. Así los tres productos quedaron con el mismo estilo de catálogo. Mi edición humana fue recortar la franja oscura que quedó en la imagen. Luego guardé los archivos con nombres claros para usarlos en la web, la app y el video.

Figura 8. Las tres imágenes finales: Camiseta “Tu Frase”, Buzo “Tu Diseño” y Set “Tu Grupo”.

Decisión 3: el guion y el video con IA generativa

Mi primer prompt a Gemini fue una sola línea. Devolvió un guion de 60 segundos, con personas, fábricas, gorras y sudaderas, una página web genérica y frases como “calidad garantizada”. Nada de eso correspondía a mi empresa, y además no invitaba a explorar el catálogo. En el prompt mejorado fijé la duración en 25 segundos, el eslogan, el público y un solo producto. También pedí imágenes fijas sobre fondo crema y un formato de tabla (tiempo, visual, locución y texto en pantalla). Por último, prohibí inventar productos, garantías o enlaces.

Después adapté el guion a mis imágenes: cambié las frases de las camisetas por la de mi marca, corregí el nombre del producto para que coincidiera con el catálogo y quité el precio. Finalmente, con ese guion generé los clips en Flow y armé el video en Canva.

7. Pruebas y correcciones

El código generado con IA generativa no se acepta sin probarlo. Primero, revisé la lógica de la web con una revisión del código y un script que simula los clics y el envío del formulario. Además, comprobé lo visual en un computador, un iPad, un celular Samsung y un iPhone. La app la probé completando el recorrido de principio a fin, incluyendo el mensaje de error y el estado vacío.

En total hice 9 pruebas de la web: 6 pasaron a la primera y 3 fallaron. Por eso, esas tres fallas, y cómo las corregí, fueron las más útiles del proceso:

Prueba	Qué falló	Corrección
Validación de cantidad	El campo declaraba un máximo de 20, pero aceptaba 21, 25 y decimales como 2,5.	Ahora solo acepta números enteros entre 1 y 20 y muestra un mensaje claro.
Coherencia entre talla y producto	Una camiseta aceptaba la talla “Tallas combinadas”, que solo tiene sentido para el Set.	Se muestra un error si esa talla se elige con otro producto.
Contenido sin inventos	Había textos que yo no había definido, como “100% fibra natural” o “algodón perchado”, y textos alternativos de imágenes que no coincidían con ellas.	Dejé el material como “Algodón”, ajusté las descripciones al catálogo, eliminé las líneas inventadas y corregí los textos alternativos.

8. Responsabilidad y límites

Trabajé con datos ficticios y con recursos propios o generados con IA. Además, registré el origen, la fecha, la herramienta y los términos de uso de cada elemento en un documento de fuentes y licencias. Por eso, no asumí que lo generado con IA generativa estuviera libre de derechos. Tampoco cloné voces ni rostros reales, no usé logos ni textos de terceros, no inventé certificaciones, beneficios de salud ni reseñas. Finalmente, no dejé contraseñas ni datos personales en archivos o capturas.

9. Lo que aprendí sobre la IA generativa

• Un buen prompt dice qué no inventar. Lo que más mejoró los resultados no fue pedir más cosas, sino fijar el contexto y prohibir lo que no existía.
• Verificar es parte del trabajo. En los tres casos la IA agregó productos, afirmaciones o detalles que no eran míos.
• La coherencia se diseña. Tener una sola fuente de verdad para nombres, precios y colores permitió que video, web y app se sintieran una misma marca.
• Probar antes de aceptar. Las pruebas encontraron fallas reales en el código generado, como la validación de cantidad.
• La IA propone, uno decide. En cada decisión hubo un cambio humano final que hizo el resultado más fiel a la empresa.

En conclusión, la IA generativa fue una gran aliada para producir rápido textos, imágenes, código y video. Sin embargo, el valor del proyecto estuvo en las decisiones humanas: definir el recorrido, detectar los errores, corregirlos y asegurarse de que todo contara la misma historia. Puedes probar la web y la app desde los enlaces de abajo y contarme qué mejorarías.

Recursos del proyecto

Todos los archivos del proyecto (código, video, bitácora y fuentes) están en esta carpeta: [PROYECTO EMPRESA].

Pieza	Dónde encontrarla
Página web	Archivo index.html y documento LINK Y QR PÁGINA WEB, en la carpeta PÁGINA WEB. Enlace:  https://comfy-granita-b220d0.netlify.app/
App móvil (prototipo)	Archivo App_Movil_Trazo_Propio.html y documento LINK Y QR APP MÓVIL, en la carpeta APP MÓVIL (PROTOTIPO). Enlace: https://aesthetic-piroshki-91e654.netlify.app
Videos	Carpeta VÍDEOS: Video1_Promocion_TrazoPropio.mp4. Video2_Explicacion_TrazoPropio.mp4
Bitácora, pruebas y fuentes	Carpeta BITÁCORA IA (PRUEBAS Y FUENTES).

Demostración: productos, precios y asistentes simulados. Trazo Propio es una empresa ficticia.