Píldora de una mentoría real, anonimizada. La protagonista acaba de publicar su web con IA sin escribir código, y cada petición era un tiro al aire. En esta sesión montamos el vocabulario que le dice a la IA exactamente qué tocar: responsive, navbar, copy, feat, BBDD, y el atajo que más rinde de todos, pasar una referencia que ya existe.
El punto de partida no es "no sé usar la IA". Es algo más fino y mucho más común: sabe pedir, pero no sabe nombrar. Tiene una web publicada, hecha entera con IA, y aun así cada cambio cuesta tres intentos porque describe síntomas en lugar de señalar piezas.
Profesional de servicios que trabaja con cita previa. Perfil cero técnico. Acaba de comprar su dominio y publicar la primera versión de su web con una herramienta de IA, sin escribir una línea de código.
La web se ve bien en el ordenador y mal en el móvil, el menú ocupa dos líneas y la página sigue siendo un folleto: nadie puede reservar. Y cada petición a la IA es un tiro al aire, porque no sabe cómo nombrar lo que quiere cambiar.
Un vocabulario de diez palabras que le dicen a la IA exactamente qué tocar, el hábito de encadenar peticiones y pasar referencias, y la web convertida en herramienta de trabajo: base de datos, emails automáticos y calendario sincronizado.
Lo primero que hay que quitarse de encima es el miedo a escribir mal. La IA no lee letra a letra: convierte lo que escribes en representaciones de significado. Por eso entiende "pa una" cuando querías decir "página", y por eso no merece la pena que pierdas ni un segundo corrigiéndote.
Lo que sí cambia el resultado, y mucho, es usar la palabra técnica correcta. No porque la IA sea quisquillosa, sino porque esa palabra le dice de golpe qué pieza tocar y hasta dónde llegar. Sin ella, tiene que adivinar. Y adivina razonablemente bien, lo cual es peor: te devuelve algo plausible que no es lo que querías.
"En el móvil se ve todo desplazado y feo, arréglalo" y "hazlo responsive" piden lo mismo. La primera obliga a la IA a deducir qué elemento, en qué pantalla y con qué criterio. La segunda nombra un comportamiento estándar que el modelo conoce perfectamente y sabe implementar entero. Escribe rápido, escribe con faltas, pero nombra la pieza.
Diez palabras. Con estas diez cubres el 90% de lo que vas a querer pedirle a la IA sobre tu web. Las cinco primeras son de lo que se ve; las cinco siguientes, de lo que hace.
responsiveque se adapte a cada pantallanavbarla barra de arribahome / landing pagela página de entradacopysolo los textosfrontendlo que se veSi el problema es estético o de colocación, la palabra que buscas está en esta tabla.
backendla lógica de detrásBBDDbase de datosfeatfeature, funcionalidad nuevaestilo: <web>referenciaarregla la compilaciónla web se rompióSi el problema es que algo no funciona, o quieres que la web haga algo nuevo, está en esta.
La distinción parece técnica y en realidad es puro diagnóstico. En una calculadora, el frontend son las teclas y la pantalla; el backend es lo que decide que uno más uno son dos. Cuando algo se ve feo, es frontend. Cuando algo no funciona, es backend. Saber cuál de los dos es te ahorra media conversación, porque se lo puedes decir a la IA en la primera frase.
La teoría se entiende rápido; lo que cuesta es cambiar el reflejo. Estos son los cinco pares reales de la sesión: a la izquierda lo que sale solo cuando describes el síntoma, a la derecha la misma idea nombrando la pieza.
En el móvil se ve todo desplazado y feo, arréglalo.
Hazlo responsive.
responsiveUna palabra frente a una frase, y el resultado es mejor. "Desplazado y feo" obliga a la IA a adivinar qué pantalla y qué elemento; responsive nombra el problema entero.
Lo de arriba ocupa mucho y se parte en dos líneas.
Arregla el navbar: el texto de los botones tiene que estar en una sola línea.
navbarNombrar la pieza y describir el estado final deseado. No dices cómo se arregla, dices cómo tiene que quedar.
Quita el rollo legal de la portada pero que siga estando.
Quiero que protección de datos sea una página separada, que no esté en el navbar y que no esté en la home.
homeTres condiciones en una frase, cada una nombrando su sitio. Así no hay interpretación posible: la página existe, pero no en el menú ni en la portada.
Pon algo que diga que contesto rápido.
Copy: en el formulario de citas, "te responderemos en 24 horas laborables".
copyCon copy delante, la IA entiende que solo cambia texto. Sin copy, es fácil que aproveche para rediseñarte el formulario entero.
Quiero poder gestionar las citas de alguna forma.
Feat: que el calendario bloquee los huecos ya reservados y se sincronice con mi Google Calendar. Estilo: calendly.com.
feat + estilo:feat avisa de que esto es funcionalidad nueva, no maquillaje. Y la referencia hace el resto del trabajo: calendly.com describe en una palabra un comportamiento que costaría un párrafo.
El patrón que se repite: nombra la pieza, describe el estado final, no expliques el cómo.
responsive
arregla el navbar, el texto de los botones tiene que estar en una sola línea
quiero que protección de datos sea una página separada,
que no esté en el navbar y que no esté en la home
donde tengo el enlace de IN pon también el de IG: @miusuarioDe todo lo que vimos, esto es lo que más rinde por carácter escrito: pasarle una web que ya hace lo que quieres. "Calendario de citas estilo: calendly.com" transporta en dos palabras un comportamiento entero (huecos disponibles, bloqueo automático, confirmación por email) que describir a mano ocuparía párrafos.
Funciona porque el modelo ya conoce esas herramientas. No estás explicando: estás señalando. Y señalar siempre es más barato y menos ambiguo que describir.
Una web bonita donde no se puede hacer nada es un folleto caro. El salto a herramienta de trabajo se pide con tres palabras que ya tienes: BBDD para que quede registro, email para que te enteres, y feat para lo que la web todavía no sabe hacer.
Necesito que si alguien pide una cita: se guarde en BBDD
y me llegue un email a hola@midominio.com
copy: en el formulario de citas, "te responderemos en 24 horas laborables"
feat: que el calendario bloquee los huecos ya reservados
e intenta que esté sincronizado con mi calendario de Google
Calendario de citas estilo: calendly.comPodrías pedir solo el aviso por correo y funcionaría. Pero los emails se pierden, caen en spam y se borran sin querer. Pedir las dos cosas (guardar en base de datos y avisar por email) significa que aunque falle el aviso, la solicitud sigue existiendo en algún sitio. Es la diferencia entre enterarte de una cita y tener el registro de todas.
Envía un email de confirmación a la persona en el momento de reservar.
Si la cita es presencial, incluye en ese email la dirección
y un enlace a Google Maps.
Y añade un recordatorio 24 horas antes de la cita.Uno para ti, con los datos de quien reserva. Uno de confirmación para la persona, en el momento, para que sepa que su solicitud entró y no vuelva a escribirte preguntando. Y uno de recordatorio 24 horas antes, que es el que de verdad baja el porcentaje de gente que no aparece. Si la cita es presencial, mete la dirección y un enlace a Google Maps en el de confirmación: cada clic que le ahorras es una excusa menos para no venir.
Se va a romper. Le pedirás algo a mitad de otra cosa, o pararás un proceso en seco, y la vista previa se caerá con un aviso de error. La frase que lo desatasca casi siempre es "arregla la compilación": la compilación es el momento en el que tu web se construye para poder mostrarse, y cuando falla, no se muestra nada.
Romper cosas no es un fallo del alumno, es el precio de estar haciendo algo. El peor escenario real es tener que volver a pedirlo, y eso cuesta un minuto. Lo que sí conviene es tener el reflejo de parar: si algo se está ejecutando y no te gusta, páralo y vuelve a pedirlo bien. No hay nada que se estropee de forma definitiva.
A mitad de sesión, la IA se ofreció a montar un panel de gestión de citas dentro de la web. Sonaba bien y era gratis. Dijimos que no. El criterio: si no lo vas a usar esta semana, no entra. Cada módulo extra es una cosa más que entender, mantener y arreglar cuando falle. La trampa clásica del no-code con IA es decir que sí a todo y acabar con una herramienta enorme que nadie usa. Empieza por el email, y cuando el volumen lo pida, monta el panel.
Seis pistas, seis palabras. Si las tienes todas, ya puedes pedirle a la IA prácticamente cualquier cambio en tu web sin dar rodeos.
Escribe tu respuesta a cada pista y pulsa Enter. Vale aunque falles alguna letra o te comas una tilde: puntúa por parecido. ¿Consigues el bote?
Empieza por R. Palabra inglesa que se escribe con V. Se la dices a la IA para que la web se adapte sola a móvil, tablet y pantalla grande.
Empieza por N. La barra de arriba de una web, con el logo y el menú. Cuando los botones se parten en dos líneas, esto es lo que hay que nombrar.
Empieza por C. Los textos de una web, y nada más. Usada como prefijo acota el cambio y evita que la IA te rediseñe de paso.
Empieza por F. Lo que se ve y se toca de una web: botones, colores, tipografías. Su pareja es el backend.
Empieza por B. Un Excel para aplicaciones: donde queda guardado quién reservó cita, cuándo y con qué datos. Se abrevia BBDD.
Empieza por L. La página de entrada de una web, la portada, lo que casi todos llaman la home.
El orden por el que yo empezaría mañana. Márcalo a medida que lo completes: se guarda en tu navegador, así que puedes volver y seguir por donde ibas.
Marca lo que vayas completando. Se guarda en tu navegador, así que al volver sigue aquí.
Cinco preguntas para fijar lo esencial. No hay nota ni castigo: si fallas, te explico el porqué.
Repaso · Pregunta 1/5
Glosario · toca para ampliar
El oficio de pedirle cosas a una IA para que salga lo que quieres. No va de escribir bonito: va de nombrar bien la pieza, describir el estado final y dar referencias.
Ver en el diccionarioQue la web se adapte sola a móvil, tablet y pantalla grande. La palabra que más problemas arregla de una sola vez, porque describe el comportamiento completo en lugar de un síntoma.
Ver en el diccionarioLa barra de navegación de arriba, con el logo y el menú. Es la pieza que más se rompe al añadir secciones: los botones se parten en dos líneas y se comen la pantalla.
Ver en el diccionarioLa página de entrada, la portada, lo que casi todo el mundo llama la home. Decide qué se ve primero y, sobre todo, qué NO debería verse ahí.
Ver en el diccionarioLos textos de la web, y nada más. Usado como prefijo en una petición ("copy: cambia esta frase") acota el cambio y evita que la IA aproveche para rediseñar.
Ver en el diccionarioLo que se ve y se toca: botones, colores, tipografías, espacios. Si el problema es estético o de colocación, está aquí.
Ver en el diccionarioLa lógica de detrás: lo que calcula, guarda y devuelve resultados. Si el problema es que algo no funciona (y no que se vea feo), está aquí.
Ver en el diccionarioUn Excel para aplicaciones: filas y columnas donde queda guardado quién reservó, cuándo y con qué datos. Pedirla explícitamente es lo que evita perder solicitudes si falla un email.
Ver en el diccionarioUna funcionalidad, algo que la web sabe hacer. Abreviado feat en las peticiones, avisa a la IA de que lo que pides no es un retoque visual sino capacidad nueva.
Ver en el diccionarioLa compilación: el momento en el que tu web se construye para poder mostrarse. Si falla, la vista previa se cae. "Arregla la compilación" es la frase que lo desatasca.
Ver en el diccionarioPublicar los cambios para que el mundo los vea. Hasta que no haces deploy, lo que tocaste vive solo en tu vista previa.
Ver en el diccionarioEl correo automático que dispara una acción concreta: confirmación de cita, aviso al profesional, recordatorio 24 horas antes. Ni newsletter ni publicidad, pura mecánica.
Ver en el diccionarioConstruir software describiendo lo que quieres en lenguaje normal y dejando que la IA escriba el código. Funciona mucho mejor cuando conoces el vocabulario de las piezas que estás pidiendo.
Ver en el diccionarioEstas dos ideas son las que más impacto tienen. Si te llevaras únicamente dos cosas de toda esta página, que sean éstas:
responsive, navbar, copy, feat o BBDD en vez de
describir el síntoma. Una palabra correcta rinde más que un párrafo aproximado.¿Quieres que montemos tu web o tu flujo juntos? Puedes reservar una mentoría conmigo o escribirme a hi@alci.dev. El siguiente capítulo de esta historia es dejar de contestar mensajes a mano: que un agente atienda el primer nivel y solo te pase lo que merece tu tiempo.