La diferencia entre "funciona" y "se ve espectacular"
Que una página funcione es fácil. Que se vea increíble es donde la IA brilla si sabes pedirlo. La clave está en el vocabulario de diseño que le des.
Los lenguajes de estilos (como Tailwind o CSS) ya traen un montón de herramientas listas. Si se lo pides bien, la IA las aprovecha para lograr un resultado pulido sin que tú escribas una sola línea.
Prompts con "intención de diseño"
En lugar de decir "pon bonito", describe el resultado final. Un prompt poderoso suena así:
"Usa Tailwind CSS. Portada con tipografía grande y negrita, paleta de colores azul oscuro con acentos cian, tarjetas con bordes redondeados y sombras suaves, y espacio generoso entre secciones. Que se vea moderno y profesional."
Fíjate en las palabras clave que activan un buen diseño:
| Término | Qué hace la IA al leerlo | | --- | --- | | "tipografía grande y negrita" | Jerarquía visual clara en los títulos. | | "paleta de colores" | Coherencia cromática en toda la página. | | "bordes redondeados" | Formas suaves y amigables. | | "sombra suave" | Profundidad sin dureza. | | "espacio generoso" | Limpieza y que no se sienta apretado. | | "moderno y profesional" | Tono general: nada de plantillas genéricas. |
El diseño responsivo
Hoy la gente ve tu web en el celular, la tableta y la computadora. Eso se llama diseño responsivo, y la IA lo maneja por ti si lo pides:
"Asegúrate de que la página se vea bien en celular, tableta y computadora. En pantallas pequeñas, apila las tarjetas en una sola columna."
Pedir responsivo no es opcional: atrapa una gran parte de tu audiencia que navega desde el teléfono. Siempre inclúyelo en tus prompts de diseño.
Itera con ejemplos
La mejor forma de afinar el diseño es mostrar ejemplos. La IA responde muy bien a consignas como:
"Dame tres variantes de la portada: una minimalista en blanco, una en negro con acentos neón, y una en tonos pastel."
Esto te permite comparar y elegir, en lugar de adivinar a ciegas.
Combina el diseño con algo de personalidad. Pídele "un toque distintivo" o "que se sienta único". Son detalles los que evitarán que tu página parezca una plantilla.
Lista de comprobación antes de seguir
Antes de desplegar, verifica con la IA (o tú mismo) que tengas:
- [ ] Paleta de colores coherente en todas las páginas.
- [ ] Tipografía con jerarquía clara (título, subtítulo, texto).
- [ ] Diseño responsivo en celular, tableta y computadora.
- [ ] Espacios y márgenes consistentes.
- [ ] Textos sin errores de ortografía.
Cuando estés contento con el resultado, pasamos al capítulo siguiente: subir tu código a GitHub y preparar el despliegue.
Para recordar
- Usa vocabulario de diseño ("tipografía negrita", "paleta", "sombras suaves", "espacio") en tus prompts.
- Pide siempre diseño responsivo para celular y tableta.
- Iterar con variantes te ayuda a decidir más rápido.
- Revisa la lista de comprobación antes de publicar.