La IA ha alcanzado capacidades humanas en diversos campos, pero el diseño ha sido durante mucho tiempo una de las áreas donde la IA tiene dificultades. Sin embargo, creo que muchas personas malinterpretan lo que significa "diseñar con IA".
En este artículo, basado en el post "How To Actually Design With AI" de Leon Lin (@LexnLin), he organizado cuidadosamente formas prácticas de proceder con el diseño usando IA, adaptadas al español.
Al final del artículo, comparto un kit de sistema de diseño para crear diseños de alta calidad con Claude.
Puedes recibirlo al final del artículo.
Requisitos previos a tener en cuenta
"Diseñar con IA" no significa dejarle todo a la IA. Las ideas, la dirección, la intuición y la creatividad provienen, en última instancia, de ti mismo. Es más fácil de entender si piensas en la IA como algo que "da forma (ejecuta)" esas cosas.
El flujo general consta de estos 3 pasos:
- Desarrolla tus propias ideas
- Reúne inspiración
- Traduce tus pensamientos en instrucciones y deja que la IA cree
Puedes usar cualquier herramienta o entorno (como Cursor, Codex o Claude). La esencia está en "convertir tus pensamientos en instrucciones".
La IA es muy buena ejecutando, pero aún no posee verdadera creatividad. Entiende "reglas de diseño" como espacios en blanco, tipografía, teoría del color y jerarquía. Sin embargo, no puede entender qué se siente "verdaderamente bueno", "original" o "significativo"; en otras palabras, el buen gusto.
Esta es la brecha más grande. En este punto, no puedes darle a la IA un verdadero buen gusto, pero puedes sortear esa limitación asumiendo que existe.
Método 1: Usar habilidades de diseño
Este es el enfoque más rápido. Cuando no tienes tiempo o estás haciendo algo pequeño, es efectivo apoyarse en "habilidades de diseño" preparadas previamente.
Algunos ejemplos incluyen:
- Impeccable (impeccable.style
- Emil Kowalski's UI skills (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
El proceso es muy simple:
- Añade habilidades de diseño
- Proporciona contexto a la IA
- Envía algunas instrucciones para que cree un sitio, aplicación o póster
- Corrige problemas evidentes
- Publica
Los resultados suelen ser "bastante decentes". Pueden parecerse a otros diseños generados por IA, pero usar habilidades de alta calidad evita los peores fallos y el aspecto "típico de IA". Este es el método que mucha gente utiliza realmente.
Método 2: Diseñar tú mismo con IA
Si quieres crear algo que "realmente destaque", debes ir un paso más allá. Quieres que los usuarios sientan que tu producto está "bien pensado" cuando lo usan; para eso, se requiere un proceso más intencional.
Ya sea una aplicación móvil, de escritorio, un sitio web, una landing page, un dashboard o un póster, primero necesitas una dirección clara. Si no sabes lo que quieres hacer, la IA no lo encontrará por ti.
Empieza con el "Significado"
Primero y ante todo, define la base. Intenta responder estas preguntas:
- ¿Para quién es esto?
- ¿Qué problema resuelve?
- ¿Cómo debería sentirse?
- ¿Qué representa?
La interfaz refleja el "significado" de un producto. Escríbelas. Aquí también puedes usar IA, pero el truco es usarla para hacerte preguntas en lugar de para diseñar.
Por ejemplo, pídele a la IA que te pregunte:
- ¿De qué trata este producto?
- ¿Quiénes son los usuarios previstos?
- ¿Qué emociones quieres transmitir?
- ¿Cuál debería ser la atmósfera de la marca?
- ¿Qué colores y fuentes encajan?
- Minimalista / Divertido / Premium / Técnico / Experimental — ¿qué dirección?
Reúne inspiración
Una vez que la dirección está definida, empieza a recopilar referencias. Una fuente potente es Mobbin, que tiene pantallas reales de productos en varias categorías.
Lo importante aquí no es solo mirar y pensar "esto se ve bien". Pregúntate por qué es bueno.
- ¿Es la disposición?
- ¿El espacio en blanco?
- ¿La tipografía?
- ¿La estructura?
- ¿La interacción?
Guarda las cosas que te gusten y organízalas en carpetas como:
- Navegación
- Hero
- Precios
- Tarjetas
- Pantallas móviles
- Dashboard
- Animación
- Tipografía
Dedicar tiempo a construir tu propia biblioteca de referencias es así como cultivas el "buen gusto".
Otras fuentes útiles incluyen Pinterest, Cosmos, Awwwards, Webflow Templates, Craftwork, Rebrand Gallery, Component Gallery, Savee y Lummi.
Nota: evita copiar diseños enteros. Es importante combinar múltiples ideas y elevarlas para que se ajusten a tu producto.
Mapea la estructura
A continuación, define lo que realmente necesitas construir. Para un sitio web, podría ser: navegación, hero, características, precios, testimonios, CTA y pie de página.
Para una aplicación, podría ser: onboarding, inicio, búsqueda, perfil, configuración, flujos principales y estados vacíos.
Cada sección necesita contenido claro. Para una sección hero, necesitas un titular, una descripción, un CTA y elementos visuales. La IA puede ayudar con el texto, pero la "claridad" proviene en última instancia de ti.
Construye por componentes
Finalmente, es hora de producir. Toma las ideas individuales que referenciaste y reutilízalas para que se ajusten a tu producto.
En lugar de decir "haz un sitio web completo", la clave es decir "basándote en este estilo, haz una sección hero adaptada a mi marca".
Procede paso a paso: Navegación → Hero → Tarjetas → Botones → Tipografía → Detalles. La IA es mucho mejor en tareas pequeñas, y esto te permite mantener el control.
Genera activos personalizados
Usa generación de imágenes según sea necesario. Las herramientas de generación de imágenes ya son lo suficientemente potentes. El truco es transmitir claramente el contexto, como color, estilo, composición y propósito.
Evita imágenes de stock genéricas. Usar imágenes personalizadas crea una sensación de unidad en todo el diseño.
Flujo de trabajo general
En resumen, el flujo es el siguiente:
- Define la idea
- Clarifica el propósito y el usuario
- Decide la dirección de la marca
- Reúne referencias
- Organízalas
- Mapea la estructura
- Crea componentes
- Genera activos
- Añade interacciones
- Pule el conjunto
Obtienes resultados mucho mejores que creando con una sola instrucción.
Método 3: Usar paneles de inspiración
También existe un "término medio" un poco más rápido. En lugar de ensamblar todo uno por uno, le proporcionas a la IA un conjunto curado de referencias.
Reúne capturas de pantalla de Mobbin, Awwwards, Webflow, etc., y pídele:
Por favor, combina el estilo y la dirección de estas referencias para crear un diseño para mi producto. Sin embargo, no las copies exactamente.
Por supuesto, esto asume que has proporcionado suficiente contexto y has dejado que la IA haga preguntas primero. Es más rápido que el trabajo manual, pero produce resultados mucho mejores que una instrucción genérica de una sola vez.
Resumen de los 3 enfoques
- Método 1: Habilidades de diseño — Rápido, resultados decentes
- Método 2: Basado en componentes — Más lento, pero la máxima calidad
- Método 3: Panel de inspiración — Equilibrado
Otras herramientas útiles
- Generación de SVG: Herramientas como Quiver pueden crear SVG. Como los elementos están separados, son más fáciles de animar.
- Video: Herramientas como Google Flow. Pueden mejorar heroes, fondos y demostraciones de productos.
- Bibliotecas de imágenes: Plataformas como Lummi. Pero elige imágenes que se ajusten a la marca.
- Capas: Añade profundidad, movimiento e interacción con eliminación de fondos y superposición de capas. La acumulación de detalles marca una gran diferencia.
Conclusión
La IA no reemplaza tu pensamiento.
- Qué hacer
- Por qué es importante
- Para quién es
- Cómo debería sentirse
Tú eres siempre quien decide estas cosas. La IA solo las ejecuta más rápido. Los mejores resultados no provienen de mejores instrucciones, sino de un mejor gusto.
Este artículo fue reconstruido en español basándose en el post de X "How To Actually Design With AI" de Leon Lin ([@LexnLin](https://x.com/@LexnLin)).
Estoy distribuyendo el "Claude Design System Kit" de forma gratuita en LINE.
▼ Regístrate en LINE para recibir el "Claude Design System Kit"
https://t.co/90omRA4UQ7
Por favor, únete al Open Chat (LINE OpenChat) y luego, desde el LINE oficial mencionado en las notas, envía:
Design System
y podrás recibir el beneficio.
※ Por favor, abstente de enviar palabras clave dentro del Open Chat.
Recomiendo meter la plantilla en Claude Design tal cual e intentar crear un solo documento. Solo con eso deberías hacerte una idea de cómo usar un sistema de diseño.
▼ Regístrate en LINE para recibir el "Claude Design System Kit"
