Antes de empezar

Qué es la digitalización de bolsillo

Es dejar de esperar. Esperar a que informática priorice tu idea, a que haya presupuesto, a que alguien de fuera entienda tu consulta mejor que tú. La digitalización de bolsillo es lo contrario: herramientas pequeñas que resuelven un problema concreto tuyo, construidas por quien tiene el problema.

Una página que explique un programa comunitario. Un material educativo que se lea de verdad. Cosas de dos tardes, no de dos años.

El modelo de lenguaje pone la sintaxis. Tú pones lo que ninguna IA tiene: saber qué falta, para quién y qué pasa si sale mal.

Parte 1

Que la página sea bonita y funcional

«Bonita» no es un gusto. Es una consecuencia de seis decisiones que casi nadie toma conscientemente, y que puedes pedirle a un modelo si sabes nombrarlas. Aquí están, con el motivo detrás: el motivo es lo que te permite discutir el resultado.

1. Una sola cosa importante por pantalla Decide qué tiene que entender alguien que llega y se va en ocho segundos. Todo lo demás baja de tamaño, de peso o de color. Por qué: la jerarquía no se crea añadiendo énfasis, se crea quitándolo. Si todo grita, no se oye nada.
2. La medida de lectura Entre 60 y 75 caracteres por línea, interlineado de 1,5 a 1,6, cuerpo de texto de 16 píxeles como mínimo. Por qué: líneas demasiado largas hacen que el ojo pierda el renglón al volver a la izquierda. No es estética, es accesibilidad, y se nota más en móvil que en tu portátil.
3. El espacio en blanco hace el 80% del trabajo Usa una escala fija: 4, 8, 12, 16, 24, 32, 48. Nunca un margen «a ojo». Por qué: lo que percibimos como «orden» es casi siempre repetición de la misma distancia. Un sistema de espaciado convierte el desorden en ritmo.
4. Un color de marca y neutros Uno. Más grises. Y contraste mínimo de 4,5:1 entre texto y fondo. Por qué: el color debe significar algo —esto es una acción, esto es un aviso—. Si decora, deja de informar. Y el contraste bajo excluye a parte de tu público, que en salud comunitaria es exactamente el público que no te puedes permitir excluir.
5. Dos tipografías como máximo Una para titulares con carácter, otra para leer largo. Escala clara: 3 o 4 tamaños, no doce. Por qué: la tipografía es lo primero que da personalidad y lo primero que delata una plantilla. Es donde más rentabilidad tiene ser deliberado.
6. Funcional son los estados que nadie diseña Qué se ve cuando está vacío, cuando carga, cuando falla, cuando alguien navega con teclado. Por qué: la demo siempre funciona. Lo que distingue una herramienta usable de un prototipo es que contempla el día en que no funciona. Y el foco visible del teclado no es opcional.

El detalle que evita romper tu web

Si vas a pegar un bloque generado dentro de una página que ya existe, prefija todas tus clases y encierra todo en un contenedor con nombre propio. Esta misma página usa .avgdb-.

Sin eso, un .card genérico del bloque nuevo redefine el .card de tu web entera. Es el fallo número uno al integrar código generado, y se arregla con una línea en el prompt.

Parte 2

Prompts que funcionan, y por qué

El mecanismo, en una frase: un modelo de lenguaje completa lo más probable dado lo que le has dado. Un encargo vago tiene un espacio enorme de respuestas plausibles, y de ahí sale la media de internet: correcto, genérico, olvidable.

Especificar no es «ser educado con la máquina». Es estrechar ese espacio hasta que lo único plausible sea lo que tú querías.

Los siete campos

Un prompt completo tiene rol, contexto, tarea, restricciones, formato de salida, criterios de aceptación y, si puedes, un ejemplo. Casi todo el mundo escribe los tres primeros. Los cuatro últimos son los que cambian el resultado.

Y de esos cuatro, el decisivo son los criterios de aceptación: convierten «no me convence» en «falla el criterio 3». Sin ellos no estás iterando, estás repitiendo.

Tres fichas para copiar

ROL: Diseñador y desarrollador front-end.
CONTEXTO: [qué es la página, quién la lee, desde dónde y con cuánta prisa].
TAREA: Un bloque HTML autónomo que [objetivo concreto y medible].
RESTRICCIONES:
 - Un solo archivo: HTML + CSS + JS embebidos.
 - Sin librerías ni fuentes externas.
 - Todas las clases prefijadas con [.mi-prefijo-] y encerradas en un contenedor raíz.
 - Sin almacenamiento en el navegador.
 - Contraste mínimo 4,5:1. Cuerpo de texto ≥16px. Foco de teclado visible.
 - Responsive real desde 360px.
FORMATO: Solo el código, sin explicación previa.
CRITERIOS DE ACEPTACIÓN:
 1. [lo que el lector debe entender de inmediato]
 2. Funciona con el teclado, sin ratón.
 3. Legible al 200% de zoom sin scroll horizontal.
ANTES DE EMPEZAR: si algo del contexto es ambiguo, pregúntamelo. No lo supongas.

ROL: Revisor severo. Tu trabajo no es agradarme.
TAREA: Audita lo que te paso y lista los 5 fallos más graves,
ordenados por impacto real en quien lo va a usar.
RESTRICCIONES:
 - No reescribas nada todavía.
 - Un fallo por línea: qué falla, a quién afecta, cómo se comprueba.
 - Si algo está bien, no lo menciones.
 - Si crees que el enfoque de partida es equivocado, dilo en la línea 1.
FORMATO: Lista numerada. Máximo 2 líneas por fallo.

TAREA: Cambia SOLO lo siguiente:
 1. [cambio concreto]
 2. [cambio concreto]
RESTRICCIONES:
 - Mantén intacto todo lo demás: estructura, nombres de clase, textos.
 - No aproveches para «mejorar» nada que no te haya pedido.
 - Si un cambio obliga a tocar otra cosa, avísame antes de hacerlo.
FORMATO: Devuelve el archivo completo, no fragmentos.

Cuatro antipatrones

Parte 3

Que el mensaje cale: forma y contexto

Aquí está la idea que une las tres partes de este tutorial: escribir un buen prompt y escribir un buen mensaje son el mismo problema. En los dos casos estás reduciendo ambigüedad gestionando contexto. Al modelo le das rol, restricciones y criterios. Al lector le das quién eres, qué le duele y qué gana.

Quien aprende a especificar para una máquina, especifica mejor para las personas. No es una metáfora bonita: es literalmente la misma habilidad.

La forma es lo fácil

Un gancho que funcione solo, sin contexto previo. Una idea por párrafo. Frases cortas. Que se lea entero en menos de un minuto. Nada de «hoy quiero hablaros de».

Esto se aprende en una tarde y lo hace todo el mundo. Por eso no te diferencia.

El contexto es lo que decide

Cuatro preguntas antes de escribir una sola línea:

1. ¿A quién le hablo, exactamente? No «a profesionales sanitarios». A una enfermera de un centro rural, un jueves, cansada, mirando el móvil entre dos consultas.
2. ¿Qué sabe ya? Si le explicas lo que ya sabe, deja de leer. Si das por sabido lo que no sabe, deja de leer. Ese equilibrio es todo el trabajo.
3. ¿Qué le cuesta creerme? Localiza la objeción concreta. Es lo que va a pensar en silencio mientras te lee.
4. ¿Qué quiero que haga? Una acción, no tres. Si no la sabes tú, no la va a adivinar.

La estructura que sostiene la credibilidad

Afirmación → evidencia trazable → implicación para quien lee → límite honesto. En ese orden.

El último paso es el contraintuitivo, y es el que más alcance da: la objeción que tú no escribes, la escribe otro en comentarios. Si nombras tú mismo el límite de lo que cuentas, esa conversación se queda dentro de tu texto, no en contra de él.

Trazabilidad, palabra por palabra

Toda afirmación que publiques debe poder rastrearse hasta su fuente conservando el condicional del original. Si el estudio dice «se asoció a una reducción», tú no escribes «reduce». Si la percepción del profesional bajó, no escribes que el tiempo bajó.

Cuesta un minuto más por frase. Es lo único que, a los dos años, sigue distinguiendo a quien divulga de quien repite.