Matt Dailey (Ref): 7 reglas para diseñar con IA sin slop

¿Por qué todas las interfaces empiezan a verse iguales?

Matt Dailey, fundador y CEO de Ref, lo dice sin rodeos: cada landing page, app y TUI luce igual. Son slop, y la mayoría son incomprensibles. Dailey, ingeniero que se asume "no diseñador", publicó en su blog una guía con siete reglas para deseslopizar el diseño de producto cuando se trabaja con agentes de IA. La publicamos porque condensa, en una sola lectura, los errores que founders sin diseñador cometen una y otra vez al delegar la interfaz a un agente.

El problema no es nuevo, pero la IA lo amplificó. Cuando pides a un agente que "agregue un affordance" o "haga X más prominente", el resultado suele sumar capas sobre capas hasta producir interfaces visualmente correctas pero funcionalmente confusas. La raíz, según Dailey, está en saltarse el paso de definir restricciones de diseño antes de empezar a iterar.

Las 7 reglas de Matt Dailey para diseñar sin slop

Dailey organiza su método alrededor de siete hábitos. No son teóricos: son prácticas que su equipo en Ref aplica a diario porque no tienen un diseñador dedicado.

1. Considerar el todo antes de tocar nada. El proceso de diseño tiene tres pasos: listar todas las restricciones, evaluar un abanico de soluciones que las satisfagan, y volver al paso uno si aparece una restricción nueva o se puede eliminar una vieja. Dailey toma este marco del libro Notes on the Synthesis of Form de Christopher Alexander, publicado originalmente en 1964 y todavía citado en escuelas de arquitectura. El error más caro, advierte, es saltar el tercer paso y caer en wackamole design: parchear un problema puntual sin revisar el sistema.

2. Quitar, no sumar. "Los agentes adoran agregar cosas", escribe Dailey. En código y en UI hacen lo mismo: doble cinturón, try-catch redundantes, una copia extra, un ícono de más. La regla operativa es mirar cada elemento y preguntarse: ¿lo necesito de verdad?

3. Iterar en una herramienta de diseño, no en producción. Lo que Dailey llama prototype gravity es un enemigo silencioso: cuando el agente construye la primera versión dentro de tu codebase, se vuelve más fácil refinarla que explorar alternativas. Recomienda Figma, Cursor Design Mode, Claude Design o incluso prototipos en HTML, y exige generar 3 o 4 variantes de cada pieza.

4. Componentes y librerías, siempre. Separar vistas y lógica, crear componentes reutilizables. En Ref mantienen una página /showcase donde los agentes ensamblan primero los componentes antes de conectarlos al producto principal. Es disciplina básica que paga dividendos visuales.

5. Preview deploys para evaluar con datos reales. Ningún mockup sustituye al producto corriendo con backend real. En Ref separan los PRs de frontend y backend para que cada cambio de UI pueda desplegarse y verificarse en una URL compartible.

6. Robar sin culpa. "La mayoría de problemas de UX ya están resueltos", dice Dailey. Recomienda juntar capturas de productos que resuelven problemas similares antes de empezar a diseñar, y usar ese material como contexto para el agente.

7. Explorar el propio gusto. Esta es la parte incómoda. Dailey cita a Kyle Chayka para señalar que la reflexión sobre la propia reacción ante un diseño no es propiedad de ningún círculo creativo: es una herramienta de trabajo. Los buenos diseñadores empiezan cada proyecto juntando referencias; los fundadores sin diseñador deben hacer lo mismo, y aceptar que el proceso incluye una "trilla" de críticas hasta que algo funciona.

El ecosistema de herramientas de diseño con IA en 2026

El ensayo de Dailey llega en un momento clave: las herramientas de diseño con IA se consolidaron como categoría propia. Figma, según reportó TechCrunch en mayo de 2026, lanzó un agente de IA que opera dentro de su canvas colaborativo, entiende contextos de diseño y permite lanzar múltiples agentes en paralelo. En el primer trimestre de 2026, Figma declaró ingresos por US$333,4 millones, un 46% más interanual.

Claude Design, según una prueba publicada por XDA Developers, lanzó en abril de 2026 bajo Anthropic Labs, corre sobre Opus 4.7 y está disponible solo para planes Pro y superiores. Su diferenciador es un panel Tweaks que genera sliders contextuales según el elemento recién creado: tipografía, espaciado, radios de esquina. La fidelidad al diseño original de Figma, cuando se importa un archivo, es mayor que la de sus competidores.

Google Stitch, alojado en Google Labs y gratuito, se reconstruyó en marzo de 2026 con un canvas nativo de IA, generación multi-pantalla, entrada por voz y modo vibe design. Funciona sobre Gemini 3 Flash en modo estándar y Gemini 3.1 Pro en modo experimental. Su punto fuerte es un editor de sistema de diseño a nivel paleta.

Replit Design Mode, lanzado en noviembre de 2025 y evolucionado a Design Canvas con el Agent 4 en marzo de 2026, integra un editor visual dentro de su entorno de código. Acepta archivos de Figma adjuntos y permite ajustes directos de tamaño, peso, espaciado y bordes sin gastar créditos adicionales.

En resumen: ya no hace falta elegir entre Figma y un generador por prompts. La frontera entre herramienta de diseño y generador de IA se difuminó, y la decisión hoy pasa por qué tan fino quieres el control manual.

¿Qué significa esto para tu startup?

Si tu equipo es de 2 a 5 personas y no tiene diseñador dedicado, el método de Dailey resuelve tres problemas concretos: cómo evitar interfaces genéricas, cómo iterar rápido sin atascarte en producción y cómo acumular criterio visual sin contratar a nadie.

Acción 1: Define tus restricciones de diseño antes de tocar un prompt. Escribe un documento corto —una página, máximo— con tres bloques: reglas tipográficas y de espaciado, flujos de usuario que la UI debe soportar, y estados de lógica de negocio que cambian el layout. Cuando llegue feedback de usuarios, revisa primero si cambia alguna restricción antes de pedirle al agente que arregle algo puntual. En Ref mantienen un documento de papercuts y molestias menores; solo mueven rápido las obvias y reservan las demás para una rediseño cohesivo.

Acción 2: Crea una página /showcase o equivalente en tu repo. Que sea el patio de juegos donde tu agente ensambla componentes antes de conectarlos al producto. Esto te da tres beneficios: ves cómo quedan los componentes aislados, fuerzas la reutilización, y reduces el prototype gravity porque cada variante nace en un lugar pensado para experimentar, no en el código de producción. Complementa con preview deploys automáticos por PR para que cualquier cambio de UI se pueda evaluar con datos reales.

Acción 3: Combina una herramienta de diseño con IA con una rutina de "robo" semanal. Dedica 30 minutos a guardar capturas de landing pages, dashboards y flujos que te gusten, y úsalas como contexto cuando pidas variantes al agente. Si trabajas en equipo chico, Figma con su agente de IA o Claude Design son los puntos de partida más sólidos en 2026; si el presupuesto es cero, Google Stitch cubre el 80% del flujo. Lo importante no es la herramienta sino el hábito de iterar 3 o 4 variantes antes de elegir.

La diferencia entre una interfaz hecha con IA que parece hecha con IA y una que parece hecha por un estudio pequeño no está en el modelo: está en si pensaste el sistema antes de pedirle al agente que dibuje.

Fuentes

• How I Design with AI — Ref Blog
• Figma adds an AI assistant to its collaborative canvas — TechCrunch
• I replaced Figma with Claude Design, Replit, and Google Stitch for a week — XDA Developers