La IA ha alcanzado capacidades cercanas a las humanas en varios 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 ligeramente lo que significa "diseñar con IA".
En este artículo, basado en la publicación "How To Actually Design With AI" de Leon Lin (@LexnLin), he organizado cuidadosamente formas prácticas de proceder con el diseño usando IA en español.
Al final del artículo, estoy distribuyendo 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. Es más fácil de entender si piensas en la IA como algo para "dar forma (ejecutar)" a esas cosas.
El flujo general consta de estos 3 pasos:
- Desarrolla tus propias ideas
- Reúne inspiración
- Traduce tus pensamientos a instrucciones y deja que la IA cree
Puedes usar cualquier herramienta o entorno (plataforma) como Cursor, Codex o Claude. La esencia está en "convertir tus pensamientos en instrucciones".
La IA es muy buena para ejecutar, pero aún no posee verdadera creatividad. Entiende "reglas de diseño" como el espacio en blanco, la tipografía, la teoría del color y la jerarquía. Sin embargo, no puede entender lo que se siente "realmente 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 confiar en "habilidades de diseño" previamente preparadas.
Ejemplos incluyen:
- Impeccable (impeccable.style
- Las habilidades de UI de Emil Kowalski (GitHub: emilkowalski/skills)
- Skills.sh
- TasteSkill (tasteskill.dev
El proceso es muy simple:
- Agrega habilidades de diseño
- Dale contexto a la IA
- Envía algunas instrucciones para que cree un sitio, una aplicación o un póster
- Corrige problemas obvios
- Publica
Los resultados suelen ser "bastante buenos". Pueden parecerse a otros diseños generados por IA, pero usar habilidades de alta calidad evita los peores fracasos y el aspecto "típico de IA". Este es el método que mucha gente usa realmente.
Método 2: Diseñar tú mismo con IA
Si quieres crear algo que "realmente se destaque", necesitas ir un paso más allá. Quieres que los usuarios sientan que tu producto está "bien pensado" cuando lo tocan; para eso, se requiere un proceso más intencional.
Ya sea una aplicación móvil, de escritorio, un sitio web, una página de aterrizaje, un panel de control 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 UI refleja el "significado" de un producto. Escríbelos. Puedes usar la IA aquí también, 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á establecida, comienza a recopilar referencias. Una fuente poderosa es Mobbin, que tiene pantallas de productos reales en varias categorías.
Lo importante aquí no es solo mirar y pensar "eso 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 lo que te gusta y organízalo en carpetas como:
- Navegación
- Hero
- Precios
- Tarjetas
- Pantallas móviles
- Panel de control
- Animación
- Tipografía
Dedicar tiempo a construir tu propia biblioteca de referencias así es cómo 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 completos. Es importante combinar múltiples ideas y elevarlas para que se adapten a tu producto.
Mapea la estructura
A continuación, define lo que realmente necesitas construir. Para un sitio web, eso podría ser navegación, hero, características, precios, testimonios, CTA y pie de página.
Para una aplicación, podría ser incorporación, 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 reconstruyelas para que se adapten 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 ahora son lo suficientemente potentes. El truco es transmitir claramente el contexto, como el color, el estilo, la composición y el 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 se ve así:
- Define la idea
- Aclara 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
- Agrega interacciones
- Pule el conjunto
Obtienes resultados mucho mejores que creando con una sola instrucción.
Método 3: Usar tableros de inspiración
También hay un "punto intermedio" un poco más rápido. En lugar de armar todo uno por uno, le proporcionas a la IA un conjunto seleccionado de referencias.
Reúne capturas de pantalla de Mobbin, Awwwards, Webflow, etc., y pregunta:
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: Tablero 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 héroes, fondos y demostraciones de productos.
- Bibliotecas de imágenes: Plataformas como Lummi. Pero elige imágenes que se adapten a la marca.
- Capas: Agrega profundidad, movimiento e interacción con eliminación de fondo y superposición de capas. La acumulación de detalles marca una gran diferencia.
Conclusión
La IA no es un reemplazo para 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 basado en la publicación X de Leon Lin (@LexnLin) "How To Actually Design With AI".
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 poner la plantilla en Claude Design tal cual e intentar hacer un solo documento. Eso solo debería darte una idea de cómo usar un sistema de diseño.
▼ Regístrate en LINE para recibir el "Claude Design System Kit"
