Live

Cuándo usarlo

Recurre a /impeccable live cuando quieras iterar sobre algo visualmente como lo harías en una herramienta de diseño, pero manteniendo código de producción como resultado. El flujo tipo lienzo de Figma sin el viaje de ida y vuelta a un paso de implementación.

Úsalo para:

• Explorar direcciones sobre un elemento real. Una sección hero, una tarjeta de newsletter, un nivel de precios. Tres propuestas genuinamente diferentes, lado a lado, en la página real con el contexto real.
• Pulir un trozo de UI que casi está bien. Sabes qué se siente mal pero no puedes decirlo exactamente. Elige el elemento, escribe “más lúdico” o dibuja una línea sobre lo que molesta, pulsa Go.
• Un A/B rápido entre dos direcciones que tu equipo debate. Genera variantes, no aceptes ninguna, y aléjate. El punto era la comparación.

NO es para nuevas funcionalidades desde cero (recurre a /impeccable craft) ni redisenos de página completa (recurre a /impeccable o un comando refine especializado).

Cómo funciona

Un comando activa un selector superpuesto sobre tu servidor de desarrollo en ejecución. Eliges cualquier elemento. Aparece una pequeña barra de contexto junto a él. Escribe una descripción libre o elige uno de los chips de acción (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Opcionalmente coloca pines de comentario o dibuja trazos directamente sobre el elemento primero, y la habilidad los interpreta como intención.

Pulsa Go. Se generan tres variantes de calidad de producción, cada una anclada a un arquetipo de diseño genuinamente diferente (no tres variaciones de color) y se intercambian en la página vía HMR de tu framework. Navega entre ellas con las teclas de flecha. Acepta una y la variante se escribe en el código fuente. Descarta las tres y el original permanece.

Soporta Vite, Next.js (incluyendo monorepos), SvelteKit, Astro, Nuxt y HTML estático puro. Si tu servidor de desarrollo tiene una Content Security Policy estricta, la configuración inicial la detecta y ofrece un parche único y solo para desarrollo para que el selector pueda cargarse. DESIGN.md prevalece en decisiones visuales, PRODUCT.md prevalece en voz: si tienes ambos, las variantes se mantienen fieles a la marca sin que se lo digan.

Pruébalo

/impeccable live

Abre la URL de tu servidor de desarrollo, elige la tarjeta de registro al newsletter, haz clic en el chip delight, pulsa Go. Obtendrás tres variantes que varían en dimensiones de personalidad (un estilo sello-y-postal, una versión de sorpresa tipográfica, una con acento ilustrado), no tres variaciones del mismo tratamiento.

O elige un hero, escribe “más editorial, menos SaaS”, pulsa Go. Las tres variantes se anclan a diferentes arquetipos editoriales (cabecera de periódico, filas de especificación estilo catálogo, póster de glifo sobredimensionado) en lugar de tres tonos de la misma idea.

Detén el modo live cuando termines: di “stop live mode”, cierra la pestaña, o pulsa el botón de salida en la barra del selector.

Errores comunes

• Ejecutarlo en una página que aún está a medio escribir. La generación de variantes en vivo necesita contexto. Si el elemento tiene texto de marcador de posición, Lorem ipsum genérico, o formato por defecto sin hoja de estilos, las variantes lo reflejarán. Rellena el contenido primero.
• Esperar que tome decisiones macro. El modo live itera sobre un único elemento seleccionado. Para “rediseñar toda la página de precios”, recurre a /impeccable o /impeccable craft en su lugar.
• Ignorar los mensajes de fallback. Si el elemento está en un archivo generado (una plantilla compilada, un output de build), el selector lo dice explícitamente y ofrece dirigir la aceptación al código fuente real. No fuerces la aceptación en el archivo generado: el siguiente build la borrará.
• Ejecutarlo sin PRODUCT.md o DESIGN.md cuando te importa la coherencia de marca. Live seguirá generando, pero las variantes tenderán a los valores por defecto genéricos. Ejecuta /impeccable teach y /impeccable document primero si el resultado necesita sonar como tu producto.