Herramientas de diseño con IA para desarrolladores, clasificadas según lo que sustituyen

El resumen estándar enumera veinte herramientas en una tabla clasificada, lo que implica que son alternativas. La mayoría no lo son. Clasificarlas primero por tarea hace que las opciones reales sean mucho más claras.

Las dos primeras filas son las que más se suelen confundir. Un generador de pantallas y un agente en el repositorio realizan tareas genuinamente distintas, y la elección no es una cuestión de calidad, sino de si el código debe coexistir con código que ya tienes.

Hemos analizado la documentación actual de seis de los principales constructores y agentes de IA, centrándonos específicamente en lo que hacen sus funciones de sistema de diseño. El patrón es lo suficientemente constante como para presentarlo como una conclusión.

Ninguna de ellas produce un sistema de diseño. Todas asumen que usted ya tiene uno. Dos limitan la función a un plan de pago o enterprise, lo que indica que la consideran valiosa, y ninguna ofrece crear aquello que solicita.

Esto es importante para la evaluación. Si está eligiendo entre herramientas basándose en parte en "cuál mantiene mi UI alineada con la marca", la respuesta es ninguna de ellas, por sí sola. La variable que determina ese resultado es lo que usted les proporciona, y es la misma variable en las seis.

Cada herramienta en este espacio, ante un prompt sin restricciones, produce un estilo visual reconocible: un hero oscuro, un degradado, una sans geométrica de uso generalizado y tres tarjetas de características con bordes muy redondeados. La gente atribuye esto a las herramientas. No son las herramientas.

Un modelo al que se le pide una interfaz sin restricciones produce la interfaz más probable. La interfaz más probable es el centro de su distribución de entrenamiento, y cada modelo tiene, a grandes rasgos, el mismo centro porque fueron entrenados en la misma web. El mecanismo completo.

Lo que significa que cambiar de herramienta no lo soluciona. Añadir restricciones sí lo hace, y tenemos algunas mediciones sobre qué tan bien lo hacen las personas actualmente. Hemos muestreado 299 archivos DESIGN.md publicados para dar orientación de diseño a las herramientas de IA:

"Limpio" aparece en el 39% de estos archivos y "moderno" en el 36%. Ambas son palabras que un modelo satisface produciendo exactamente el resultado promedio del que la gente luego se queja. La herramienta está haciendo lo que se le pidió.

El contraejemplo merece ser visto más que afirmado. A continuación se muestra cómo es la *otra* mitad de la entrada: un sistema definido como valores en lugar de adjetivos, aplicado en tres superficies no relacionadas. Ninguna herramienta de la lista anterior produce esto; todas las herramientas de la lista anterior pueden consumirlo.

Dentro de las dos primeras filas, las herramientas son genuinamente alternativas, por lo que vale la pena ser específicos sobre en qué difieren. Todo aquí se refiere a la naturaleza de la herramienta más que a una clasificación de calidad, ya que la calidad en esta categoría cambia más rápido de lo que cualquier artículo puede rastrear.

La línea del registro de shadcn es el denominador común práctico. Las tres pueden consumir un elemento del registro, lo que significa que un conjunto de tokens entregado de esa manera funciona en toda la categoría sin trabajo de integración por herramienta. Eso tiene más valor al elegir que cualquier comparación de funciones, porque es la parte que no cambia al hacer el cambio.

Observe que los tres convergen en la misma estructura: un archivo en el repositorio que el agente lee, complementado opcionalmente por servidores MCP para elementos demasiado extensos para el contexto. Esa convergencia es la razón por la cual un DESIGN.md agnóstico a la herramienta es una mejor inversión que cualquier configuración específica por herramienta.

Rara vez se analiza en los resúmenes, pero es el factor dominante en las decisiones de adopción reales, ya que los modelos de precios son genuinamente distintos y fallan de maneras diferentes.

Las demos están diseñadas para lucir bien y cada herramienta de esta categoría tiene una impresionante. Aquí tiene cinco preguntas que permiten diferenciarlas más rápido que cualquier demo.

1. 1

   Pídale la segunda pantalla

   Cualquier herramienta crea una primera pantalla convincente. Pida una relacionada y compare: ¿mismo ritmo de espaciado? ¿misma jerarquía? ¿mismo tratamiento de botones? La consistencia entre pantallas es el producto real, y es precisamente lo que las demos nunca muestran.

2. 2

   Aplique sus restricciones reales y vea si se cumplen

   Entregue un archivo de design tokens y una lista corta de prohibiciones. Luego compruebe si el resultado realmente hace referencia a los tokens o si escribe valores literales junto a ellos. Esta única prueba descarta a la mayoría de los candidatos.

3. 3

   Pida una pantalla densa, no una landing page

   Una página de ajustes, una tabla de datos, un formulario con doce campos. Los diseños de marketing están muy representados en los datos de entrenamiento; la UI funcional densa es donde las herramientas difieren genuinamente.

4. 4

   Compruebe qué hace con el modo oscuro

   Pida ambos temas. Si deriva el modo oscuro invirtiendo el claro, obtendrá sombras inertes, grises medios turbios y un color de acento estridente; y los tendrá en cada pantalla posterior.

5. 5

   Observe cómo sale el resultado de la herramienta

   Específicamente para generadores de pantallas: ¿qué llega a su repositorio, en qué formato y cuánto trabajo de adaptación requiere la integración? Aquí es donde se invierte el tiempo realmente, y ninguna demo lo cubre.

Dado que todas las herramientas de la categoría consumen un sistema de diseño pero ninguna lo suministra, la acción de mayor impacto ocurre antes de elegir la herramienta. Cuatro elementos, ninguno de los cuales requiere un diseñador.

1. Roles de color semánticos, claro y oscuro. Nombrados por función —--primary, --muted-foreground, --border— no por tono. Sin ellos, el agente escribe valores literales y su hoja de estilos no aprende nada. Detalles.
2. Una escala de tipografía y espaciado con números reales. No "espaciado generoso". Una lista de valores permitidos y la declaración de que cualquier otro valor es un error.
3. Una lista de prohibiciones. Lo más impactante que puede escribir y lo que el 76% de las guías publicadas omite por completo. Cinco líneas son suficientes para empezar.
4. Todo ello en un archivo en el repositorio. No en una wiki, ni en un sitio de documentación, ni en un comentario de Figma. Un archivo que la herramienta lea antes de escribir cualquier cosa. Cómo escribirlo.

Con esto implementado, la mayoría de las herramientas de esta categoría producen resultados notablemente mejores y las diferencias entre ellas se reducen a la ergonomía y la integración. Sin ello, la mejor herramienta de la categoría produce la misma pantalla genérica que la peor.

Una señal que merece atención, ya que proviene de una dirección que no tiene incentivos para inflarla. Tres de los sistemas de diseño empresariales publicados abiertamente más grandes se reestructuraron en aproximadamente dieciocho meses, cada uno bajo la premisa de que el código que consume un sistema de diseño es escrito cada vez más por máquinas.

• IBM Carbon lanzó un servidor MCP que expone su documentación y ejemplos de código de componentes a los agentes.
• Salesforce Lightning reconstruyó su arquitectura CSS para desacoplar la estructura del estilo visual, describiendo SLDS 2 como la base de su sistema de diseño agéntico, y lanzó un linter para validar el marcado mecánicamente.
• Shopify Polaris dejó de dar soporte a su librería de React en favor de web components agnósticos al framework servidos desde un CDN.

Tres apuestas diferentes, una premisa compartida, sin coordinación. Esto sugiere que la parte duradera de este cambio no es ninguna herramienta de generación en particular —esas se renuevan rápidamente— sino el requisito de que un sistema de diseño sea legible por máquinas, esté explícitamente restringido y sea separable de su implementación.