Guía del editor

Crear un proyecto

Desde el dashboard (/dashboard) el botón Nuevo proyecto abre un asistente de 6 pasos. Respondes, la IA se encarga del resto. Puedes cerrar la ventana en cualquier momento: la generación sigue en segundo plano y te avisa al terminar.

Paso 1 · Tu negocio

• Nombre del negocio (obligatorio).
• Industria: restaurante, tienda, agencia, consultoría, salud, educación, tecnología, inmobiliaria, creativo, sin ánimo de lucro u otro. Si eliges otro, aparece un campo para describir el sector.
• Descripción (opcional) y URL de referencia (opcional).
• Monolingüe o multi‑idioma. Si activas multi‑idioma, eliges un idioma principal y al menos un idioma adicional entre español, inglés, portugués, francés, alemán e italiano.
• Sorpréndeme: atajo que salta al paso 6 con decisiones predeterminadas.

Paso 2 · Estilo visual

Seis presets listos: modern, corporate, creative, elegant, tech, natural. Cada uno trae su propia paleta y tipografía de muestra. El modo de color puede ser automático (la IA decide), preset (escoges uno de los seis) o custom (pegas tus HEX).

Si escoges custom verás picker de color primario y acento, más un selector de tipografía para títulos y cuerpo entre 16 fuentes sans‑serif, serif y display (Inter, Poppins, Playfair Display, Space Grotesk, etc.).

Paso 3 · Estructura

• Tipo de menú: simple, mega o hamburguesa.
• Tipo de footer: minimalista, estándar, completo o con newsletter.
• Secciones del home (arrastrables y reordenables): hero, servicios, sobre nosotros, testimonios, galería, stats, CTA, blog, FAQ, contacto. Hay un botón Recomendado que rellena una combinación probada para tu industria.

Paso 4 · Contenido

Cinco tonos de comunicación: profesional, casual, moderno, elegante, personal. Cada uno muestra un ejemplo de texto real para que sepas qué esperar. Debajo puedes añadir email, teléfono, dirección y enlaces a Facebook, Instagram, Twitter/X, LinkedIn, YouTube y TikTok.

Paso 5 · Imágenes

Dos caminos:

• Placeholders (recomendado): usa imágenes de stock libres.
• Subir imágenes propias: hasta 6 archivos, máximo 5 MB cada uno. Formatos aceptados: image/jpeg, image/png, image/webp y image/svg+xml.

En ambos casos puedes subir tu logo aparte.

Paso 6 · Revisar y crear

Un resumen con todas las decisiones agrupadas por bloques, botones Editar para volver a cada paso y un wireframe conceptual que previsualiza la estructura. Al pulsar Crear mi sitio web arranca la generación en cuatro fases:

1. Sistema visual (tokens de color y tipografía).
2. Home (secciones con contenido personalizado).
3. Auditoría de calidad (accesibilidad y contrastes).
4. Idiomas (si activaste multi‑idioma).

Anatomía del editor

Al abrir un proyecto (/editor/:projectId) ves cinco zonas:

1. Cabecera (arriba): breadcrumb del proyecto y página actual, selector de viewport, compartir, campana de notificaciones, estado de Git y botón Publicar.
2. Barra de herramientas (izquierda en desktop, botón flotante en móvil): 14 herramientas + Cola y Reportar bug al final.
3. Vista previa (centro): iframe responsive que se refresca automáticamente (morph DOM) cuando la IA termina un cambio.
4. Chat (abajo‑centro): textarea con opciones de envío, adjuntos y barra de modos.
5. Panel flotante de herramienta (derecha, cuando abres una tool): ancho fijo de 380 px, cerrable con Esc.

La vista previa es un iframe servido desde el backend con un script inyectado (inspector.js) que intercepta clics y hover. Cuando la IA edita archivos, el contenedor recibe un morph DOM (librería Idiomorph) para actualizar la página sin perder scroll ni focus.

Modos de interacción

La barra de modos está junto al chat. Cinco botones + un extra para el árbol de archivos. El modo se guarda en localStorage (clave speaksite_editor_mode) y se recupera al volver. Todos los modos quedan deshabilitados mientras la IA está procesando.

Selección en el preview

Cuando haces click en un elemento en modo Seleccionar o Editar, el script intercepta el evento y envía al panel un payload con el selector CSS, el tagName, las clases, el outerHTML, el rectángulo del elemento y cuántos elementos coinciden con ese selector. Verás un badge sobre el chat con una miniatura del elemento (capturada con html2canvas) y la etiqueta HTML.

El badge es verde si el selector es único y ámbar si hay más de un elemento que coincide (en ese caso aparece un icono de advertencia para que revises antes de enviar la instrucción).

Acciones rápidas sobre un elemento

Desde el badge puedes abrir un popover con cuatro acciones. Cada una pre‑rellena el chat con una instrucción lista para enviar:

• Eliminar — siempre disponible.
• Editar — sólo para etiquetas con texto editable (h1‑h6, p, span, a, li, button, label, img).
• Duplicar — siempre disponible.
• Ver código — expande el HTML del elemento en el propio badge.

Edición directa

El modo Editar (Type icon en la barra de modos) abre un panel flotante al hacer click sobre el elemento. El panel se posiciona solo: prefiere abrirse debajo, sube arriba si no hay espacio, se centra vertical si ninguna opción encaja. Al guardar con éxito el elemento parpadea en verde durante 800 ms.

Editar texto

• Editor enriquecido con botones de negrita, cursiva, subrayado, enlace (prompt() para la URL) y borrar formato.
• Se activa automáticamente en las etiquetas que aceptan HTML inline (p, h1‑h6, li, td, th, span, div) si detecta etiquetas HTML dentro.
• Puedes alternar a texto plano con el toggle Rich/Plain.
• Atajos: Ctrl/Cmd + Enter guarda; Escape cancela.

Editar imágenes

• Previsualización lado a lado: imagen actual + nueva.
• Subes por drag‑and‑drop o clic. Formatos: image/jpeg, image/png, image/gif, image/webp, image/svg+xml.
• Campo alt (texto alternativo para accesibilidad).
• Botón Delete: elimina la referencia en el código (el archivo permanece en Medios).

Editar enlaces

• Campos: texto del enlace, URL (acepta rutas internas tipo /contacto o absolutas https://…) y abrir en nueva pestaña (toggle).
• El botón Save se activa sólo si hay cambios y tanto texto como URL están presentes.

Árbol de archivos

Al lado de los 5 modos hay un botón independiente (FolderTree) que abre el árbol de archivos del proyecto encima de la preview. En desktop aparece como sidebar de 320 px; en móvil ocupa toda la pantalla. Haciendo clic en un archivo ves su contenido (solo lectura, con resaltado de sintaxis). Es útil para entender qué está tocando la IA o localizar un layout compartido.

Escribir una instrucción

El textarea del chat se expande solo desde 44‑48 px hasta 120 px como máximo. A partir de ahí aparece scroll. Teclas:

• Enter envía.
• Shift + Enter inserta salto de línea.

El placeholder cambia según lo que tengas seleccionado:

• Sin selección: «Describe los cambios que quieres hacer…».
• Un elemento seleccionado: «Cambios para <h1>…» (con su tagName real).
• Varios elementos: «Cambios para N elementos seleccionados…».
• Área dibujada: «Describe los cambios para el área marcada…».
• Respondiendo a una query previa: «Describe la corrección o ajuste…» y aparece un badge púrpura «Respondiendo a: …» con el mensaje original que puedes cerrar con la X.

Imágenes y medios

Tres formas de adjuntar imágenes o vídeos al mensaje:

1. Clip (icono Paperclip): abre el selector de archivos.
2. Pegar con Ctrl/Cmd + V si el portapapeles tiene una imagen.
3. Arrastrar al área del chat: aparece un overlay azul «Suelta las imágenes aquí».

El input acepta image/* + video/mp4, video/webm, video/ogg. El panel valida tamaños: 4 MB por imagen y 25 MB por vídeo (al subir desde la biblioteca de medios la comprobación es idéntica).

Los adjuntos aparecen como miniaturas de 48‑56 px sobre el chat. Click amplía, X roja al hover elimina. Los subidos desde la biblioteca de medios salen con un borde azul; los nuevos (staged) con borde gris.

Adjuntar desde la biblioteca

En la herramienta Medios, activa el modo selección (toggle de casillas), marca los archivos y pulsa Adjuntar al prompt. Los archivos viajan al chat sin duplicarse en disco.

Mensajes de voz

El mensaje de voz está ligado al modo Dibujar. Mientras dibujas un área, un botón del micrófono permite grabar y la voz se transcribe con la Web Speech API (idioma por defecto es-ES). El texto aparece en una caja flotante junto al dibujo y se envía junto al mensaje con un badge púrpura «Voz».

Seleccionar en la preview

Con el modo Seleccionar activo:

• Hover: resalta el elemento con un overlay azul.
• Click: lo fija con overlay verde y un badge en el chat.
• Alt o Shift + click: añade al grupo (overlay púrpura con número). Si pulsas sobre uno ya marcado, lo quita.
• Escape: limpia toda la selección.

El selector CSS se construye por prioridad: primero ID, después atributos data-*, atributos únicos (name, type, role, href, src, alt), jerarquía con clases; como último recurso :nth-child. El panel muestra cuántos elementos coinciden.

Modo dibujar

Al activar el modo se superpone un canvas sobre la vista previa. Arrastras para dibujar strokes amarillos (40 % de opacidad, 20 px de grosor). Cuando sueltas:

1. Se calcula el rectángulo envolvente.
2. Se toma una captura completa con html2canvas.
3. Se muestrean puntos dentro del área y se preguntan al iframe qué elementos HTML hay debajo.
4. Todo eso (image, boundingBox, detectedElements, voiceTranscript) se adjunta al próximo mensaje.

Puedes dibujar varios trazos seguidos antes de confirmar. Los botones son Limpiar, Cancelar y Confirmar.

Opciones de envío

Bajo el chat hay un botón Opciones de envío (SlidersHorizontal) que despliega cuatro toggles. Cada uno aparece solo si tiene sentido en tu proyecto:

Aplicar en todos los idiomas

Icono Languages. Visible cuando la página actual tiene traducciones enlazadas. Tras aplicar el cambio en el idioma activo, la IA traduce ese mismo resultado al resto de idiomas de la página. La preferencia se guarda en localStorage con la clave applyToAllLanguages.

Junto al toggle verás una estimación «+N traducciones, ~Nx tokens». Tras completar la query, el historial muestra cuántas traducciones quedaron aplicadas con el patrón «N/M idiomas actualizados».

Multi‑página

Icono Layers. Visible cuando el proyecto tiene más de una página. Sin activar, la IA sólo puede leer y escribir en la página actual y su controlador. Con multi‑página:

• Puede leer cualquier página como referencia.
• Puede modificar varias a la vez si la instrucción lo requiere.
• Puede tocar layouts compartidos, componentes y estilos globales.
• Puede tocar rutas y configuración del proyecto.

El toggle no persiste entre sesiones (se reinicia a off cada vez que abres el editor). La etiqueta bajo el toggle muestra el número de páginas incluidas en el contexto.

Embeber formulario

Icono ClipboardList. Visible cuando el proyecto tiene al menos un formulario creado en la herramienta Formularios. Es un select con los formularios disponibles. Al elegir uno, el payload al backend incluye embedFormId; la IA lee los campos del formulario y genera el HTML de inserción en la posición que le pidas.

Buscar en internet

Icono Globe. Siempre disponible. Activa que la IA navegue URLs y consulte la web antes de responder. Útil para incorporar datos actuales (horarios, precios de referencia, tendencias SEO). Consume más créditos.

Buscar contenido

Primera herramienta del toolbar (icono TextSearch). Es una búsqueda de texto literal en todas las páginas y posts del proyecto.

• Mínimo: 2 caracteres. Debounce de 300 ms.
• Resultados agrupados en dos secciones: Páginas y Posts de blog.
• Cada resultado muestra título, idioma (si aplica), un snippet de contexto con el match resaltado en amarillo y ruta.
• Click navega a esa página o post dentro del editor (y cambia el idioma de la preview si corresponde).

Páginas

Centro de control del sitio. Tres pestañas: Listado, Pendientes y Redirecciones.

Listado

Con paginación (10 por página). Filtros por estado (todas, publicadas, borradores, privadas) y, si hay multi‑idioma, por traducción (todas, completas, incompletas). Búsqueda por nombre/slug con debounce de 300 ms.

Cada fila muestra:

• Título y ruta.
• Badge de estado (Publicada / Borrador / Privada). En proyectos sin multi‑idioma, click en el badge alterna entre Publicada ↔ Borrador.
• Badge 404 si el controlador no existe.
• Badge de idioma en proyectos multi‑idioma.
• Círculos azules con códigos de los idiomas disponibles en la traducción.
• Badge Falta traducción si hay idiomas sin completar.
• Badge Traduciendo con animación si hay una query en cola.

Acciones en cada fila: Ver (abre la preview en esa página), Historial (solo si hay repo Git vinculado), Traducir (solo multi‑idioma), Editar metadatos y Eliminar (con confirmación). En proyectos multi‑idioma se muestra una tarjeta agrupada por translation_group y los idiomas faltantes aparecen como botones para generar la traducción.

Pendientes

Muestra tres cosas:

1. Enlaces huérfanos: enlaces del menú/header/footer/contenido que apuntan a rutas que no existen. Para cada uno: texto del enlace, URL, ubicación (header, footer o content) con número de línea, y un botón + que abre el generador de página rellenado con el título y slug sugeridos.
2. Páginas 404: entradas de configuración cuyo controlador/vista no existe. Cada una tiene un botón Eliminar que las quita del config.json.
3. Plan del planificador: si usaste el planificador de páginas, los items propuestos aparecen aquí con prioridad (high/medium/low) y se pueden aceptar, descartar o editar antes de generar.

Redirecciones

Gestiona redirecciones 301 (permanente, badge verde) y 302 (temporal, badge amarillo). Cada regla tiene origen (slug o ruta interna) y destino (ruta interna o URL externa). Crear/editar/eliminar desde el propio panel. No hay detección automática: las añades tú manualmente.

Crear una página

Dos modos seleccionables con botones en la parte superior del diálogo.

Modo simple

• Título, slug y ruta (auto‑generados desde el título, editables).
• Idiomas destino (si multi‑idioma).
• Estado inicial: siempre Borrador.

Modo IA

Además de los campos anteriores:

• Template: home, landing, content, contact, gallery, blog, portfolio, custom o error_404. Si eliges custom, aparece un campo para describir el tipo («Política de privacidad», «FAQ», «Precios»). El template error_404 fuerza slug error-404 y ruta /error-404, y desactiva la búsqueda web.
• Imágenes de referencia: hasta 5, drag‑and‑drop. La IA las usa como guía visual.
• Logo (opcional): si no hay uno global, se usa en esta página.
• Contexto: textarea libre con detalles del contenido.
• Buscar en internet: toggle + campo opcional tema de investigación.
• Contexto personalizado: aparece si tienes archivos subidos en Configuración › Contexto para la IA.

En proyectos multi‑idioma, al generar en varios idiomas cada página toma un translation_group UUID común y un sufijo de slug -<lang> para las no‑default.

Editar metadatos

Título, slug (auto‑formatea a a‑z0‑9‑), ruta, estado y un bloque SEO con:

• Título SEO (contador 70 caracteres).
• Meta description (contador 160).
• Keywords.
• Robots (index follow, noindex follow, index nofollow, noindex nofollow).
• Canonical URL con sugerencia auto.
• OG Image con botón Usar detectada (busca la primera imagen de la página si no hay OG configurada).

Historial de una página

Disponible si el proyecto tiene repositorio Git. Tres vistas: Lista de commits (fecha, autor, mensaje, SHA), Preview del archivo en un commit concreto, y Diff entre ese commit y HEAD. El botón Restaurar crea un backup automático antes de sobrescribir.

Traducir una página

Modal Traducir con IA. Muestra idioma actual de la página, título y ruta, y un selector con los idiomas destino disponibles (los que no son el actual y no tienen traducción ya). Al enviar se crea una query en cola que puedes seguir desde Cola de procesos.

Blog

Si el proyecto no tiene blog activado aún, ves un banner con los pasos que se van a ejecutar: crear tabla de posts, página índice, rutas, feed RSS y categorías en todos los idiomas. Un único clic lo activa.

Posts

Listado con filtros por estado (publicado, borrador, programado, privado), categoría y traducción (en multi‑idioma). Cada post muestra imagen destacada, título, extracto, categoría, tiempo de lectura, fecha y tags.

Acciones por post: ver, traducir (multi‑idioma), editar, eliminar.

Crear un post

Dos modos: IA y manual.

Modo IA

• Tema (obligatorio): descripción del contenido a generar.
• Tono: profesional, casual, técnico o creativo.
• Extensión: corto, medio o largo.
• Categoría, imagen destacada, idiomas destino.
• Buscar en internet y contexto personalizado (mismos toggles que en páginas).

Modo manual

Campos: título, slug, extracto, contenido (textarea HTML), imagen destacada, estado, categoría, tags y un bloque SEO colapsable idéntico al de páginas (con contadores para seo.title y meta description).

Categorías

Crear, editar, eliminar, traducir a otros idiomas. Muestra cuántos posts hay en cada una.

Formularios

Cuatro pestañas: Formularios, Leads, SMTP y CRM.

Formularios

Listado con nombre, slug, número de campos y de envíos, badges de estado y de CRM/auto‑detectado. Por formulario: editar, ver en página (si fue auto‑detectado), previsualizar, copiar código embed, insertar con IA, duplicar, activar/desactivar, eliminar.

Crear un formulario

Puedes crearlo desde cero, con IA (describes qué campos necesitas y los genera) o detectarlo automáticamente si el HTML ya tiene un <form>.

Cada campo tiene tipo, label, name, required, placeholder, y ciertos tipos admiten options. Tipos soportados:

Ajustes del formulario: mensaje de éxito, URL de redirección tras envío, lista de emails para notificaciones, texto del botón, honeypot anti‑spam (activado por defecto) y tipo de visualización: inline o popup.

Popups

Cuatro triggers: timer (retraso en segundos, 0‑300), scroll (porcentaje 0‑100), exit_intent (el cursor sale del viewport) o button (CSS selector que abre el popup). Además: color de overlay, cerrar al hacer click fuera, botón de cierre visible, ancho máximo, recordar descartados (y cuántas horas, 1‑720).

Leads

Bandeja de envíos. Filtro por formulario, indicador de no leído (punto púrpura), origen de tráfico (badge con UTMs), marca de spam. Clic en una fila abre el detalle con todos los campos enviados, tracking, IP, user agent, referrer y UTMs. Exportación a CSV/XLSX del formulario filtrado.

SMTP

Configura tu propio servidor de correo para las notificaciones a los emails configurados en el formulario. Campos: host, puerto (por defecto 587), usuario, contraseña (se guarda cifrada), cifrado (tls, ssl o none), dirección y nombre del remitente. Botón de Test envía un correo de prueba.

CRM

En dos niveles:

• Credenciales globales: eliges proveedor (HubSpot, Pipedrive, y conectores personalizados), rellenas sus credenciales y pruebas la conexión.
• Por formulario: activas el envío al CRM, eliges proveedor, mapeas los campos del formulario a los campos del CRM (con sugerencia por IA) y decides si incluir UTMs y tracking. El botón de test manda un payload ficticio y muestra tres paneles: datos generados, payload enviado y respuesta del CRM.

Idiomas

Si el proyecto no tiene multi‑idioma activado ves un placeholder con un botón Detectar estructura existente que analiza las carpetas del proyecto (/es/, /en/, etc.) y el parámetro ?lang= para auto‑configurar.

Con multi‑idioma activado, la herramienta agrupa cinco bloques:

Estrategia de URLs

• Prefijo: /es/pagina, /en/page.
• Carpeta: misma estructura, distinto interno.
• Parámetro: /pagina?lang=es.

Cambiar aquí actualiza todas las URLs del sitio.

Lista de idiomas

Por idioma: bandera, nombre, badge Principal, contador de páginas (y progreso si hay traducciones pendientes). Acciones al hover: marcar como principal (con aviso de que se crearán redirecciones 301 automáticas) y eliminar (con confirmación; borra todas las páginas en ese idioma).

Traducir con IA

Modal con selector de idioma destino y dos botones: Traducir HOME y Traducir TODAS. La primera opción traduce sólo la página de inicio; la segunda encola una query por página y puedes seguir el progreso en la Cola de procesos.

Selector de idiomas en el sitio

Genera con IA un componente para header o footer (banderas + dropdown). Eliges estilo y posición, la IA produce el HTML/JS.

Reparar / Re‑detectar

Dos acciones adicionales:

• Reparar sistema de traducción: analiza el proyecto y reescribe archivos de configuración y rutas si hay inconsistencias. Muestra etapas (en cola → analizando → iniciando → completado) y listado de archivos creados/modificados.
• Re‑detectar traducciones (hreflang): relee los tags <link rel="alternate" hreflang="…"> y reagrupa páginas por traducción.

SEO

Cinco pestañas: Metadatos, Análisis, Enlaces, Schema y Valores por defecto.

Metadatos (página actual)

Todos los campos guardan con auto‑save (debounce de 1 s). Contadores de color:

• Título: verde ≤ 50, amarillo ≤ 60, rojo > 60. maxLength=70.
• Descripción: verde ≤ 140, amarillo ≤ 160, rojo > 160. maxLength=200.
• Keywords, Robots (mismas cuatro combinaciones), Twitter Card (heredar, summary, summary_large_image), OG Image (picker o URL externa) y Canonical.

Botones Generar SEO y, si la página tiene traducciones, Generar en todos los idiomas (encola una query por idioma). La vista previa reproduce un resultado de Google con título, URL y descripción.

Análisis

Palabra clave objetivo y puntuación 0‑100. El checklist semaforizado revisa 13 factores:

1. Título presente y longitud 30‑60.
2. Meta description presente y 120‑160.
3. H1 presente y único.
4. Jerarquía de encabezados (no saltarse niveles).
5. Texto alternativo en todas las imágenes.
6. Presencia de enlaces internos.
7. Presencia de enlaces externos.
8. Longitud del contenido (≥ 300 palabras).
9. Palabra clave en el título.
10. Palabra clave en la descripción.
11. Palabra clave en el H1.
12. Densidad de palabra clave entre 0,5 % y 2,5 %.
13. Imagen Open Graph definida.

Debajo, la legibilidad calculada con Flesch Reading Ease: fórmula, promedio de palabras por frase y promedio de sílabas por palabra.

Enlaces

Tres vistas:

• Página actual: entrantes (desde otras páginas o desde el layout compartido) y salientes. Aviso en amarillo si la página no tiene ningún entrante y no es la home.
• Vista global: totales (páginas, enlaces, promedio por página), páginas huérfanas, páginas sin salientes y top de más enlazadas.
• Externos: URLs externas en la página actual, desde el layout compartido, y (opcional) desde otras páginas.

Schema (JSON‑LD)

Detecta los schemas ya inyectados en la página actual y te deja editarlos en un textarea con validación JSON. Puedes añadir nuevos schemas en dos modos:

• IA: eliges tipo y describes; la IA lo genera.
• Manual: pegas el JSON‑LD. Requiere al menos @context o @type.

Tipos ofrecidos: FAQPage, Organization, LocalBusiness, BreadcrumbList, Product, Service, Article, WebSite.

Valores por defecto

Fallbacks a nivel proyecto cuando una página no tiene metadatos propios:

• Sufijo de título (p. ej. « · Mi Sitio»).
• og:type (website, article, product, profile).
• og:site_name.
• twitter:card (summary, summary_large_image).

Medios

Biblioteca de imágenes y vídeos del proyecto. Dos vistas: grid y lista. Ordenación por nombre (A‑Z / Z‑A), tamaño, tipo o fecha (ascendente/descendente).

Formatos aceptados:

• Imágenes: JPG, PNG, GIF, WebP, AVIF, SVG. Máximo 4 MB.
• Vídeos: MP4, WebM, Ogg. Máximo 25 MB.

Subir por drag‑and‑drop, clic en la zona o selección múltiple. Por archivo: miniatura, tamaño, tipo, dimensiones (cuando aplica), copiar ruta /public/assets/<subdir>/<filename>, descargar o eliminar. Hay un modo selección para marcar varios y adjuntarlos al prompt del chat.

La optimización (conversión a WebP) se hace automáticamente al publicar.

Configuración

Ocho secciones, en este orden: General, Dominio, SEO, Velocidad, Cookies, Contexto para la IA, Variables de entorno, Dependencias. Todas usan auto‑save con debounce de 1 s donde aplica.

General

Favicon (formatos .ico, .png, .svg con drag‑and‑drop), título, descripción, idioma del sitio (español, inglés, francés, alemán, portugués, italiano) y URL base.

Dominio

Ver la sección completa en Dominios. También hay aquí un toggle Apache/LiteSpeed para ajustar compatibilidad del .htaccess generado.

SEO

• Noindex global: si activado, todo el sitio se sirve con robots: noindex. Útil mientras se construye.
• Sitemap XML: toggle + link a /sitemap.xml.
• robots.txt: editor con modo visual y modo avanzado.

Velocidad

Un toggle: Tailwind por CDN (más rápido de desarrollar, peor rendimiento) o compilado (más ligero en producción).

Cookies

Tres tipos de banner:

• Informativo: aviso simple.
• GDPR básico: aceptar / rechazar.
• GDPR con categorías: analíticas, marketing, estrictamente necesarias.

El texto se genera con IA y se ajusta al idioma del sitio. Luego un toggle activa/desactiva el banner y un botón permite regenerar.

Contexto para la IA

Subes archivos .txt/.md o pegas notas con datos de marca: tono, claims legales, precios, nombres propios. La IA lo lee en cada generación. Tiene un indicador de uso (caracteres vs. límite) con colores de advertencia a partir del 70 % y 90 %. El máximo está entre 5 archivos o el límite de caracteres según el plan.

Variables de entorno

Editor del .env del proyecto. Dos vistas: visual (lista de claves con eliminar) y raw (textarea). Al añadir pulsas el botón + y se inserta una línea NEW_VAR= lista para rellenar. El .env no se sincroniza con GitHub.

Dependencias (Composer)

Solo aparece si el proyecto tiene composer.json. Muestra tres badges (composer.json, vendor/, composer.lock) y dos botones: Install (destacado si falta vendor/) y Update. El último output del comando queda expandible.

Estilos

Cuatro pestañas: IA, Colores, Tipografía, Preview.

IA

Describe tu negocio o pulsa para analizar la página actual. La IA devuelve una paleta sugerida, dos tipografías (títulos y cuerpo) y un párrafo explicando por qué ha elegido cada cosa. El botón Aplicar y generar estilos guarda la decisión y regenera los tokens globales. Hay cuatro ejemplos rápidos (cafetería, startup tech, yoga, agencia creativa) que rellenan el prompt con una descripción lista.

Colores

Trece tokens agrupados:

• Principales: primary, primary_light, primary_dark, secondary, accent.
• Fondos: background, background_alt.
• Texto: foreground, foreground_muted.
• Estados: success, warning, error.

Cada uno con picker HEX + rueda de colores. Los cambios se envían al iframe en vivo (morph parcial) para ver el efecto sin publicar.

Tipografía

Fuente de títulos y fuente de cuerpo (con pesos 400‑700 por defecto), tamaño base (14‑18 px) y opción para subir tipografías propias. Las fuentes provienen de Google Fonts, del sistema o personalizadas. Ejemplo en vivo bajo los selectores.

Preview

Visualiza el estilo aplicado a una maqueta de viewport antes de guardar.

Google Tag Manager

Cinco pestañas: Status, Credentials, Resources, AI, Settings.

Badge de estado en la cabecera: connected (verde), error (rojo), unconfigured (gris), disconnected (amarillo).

Credentials

Subes un JSON de cuenta de servicio de Google. Se valida que sea JSON correcto y tenga type: "service_account". Luego introduces Account ID, Container ID, Workspace ID (por defecto 1) y opcionalmente el Measurement ID de GA4 (G-XXXXXXXXXX). Seis pasos de ayuda al pie.

Resources

Lista variables, triggers y tags actuales con búsqueda y tipos mapeados (v = Data Layer, c = Constant, jsm = JavaScript, k = Cookie, aev = Auto Event; triggers como pageview, click, linkClick, customEvent, formSubmission, scrollDepth, gaawe, gaawc). Cada recurso admite eliminar al hover.

AI

Describes el objetivo («trackear clic en comprar y enviar a GA4») y la IA propone una estructura de recursos. Hay seis ejemplos predefinidos para rellenar el prompt. El preview muestra el razonamiento y el detalle de variables, triggers y tags. El botón Apply sólo propone los recursos: los crea el usuario confirmando, no se escriben automáticamente en GTM sin consentimiento.

Settings

Tres toggles (auto‑inyectar, inyectar en head, inyectar en body) y los snippets de head y body listos para copiar. Hay cuatro pasos de instalación manual si prefieres meterlos a mano.

Google Ads

Conecta tu cuenta por Customer ID (formato 1234567890 o 123-456-7890) vía OAuth. El resumen de 30 días muestra gasto, conversiones, clics, impresiones, CTR, CPC y campañas activas. Hay botón de refresh.

Listado de campañas (máx. 5 primeras con un «+ N más»): para cada una, pausar/activar y dos acciones de IA, Analyze (análisis de la campaña) y Optimize (recomendaciones concretas, priorizadas en rojo/ámbar/azul, con mejora estimada).

Reportes disponibles: Performance y Audit. Listado de reportes recientes con fecha.

Crear campaña con IA: descripción de la campaña, URL del sitio y presupuesto diario mínimo 1 USD. La IA devuelve nombres candidatos, grupos de anuncios (con número de keywords), estimaciones de impresiones y clics, y CTR esperado. La ejecución real la haces tú con esa estructura propuesta.

Analítica

Tres bloques (GA4, GTM en modo rápido, Microsoft Clarity). Cada uno con toggle de activación, campo de ID y validación:

• GA4: Measurement ID, formato G-[A-Z0-9]+.
• GTM: Container ID, formato GTM-[A-Z0-9]+.
• Microsoft Clarity: Project ID, formato [a-z0-9]+.

Si el ID está vacío con el toggle activado, el botón Guardar se deshabilita y aparece un error de formato. Al guardar, los scripts se inyectan en todas las páginas al publicar.

Asistente de contenido

Chat aparte del principal, pensado para preguntas sobre la página actual. Dos modos que se alternan con el toggle Pencil en la cabecera:

• Análisis (por defecto): responde sin editar archivos. Se activa también el toggle Globe para búsqueda web.
• Edición: ejecuta cambios de verdad y devuelve una tarjeta resumen con los archivos modificados (creados en verde, actualizados en azul, eliminados en rojo) y el número de líneas cambiadas.

Incluye cinco acciones rápidas visibles sólo en el primer mensaje: Analizar SEO, Revisar accesibilidad, Encontrar problemas, Sugerir mejoras, Revisar responsive.

La conversación persiste en localStorage (clave cq-history-<projectId>, últimos 30 mensajes). Al responder en modo edición, el chat pasa los últimos intercambios como contexto para que puedas hacer follow‑ups («ahora ponlo azul», «vuelve atrás»).

Las etapas de carga cuando edita son cuatro, con delays crecientes: Leyendo archivos (0 s), Realizando cambios (2 s), Aplicando cambios (8 s), Validando código (20 s).

Agentes

Dos agentes activos en la interfaz:

• Auditoría de página: repasa enlaces, imágenes y botones en una sola pasada.
• Consistencia de diseño: ajusta clases Tailwind del resto del sitio para que se parezca al home.

Los resultados se agrupan por target (página, layout, post). Cada target puede tener issues de tres severidades: críticos (rojo), warnings (ámbar), info (azul). Además la UI muestra fixes aplicados y targets fallidos.

La selección concreta de objetivos la decide el backend a partir del tipo de agente y del proyecto. Los resultados quedan cacheados en localStorage (agents-<projectId>-<agentId>) para no perderlos al recargar.

Cola de procesos

Botón al final del toolbar (ListTodo). Tres pestañas: En curso, Pendientes, Completadas (que incluye también error y cancelled). El contador del botón es processing.length + pending.length; cuando es igual o superior a 10 se muestra como 9+.

Cada query muestra:

• Mensaje original (truncado a dos líneas, expandible si supera 50 caracteres).
• Badges contextuales: Languages con el progreso N/M si hubo traducciones, Files si fue multi‑página, Globe si hubo web search.
• Elemento o elementos seleccionados en ese momento.
• Miniaturas de imágenes adjuntas.
• Metadatos: página, duración, usuario, timestamp, número de follow‑ups.
• Etapa actual si está procesándose.
• Resumen de cambios al completar: archivos creados/actualizados/eliminados con conteo de líneas.

Acciones según estado:

El polling del estado se hace cada 3 segundos y se detiene solo cuando no queda ninguna query activa. El botón Flag abre un diálogo para crear un ticket al equipo con el prompt exacto, el resultado y el contexto.

Reportar un bug

Botón debajo de la cola (icono Bug). Diálogo con tres campos:

• Título (obligatorio, máx 255).
• Descripción (obligatoria, máx 5000).
• Screenshot: drag‑and‑drop, clic o pegar con Ctrl/Cmd + V. Acepta JPEG/JPG/PNG/GIF/WEBP.

Bajo los campos hay una sección colapsable Contexto automático que muestra lo que se adjunta sin que hagas nada: URL actual, user agent, viewport (ancho x alto), ID y slug del proyecto, y timestamp ISO.

Cabecera del editor

De izquierda a derecha:

• Breadcrumb: nombre del proyecto + página actual. Click en el proyecto vuelve al dashboard.
• Selector de viewport: presets Mobile (375), Tablet (768), Desktop (1280), Maximize. Muestra el ancho actual en píxeles al lado del icono.
• Super Admin Badge: sólo visible para superadmins; abre un dropdown con toggles para activar la reparación automática de código del panel o del proyecto.
• Compartir: diálogo para invitar colaboradores por email con rol editor o viewer.
• Campana de notificaciones: contador de invitaciones pendientes (máx 9+). El popover lista cada invitación con proyecto, invitante y rol, y botones Aceptar/Rechazar.
• Git status: rama actual, commits por enviar (naranja) y por recibir (ámbar). Se actualiza cada 30 s.
• Publicar: ver sección siguiente.

En móvil, parte de la cabecera se colapsa en un botón MoreVertical (MobileHeaderMenu) que abre un dropdown con compartir, estado Git y un panel Git full‑screen.

Publicar

El botón principal cambia de texto según el estado:

• Publicar (nunca publicado).
• Publicar cambios (hay cambios sin publicar).
• Republicar (ya publicado y sin cambios).
• Publicado con check verde durante 1‑2 s tras un publish exitoso.

Junto al botón aparecen dos badges según el estado del proyecto:

• En construcción (naranja) si despublicaste.
• Cambios pendientes (naranja) si hay ediciones sin publicar.
• Icono de enlace externo para abrir el sitio en vivo si está publicado.

El desplegable del botón contiene:

1. Copiar enlace (si publicado).
2. Publicar cambios / Republicar.
3. Configurar destino.
4. Despublicar (si publicado).

Destinos

• SpeakSite (por defecto): hosting incluido.
• FTP: requiere plan de pago. Campos: host, puerto, usuario, contraseña (oculto con toggle show/hide), ruta de destino (por defecto /) y SSL/TLS. Botones: Guardar/Verificar, Probar conexión, Eliminar. Antes de publicar por FTP hay que verificar credenciales.

Flujo de publicación

1. Optimización automática de imágenes (conversión a WebP).
2. Publicación. Si es FTP: barra de progreso con archivos subidos, porcentaje, velocidad (MB/s, KB/s, B/s), bytes y nombre del archivo actual. Polling cada 2 s.
3. Al completar: toast verde con resumen de tiempo y archivos.

Historial de versiones

Icono History en la cabecera. Lista las versiones guardadas con fecha, etiqueta (Snapshot previo a publicación vN o una etiqueta manual) y autor. Por versión puedes Restaurar (con confirmación; se crea otro snapshot automático antes) o Eliminar (permanente, con confirmación). Los snapshots se crean solos antes de cada publicación y restauración.

Dominios

Dos contextos distintos:

En Configuración › Dominio

Reservado a planes distintos de free. Puedes añadir un dominio propio y ver el estado: pendiente de verificación (amarillo) o verificado (verde). Mientras está pendiente, la UI muestra los registros DNS a copiar (tipo A o AAAA, nombre @ o www, valor IP, TTL 3600). Cada valor tiene botón de copiar. Cuando el panel detecta propagación, emite el certificado SSL (Let's Encrypt) automáticamente. Si algo falla, hay un botón Generar certificado SSL para reintentar sin recrear el dominio.

Página Dominios (/domains)

Listado de tus dominios comprados con estados (active, pending_payment, expired), expiración y proyecto vinculado. Tres flujos:

• Buscar: dominio + resultado de disponibilidad. Si disponible, precio/año + botón Comprar.
• Comprar: selector de años (1‑5), WHOIS Privacy, formulario de contacto (nombre, apellido, email, teléfono, dirección, ciudad, región, código postal, país) y checkout.
• Transferir: dominio, código EPP/Auth y contacto.

GitHub

Conectar un repo opcional. Con GitHub enlazado, la cabecera muestra la rama activa, commits por enviar/recibir y un panel Git con commit, push, pull y cambio de rama. Las credenciales sensibles, imágenes y archivos temporales no se suben al repo.

Cuenta · Perfil

En /account, la primera sección muestra avatar (inicial sobre gradiente), nombre, email, un badge con el plan actual y dos ajustes principales:

• Idioma del panel: español o inglés (se guarda al vuelo con PUT /user/locale).
• Emails de marketing: toggle de consentimiento.
• Cambiar contraseña: diálogo con contraseña actual, nueva y confirmación. Mínimo 8 caracteres, las dos nuevas deben coincidir.

Cuenta · Plan y créditos

Uso del plan

Tres barras de progreso:

• Queries mensuales: incluye créditos bonus si tienes packs activos.
• Proyectos: usados vs. límite del plan.
• Almacenamiento: en MB o GB según cuánto uses.

Si hay un downgrade programado, aparece un banner ámbar con la fecha efectiva y un botón Cancelar downgrade. Los botones principales son Manage Billing (abre el Customer Portal de Stripe), Resume Subscription y Cancel Subscription.

Planes

Toggle mensual/anual. Una tarjeta por plan, de izquierda a derecha, con precio, lista de features, selector de tier de créditos (estilo Lovable: ajustas la cantidad mensual sin cambiar de plan) y botón de acción:

• Subscribe si no tienes suscripción.
• Change to N credits si es tu plan actual y has movido el tier.
• Upgrade / Downgrade al cambiar a otro plan.
• Pending change cuando el cambio ya está programado.

Packs de créditos

Solo visible si tu plan tiene can_buy_credits = true. Añaden créditos bonus que no se resetean al cambio de mes.

Cuenta · Token MCP

Sección dedicada dentro de /account. El botón Generate crea un token y devuelve una URL del formato https://studio.speaksite.app/mcp/<TOKEN>. La pegas en Claude.ai en Settings › Connectors. A partir de ese momento, Claude.ai puede editar tus proyectos desde cualquier conversación usando el conjunto de herramientas MCP del panel. El token se regenera si cambias tu contraseña. Botones disponibles: Regenerate y Revoke.

Cuenta · Referidos

Un enlace único para compartir. Tres indicadores:

• Total: cuántas personas se registraron con tu link.
• Rewarded: cuántas ya contrataron un plan (y te generaron crédito).
• Créditos acumulados.

Debajo, lista de referidos con estado rewarded (verde) o pending (amarillo).

Uso en móvil

El breakpoint es max-width: 767px. Cambios principales:

• El toolbar se sustituye por un botón flotante (48 × 48 px) en la esquina inferior derecha, encima del chat. Un tap abre una bottom sheet con las 14 herramientas, Cola y Reportar bug en una rejilla de 4 columnas. Se puede cerrar arrastrando hacia abajo.
• El chat ocupa dos filas: barra de modos compacta arriba, input y botón de envío abajo. Respeta el área segura (pb-safe) de iPhone.
• El input del chat fuerza tamaño 16 px para evitar zoom automático en iOS.
• Parte de la cabecera se agrupa en un menú MoreVertical. El ViewportSelector y Git quedan dentro.
• Los paneles grandes (formularios, SEO, etc.) se renderizan como diálogos casi fullscreen (max-w-[95vw], max-h-[85vh]).
• El árbol de archivos entra en modo overlay full‑screen.

Atajos de teclado

¿Falta algo? Abre la cola de procesos y pulsa la bandera en cualquier query para enviar el hilo al equipo, o usa Reportar un bug desde el panel.