Manual de AI Editor

Guía de uso del editor. Si algo no funciona como se describe aquí, avisa al administrador de tu proyecto.

¿Qué es AI Editor?

AI Editor te permite editar tu sitio web hablando con una IA o haciendo cambios directamente sobre una vista previa del sitio. Cada cambio se aplica al código real del proyecto y se sube a GitHub; si el proyecto publica automáticamente, el editor comprueba el despliegue y te dice el resultado real. Trabajas desde el workspace, que tiene tres zonas: el chat (izquierda), la preview del sitio (centro) y el panel de propiedades (derecha, aparece al seleccionar un bloque).

El chat con la IA

Describe en tus palabras el cambio que quieres: «cambia el color del header a azul», «añade una sección de testimonios», «corrige el teléfono del pie de página». La IA edita el código del proyecto y lo publica.

Qué significa «publicado»

Al terminar, debajo de la respuesta aparece un veredicto que el editor comprueba por su cuenta contra Vercel — no es lo que dice la IA, es lo que hay realmente en producción:

• ✅ Publicado y verificado: ese commit es el que sirve tu sitio.
• ⏳ Construyendo: Vercel sigue montando el deploy; en un minuto se verá.
• ❌ El deploy ha fallado: el sitio sigue con la versión anterior; el enlace al registro de Vercel va incluido.
• NO PUBLICADO: el proyecto no publica al hacer push (se sube a mano, con un script, o perdió el enlace con Vercel). El motivo va explicado.
• ⚠️ No he podido comprobarlo: el editor lo admite en vez de darlo por bueno.

Adjuntar archivos

• Botón + para adjuntar, o arrastra archivos al chat, o pega imágenes con Ctrl+V.
• Admite imágenes (PNG, JPG, WebP, GIF), documentos (PDF, Word .docx, Excel .xlsx, ZIP), código (HTML, CSS, JS, JSON, TXT) y audio/vídeo (MP3, MP4, WAV, WebM) — hasta 1 GB por archivo.
• Hasta 10 archivos por mensaje. La IA extrae automáticamente el texto de PDF, Word y Excel para usarlo como contexto. Los audio/vídeo se transcriben con Whisper.
• Útil para enviar guías de diseño, listas de precios, imagen corporativa o instrucciones grabadas por voz.

Grabar voz

• Pulsa el botón del micrófono para grabar instrucciones por voz. Pulsa de nuevo para detener.
• El audio se transcribe con Whisper y el texto aparece en el campo de mensaje, listo para enviar o editar.
• El coste de Whisper (~$0.006/min) se descuenta de los créditos del proyecto.

Envío

• Enter envía; Shift+Enter hace salto de línea.
• El botón ⟨ Chat de la cabecera colapsa/expande la columna del chat.

El editor visual

Sobre la preview hay dos modos: Seleccionar y Navegar.

• Seleccionar: haz click en cualquier bloque del sitio para seleccionarlo. Se abre el panel de propiedades a la derecha.
• Navegar: la web se comporta como para un visitante normal (los enlaces funcionan, los menús abren, etc.).

Panel de propiedades

• Texto: edita el texto del bloque; se refleja en vivo en la preview. También puedes hacer doble click sobre el texto en la propia preview y editarlo ahí — ambos campos quedan sincronizados.
• Estilo: color de texto y fondo, tamaño, fuente, peso, alineación, padding, margin, bordes, sombra… Los cambios se previsualizan en vivo y solo se aplican al pulsar Guardar cambios.
• Miga de pan (breadcrumb): arriba del panel; permite subir al bloque padre (por ejemplo de un texto a toda la sección).
• Operaciones: duplicar, eliminar o insertar bloques nuevos antes/después del seleccionado.
• El botón ⟩ de la esquina colapsa el panel; la tira lateral con ⟨ lo reabre.

Preview: rutas, dispositivos y pantalla completa

• Campo de ruta: escribe la página a editar (p. ej. /contacto) y pulsa Enter. Al hacer click en el campo se despliegan las páginas conocidas del sitio — elige una y navega directo. El botón ⌂ vuelve a la portada.
• Recargar: vuelve a descargar la página (útil tras publicar un cambio).
• Móvil 390 / Tablet 768 / Escritorio: simula el ancho de cada dispositivo para revisar el diseño responsive.
• ⛶ Pantalla completa: muestra la preview a pantalla completa para previsualizar el sitio; se sale con Esc.

«Revisar antes de aplicar»

Interruptor de seguridad para que la IA no publique nada sin tu aprobación.

• Apagado (por defecto): los cambios que pides en el chat se aplican y publican directamente.
• Encendido: la IA prepara el cambio y lo deja como propuesta. El botón Cambios pendientes abre el diff (rojo = se quita, verde = se añade) y ahí decides: aprobar (se publica) o descartar (no se toca nada).
• La preferencia se recuerda en tu navegador.

Recomendado cuando editas una web en producción y quieres ver exactamente qué se va a tocar antes de que sea visible.

«Modo estático»

Afecta solo a la preview, nunca a la web real. Algunas webs con mucho JavaScript re-renderizan la página y «pisan» la selección de bloques o revierten los cambios en vivo. El modo estático quita los scripts del sitio en la preview (el diseño se conserva) para que la edición sea estable.

• En sitios tipo SPA (React/Vue) no hace falta: la preview congela sola la página tras cargarla para que la edición sea estable.
• Actívalo si al seleccionar un bloque la selección «salta» o los cambios en vivo desaparecen solos.
• Contrapartida: menús interactivos, carruseles y demás JS no funcionan en la preview (en la web real sí).

Medios (imagen, vídeo, voz, música)

El botón Medios abre el generador de contenido multimedia con IA:

• Imagen / Vídeo / Voz / Música: describe lo que quieres y pulsa Generar (o Ctrl+Enter). La generación puede tardar un par de minutos según el modelo.
• Limpiar: pega la URL de un audio y se procesará con CleanVoice (reducción de ruido, normalización, studio sound). No corta contenido.
• Cada resultado queda en el historial con su coste. Desde ahí puedes Copiar URL o mandarla Al chat para pedirle a la IA que la use en la web (p. ej. «pon esta imagen en el hero»).
• Generar medios consume créditos del proyecto (ver siguiente sección).

Créditos y saldo

• Cada proyecto tiene un saldo en USD (visible arriba a la derecha) que se consume con cada edición de la IA y cada generación de medios.
• Con saldo en cero, las ediciones quedan bloqueadas hasta recargar. Los planes mensuales recargan solos el día de renovación.
• En la sección de créditos puedes ver el historial de movimientos y recargar.

Configuración del proyecto

El botón ⚙ abre los ajustes del proyecto:

• Instrucciones personalizadas: reglas que la IA respeta siempre en este proyecto (tono, colores de marca, cosas que no debe tocar…).
• Metadatos: título del sitio, descripción, idioma, favicon, imagen para compartir (OG).
• Diseño: colores y fuentes de la marca.
• Autodetectar del sitio: rellena todo lo posible leyendo la web publicada; los campos que cambia se resaltan en azul.
• Modelos de medios: qué modelo usar por defecto para imagen, vídeo, voz, música y limpieza de audio.
• Estado del despliegue: arriba del todo, cómo llega este proyecto a producción y qué commit está sirviendo ahora mismo el sitio, comparado con el último que subió la IA. Si no coinciden, algo se quedó por el camino.

Historial y deshacer

• El botón Historial lista las ediciones que ha hecho el agente en el proyecto.
• Desde ahí puedes deshacer una edición concreta si el resultado no te convence.
• Tras publicar, la barra de estado indica el progreso del deploy; la preview se recarga sola cuando el sitio ya sirve la versión nueva.

¿Dudas o algo que no cuadra? Escríbelo directamente en el chat del editor — la IA también puede ayudarte a usar la propia herramienta.