¿Tu web hecha con IA también es morada, con degradados y un cohete? No es mala suerte. Si no le das un estilo, la IA te da el mismo que a todo el mundo.
El truco es darle el diseño de una web que ya funciona. Para eso está Refero Styles.
Por qué todas las webs con IA se parecen
Cuando le pides a una IA «hazme una web para mi negocio» sin más, rellena lo que no le dices con lo más típico que ha visto. Y lo más típico es fondo oscuro con morado, degradados, tarjetas con brillo y un emoji de cohete.
La solución no es escribir un prompt más largo. Es darle un manual de estilo concreto para que deje de adivinar.
Qué es Refero Styles
Una biblioteca con más de 2.000 estilos sacados de webs reales: Apple, Figma, Linear, Stripe, Vercel, Cursor, Notion, Airbnb, Nike, Duolingo, Raycast… Añaden nuevos cada semana.
De cada web tienes:
- Una vista previa del estilo.
- Sus colores, tipografías, espacios y componentes.
- Un DESIGN.md listo para copiar, y también en formato Tailwind v4, variables CSS o tokens de diseño.
Qué es el DESIGN.md
Es el manual de estilo de una web escrito para que lo entienda una IA. Un archivo de texto con:
- Colores, tipografía, espacios, bordes y sombras.
- Cómo se organiza la página y cómo son sus componentes (botones, tarjetas, menús…).
- Qué hacer y qué no con ese estilo.
- Prompts de ejemplo para pedirle cosas a la IA.
Nota
Refero aclara que no son guías oficiales de esas marcas: los genera a partir de las webs y reconstruye los ejemplos. Para inspirarte y darle dirección a la IA, es justo lo que necesitas.
Cómo usarlo (3 pasos)
De una web que te gusta a tu web
Elige un estilo
Entra en styles.refero.design y busca una web cuyo diseño te guste.
Copia su DESIGN.md
Abre la ficha, ve a la pestaña DESIGN.md y pulsa «Copy.md». Hay versión corta (Compact) y larga (Extended).
Pídele tu web
Pégalo en Claude, ChatGPT o Cursor y escribe: «Hazme la web de mi [negocio] siguiendo este DESIGN.md».
Consejo
Si trabajas con Claude Code o Cursor, guarda el texto como DESIGN.md en la raíz de tu proyecto y dile: «sigue el DESIGN.md para todo el diseño». Así lo respeta en cada página nueva, no solo en la primera.
Misma petición, otra web
La diferencia está en lo que le das, no en cómo se lo pides:
| Sin DESIGN.md | Con DESIGN.md | |
|---|---|---|
| Colores | Morado y degradados de serie | La paleta del estilo que elegiste |
| Tipografía | La de siempre | Fuentes, tamaños y pesos definidos |
| Componentes | Tarjetas genéricas con brillo | Botones, menús y tarjetas con criterio |
| Resultado | Se nota que es IA | Parece hecha por un diseñador |
Copia el estilo, no la web
Aviso
Inspirarte en la paleta o la tipografía de otra web es normal en diseño. Lo que no debes copiar es su logo, su marca, sus textos ni sus imágenes. El contenido de tu web tiene que ser tuyo.
Créditos
Refero Styles es un proyecto de Refero. La biblioteca está en styles.refero.design.