66666-design/ai-design-director

Director de Diseño IA (ai-design-director)

Fuente de inspiración: How to turn your AI into a world-class designer de Anshu Chimala (Lenny's Newsletter, 2026-09-01). Este documento es una adaptación y expansión independiente, sin contenido original.

¿Por qué el resultado por defecto sabe a 'hecho por IA'?

Los grandes modelos de lenguaje eligen en cada paso la siguiente palabra que 'más probablemente satisfaga a todos'. Las decisiones de diseño (colores, diseño, tipografía) se promedian: degradado morado, imagen a la derecha del texto, barra de navegación superior, botón grande centrado. Decir 'sé único' o 'sé aleatorio' no funciona: el modelo escribirá algo que 'suena aleatorio' pero que en realidad es siempre igual. El cambio debe venir de fuera del modelo, y el gusto debe ser controlado por un humano o un revisor independiente.

Flujo general

1. Descubrir: Primero, divergir para encontrar direcciones que otros no encuentran.
2. Definir: Profundizar en la dirección elegida para darle una identidad propia.
3. Entregar: Pulir, simplificar y eliminar huellas de IA.

Cada fase debe producir algo visual (capturas de pantalla), no solo autoevaluaciones escritas.

---

I. Descubrir

Técnica 1: Semilla de texto aleatoria (String Seed of Thought)

Los modelos no generan verdadera aleatoriedad; por lo tanto, usamos el shell para generar números aleatorios y forzamos al modelo a 'leer' direcciones creativas a partir de ellos.

python3 scripts/seed.py         # o: head -c 48 /dev/urandom | base64 | tr -dc 'A-Za-z0-9'

Instrucciones para el implementador:

• Ejecutar el script para obtener una larga cadena de caracteres aleatorios.
• Buscar inspiración en la cadena para definir la dirección: paleta de colores, composición, tipografía, ritmo, metáforas. Observar subpatrones, números especiales, formas de letras, cualquier cosa que pueda inspirar.
• Usar el criterio para convertir esa dirección en algo estéticamente atractivo.
• La semilla es solo una fuente de inspiración; no debe aparecer en el resultado final.

Para múltiples propuestas, usar una semilla nueva para cada una, generarlas en paralelo y luego seleccionar.

Técnica 2: Brief creativo audaz y concreto

Reemplazar 'haz una landing page' por una descripción visual vívida, por ejemplo:

• 'Cada sección parece un fotograma de un juego de píxeles, pero sigue siendo una landing page funcional.'
• 'Todo en una pequeña ciudad 3D isométrica viva, donde cada función es un barrio.'
• 'Asimetría agresiva, colores estridentes y tipografía incómoda, espacios en blanco inquietantes: rompe todas las reglas, pero que sea hermoso.'

Proceso de tres pasos para encontrar ideas:

1. Pedir al modelo que enumere una larga lista de direcciones de lenguaje visual (solo una frase cada una) sin profundizar.
2. Elegir algunas que te gusten y escribir tu reacción honesta (qué te gusta, qué odias, qué es cursi). Deja que el modelo ajuste según tu gusto.
3. Cuando estés satisfecho, pedir al modelo que escriba un prompt conciso para que el agente implementador cree el primer prototipo.

Principio: Alimentar a la IA con ideas generadas por la IA solo produce lo que todo el mundo tiene. La selección humana es la fuente de la singularidad. Vale la pena probar ideas que 'suenan imposibles'. Los prompts fallidos se guardan para probarlos con modelos nuevos.

---

II. Definir

Técnica 3: Agente revisor independiente (bucle de retroalimentación positiva)

El implementador no es objetivo: ve su propio código y sus razones. Abre un 'revisor de diseño' separado:

En cada ronda:

1. Capturar pantalla del diseño actual (escritorio + ancho de móvil).
2. Llamar al revisor en un contexto completamente nuevo, solo con las capturas. Sin código, sin detalles de implementación, sin versiones anteriores, sin comentarios previos.
3. El revisor primero describe la estética que busca el diseño, luego imagina cómo lo haría un estudio de diseño de primer nivel, y finalmente enumera las mayores diferencias.
4. Por último, asigna una puntuación del 0 al 10: qué tan cerca está del nivel de ese estudio.

El prompt del revisor debe especificar:

• Evaluar tanto la estructura general y la composición, como los detalles.
• Penalizar el uso excesivo de efectos, la pomposidad y los patrones que parecen generados por IA.
• La retroalimentación debe ser concreta y concisa, sin rodeos.
• Debe ser audaz y tener opinión, no elegir la respuesta segura y fácil.

Reglas:

• La condición de parada solo la conoce el implementador (por ejemplo, 'solo se considera terminado cuando el revisor independiente da una puntuación de 9 o más'). No incluirla en el prompt del revisor para mantener su objetividad. Usar el mismo prompt del revisor en cada ronda.
• Primero ejecutar 1 o 2 rondas para ver si converge, luego decidir si continuar, evitando un gasto infinito de tokens.
• El revisor debe usar el modelo más grande y con mejor gusto disponible; el implementador puede usar un modelo más rápido y barato, pero no tan pequeño como para no poder seguir las instrucciones. El revisor solo toma decisiones, por lo que su uso es mínimo.
• Cuanto más objetiva sea la evaluación del revisor, mejor. Ideal: 'Aquí hay 5 imágenes: 4 de trabajos profesionales y 1 nuestra. Ordénalas por sofisticación y gusto.' Se pueden incluir imágenes de referencia como tablero de inspiración, dejando claro que son 'para referencia, no para copiar'.

Técnica 4: Enriquecer visualmente con generación de imágenes

Los agentes programadores tienden a usar degradados, formas geométricas y patrones simples en lugar de imágenes reales, y eso es una huella de IA. Exigir activamente:

• Usar generación de imágenes para crear imágenes principales, texturas, ilustraciones, fotos de producto. Se pueden combinar con shaders o efectos 3D.
• Verificar el resultado real con capturas de pantalla del navegador, fotograma a fotograma.
• La clave de la API solo se usa en desarrollo local. Usar una clave con límite de uso separada, guardarla en un archivo ignorado por git (por ejemplo, .env.agents) y anotarla en el archivo AGENTS.md como 'clave de desarrollo, no debe distribuirse con el producto'. Nunca escribirla en el código o en el producto final.

Técnica 5: Animaciones avanzadas con generación de video

• Elementos animados: Generar bucles de video sobre un fondo de color sólido. Luego, eliminar el fondo usando técnicas de keying o modelos de matting de video. Superponer el resultado en cualquier lugar de la interfaz; no debe parecer un video. Para efectos como refracción de vidrio, renderizarlos primero sobre el color de fondo de la página (horneando la refracción) y luego hacer el matting.
• Transiciones de estado: Generar transiciones interpolando entre el fotograma inicial y final. Usar el fotograma final de la transición anterior como el fotograma inicial de la siguiente para asegurar continuidad. Reproducir arrastrando fotograma a fotograma con el desplazamiento o gestos del usuario.
• Los modelos de video se actualizan rápidamente. Se puede usar una plataforma agregadora con una sola clave para que el agente elija el modelo más adecuado.

---

III. Entregar

Técnica 6: Simplificar (hacer menos)

La IA solo añade, rara vez elimina. La moderación por sí sola transmite sofisticación. Preguntar elemento por elemento: '¿Realmente necesita estar en la pantalla?' Elementos comunes a eliminar:

• Halos de fondo, barras de progreso brillantes, degradados sin sentido.
• Énfasis de color aleatorio en texto y resaltados.
• Etiquetas, contenedores y espacios en blanco sobrantes cuando una imagen ya comunica lo necesario.
• Botones y campos de entrada personalizados que son más feos que los componentes nativos de la plataforma. Priorizar los componentes nativos.
• Texto explicativo redundante.

Eliminar código es 'arriesgado' para el modelo, por lo que necesitas empujarlo explícitamente.

Técnica 7: Eliminar huellas de IA (lista creada para este repositorio)

Antes de entregar, revisar cada punto y corregir si se cumple:

• Degradado púrpura/azul-púrpura, tarjetas de vidrio esmerilado apiladas, esquinas redondeadas y sombras grandes por todas partes.
• Área de héroe genérica con texto a la izquierda, imagen a la derecha, barra superior y botón principal centrado.
• Tres columnas de 'tarjetas de funciones' del mismo ancho con iconos lineales.
• Emojis usados como iconos; formas blob decorativas sin sentido y fondos de cuadrícula.
• Frases de título repetitivas ('Libera tu...', 'Hecho para...') y palabras de marketing vacías.
• El mismo ritmo en cada bloque: etiqueta pequeña, título grande, subtítulo, botón.
• Tipografía limitada a la sans-serif del sistema; demasiados o muy pocos niveles de tamaño de fuente.
• Estadísticas inventadas, reseñas falsas, muros de logotipos (eliminar todo o reemplazar con datos reales).
• Problemas de accesibilidad: contraste insuficiente, falta de indicadores de foco, desbordamiento en móvil. 'No profesional' también incluye la mala accesibilidad.

---

Lista de verificación para el agente

1. Definir el propósito, la audiencia y las restricciones de marca que deben mantenerse (si no hay restricciones, no imponerlas).
2. Fase de propuestas: una semilla aleatoria + un brief creativo concreto por propuesta; generar 2–4 en paralelo, mostrar capturas para que un humano elija.
3. Una vez elegida, iniciar el bucle de revisión: captura → revisión en contexto nuevo → modificar → nueva captura. Primero 1–2 rondas, observar si converge.
4. Si es necesario, añadir imágenes/videos generados, verificar fotograma a fotograma.
5. Simplificar + revisar la lista de huellas de IA + verificar accesibilidad (contraste del texto del cuerpo ≥ 4.5:1).
6. Entregar: capturas finales, historial de puntuaciones del revisor, semillas y briefs utilizados (para poder reproducir).

Seguridad

• No escribir ninguna clave de API en el producto final, el repositorio o los registros.
• Al generar contenido, tener en cuenta los derechos de autor: no pedir imitar el trabajo específico de artistas vivos o marcas registradas.
• Las imágenes de referencia solo sirven como punto de referencia, no para copiar el diseño de otros.