Una imagen vale más que mil tokens

Parte de mi trabajo en Repaint es lograr que la IA genere sitios web que realmente se vean bien. Es sorprendentemente difícil. Los modelos de IA tienden a caer en los mismos clichés visuales una y otra vez. Es tan consistente que un "sitio web de IA" se está convirtiendo en una estética reconocible.

Probamos docenas de formas de romper ese patrón. En el camino, obtuvimos una comprensión mucho más profunda de los modelos, que queríamos compartir.

Este es un sitio web de IA bastante estándar: estilo genérico, contenido mínimo y diseños sobreutilizados. Y por supuesto, el ocasional botón ilegible.

Solo le di una cantidad mínima de dirección. Puede parecer injusto, pero creo que es una buena prueba. Obviamente si sigues dando instrucciones, podrías convertir esto progresivamente en un gran sitio web. Pero entonces tú estás haciendo todo el diseño. El modelo solo está programando. La mayoría de la gente no sabe hacer eso. El gran avance es cuando la IA puede diseñar sin que un humano especifique cada detalle.

El estilo predeterminado de la IA es básicamente un problema universal. Aquí se ve en un sitio de terapeuta. Uno pensaría que un sitio de terapeuta se vería dramáticamente diferente. Pero no, simplemente hace más o menos el mismo sitio con botones verdes.

¿Cómo se pueden mejorar los sitios web de IA?

Sistemas de diseño

Un primer movimiento obvio: pre-construir los colores, tipografías, bordes redondeados y sombras. Estas decisiones son difíciles de acertar cuando solo estás mirando código. Iniciar la IA con un buen conjunto significa menos formas de equivocarse.

Ayuda un poco. Se obtienen menos errores de color graves. Y aquí usó un fondo con imagen. Pero en general los diseños, la densidad del contenido y la estructura general son básicamente iguales. Un sistema de diseño le da al modelo una paleta; no le enseña cómo componer.

Coaching

Otro enfoque: darle al modelo un gran conjunto de instrucciones sobre cómo diseñar. Indicarle que haga cosas que normalmente no haría. El chatbot principal de Claude AI tiene una habilidad que hace exactamente esto:

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Es una mejora real. El diseño general es similar al anterior. Pero finalmente parece un sitio real de terapeuta, con tipografías más suaves y un estilo de botón único. Si cambiaras tu imagen, podrías publicarlo sin problema.

En nuestras pruebas, encontramos que las instrucciones personalizadas no solucionan la repetición. El modelo sigue recurriendo a los mismos patrones, así que básicamente sigue pareciendo el sitio estándar de IA. Solo una versión mucho más bonita.

Además, es más difícil evitar los patrones sobreutilizados de lo que el prompt de Claude sugeriría. Ellos dicen:

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

Así que en su lugar, el modelo sobreusa otras tipografías como Jost y Cormorant Garamond. Y ahora no puede manejar situaciones donde Inter es la opción correcta. Básicamente, puedes forzar la eliminación de sus malos hábitos, pero de una forma u otra, va a hacer las mismas cosas repetidamente.

Imágenes de referencia

¿Qué pasa si te saltas las palabras por completo y simplemente le muestras al modelo lo que quieres? Alimentarlo con una captura de pantalla de un diseño que te gusta y pedirle que construya algo similar.

Esta fue la primera táctica donde el modelo creó nuevos diseños fuera de los mismos 2-3 que siempre hace. Nunca hace una imagen a media pantalla por su cuenta.

Las imágenes son una forma super eficiente de compartir mucha información. El modelo capta diseño, espaciado, relaciones de color y densidad todo a la vez: cosas que nunca pensarías en describir en un prompt. Pero es frágil. No puede reproducir diseños complejos o animaciones. Y si el modelo tiene que llenar más contenido fuera de la referencia, vuelve al estilo predeterminado.

Plantillas de código y estilo

Esta es quizás la idea más de fuerza bruta. Simplemente dale código. Esto es lo que ChatGPT hace ahora mismo. Usa una biblioteca de plantillas cuando crea sitios.

Cuando haces esto, obviamente la calidad sube mucho. Solo le estás dando las respuestas a la IA. Pero la mayoría de la gente no tiene código previo para lo que quiere. Así que esto es principalmente una táctica para constructores de plataformas, creando una herramienta para otras personas.

Aunque hay un problema:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Si le das ejemplos a la IA, genera sitios web que se ven notablemente similares, y hace los ajustes mínimos necesarios para coincidir con el contexto. Así que cuando ChatGPT crea sitios ahora mismo, sin importar el prompt, parece la misma startup tecnológica.

Desafortunadamente, incluso con todas estas tácticas, no estoy seguro de que hayamos hecho algo mejor que una plantilla genérica de Wix.

Auto-iteración

¿Por qué no dejar que el modelo mire su propia salida y la mejore? Un diseñador de Wix puede hacer muchas iteraciones después de todo.

En teoría esto resuelve todo. En la práctica cocina durante 20 minutos, gasta $10 en tokens y se estanca rápido. Por ejemplo, hice que iterara sobre el sitio de lighthouse de antes. Ni siquiera notó el botón ilegible.

La auto-iteración es probablemente el futuro. Pero los modelos de hoy no están del todo listos.

Después de explorar todos estos enfoques, teníamos opciones reales para mejorar el estilo. Pero más allá de eso, sentimos que entendíamos cómo funcionan los modelos de IA a un nivel mucho más profundo.

Lo que aprendimos sobre los modelos de IA

Los modelos realmente prefieren el estilo predeterminado

Hay una estética predeterminada incorporada en los modelos. Es como el sitio web promedio en los datos de entrenamiento. Cada vez que toma una decisión, usa el estilo predeterminado a menos que tenga una razón explícita para no hacerlo. Por eso los sitios de IA son tan reconocibles, y por qué la auto-iteración realmente no te lleva a ningún lado. El modelo no converge hacia un diseño único. Converge hacia lo predeterminado. Si quieres que la IA rompa el patrón, necesitas darle algo que lo saque de lo predeterminado, como imágenes de referencia o muestras de código.

Las imágenes tienen más ancho de banda que las palabras

Es difícil dirigir al modelo con palabras. Puedes escribir un párrafo sobre querer algo "limpio, moderno, con mucho espacio en blanco" pero es casi inútil. Siempre terminas con el estilo predeterminado. Las imágenes pueden hacer que el modelo cree diseños únicos porque llevan más información. Una captura de pantalla codifica cientos de micro-decisiones sobre espaciado, colores y diseños que no puedes definir con palabras. Así que a menos que tengas muestras de código, las imágenes de referencia son la mejor forma de dirigir la IA.

Pre-construir es una curva de compensación

Cada táctica que probamos era una forma de pre-tomar decisiones por la IA. Cuando le das más, puedes elevar el techo de calidad, pero pierde flexibilidad. Prepararse para cada caso de uso potencial solo importa para una plataforma general como Repaint. Si es solo para ti, puedes (y deberías) darle a la IA referencias específicas para maximizar la calidad visual.

Cómo hacer mejores diseños con IA

La forma más simple de evitar lo genérico es darle a la IA referencias visuales únicas, como imágenes de sitios que te gusten, muestras de código, o ambos. Una vez que tienes el estilo, la IA debería poder generar más secciones que coincidan. Esto es mucho más efectivo que simplemente seguir dando instrucciones una y otra vez, que es lo que hace la mayoría de la gente.

O si encontrar referencias y construir un estilo es intimidante, podrías probar Repaint. Construimos una gran biblioteca de estilos con muestras de código y variables de diseño. La IA no está forzada a un solo estilo porque tenemos muchas opciones.

Más ampliamente, en cualquier herramienta visual de IA, ya sea diseño de apps, generación de imágenes o generación de video, en lugar de decir "hazlo más premium," intenta darle más capturas de pantalla y ejemplos. Es dramáticamente más efectivo.