Live

Cuando usarlo

Recurre a /impeccable live cuando quieres iterar sobre algo visualmente de la forma en que lo harias en una herramienta de diseno, pero mantener codigo de produccion como salida. El flujo tipo lienzo de Figma sin el viaje de ida y vuelta a un paso de implementacion.

Usalo para:

• Explorar direcciones en un elemento real. Una seccion hero, una tarjeta de newsletter, un nivel de precios. Tres tomas genuinamente diferentes, lado a lado, en la pagina real con el contexto real.
• Pulir una pieza de UI que esta casi bien. Sabes que se siente incorrecto pero no puedes decirlo exactamente. Selecciona el elemento, garabatea “mas ludico” o dibuja un trazo sobre la parte que te molesta, dale a Go.
• Un rapido A/B entre dos direcciones que tu equipo esta debatiendo. Genera variantes, no aceptes ninguna, vete. El punto era la comparacion.

NO es para nuevas funcionalidades greenfield (recurre a /impeccable craft) o redisenos de pagina completa (recurre a /impeccable o un comando de refinamiento especializado).

Como funciona

Un comando trae un selector superpuesto sobre tu servidor de desarrollo en ejecucion. Seleccionas cualquier elemento. Una pequena barra de contexto aparece junto a el. Escribe una descripcion libre o elige uno de los chips de accion (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Opcionalmente deja pines de comentario o dibuja trazos directamente sobre el elemento primero, y la habilidad los lee como intencion.

Dale a Go. Tres variantes de calidad de produccion se generan, cada una anclada a un arquetipo de diseno genuinamente diferente (no tres variaciones de color) y se intercambian en caliente en la pagina via el HMR de tu framework. Navega entre ellas con las teclas de flecha. Acepta una y la variante se escribe de vuelta al codigo fuente. Descarta las tres y el original permanece.

Soporta Vite, Next.js (incluyendo monorepos), SvelteKit, Astro, Nuxt y HTML estatico plano. Si tu servidor de desarrollo tiene una Politica de Seguridad de Contenido estricta, la configuracion de primera ejecucion la detecta y ofrece un parche unico solo para desarrollo para que el selector pueda cargar. DESIGN.md gana en decisiones visuales, PRODUCT.md gana en voz: si tienes ambos, las variantes se mantienen dentro de la marca sin que se les diga.

Probalo

/impeccable live

Abre la URL de tu servidor de desarrollo, selecciona la tarjeta de registro al newsletter, haz clic en el chip delight, dale a Go. Obtendras tres variantes que varian en dimensiones de personalidad (una sensacion de estampilla y postal, una version de sorpresa tipografica, una con acento ilustrado), no tres variaciones del mismo tratamiento.

O selecciona un hero, escribe “mas editorial, menos SaaS”, dale a Go. Las tres variantes se anclan a diferentes arquetipos editoriales (cabecera de periodico, filas de especificaciones estilo catalogo, poster de glifo sobredimensionado) en lugar de tres tonos de la misma idea.

Deten el modo live cuando hayas terminado: di “detener modo live”, cierra la pestana, o dale al boton de salida en la barra del selector.

Errores comunes

• Ejecutarlo en una pagina que todavia esta medio escrita. La generacion de variantes en vivo necesita contexto. Si el elemento tiene texto placeholder, Lorem ipsum generico, o formato predeterminado pre-stylesheet, las variantes reflejaran eso. Llena el contenido primero.
• Esperar que tome decisiones macro. El modo live itera sobre un unico elemento seleccionado. Para “rediseñar toda la pagina de precios”, recurre a /impeccable o /impeccable craft.
• Ignorar los mensajes de fallback. Si el elemento vive en un archivo generado (una plantilla compilada, una salida de build), el selector lo dice explicitamente y ofrece enrutar la aceptacion al codigo fuente real. No fuerces la aceptacion en el archivo generado: el proximo build lo borrara.
• Ejecutarlo sin PRODUCT.md o DESIGN.md cuando te importa la afinidad de marca. Live seguira generando, pero las variantes tenderan a valores predeterminados genericos. Ejecuta /impeccable teach y /impeccable document primero si el resultado necesita sonar como tu producto.