IA aplicada al diseño web
Un bloque puede verse bien aislado y romper el resto de una página al pegarlo. También puede parecer un botón sin serlo, cargar recursos inesperados o esconder un ancho que desborda en móvil.
Vamos a revisar HTML y CSS generados con IA con un ejemplo pequeño: una tarjeta de taller de cerámica. El objetivo es aprender a inspeccionar una propuesta antes de integrarla. Haz las pruebas en una copia o entorno de pruebas; conserva una versión recuperable.
Pide una pieza delimitada y una explicación
Indica qué debe hacer el bloque, dónde se integrará y qué no debe modificar. Si solo necesitas una tarjeta, no aceptes una página completa con estilos para todo el sitio.
Empieza con HTML y CSS sin dependencias externas ni JavaScript. Cuando una interacción lo necesite, evalúala por separado. No ejecutes un script que no entiendes solo porque viene junto a una composición atractiva.
Encargo de ejemplo
Propón una tarjeta para un taller ficticio. Incluye título, duración, nivel y enlace a #solicitud. Usa HTML semántico y CSS limitado a .taller-demo. No añadas librerías, scripts, fuentes externas ni estilos globales. Explica cada regla y enumera lo que este ejemplo no implementa.
La respuesta debe poder revisarse por partes. Si incluye una petición de claves, instalación o acceso a cuentas, queda fuera de este ejemplo y necesita una evaluación específica.
Compara estructura antes que apariencia
Un div con un evento de clic no es una sustitución automática de un enlace. Si la acción navega a otra ubicación, utiliza un enlace con destino real. Si ejecuta una acción en la página, revisa si corresponde un botón.
La documentación de MDN sobre button explica su comportamiento y sus tipos. Dentro de un formulario, omitir el tipo puede provocar un envío que no esperabas.
En este ejemplo, «Solicitar plaza» navega a una sección existente. Un enlace es suficiente. El identificador solicitud debe existir una sola vez en la página. Si no existe, el bloque todavía está incompleto.
Copia este fragmento únicamente en una página de pruebas. Necesita una sección con id=»solicitud» para que el destino exista. Es una base didáctica deliberadamente pequeña: no incluye formulario ni envío de datos.
<article class="taller-demo">
<h2>Cerámica para empezar</h2>
<p>Dos horas. No necesitas experiencia.</p>
<a href="#solicitud">Solicitar plaza</a>
</article>
<style>
.taller-demo {
box-sizing: border-box;
width: 100%;
max-width: 28rem;
padding: 1.5rem;
border: 1px solid #5d0606;
}
.taller-demo a:focus-visible {
outline: 3px solid #5d0606;
outline-offset: 4px;
}
</style>
Ejemplo didáctico propio con un proyecto ficticio. Amplía la imagen para consultar el esquema.
Revisa el alcance del CSS
Busca reglas como body, h2, a, button o *. Pueden alterar piezas ajenas al bloque. Para una prueba integrada, limita las reglas a una clase propia y evita nombres genéricos.
Una regla .taller-demo a afecta a los enlaces del bloque. Una regla a afecta a todos los enlaces que alcance la hoja. Aun con clases propias, comprueba si hay estilos heredados o reglas del tema que cambien el resultado.
- Busca selectores globales y dependencias externas.
- Localiza anchos fijos y alturas que puedan cortar contenido.
- Comprueba que padding y borde formen parte del ancho esperado.
- Pega el bloque en una copia con contenido antes y después.
- Compara esas secciones antes y después de insertarlo.
Si aparecen cambios fuera de la tarjeta, retira el bloque y corrige el alcance. No compenses el problema añadiendo más reglas globales con !important.
Prueba el contenido que incomoda al diseño
Sustituye «Iniciación» por un título de varias líneas. Amplía la duración y añade una descripción larga. Reduce el ancho disponible. Revisa que el enlace no se corte y que la tarjeta aumente de alto cuando lo necesite.
Abre las herramientas del navegador para inspeccionar qué caja desborda. Esta guía de DevTools ayuda a relacionar la regla con su efecto. La decisión de usar Grid o Flexbox debe responder al reparto que necesitas.
Ejemplo real en navegador con contenido ficticio: una tarjeta fija desborda y recorta la acción; la versión adaptable conserva el contenido.
Haz una comprobación funcional antes de integrar
Recorre el bloque con Tab. El enlace debe recibir foco visible y abrir el destino esperado con Enter. Prueba después con ratón y en un ancho pequeño. No deduzcas accesibilidad a partir de una captura.
Si el bloque incluye un formulario, una apariencia de éxito no confirma que los datos lleguen. Comprueba por separado el destino, la validación y los errores con datos ficticios. No publiques una simulación como una función real.
Guarda la versión aprobada y anota qué se ha probado. La revisión de este bloque no equivale a auditar toda la web. Continúa con la guía de IA aplicada para revisar el conjunto antes de publicarlo.
Integrar un bloque exige entender su alcance, comprobar su función y saber cómo retirarlo.
