Capítulo 3 de 11

Hablar con la IA

El editor: pedirle cambios a la inteligencia artificial y verlos aplicados.

Esta es la pantalla donde pasarás casi todo el tiempo. A la derecha ves tu web tal como va quedando; abajo tienes un cuadro de texto donde le pides los cambios a la inteligencia artificial (a partir de ahora, «la IA») con tus palabras de siempre. No hay que saber programar: se escribe lo que quieres y ella lo hace.

El editor de tu web

Para qué sirve. Es el taller de tu sitio: ves la web, le pides cambios y los compruebas al momento, sin publicar nada hasta que tú digas.

Cómo llegar. Desde el panel de proyectos, haz clic sobre la tarjeta de tu proyecto. Se abre directamente el editor.

Qué hay en pantalla.

• Arriba a la izquierda, la flecha para volver a tus proyectos, el nombre del proyecto y su dirección (/mi-proyecto).
• Los cuatro iconos de pantalla (móvil, tablet, monitor y la flecha doble) cambian el tamaño con el que ves tu web. Al lado se indica el ancho: 100%.
• El interruptor Fácil / Avanzado. Es el control más importante de toda la pantalla y tiene su propio apartado más abajo: la mitad de las herramientas están escondidas detrás de él.
• La barra naranja «Cambios sin publicar» avisa de que lo que estás viendo todavía no lo ve nadie de fuera. Hasta que no pulses Publicar, tu web pública sigue como estaba.
• La franja morada de arriba aparece cuando la IA está trabajando: pone «Preparando solicitud…» con un cronómetro y el número de petición.
• La columna de iconos de la izquierda son las herramientas (páginas, blog, imágenes…). Cuántas ves depende del modo Fácil o Avanzado.
• Abajo del todo, el cuadro de chat y, encima, la barra de modos.

Cuidado con… la barra naranja «Cambios sin publicar». Que lo veas aquí bien no significa que tus visitantes lo vean: eso solo pasa cuando pulsas Publicar.

Modo Fácil y modo Avanzado: dónde está lo que no encuentras

Para qué sirve. El modo Fácil deja a la vista solo lo que usa todo el mundo. El modo Avanzado añade el resto de herramientas. Es la causa número uno de «esto antes estaba aquí y ahora no lo veo».

Cómo llegar. En la cabecera del editor, el par de botones Fácil | Avanzado. Está siempre visible en los dos modos, así que nunca te quedas encerrado en uno.

Qué cambia exactamente.

• En Fácil la barra izquierda tiene cinco cosas: Páginas, Blog, Medios, la Cola de consultas y Reportar bug.
• En Avanzado aparecen además: Buscar, Formularios, Idiomas, SEO, Estilos, GTM, Google Ads, Analytics, Config, Sofi y Agentes. Y en la cabecera se suma Conectar GitHub.
• Lo que no cambia: el cuadro de chat, la vista previa, los cinco modos de la barra inferior, los tamaños de pantalla y el botón Publicar. Todo eso está igual en los dos modos.

Cuidado con… dos cosas. La primera: el modo se guarda en tu cuenta, no en el proyecto, así que si lo cambias aquí lo verás cambiado en todos tus proyectos y la próxima vez que entres. La segunda: si estás siguiendo una instrucción que menciona una herramienta y no la encuentras en la barra, casi seguro que estás en Fácil; pulsa Avanzado antes de dar nada por roto.

Pedirle cambios a la IA

Para qué sirve. Es el corazón del producto: escribes lo que quieres cambiar y la IA lo hace sobre la página que tienes abierta.

Cómo llegar. Está siempre abajo, en los dos modos: el cuadro que pone «Describe los cambios que quieres hacer…».

Qué hay en pantalla.

• El cuadro de texto. Escribe con tus palabras. El texto de ejemplo cambia según lo que tengas seleccionado en la página (por ejemplo «Cambios para h1…»).
• El clip de la izquierda adjunta imágenes de referencia. También puedes pegarlas con Ctrl+V o arrastrarlas encima del chat: aparece un recuadro azul con «Suelta las imágenes aquí». Las miniaturas quedan encima del cuadro; se quitan con la X roja y se limpian solas al enviar.
• El botón de enviar es el avión de papel de la derecha.
• «Opciones de envío», abajo a la izquierda, despliega los ajustes que encarecen o amplían la petición. Tienen apartado propio más abajo.

Cómo se escribe una petición que funciona

Una petición vaga se contesta con algo vago. Compara:

La receta es siempre la misma: dónde (qué página y qué parte), qué (el cambio concreto, con el texto literal si lo tienes) y qué dejar en paz.

Ejemplo completo, de principio a fin. Quieres cambiar el titular de la portada:

1. Abre el editor de tu proyecto. Comprueba arriba que estás en la página que quieres tocar.
2. En el cuadro de abajo escribe: «En la portada, sustituye el titular "Inicio" por "Pan de masa madre, todos los días a las 8 de la mañana" y deja el resto de la página igual.»
3. Pulsa el avión de papel.
4. Arriba aparece la franja morada «Preparando solicitud…» con el cronómetro: la IA está trabajando.
5. Cuando termina, la vista previa de la derecha se actualiza sola con el titular nuevo. Si no era lo que querías, escribe la corrección en el mismo cuadro; no hace falta empezar de cero.

Cuidado con… pedir varias cosas distintas en un mismo mensaje. Sale mejor una petición por cambio: si algo no queda bien, sabes exactamente qué corregir.

Las opciones de envío (y lo que cuestan)

Para qué sirve. Amplían el alcance de la petición. Aparecen solo cuando tienen sentido para tu proyecto, así que no verás siempre las mismas.

Cómo llegar. Pulsa «Opciones de envío», debajo del cuadro de chat.

• Multi-página (icono de capas). Aparece cuando tu proyecto tiene más de una página. Sin ella, la IA solo puede tocar la página que tienes abierta y su controlador: tiene prohibido meterse en otras páginas, en la plantilla común o en la configuración. Con ella activada puede leer cualquier página como referencia, cambiar varias a la vez y tocar los archivos compartidos (la plantilla, los estilos). Sigue siendo sensata: si pides algo de una sola página («cambia el formulario de contacto»), solo toca esa. Coste: te indica cuántas páginas tiene el proyecto; consume más porque la IA recibe mucho más contexto.
• Aplicar en todos los idiomas (icono de idiomas, en azul). Aparece cuando la página que tienes abierta tiene versiones en otros idiomas. Después de aplicar el cambio en la página actual, traduce ese mismo cambio a todas las demás versiones. Debajo te lista los destinos (por ejemplo → contacto-en, contacto-fr). Coste: te muestra la estimación, del estilo «+1 traducción, ~2x tokens». Ojo con lo que NO hace: no lee las otras versiones. Si estás en la página en español y pides «hazlo como la versión en inglés», no va a ir a mirar la inglesa; solo traduce el resultado final.
• Embeber formulario (icono de portapapeles, verde). Aparece si tienes formularios creados en el módulo de Formularios. Eliges uno del desplegable y la IA lo inserta donde le digas: «Pon el formulario de contacto en la sección de abajo».
• Buscar en internet (icono de globo). Permite que la IA consulte información de fuera al preparar el cambio.

Si combinas Multi-página y Aplicar en todos los idiomas, se traducen todas las páginas modificadas a todos sus idiomas, y en vez de la lista de destinos verás una estimación del total.

Cuidado con… dejar Multi-página encendida «por si acaso». Cuesta más y le das permiso para tocar la plantilla común, así que un cambio pensado para una página puede acabar notándose en todo el sitio.

Ver cómo va tu petición: la cola de consultas

Para qué sirve. Todo lo que le pides a la IA se pone en una cola. Aquí ves qué se está haciendo, qué espera turno y qué ya terminó.

Cómo llegar. En la barra izquierda, el icono con el número (la burbuja azul te dice cuántas hay en marcha). Está disponible en modo Fácil.

Qué hay en pantalla. Tres pestañas: Procesando, Cola y Terminadas. Cada tarea muestra el texto que pediste, la página sobre la que iba y cuándo se lanzó. Al pulsar una tarea se abre su detalle.

Cuidado con… cerrar el editor pensando que cancelas la petición. No se cancela: sigue su curso y la encontrarás en «Terminadas» cuando vuelvas.

Elegir cómo tocas la página: los cinco modos

Para qué sirve. La barra de seis iconos que hay justo encima del cuadro de chat decide qué pasa cuando haces clic sobre tu web en la vista previa.

Cómo llegar. Está siempre visible, en los dos modos, centrada sobre el chat.

• Seleccionar (flecha). Es el modo normal. Haces clic en un elemento y queda marcado con un borde: verde si el sistema lo identifica sin dudas, ámbar si el elemento se parece a otros de la página. Encima del cuadro de chat aparece una etiqueta con su nombre (h1, img…) y el texto de ejemplo del chat cambia a «Cambios para h1…», de modo que ya no hace falta explicar dónde quieres el cambio. Pulsando esa etiqueta salen las acciones rápidas: Eliminar, Editar, Duplicar y Ver Código; cada una te deja la instrucción ya escrita en el cuadro. Con Alt o Mayúsculas pulsadas puedes seleccionar varios elementos a la vez; se numeran en morado.
• Editar texto (la T). Cambias tú mismo textos, imágenes y enlaces, sin pasar por la IA. Tiene apartado propio más abajo.
• Dibujar (lápiz). Marcas una zona con trazos. Apartado propio más abajo.
• Solo ver (ojo). La vista previa se comporta como tu web de verdad: navegas, pulsas botones y pruebas formularios como un visitante. En este modo se oculta el cuadro de chat.
• Navegar (flecha con clic). Los enlaces de tu web funcionan dentro del editor: al pulsar uno interno, cambias a esa página sin salir del editor. A diferencia de «Solo ver», aquí el chat sigue a la vista.
• El sexto icono (árbol de carpetas), separado por una rayita, no es un modo: abre y cierra el panel de archivos.

Cuidado con… el borde ámbar. Significa que el elemento que has señalado se parece a otros: si envías la petición así, la IA podría cambiar el equivocado. Mejor añade una pista en el texto («el primero», «el del pie de página»).

Dibujar sobre la página para señalar dónde

Para qué sirve. Cuando explicar con palabras dónde está el problema cuesta más que señalarlo con el dedo.

Cómo llegar. Modo Dibujar (el lápiz) y traza con el ratón sobre la vista previa.

Qué hay en pantalla. Los trazos salen en amarillo, tipo rotulador. Debajo aparece una barrita con cuatro botones: el micrófono para dictar, la papelera («Limpiar») para borrar los trazos, la X para cancelar y el visto bueno («Listo») para confirmar. Papelera y Listo están apagados hasta que dibujas algo.

Al pulsar Listo, el sistema hace una foto de la zona marcada, deduce qué elementos hay dentro y vuelve al modo Seleccionar; la foto se queda como miniatura encima del cuadro de chat, para que escribas ahí qué quieres cambiar.

Sobre el dictado por voz. El micrófono está aquí, en el modo Dibujar, y depende de que tu navegador sepa reconocer voz. Si no puede, el icono aparece tachado y no responde. Cuando funciona, lo que dictas se escribe solo en el cuadro de chat y aparece una etiqueta morada «Voz». (En el navegador con el que se han hecho estas capturas el reconocimiento de voz no está disponible, así que no hay foto del dictado en marcha: el icono sale tachado.)

Cuidado con… dibujar y no pulsar Listo. Si cambias de modo sin confirmar, los trazos se pierden y la IA no recibe nada.

Cambiar cosas tú mismo, sin gastar en la IA

Para qué sirve. Para arreglos pequeños —una errata, una imagen, un enlace que apunta mal— no hace falta molestar a la IA. Los cambios se guardan directamente y no consumen créditos.

Cómo llegar. Modo Editar texto (la T) y haz clic sobre el elemento en la vista previa. Se abre un panelito flotante al lado. Un destello verde confirma que se ha guardado.

Los cuatro paneles que puedes encontrarte:

• Texto (títulos, párrafos, botones). Editor con negrita, cursiva, subrayado, enlace y quitar formato. Se confirma con Guardar.

• Imagen. Te deja sustituir la imagen o cambiar su texto alternativo, que es la descripción que leen los buscadores y los lectores de pantalla.

• Enlace. Cambias el texto que se ve, la dirección de destino y si se abre en una pestaña nueva.

• Campo de formulario. Cambias la etiqueta, el texto de ejemplo, el nombre interno del campo, su tipo (correo, texto…) y si es obligatorio.

Ejemplo completo. Has escrito «panadería» sin tilde en la entradilla de la portada:

1. Abre el editor y pulsa el icono de la T (Editar texto).
2. Haz clic sobre la frase equivocada en la vista previa.
3. Corrige la palabra en el panelito que se abre.
4. Pulsa Guardar. El destello verde confirma el cambio.
5. Sigue siendo un cambio sin publicar: pulsa Publicar cuando quieras que lo vean tus visitantes.

Cuidado con… confundir este modo con la IA. Aquí escribes tú: si borras un párrafo entero y guardas, no hay un «pídeselo otra vez». Para deshacer tendrás que volver a escribirlo o recurrir al historial de versiones de la cabecera.

Ver tu web como se ve en el móvil o en la tablet

Para qué sirve. La mayoría de tus visitantes entrarán desde el móvil. Esto te enseña cómo lo verán, sin salir del editor.

Cómo llegar. Los cuatro iconos de la cabecera: móvil, tablet, monitor y la flecha doble (ancho completo). Al lado se indica el ancho en píxeles.

Cuidado con… dar por bueno el escritorio y publicar. Un titular que cabe en el monitor puede partirse en el móvil: mira siempre los tres tamaños antes de publicar.

Avisar de un fallo

Para qué sirve. Contarle al equipo de Speaksite algo que no funciona, sin salir del editor ni buscar un correo.

Cómo llegar. En la barra izquierda, el icono del bicho. Está en modo Fácil.

Qué hay en pantalla. Un título, una descripción (cuenta qué hacías, qué esperabas y qué pasó) y un espacio opcional para adjuntar una captura de pantalla, que puedes arrastrar o pegar con Ctrl+V.

Cuidado con… describirlo en una línea. «No va» no permite arreglar nada: escribe los pasos exactos que diste.

Herramientas que solo existen en modo Avanzado

Las cuatro siguientes no aparecen en modo Fácil. Si no las ves, pulsa Avanzado en la cabecera.

Preguntarle a la IA por el contenido de tu web (Sofi)

Para qué sirve. Hacer preguntas sobre tu propio sitio y pedir revisiones generales, en vez de cambios en una página concreta.

Cómo llegar. Modo Avanzado → icono de la interrogación en bocadillo.

Qué hay en pantalla. Un chat aparte, con sugerencias ya escritas del tipo «Crear un formulario de contacto», «Analizar mi sitio a fondo» o «Mejorar los textos de esta página», y un aviso de cuántas páginas tiene tu proyecto.

Cuidado con… los cambios masivos de SEO: se te muestran para que los revises antes de aplicarse. Léelos, no los aceptes en bloque.

Agentes que trabajan por ti

Para qué sirve. Revisiones automáticas del sitio entero: comprobar enlaces e imágenes, o que el diseño sea coherente entre páginas.

Cómo llegar. Modo Avanzado → icono del robot.

Buscar un texto en toda la web

Para qué sirve. Encontrar en qué páginas aparece una palabra, sin abrirlas una a una. Útil antes de cambiar un teléfono o un precio repetido.

Cómo llegar. Modo Avanzado → icono de la lupa con texto.

Ver los archivos de tu web y leer el código

Para qué sirve. Mirar por dentro. No hace falta para usar Speaksite; está para quien quiera comprobar algo o para acompañar a un técnico.

Cómo llegar. El icono del árbol de carpetas, a la derecha de los cinco modos.

Qué hay en pantalla. El árbol de carpetas de tu proyecto (app, config, public, routes…) y un buscador arriba. Al hacer clic en un archivo se abre su contenido a la derecha, con la ruta completa arriba y botones para ver su historial y comparar versiones.

Cuidado con… el buscador de este panel: solo encuentra lo que ya tengas desplegado en el árbol. Si buscas «index» con las carpetas cerradas te dirá «Sin coincidencias» aunque el archivo exista. Ve abriendo carpetas hasta llegar a él.

Los avisos de reparación automática

De vez en cuando verás un aviso de que Speaksite ha arreglado solo algo de tu proyecto (una página que se había quedado a medias, un enlace apuntando a una página que ya no existe). No tienes que hacer nada: es informativo, y te sirve para saber por qué algo se ve distinto de como lo dejaste.

(No hay captura de este aviso: solo aparece cuando el sistema detecta y repara un problema real, y en el proyecto de demostración no se produjo ninguno durante la elaboración de este manual. Forzarlo habría exigido romper el proyecto a propósito.)

Resumen de lo que más se pregunta

• «No encuentro una herramienta» → estás en modo Fácil. Pulsa Avanzado.
• «Lo he cambiado y mis clientes no lo ven» → falta pulsar Publicar.
• «La IA no hace lo que le pido» → di dónde, qué y qué no tocar, y una cosa por mensaje.
• «Quiero cambiar una errata y no gastar» → modo Editar texto (la T): esos cambios no consumen créditos.
• «El cambio tiene que ir también en la otra lengua» → activa «Aplicar en todos los idiomas» antes de enviar.