Le pides a la IA una landing y sale lo mismo siempre: degradado morado, tipografía de sistema, tres tarjetas con íconos, un botón redondeado. No es mala suerte. Es que la IA no tiene gusto, y cuando no le das un criterio se va al promedio de todo lo que vio.
El arreglo no es pedirle "que se vea premium". Eso es igual de vago que decir "hazlo bonito". El arreglo es darle un archivo con las decisiones de diseño ya tomadas, sacadas de un sitio que a ti te gusta, y obligarla a construir contra ese archivo.
Esto lo hago con clientes de Flow AI cuando no hay presupuesto de diseñador y sí hay prisa. Toma unos 20 minutos y cambia por completo el resultado.
Qué se roba y qué no
Aclaración necesaria, porque aquí es donde la gente se mete en problemas.
Lo que sí se toma: el sistema. Escala tipográfica, ritmo del espaciado, cuántos niveles de gris usan, qué tan redondeados están los bordes, si hay sombras o no, cómo se comporta el hover, cuánto aire dejan alrededor del texto. Eso no es propiedad de nadie —son decisiones de oficio que se repiten en miles de sitios.
Lo que no se toca: el logo, el nombre, la paleta exacta de una marca reconocible, las fotos, los íconos propietarios y el copy. Copiar eso no es inspirarse, es clonar, y además te deja con una página que se ve como una imitación barata de alguien más.
La diferencia práctica: si tomas la escala tipográfica de un sitio de arquitectura y la aplicas a una distribuidora de refacciones con sus propios colores, nadie va a notar el origen. Si copias el hero completo con todo y colores, todo mundo lo nota.
El proceso, en cuatro pasos
- Elige dos o tres referencias, no una. Una sola te da una copia. Tres te dan un promedio con criterio. Búscalas en tu industria y en una industria completamente distinta —de ahí sale lo que se siente fresco.
- Captura la evidencia. Screenshot de pantalla completa del inicio y de una página interior. Si sabes abrir las herramientas de desarrollador del navegador, inspecciona un título y un párrafo y anota el tamaño de letra, el interlineado y el color exacto. Si no, con las capturas alcanza: Claude lee imágenes y puede describir lo que ve con bastante precisión.
- Destila el archivo. Con el prompt de abajo conviertes las capturas en un documento de reglas. Ese documento es el activo, no las capturas.
- Constrúyelo todo contra el archivo. En cada petición posterior, el archivo va primero y la petición después.
El prompt que destila el sistema
Adjunta las capturas y pega esto tal cual:
Te voy a pasar capturas de 2 o 3 sitios web que me gustan.
Tu trabajo NO es describirlos ni copiarlos. Es extraer el sistema de
diseño que tienen abajo y escribirlo como un documento de reglas que
otro modelo pueda seguir sin ver las imágenes.
Analiza y escribe:
1. TIPOGRAFIA
- Qué tipo de fuente usan (serif / sans / display / mono) y para qué
- La escala completa: tamaño de h1, h2, h3, cuerpo y texto chico
- Interlineado del cuerpo y de los títulos
- Grosores usados (no me pongas 6 grosores, dime los 2 o 3 reales)
- Ancho máximo de línea del texto largo
2. COLOR
- Fondo, texto principal, texto secundario, borde, acento
- Dime cuántos grises usan de verdad. Casi siempre son 3, no 10.
- Si el fondo es blanco puro o tiene un tinte. Anota el tinte.
3. ESPACIADO
- La unidad base y los saltos que usan
- Cuánto aire hay arriba y abajo de cada sección
- Cuánto aire hay entre un título y su párrafo
4. FORMA
- Radio de los bordes en botones, tarjetas e inputs
- Si hay sombras: cuántas, qué tan sutiles
- Grosor y color de los bordes
5. MOVIMIENTO
- Qué pasa en hover
- Duración aproximada de las transiciones
- Si hay animación de entrada al hacer scroll
6. LAS TRES REGLAS QUE HACEN QUE SE VEA ASI
Escribe las 3 decisiones que, si las quito, el diseño se
desmorona. Sé específico. "Usa mucho espacio en blanco" no
sirve. "Deja 120px arriba y abajo de cada sección y nunca
pases de 680px de ancho en el texto" sí sirve.
Formato de salida: un documento markdown, en imperativo, dirigido
a quien va a construir. Sin explicaciones de por qué. Solo reglas.
Guárdalo como DISENO.md.Lo importante es el punto 6. Ahí es donde el modelo pasa de inventariar a tener criterio, y es lo que después evita que se vuelva genérico a la mitad del proyecto.
El paso que todo mundo se salta: revisar el archivo antes de usarlo. Léelo completo y borra todo lo que no sea una instrucción accionable. Si dice "diseño limpio y moderno", bórralo. Si dice "títulos en 48px con interlineado de 1.1", quédate. Un archivo de 30 líneas específicas rinde muchísimo más que uno de 200 líneas de adjetivos.
Cómo se usa después
Aquí está la mitad que casi nadie hace. El archivo no sirve si solo lo pegas una vez al principio del chat y luego pides diez cosas.
Si trabajas en la app de Claude: sube el DISENO.md al conocimiento de un Proyecto. Todo lo que pidas dentro de ese Proyecto ya lo tiene cargado.
Si trabajas en la terminal con Claude Code: deja el archivo en la raíz del repositorio y menciónalo desde tu CLAUDE.md. Se carga solo en cada sesión.
Y en cada petición, la fórmula es esta:
Construye [la pieza] siguiendo DISENO.md al pie de la letra.
Antes de escribir código, dime qué valores del documento vas a usar
para: tamaño de título, color de fondo, espaciado vertical de la
sección y radio de los botones.
Si algo que necesito no está en el documento, dímelo en vez de
inventarlo.Esa última línea es la que más trabajo hace. Sin ella, el modelo rellena los huecos con su promedio de siempre y en tres componentes ya volviste al morado.
Los cuatro valores que cargan casi todo el resultado
1. El ancho máximo del texto max-width
Un párrafo que cruza toda la pantalla se ve amateur al instante, sin importar la tipografía. Los sitios que se sienten caros mantienen el texto largo en una columna angosta. Es el cambio de una línea con más impacto visual de toda la lista.
Dónde se nota: páginas de producto, blogs, cualquier cosa con más de dos párrafos seguidos.
2. El aire vertical entre secciones
La IA aprieta todo. El diseño bueno respira. Si tu referencia deja 120px arriba y abajo de cada bloque y tú dejas 40, el mismo contenido con la misma tipografía se ve barato. Es aburrido de especificar y es lo que más se siente.
Dónde se nota: landings largas, one-pagers, presentaciones en web.
3. El tinte del fondo
Casi ningún sitio que se ve bien usa blanco puro. Usan un blanco con un poco de calor o un gris apenas perceptible. Cambia el fondo un par de puntos y todo el texto encima se lee distinto. Es invisible como decisión y obvio como resultado.
Dónde se nota: en todo, y sobre todo en pantallas grandes.
4. Cuántos grises hay de verdad
Un sistema real usa tres: texto principal, texto secundario, borde. La IA suelta ocho y el resultado se ve turbio porque nada tiene jerarquía. Fija los tres en el archivo y prohíbe inventar más.
Dónde se nota: tablas, formularios, dashboards, cualquier interfaz densa.
Un caso concreto
Distribuidora industrial, catálogo de 400 productos, la página la había hecho un sobrino hace seis años. No había presupuesto de diseño y sí una feria en tres semanas.
Las referencias no fueron sitios de distribuidoras —esos se ven todos igual de mal. Fueron dos sitios de estudios de arquitectura y uno de una marca de herramienta de gama alta. De ahí salió el archivo: tipografía sans en dos grosores, fondo con tinte cálido, tres grises, bordes de un pixel sin sombras, mucho espacio vertical.
Con ese archivo cargado, cada plantilla del catálogo salió consistente a la primera. No porque el modelo se haya vuelto diseñador, sino porque dejó de tener que decidir. Y ahí está el punto entero: la IA es mala eligiendo y muy buena ejecutando una elección clara.
El error que comete todo el mundo
Empezar por el color. Es lo primero que la gente quiere cambiar y es lo último que importa. Un sitio con la paleta perfecta y el espaciado apretado se ve mal. Un sitio en blanco y negro con buen ritmo y buena tipografía se ve bien.
El otro error es tratar el archivo como algo que se escribe una vez. Cada vez que veas algo que no te gusta en el resultado, no lo corrijas en el chat —corrígelo en el archivo. En dos semanas tienes un documento que ya no es "el diseño de aquel sitio", es el tuyo, y funciona para todo lo que construyas después.
Si te interesa el por qué detrás de esto, la guía de por qué tus diseños siempre se ven hechos con IA entra en el mecanismo, y 5 sitios para que tu IA diseñe mejor te da dónde buscar referencias que no sean las mismas de siempre.