Prototipar con los artifacts

¿Qué es un artifact?

Un artifact es un resultado interactivo que la IA genera y muestra junto a la conversación: una página HTML/CSS completa, un componente React, un SVG — que se ejecuta de verdad en un panel dedicado. No lees código imaginando el resultado: ves el resultado, haces clic en él, pruebas los hovers. Y cuando pides un ajuste, el artifact se actualiza ante tus ojos.

Mide el cambio respecto al flujo clásico: maqueta en Figma, exportación, integración, despliegue en un entorno de previsualización, feedback del cliente tres días después… Cada bucle de feedback costaba horas. Con un artifact, el bucle dura treinta segundos. No es solo « más rápido »: es un cambio de naturaleza. Cuando iterar no cuesta nada, exploras diez direcciones en lugar de defender la única que tuviste tiempo de producir.

Para Studio Mango, es el arma del día: en lugar de presentar mañana por la mañana tres láminas estáticas al cliente, le mostrarás una página viva — que hace scroll, que reacciona al hover, que se consulta en su teléfono. La diferencia de percepción es enorme: un prototipo interactivo desencadena feedback concreto (« ese botón, ahí, yo lo vería más arriba »), no debates abstractos sobre intenciones.

Por qué el bucle corto cambia tu forma de diseñar

El bucle del artifact sigue siempre el mismo ciclo: escribes un prompt, el resultado aparece, observas, formulas un feedback preciso, el resultado se actualiza. Repite. Este ciclo ultracorto tiene un efecto psicológico valioso: desdramatiza el error. Una mala idea cuesta treinta segundos, así que te atreves a probarla. ¿Cuántas buenas ideas han muerto en una reunión porque « no hay tiempo de maquetar eso »?

flowchart LR
  P["Prompt"] --> R["Resultado en el artifact"]
  R --> F["Feedback preciso"]
  F --> M["Actualización en directo"]
  M --> R

Cuidado, eso sí, con el reverso: la facilidad de iterar puede producir deriva sin rumbo. Veinte iteraciones sin norte, y te encuentras más lejos del objetivo que al principio, sin poder decir cuándo se torció. La defensa: mantén tu briefing de dirección artística a la vista, y antes de cada petición de modificación, verifica que sirve al briefing. Iterar rápido, sí — derivar, no.

Preparar el terreno: el prompt de partida

La calidad de tu sesión de prototipado se juega en el primer prompt. Tres ingredientes deben figurar en él: tu design system (el bloque :root del capítulo anterior, pegado íntegramente), la estructura esperada (la lista de secciones en orden) y el briefing de ambiente con sus prohibidos. Sin los tokens, la IA improvisa colores; sin estructura, inventa secciones; sin prohibidos, recae en lo genérico.

Crea la landing page de Sereno (app de meditación) en una sola página HTML/CSS autónoma.

DESIGN SYSTEM (a usar exclusivamente — ningún valor en duro):
[pega aquí tu bloque :root completo]

ESTRUCTURA:
1. Header: logo en texto + enlace « Iniciar sesión »
2. Hero: título potente, subtítulo, CTA principal « Probar gratis », visual abstracto relajante en CSS puro (sin imágenes externas)
3. Tres beneficios en tarjetas: Dormir mejor, Gestionar el estrés, Concentrarse
4. Testimonio: cita + nombre + profesión
5. Pricing simple: oferta gratuita vs premium
6. Footer sobrio

AMBIENTE: depurado, generoso en espacio (secciones separadas por var(--space-24)), animaciones suaves solo al hover.
PROHIBIDOS: degradados chillones, emojis, sombras pesadas, más de un color de acento.

Iterar con pequeños toques

Primer resultado obtenido: es correcto, no extraordinario. Es normal — el primer borrador es una base, no un producto terminado. La disciplina que sigue marca toda la diferencia: una iteración = una intención. « Redondea más las esquinas de las tarjetas », y observa. « Más aire entre la hero y los beneficios », y observa. « El CTA debe dominar la hero », y observa.

¿Por qué esta lentitud aparente? Porque si pides cinco cambios de golpe y el resultado se degrada, no sabes cuál es el culpable. Cambio a cambio, ves con precisión el efecto de cada decisión — y de paso aprendes: descubres empíricamente lo que 16 px de espacio extra le hacen a una sección. Es el mismo principio que la depuración en programación: se aíslan las variables.

En la práctica, una sesión eficaz se parece a esto: tres o cuatro iteraciones de estructura (orden de las secciones, proporciones de la hero, densidad de las tarjetas), luego tres o cuatro iteraciones de estilo (espaciados finos, tamaños de títulos, intensidad de las sombras), y por último una pasada de detalles (transiciones al hover, alineaciones, coherencia de los iconos). Estructura primero, estilo después, detalles al final — nunca al revés, si no pules secciones que serán eliminadas.

El vocabulario del feedback visual

Tus iteraciones serán tan buenas como tus formulaciones. Estos son los esquemas que funcionan: nombrar la zona (« en la sección de beneficios… »), nombrar el problema en vocabulario de diseño (« …las tres tarjetas casi se tocan, el ritmo está ahogado… ») y dar la dirección (« …sepáralas con var(--space-8) y reduce su padding interno un nivel »). Zona, problema, dirección: tres tiempos, diez segundos de escritura, y la IA corrige justo lo necesario.

• Jerarquía: « el título y el subtítulo tienen casi la misma presencia; refuerza el título (tamaño +1 nivel, grosor 600) y atenúa el subtítulo (--color-text-muted) »
• Ritmo: « los espaciados entre secciones varían; unifícalos a var(--space-24) en todas partes »
• Acento: « el color de acento aparece en seis sitios; resérvalo para el CTA principal y los enlaces »
• Densidad: « la sección de pricing está apretada; duplica el padding interno de las tarjetas y airea las listas de funcionalidades »

Artifacts, v0, Figma AI: ¿qué herramienta para qué?

Los artifacts no son el único medio de prototipar con la IA, y conviene situar el ecosistema. Cada herramienta tiene su zona de excelencia; la elección depende de tu entregable y de tu punto de partida. Para el reto de Studio Mango — explorar, iterar en conversación y entregar una página viva en pocas horas — los artifacts son la herramienta natural. Si el proyecto exigiera React listo para producción en un stack Next.js, v0 tomaría la delantera; si el equipo ya trabajara en maquetas de Figma con traspaso a integradores, Figma AI se impondría.

Del borrador a lo presentable

En una decena de iteraciones disciplinadas, pasas de un esqueleto correcto a una página que puedes proyectar en una reunión con el cliente. Antes de parar, haz la pasada de verificación: prueba el renderizado móvil (la mitad de los visitantes de Sereno vendrán del teléfono — pide explícitamente « muéstrame el renderizado a 375 px de ancho » y verifica que la hero no se derrumba), pasa el cursor por cada elemento interactivo, y relee los textos, porque la IA a veces cuela contenido falso aproximado.

Último reflejo profesional: archiva las etapas. Copia el código de las versiones clave (V1 en bruto, V2 estructurada, V3 final) en archivos fechados. Si el cliente al final prefiere la dirección de la V2, la recuperas en un minuto. Y al presentar la progresión V1 → V3, muestras el razonamiento del estudio — lo que a menudo vale más que el propio resultado final.