IA aplicada / Innovación de procesos

IA y Vibe Coding en el Ecosistema de Diseño

Optimización del flujo de diseño de producto acelerando la investigación de usuarios y maquetando prototipos en código interactivo real.

Mi Rol Product Designer & Front-End Innovator
Año 2025 - 2026
Duración Implementación continua
Enfoque IA Generativa, Vibe Coding, Front-End
Resultados clave del proyecto
  • Reducción del tiempo de prototipado a la mitad mediante el uso coordinado de IA para escribir código base limpio.
  • Handoff de alta precisión entregando HTML/CSS listos con variables de Storybook a desarrollo.
  • Sintetización veloz de datos cualitativos e insights de usuario a partir de transcripciones extensas de tests de usabilidad.

Contexto y Rol

El diseñador aumentado por Inteligencia Artificial

El diseño digital contemporáneo exige velocidad y precisión. Tradicionalmente, la brecha de comunicación entre diseñadores y desarrolladores es amplia: los primeros entregan imágenes estáticas en Figma y los segundos deben adivinar los estados de carga, animaciones, responsividad y adaptabilidad móvil.

Como diseñador con perfil híbrido (producto + UX/UI + conocimientos técnicos), decidí reestructurar mi propio flujo de trabajo (workflow) integrando herramientas avanzadas de Inteligencia Artificial (Claude Code, Google Antigravity, Google AI Studio, Perplexity, Loveable) para actuar no solo como modelador visual, sino como un constructor de prototipos funcionales rápidos.

Problema & Objetivos

Fricciones del flujo tradicional

  • Lentitud en la síntesis de Research: Transcribir y extraer insights valiosos de horas de entrevistas cualitativas con usuarios tomaba días de trabajo monótono.
  • Estática del Handoff: El desarrollador suele rediseñar componentes debido a que las especificaciones estáticas no prevén la flexibilidad real de CSS Grid/Flexbox ni los flujos en navegadores vivos.
  • Iteración lenta de Copys: Crear variaciones de textos para notificaciones y mensajes de error requería procesos de aprobación largos entre redactores y negocio.

Objetivos del nuevo workflow

  • Acelerar la síntesis cualitativa de entrevistas estructuradas usando IA para mapear dolores de usuario rápido.
  • Estructurar maquetación interactiva responsiva real (en HTML5/CSS3) para que los desarrolladores puedan copiar directamente clases CSS de marca y tokens de diseño.
  • Mejorar la iteración de microcopys contextuales en tiempo real.

Restricciones

La IA como apoyo, no como reemplazo del criterio

  • Confidencialidad de la Información: Los datos personales de clientes fiduciarios o historias clínicas de pacientes no pueden ser ingresados a modelos de lenguaje públicos. La IA se usó exclusivamente con datos anonimizados, conceptos abstractos y layouts visuales generales.
  • Consistencia del Sistema de Diseño: La IA tiende a inventar clases de CSS (alucinación de código). Fue crítico establecer prompts con las reglas semánticas del UI Kit (como este del portafolio) para forzar al modelo a usar solo variables predefinidas en CSS.

Proceso

1. Investigación e Ingesta Cualitativa

Al finalizar entrevistas cualitativas de DoctorAkí o Skandia, procesamos las transcripciones anonimizadas en Claude. Diseñamos un prompt personalizado para clasificar los comentarios de los usuarios por severidad (Errores bloqueantes, confusión de interfaz, sugerencias). Esto redujo el tiempo de redacción del reporte de UX Research de 3 días a unas cuantas horas de curaduría.

2. Vibe Coding & Maquetación Rápida

Para validar la responsividad de los flujos de vinculación fiduciaria de Skandia, escribí las maquetas directamente en HTML y CSS con el apoyo de herramientas como Google Antigravity y Claude. Esto permitió testear cómo se expandía una tabla de datos financieros compleja en pantallas ultra-wide frente a pantallas móviles en un navegador real, resolviendo problemas de layout antes del desarrollo.

3. Generación y Validación de Microcopy

Utilizamos Google AI Studio para explorar variantes de copys para flujos de error de transacciones financieras. Definimos el tono (Profesional, sobrio, tranquilizador) y solicitamos variaciones de textos para campos vacíos, fallos en la pasarela de pago y notificaciones SMS, validándolas rápidamente con el área legal y de marca.

Solución

Prototipos reales y documentación enriquecida

El resultado es un flujo de diseño de alto rendimiento: del wireframe en Figma pasamos directamente a un prototipo de código (HTML/CSS) limpio apoyado por IA. Esto elimina los malentendidos visuales en Storybook y agiliza los sprints ágiles.

Reportes Cualitativos en IA

Síntesis Automatizada

Consolidación y etiquetado inteligente de feedbacks e insights cualitativos de usuarios.

Prototipado interactivo en Navegador

Prototipado Vivo

Uso de vibe coding para desplegar rápidamente páginas HTML5 funcionales en browsers.

UX Writing & Matriz de Mensajes

Generador de Microcopys

Matrices de mensajes de error y retroalimentación adaptadas a marcas Fintech y de Salud.

Resultados & Lecciones

Eficiencia operacional multiplicada

  • Handoff inmediato: Al entregar el prototipo interactivo en HTML/CSS, los programadores reducen el tiempo de maquetación en un 50% al reusar las clases directamente en sus componentes de desarrollo.
  • Mayor enfoque en estrategia: Al automatizar la síntesis y la escritura de copys rutinarios, dedico más horas de trabajo a resolver arquitecturas de información complejas y workshops estratégicos con el negocio.
  • Iteración veloz: Los tests de usabilidad en prototipos codificados son mucho más realistas y revelan más dolores de interacción que los prototipos de Figma.

Aprendizajes

  • La IA requiere tokens de diseño definidos: Para que el código generado por IA sea útil, debes alimentarla con tus variables (colores, espaciado, fuentes). Si no, el código resultante será desordenado e inconsistente.
  • La curaduría humana es indispensable: Los copys y reportes cualitativos generados por IA siempre deben ser filtrados bajo el ojo clínico de un diseñador de producto senior para mantener la coherencia y la empatía reales.