Solid Glass
Un sistema de diseño inspirado en el cristal y adaptado para interfaces de aplicaciones de IA basadas en React.
Componentes de interfaz táctiles, físicos y técnicos construidos sobre shadcn/ui y Tailwind CSS.
Solid Glass es un sistema de diseño especializado y un tema CSS creado específicamente para aplicaciones de IA. Salva la distancia entre el diseño plano y el cristal líquido excesivamente transparente, ofreciendo texto legible junto con sutiles reflejos en los bordes y profundidad física.
Qué es
Proporciona una única hoja de estilos que define colores, tres grosores de cristal, movimiento y nombres de variables de shadcn/ui, además de componentes de interfaz adaptados como glifos de estado, vistas de diferencias (diff) y cuadros de razonamiento. Puedes configurar temas usando los controles integrados de su página Create y desplegar bloques enteros de espacios de trabajo para agentes directamente en tu proyecto React.
Para quién
Es ideal para desarrolladores frontend y diseñadores que construyen interfaces de IA, interfaces de chat o espacios de trabajo para agentes que buscan una estética serena y legible. No es adecuado para equipos que buscan estilos de diseño web corporativos tradicionales o puramente planos.
Funciones clave
Estética de Solid Glass
Ofrece un acabado sobrio que enfatiza la claridad y la estabilidad por encima de la refracción pesada.
Componentes del espacio de trabajo para agentes
Incluye glifos de estado, cuadros de redacción, vistas de diferencias y visualizaciones de razonamiento listas para usar.
Integración con shadcn/ui
Funciona directamente con componentes existentes de shadcn/ui apuntando a data-slots a través de un único archivo CSS.
Página Create interactiva
Permite ajustar controles de materiales como grosor, tinte, desenfoque y radio para generar variables CSS personalizadas.
Listo en 3 pasos
Nuestro veredicto honesto
Lo mejor
- Una hoja de estilos se integra limpiamente con configuraciones existentes de shadcn/ui y Tailwind
- Adaptado específicamente para respuestas de IA en streaming y comentarios de estado de agentes
- Incluye bloques de espacios de trabajo para agentes preconstruidos para la creación rápida de prototipos
- Proporciona una página Create interactiva para ajustar propiedades de materiales personalizadas
Sus límites
- Requiere un entorno existente de React 19 y Tailwind CSS 4 para su implementación
- Sobrescribe las variables de color predeterminadas, lo que requiere una limpieza manual de las plantillas estándar de inicialización de shadcn
- El estilo estético de nicho puede no encajar con la imagen de marca de aplicaciones tradicionales no basadas en IA
Precios y licencia
Gratuito bajo su licencia, sin opciones alojadas de pago mencionadas en el repositorio. El único coste es tu propio tiempo de ingeniería para integrar y dar estilo a tu aplicación.
Empleos para hispanohablantes
880 puestos remotos abiertos de entrenamiento de IA, actualizados el 15 de noviembre de 2026; la mayoría paga $20–$175 por hora. 22 de ellos piden hispanohablantes. Zekai los lista gratis; la solicitud va a la plataforma del empleador.
Alternativas
Estas herramientas de IA evaluadas hacen el mismo trabajo al instante — de nuestro directorio puntuado.
Úsalo, o deja que lo configuremos
FAQ
¿En qué se diferencia Solid Glass del cristal líquido?
El cristal líquido es casi transparente, lo que obliga a los lectores a luchar contra el fondo para ver el texto. Solid Glass limita la transparencia a un contorno, garantizando una gran legibilidad para texto denso y respuestas de IA en streaming.
¿Necesito modificar mis componentes existentes de shadcn/ui?
No. La hoja de estilos encuentra cada parte de tus componentes existentes de shadcn/ui utilizando atributos data-slot y clases existentes sin requerir reescrituras de componentes.
¿Puedo personalizar las propiedades del material de cristal?
Sí. La página Create incluida te permite ajustar el grosor, el tinte, el color de los gráficos, el tipo, el radio, el borde y el desenfoque para generar tus propias variables CSS.
