Hay un momento repetido en todo proyecto hecho con IA: funciona, hace lo que pediste, y se ve exactamente como los otros mil sitios hechos con IA esta semana. Mismo gradiente morado, mismo encabezado centrado, mismas tarjetas con esquinas redondeadas y sombra suave.
No es culpa del modelo. Es que le estás pidiendo que invente diseño desde cero cada vez, y lo que produce es el promedio de todo lo que ha visto. El promedio siempre se ve genérico.
La solución no es escribir prompts de diseño más largos. Es darle componentes que ya están bien hechos, escritos por diseñadores, con licencia abierta, y que se enchufan directo a Claude Code.
Qué es
21st.dev es un registro abierto de componentes de interfaz en React y Tailwind: encabezados, barras de navegación, secciones de precios, tableros, testimoniales, pies de página. Los publican diseñadores, no un generador.
La licencia es MIT. En español llano: los puedes usar en proyectos personales y comerciales, modificarlos, y no tienes que dar crédito ni pagar nada por el código. Eso es lo que lo separa de las bibliotecas bonitas que resultan tener una cláusula de "no lo uses para clientes".
Lo interesante no es el catálogo. Es que se conecta a Claude Code por MCP, así que en vez de entrar al sitio, buscar, copiar y pegar, le describes lo que quieres dentro de tu proyecto y él trae el componente, lo adapta a tus colores y lo deja instalado.
La conexión, dos minutos
- Crea la cuenta en 21st.dev y abre la consola de Magic, que es la parte de MCP.
- Copia tu clave de API de ahí.
- Corre el instalador en la terminal, dentro de la carpeta de tu proyecto:
npx @21st-dev/cli@latest install claude --api-key TU_CLAVE- Reinicia Claude Code y pruébalo con el comando
/ui.
Si /ui responde, ya está. Si no aparece, casi siempre es que no reiniciaste la sesión: el conector se carga al arrancar.
El paso que todo mundo se salta: definir tus colores y tipografías antes de traer el primer componente. Si no existe un archivo con tu paleta y tu escala tipográfica, cada componente que llegue va a traer las suyas y en cinco piezas ya tienes un collage. Escribe tus tokens de marca primero y dile a Claude que adapte cada componente a esos valores al instalarlo.
Cómo se pide
El comando /ui seguido de la descripción. Entre más específico el encargo, menos vas a estar corrigiendo después. Tres que uso tal cual:
/ui barra de navegación responsiva y moderna, con el logo a la
izquierda, 4 enlaces al centro y un botón de acción a la derecha.
En móvil se colapsa en menú hamburguesa. Fondo sólido, no
transparente, y que se quede fija al hacer scroll./ui sección de encabezado principal con un titular grande a la
izquierda, un subtítulo de una línea, dos botones (uno primario y
uno secundario) y una captura de producto a la derecha con marco
de navegador. Sin gradientes. Mucho espacio en blanco./ui tablero con barra lateral colapsable a la izquierda, una fila
de 4 tarjetas de métrica arriba (con número grande, etiqueta y
variación contra el periodo anterior en verde o rojo) y debajo una
tabla con paginación. Modo claro y oscuro.Nota el patrón: describo posición, jerarquía y lo que no quiero. Esa última parte es la que evita el gradiente morado.
Qué vale la pena tomar
No todo rinde igual. Ordenado por lo que más tiempo te ahorra contra lo que tardarías en hacerlo bien tú:
- Encabezados principales. El mejor retorno de la biblioteca. Es la sección que más se rehace, la que decide si alguien se queda, y la que peor sale cuando se genera desde cero.
- Barras de navegación. Aburridas de construir, llenas de detalles de comportamiento en móvil, y siempre iguales. Perfectas para tomarlas prestadas.
- Tableros. Barra lateral, tarjetas de métrica, tablas. Si estás armando una herramienta interna, esto es medio proyecto resuelto.
- Páginas de precios. La estructura de tres columnas con el plan del medio destacado ya está resuelta; lo que tú tienes que aportar es el contenido, no la maquetación.
- Testimoniales. Sirven cuando ya tienes testimonios reales. Si no los tienes, no metas el componente vacío con nombres inventados: se nota y quema.
- Pies de página. Rápido, sin misterio, y le quita a tu sitio la cara de proyecto sin terminar.
Lo que no tomaría de una biblioteca: nada que sea el corazón de tu producto. Si tu herramienta interna tiene una pantalla que es la razón por la que existe, esa se diseña a la medida. Los componentes son para todo lo que rodea a esa pantalla.
Los límites, dichos de frente
- React y Tailwind. Si tu proyecto es HTML plano, WordPress o Vue, hay que adaptar. Claude lo puede hacer, pero pierdes buena parte de la ventaja.
- La capa gratuita se acaba rápido. Son unas pocas generaciones al mes. Alcanza para probar y para un proyecto personal; en un proyecto real de cliente te la comes en una tarde. Revisa el precio vigente del plan de paga antes de asumir que va a salir gratis.
- Hay componentes premium que cuestan aparte del límite mensual.
- La importación desde Figma pide configuración extra. No es de dos minutos.
El error que produce el Frankenstein
Traer diez componentes de diez autores distintos y esperar que se vean como un sistema. No se van a ver: cada uno viene con su espaciado, su radio de esquina, su peso tipográfico y su lógica de sombras.
Lo que funciona es tratarlos como materia prima, no como producto terminado. El flujo:
- Define tus tokens primero. Dos o tres colores, una escala de espaciado, un radio de esquina, dos pesos de tipografía. En un archivo.
- Trae un componente a la vez y pídele a Claude que lo normalice contra ese archivo al instalarlo, no después.
- Revísalo en el navegador antes del siguiente. Es más rápido corregir uno que desenredar seis.
- Cuando lleves tres o cuatro, párate y pide una pasada de consistencia sobre todo lo instalado.
Y si el problema de fondo es que no sabes qué debería verse bien, la biblioteca no lo va a resolver sola. Ahí sirve más partir de una referencia concreta que ya te guste, que es el método de tomarle el diseño a un sitio, y entender por qué los diseños con IA se ven hechos con IA. Los componentes te dan piezas bien hechas. El criterio de cómo acomodarlas sigue siendo tuyo.