Este artículo fue escrito el 6 de noviembre de 2026.
Las herramientas de IA evolucionan rápido. La estructura esencial de una página, no. Encabezado (header), sección principal (hero), sección (section), pie de página (footer), navegación (navigation) y tarjeta (card): con dominar estos seis conceptos ya es posible diseñar una primera pantalla con claridad. Los menús de los creadores de sitios cambiarán de sitio; por eso, tome este texto como el mapa de una página y no como una guía de botones.
Antes de pensar en adornos visuales, una página es una secuencia de funciones. Hay un bloque que indica dónde se encuentra el usuario; otro que explica de inmediato qué ofrece el sitio; otro que organiza la información en temas; un bloque que orienta hacia la siguiente opción y uno final que cierra la página. Cuando esas funciones carecen de nombre preciso en la instrucción, los modelos de IA suelen generar un póster: una imagen enorme con texto superpuesto y sin forma de desplazarse hacia abajo. El diseño parece terminado a simple vista, pero resulta impracticable en la pantalla de un teléfono.
Defina la función de cada bloque en inglés dentro de la instrucción técnica y detalle el contenido en su propio idioma justo debajo. Si en su idioma existe una palabra común y clara, úsela acompañada del término en inglés entre paréntesis la primera vez. Si no hay un término equivalente asentado, no trate de inventarlo: una breve descripción en su idioma junto al sustantivo en inglés será más que suficiente.
Seis bloques en el orden en que los encuentra el usuario
El encabezado (header) es la franja delgada de la parte superior. Contiene la identidad del sitio y los accesos principales para desplazarse. No es el espacio para colocar todo el contenido importante; si se recarga el encabezado, la página pierde jerarquía y se convierte en un amontonamiento de enlaces.
La sección principal (hero) es el primer bloque de gran tamaño. Consta de un mensaje claro, una frase de apoyo y un botón de acción principal. Un centro médico puede indicar las especialidades que atiende y ofrecer un botón como «Reservar cita». Una tienda puede destacar su especialidad del día con la opción «Ver productos». Si la sección principal intenta explicar todo el negocio a la vez, se transforma en un folleto pegado arriba que el usuario de móvil terminará saltándose sin encontrar jamás la dirección o los precios.
Una sección (section) abarca un tema específico acompañado de su propio título: horarios, tarifas, equipo o preguntas frecuentes. Es el elemento que permite leer una página larga de un vistazo. Al pedir secciones a una IA, especifique la duda concreta que resuelve en lugar de usar la palabra de forma genérica. Pedir “Una sección llamada Horarios, con los días redactados en texto claro y no en una imagen” se interpreta perfectamente en cualquier idioma. En cambio, colocar una foto con la tabla de horarios impide que el texto se traduzca o se adapte bien.
El pie de página (footer) representa el cierre. Incluye la dirección física, los datos de contacto y la confirmación de los horarios. Cuando un usuario no encuentra lo que busca, suele desplazarse de forma instintiva hasta el final del sitio. Si el pie de página es solo una franja decorativa sin información útil, la experiencia se rompe.
La navegación (navigation) es la lista breve de enlaces, ubicada por lo general en el encabezado. Mostrar más de cinco elementos en un teléfono resulta excesivo. Si hay más opciones, deben agruparse bajo un único menú y no apretarse en una fila de palabras diminutas. Evite pedir una navegación que repita cada título de la página; eso sería un índice disfrazado de menú de navegación.
Una tarjeta (card) es un contenedor repetitivo pensado para mostrar información del mismo tipo: servicios, cursos o productos. Cada tarjeta mantiene la misma estructura: una imagen o icono si se dispone de él, un título, una frase explicativa y un botón de acción. Si cada tarjeta inventa su propia disposición interna, dejan de ser un conjunto coherente para convertirse en varios carteles inconexos.
Las mismas tarjetas en dos anchos distintos
Diseñar una página pensando únicamente en la pantalla de un ordenador provoca errores en aquellos lugares donde el teléfono móvil es la herramienta principal de acceso. Por ello, conviene indicar la distribución por columnas en la instrucción: en pantallas anchas, tres tarjetas en fila; en pantallas estrechas, una tarjeta debajo de otra. La información interior no cambia; solo se reorganiza la fila. Eso es una maquetación adaptable (responsive layout), y constituye una regla clara de funcionamiento, no un deseo estético. Decir únicamente “hazla adaptable” deja a criterio del modelo ocultar botones clave. En cambio, especificar “tres columnas en pantalla ancha y una en pantalla estrecha, manteniendo visible el botón de acción” asegura el resultado.
En el caso de las tabletas, se puede contemplar una distribución intermedia de dos columnas si se desea, aunque no es imprescindible. La regla de una o tres columnas transmite la noción fundamental: el contenido es una lista ordenada y la fila horizontal es simplemente un beneficio del ancho de pantalla.
El encabezado fijo (sticky header) —aquel que permanece visible al desplazarse hacia abajo— es una opción útil cuando la navegación requiere estar siempre a mano, pero puede resultar incómodo si consume un tercio de la pantalla en un teléfono pequeño. Pídalo solo si volver al menú principal es más relevante que leer el siguiente párrafo. Si decide incluirlo, use el nombre en inglés «sticky header» y fije la condición adecuada: debe ser delgado y no debe tapar los títulos principales al desplazarse.
Una página que parecía lista pero resultaba inservible
Un centro de salud local solicitó a una IA “una página de inicio elegante”. El modelo generó una imagen vertical de un pasillo, un eslogan flotante encima y una hilera de iconos claros sin ningún texto explicativo. En la pantalla del ordenador de la recepción se veía vistosa, pero al abrirla desde un teléfono en la parada del autobús, el eslogan tapaba la entrada principal, los iconos se amontonaban de forma ilegible y los horarios estaban integrados dentro de la propia imagen, impidiendo que los lectores de pantalla los leyeran o que el navegador los tradujera. En esa pantalla no había un encabezado (header), una sección principal (hero), secciones claras (sections) ni tarjetas (cards); solo era un póster con desplazamiento vertical.
La segunda instrucción estructuró los bloques con nombres precisos y dejó al margen los adjetivos estéticos: un encabezado con el nombre del centro y tres enlaces directos (citas, horarios y ubicación); una sección principal con una frase clara y el botón «Reservar cita»; tres secciones redactadas en texto legible; un conjunto de tarjetas para las tres especialidades principales (tres en fila en pantalla ancha y apiladas en móvil); y un pie de página con la dirección en formato de texto. La página adoptó una estructura clara y funcional, que es justo lo que necesita alguien que consulta el teléfono con prisa. La foto del pasillo pudo mantenerse dentro de la sección principal con un tamaño adecuado, sin entorpecer el contenido.
Ese es el cambio práctico que aportan estos seis términos en el trabajo diario. Evitan que el modelo dedique toda la respuesta a crear ambiente visual a costa de la usabilidad. La estética puede habitar dentro de un bloque estructurado, pero jamás reemplazarlo. Si redacta las instrucciones en su idioma, mantenga los seis nombres en inglés en la orden técnica y escriba las frases reales de su proyecto a continuación. La estructura técnica es universal; el contenido responde a la realidad local.
Cómo cambia la primera instrucción
Una primera instrucción completa puede resumirse en un solo párrafo técnico:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Justo debajo, en su idioma, detalle la información concreta de las tres secciones. La IA no necesita que le hablen en su idioma para situar un encabezado; usted necesita su idioma para definir que las tres secciones serán los horarios, los precios y cómo llegar, en lugar de repetir una frase promocional tres veces.
Esta es la estructura real que requiere la mayoría de pequeñas organizaciones. También es la que un modelo terminará adornando en exceso si solo se le pide un diseño “moderno y limpio”. El concepto “moderno” no define un bloque físico de la pantalla; encabezado, sección principal, sección, pie de página, navegación y tarjeta sí lo hacen. Conózcalos, inclúyalos en inglés en la orden técnica y mantenga la información útil en el idioma de quien va a leerla.
El siguiente paso no consiste en añadir más bloques generales, sino en definir cómo reacciona la página cuando necesita solicitar un dato o mostrar más información sin desviar al usuario a otra ventana. Esa es una función distinta a la de una sección, y a ello dedicaremos el próximo artículo.