Capítulo 3 de 11
Hablar con la IA
El editor: pedirle cambios a la inteligencia artificial y verlos aplicados.
En esta página
- 3.1El editor de tu web
- 3.2Modo Fácil y modo Avanzado: dónde está lo que no encuentras
- 3.3Pedirle cambios a la IA
- 3.4Las opciones de envío (y lo que cuestan)
- 3.5Ver cómo va tu petición: la cola de consultas
- 3.6Elegir cómo tocas la página: los siete modos
- 3.7Dibujar sobre la página para señalar dónde
- 3.8Hablar con Sofi: una llamada en vez de escribir
- 3.9Preguntar señalando
- 3.10Cambiar cosas tú mismo, sin gastar en la IA
- 3.11Ver tu web como se ve en el móvil o en la tablet
- 3.12Avisar de un fallo
- 3.13Herramientas que solo existen en modo Avanzado
- 3.14Los avisos de reparación automática
- 3.15Resumen de lo que más se pregunta
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.
3.1El editor de tu web
Para qué sirveEs 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 llegarDesde 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.
3.2Modo Fácil y modo Avanzado: dónde está lo que no encuentras
Para qué sirveEl 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 llegarEn 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 seis cosas: Páginas, Blog, Formularios, Medios, la Cola de consultas y Reportar bug.
- En Avanzado aparecen además: Buscar, 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.
3.3Pedirle cambios a la IA
Para qué sirveEs el corazón del producto: escribes lo que quieres cambiar y la IA lo hace sobre la página que tienes abierta.
Cómo llegarEstá 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 finQuieres cambiar el titular de la portada:
- Abre el editor de tu proyecto. Comprueba arriba que estás en la página que quieres tocar.
- 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.»
- Pulsa el avión de papel.
- Arriba aparece la franja morada «Preparando solicitud…» con el cronómetro: la IA está trabajando.
- 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.
3.4Las opciones de envío (y lo que cuestan)
Para qué sirveAmplí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 llegarPulsa «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.
3.5Ver cómo va tu petición: la cola de consultas
Para qué sirveTodo 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 llegarEn 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.
3.6Elegir cómo tocas la página: los siete modos
Para qué sirveLa barra de ocho iconos que hay justo encima del cuadro de chat decide qué pasa cuando haces clic sobre tu web en la vista previa.
Cómo llegarEstá 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. - Preguntar (bocadillo con interrogación). Tocas un elemento y le preguntas a Sofi sobre él, sin cambiar nada. Apartado propio más abajo («Preguntar señalando»).
- Editar texto (la T). Cambias tú mismo textos, imágenes y enlaces, sin pasar por la IA. Tiene apartado propio más abajo.
- Formularios (portapapeles). Tocas un formulario de tu web y lo editas ahí mismo, campo a campo, sin pasar por la IA.
- 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 octavo 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»).
3.7Dibujar sobre la página para señalar dónde
Para qué sirveCuando explicar con palabras dónde está el problema cuesta más que señalarlo con el dedo.
Cómo llegarModo 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. La barrita de Dibujar conserva su micrófono para dictar qué quieres en la zona marcada. Para hablar con la IA en el resto del editor está la llamada con Sofi, contada en «Hablar con Sofi», un poco más abajo.
Cuidado con… dibujar y no pulsar Listo. Si cambias de modo sin confirmar, los trazos se pierden y la IA no recibe nada.
3.8Hablar con Sofi: una llamada en vez de escribir
Para qué sirvePedir cambios y hacer preguntas de viva voz, como en una llamada: «cambia el texto del botón a Entrar», «¿cuántas páginas tiene mi web?», «quita esta foto» señalándola en la vista previa.
Cómo llegarEncima de la barra de chat, a la derecha de los modos, está el botón Hablar con Sofi (en el móvil, solo el icono del teléfono). Es el único botón de voz del editor: junto al cuadro de chat quedan los adjuntos y Enviar.
Qué hay en pantalla. Al pulsarlo, la primera vez el navegador te pide permiso para usar el micrófono. Sofi saluda y se queda escuchando; el botón se pone verde («En llamada») y volver a pulsarlo cuelga. Sofi te escucha todo el rato, contesta al momento con su voz y puedes interrumpirla. Lo que ya sabe de tu web (qué páginas tiene y cuántas, de qué va, qué hay en la página que miras, si tiene blog) te lo contesta al instante; si tiene que mirar el código, te dice que lo está mirando. Pídele cambios como se los pedirías a una persona («pon el botón en verde», «cambia esto» señalando en la vista previa): mientras lo hace te lo dice, y cuando termina te lo confirma. Si el encargo es grande (un blog con artículos, páginas nuevas), primero te pregunta lo imprescindible, por ejemplo si tienes imágenes propias o prefieres imágenes de stock, te avisa de que tardará unos minutos y mientras trabaja te va diciendo que sigue en ello. En la barra ves lo que dice cada uno, por qué micrófono te oye, cuánto dura la llamada, un botón para silenciar el micro y otro rojo para colgar. Cada cambio o pregunta que hace Sofi cuenta como una consulta, igual que escribiéndolo; hablar, en sí, no gasta nada.
Sofi también propone. Al descolgar ya sabe qué le falta a tu web y qué está roto. Si el menú enlaza a páginas que no existen o hay imágenes que no cargan, te lo dice al saludar y lo manda arreglar sin que se lo pidas (cuenta como una consulta). Si falta el teléfono, el email o los datos legales, te los pide cuando toca. Pregúntale «¿qué le falta a mi web?» y te propondrá una o dos mejoras concretas; nada de eso lo hace sin tu sí. Y cuando tiene que redactar un texto nuevo, te cuenta antes qué va a escribir y te lo lee al terminar para que lo confirmes o lo cambies.
Si no te oye. Antes de descolgar, Sofi elige sola un micrófono que dé señal: pasa, por ejemplo, con cascos que tienen un canal de juego y otro de voz. Mientras escucha, la barra dice por qué micrófono te está oyendo; si en unos segundos no le llega ni ruido de fondo, te avisa («No te oigo por…»), Sofi te lo dice de viva voz y puedes elegir otro micrófono ahí mismo, sin salir del editor. Y mientras Sofi trabaja en lo que le has pedido te lo dice («Voy a hacerlo, un momento») para que la espera no parezca un cuelgue.
Si no ves el botón «Hablar con Sofi». La llamada la enciende quien administra Speaksite. Donde no está disponible, en su lugar hay un micrófono junto al cuadro de chat para dictar: pulsas, hablas, y lo que dices aparece en el cuadro según hablas, en gris mientras es provisional. Cuando te callas un momento, la frase se confirma y sale un anillo de cuenta atrás de dos segundos: si no tocas nada, la petición se envía sola; si tocas el anillo, se queda escrita para que la corrijas y la envíes tú. Al terminar el cambio, Sofi te lo confirma en voz alta.
Cuidado con… el navegador. La llamada y el dictado necesitan el micrófono: Chrome, Edge y Safari van bien. Si el navegador no sabe reconocer voz, el micrófono de dictado sale tachado y al pasar por encima te lo explica; todo lo demás sigue funcionando.
3.9Preguntar señalando
Para qué sirveEntender tu web sin cambiarla: qué hace un botón, por qué un bloque no se ve en el móvil, qué texto convendría en un titular. La respuesta llega en lenguaje llano y, si Sofi ve un arreglo claro, te lo ofrece.
Cómo llegarModo Preguntar (el bocadillo con interrogación) en la barra de modos.
Qué hay en pantalla. Al pasar el cursor por la vista previa, cada elemento se recuadra y una etiqueta te dice qué es y qué pone. Al tocar uno, sobre el cuadro de chat aparece la ficha «Preguntando sobre <h1> “Quesos artesanos…”» con ese elemento, y el cuadro pasa a decir «Pregunta sobre este <h1>…». Escribe o dicta la pregunta y envíala. Con la X de la ficha o con Esc sueltas el elemento.
La respuesta aparece en una burbuja de Sofi sobre la esquina del chat. Si la pregunta entró por voz, Sofi la lee en alto; con el altavoz de la burbuja la vuelves a escuchar o la callas, con «Responder» sigues la conversación y con la X la cierras. Cuando Sofi propone un cambio concreto, la burbuja trae una tarjeta con el cambio («Ver detalle del cambio» lo despliega) y el botón Aplicar este cambio, que lo convierte en una petición normal, ya con el elemento señalado.
Cuidado con… las consultas. Cada pregunta descuenta una consulta, igual que una petición de cambio. En modo Seleccionar, una frase que es claramente una pregunta («¿por qué…?») también se responde en vez de editarse; en modo Preguntar nunca hay duda de que no quieres tocar nada.
3.10Cambiar cosas tú mismo, sin gastar en la IA
Para qué sirvePara 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 llegarModo 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 completoHas escrito «panadería» sin tilde en la entradilla de la portada:
- Abre el editor y pulsa el icono de la T (Editar texto).
- Haz clic sobre la frase equivocada en la vista previa.
- Corrige la palabra en el panelito que se abre.
- Pulsa Guardar. El destello verde confirma el cambio.
- 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.
3.11Ver tu web como se ve en el móvil o en la tablet
Para qué sirveLa 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 llegarLos 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.
3.12Avisar de un fallo
Para qué sirveContarle al equipo de Speaksite algo que no funciona, sin salir del editor ni buscar un correo.
Cómo llegarEn 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.
3.13Herramientas 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é sirveHacer preguntas sobre tu propio sitio y pedir revisiones generales, en vez de cambios en una página concreta.
Cómo llegarModo Avanzado → icono de la interrogación en bocadillo. Para preguntar por un elemento concreto de la página no hace falta salir del editor: usa el modo Preguntar de la barra de modos (apartado «Preguntar señalando»).
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é sirveRevisiones automáticas del sitio entero: comprobar enlaces e imágenes, o que el diseño sea coherente entre páginas.
Cómo llegarModo Avanzado → icono del robot.
Buscar un texto en toda la web
Para qué sirveEncontrar 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 llegarModo Avanzado → icono de la lupa con texto.
Ver los archivos de tu web y leer el código
Para qué sirveMirar por dentro. No hace falta para usar Speaksite; está para quien quiera comprobar algo o para acompañar a un técnico.
Cómo llegarEl 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.
app / Views / inicio, con su ruta arriba.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.
3.14Los 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.)
3.15Resumen 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.