GOAT LabDesignPlayground: banco de trabajo de componentes UI
Compara diseños, prueba sus interacciones y exporta ejemplos independientes. También encontrarás generadores CSS, herramientas de color, edición SVG y utilidades cron.
- Gratis
- Sin registro
- Funciona sin conexión
¿Qué es DesignPlayground?
Una colección para el navegador con formularios, navegación, superposiciones, datos, gráficos, autenticación, interfaces de IA y diseños móviles. Los ejemplos de autenticación, pagos e IA son demostraciones locales.
¿Cómo funciona?
Elige un componente y un estilo, utiliza la vista previa aislada y copia su HTML/CSS/JavaScript completo o descarga un archivo HTML. Los generadores conservan sus formatos de exportación.
¿Cuándo conviene usarlo?
Úsala cuando necesites un box-shadow, degradado o border-radius CSS listo para copiar y pegar, una paleta de colores armónica con verificación de contraste, estilos de componentes UI ya hechos, una expresión cron validada, una ruta SVG editada o un banner FIGlet para un README o una CLI: todo sin instalar nada.
De un vistazo
| Biblioteca de componentes | Patrones interactivos con estilos y exportación HTML independiente |
|---|
| Generadores | box-shadow, gradient, border-radius, color-palette |
|---|
| Formatos de salida de color | Hex, RGB, HSL, OKLCH |
|---|
| Niveles WCAG verificados | AA 4.5:1 (normal) / 3:1 (large); AAA 7:1 / 4.5:1 |
|---|
| Esquemas de paleta | Complementary, triadic, tetradic, analogous |
|---|
| Tipos de degradado | linear, radial, conic (sRGB/OKLCH/HSL interpolation) |
|---|
| Cron por defecto / simulación | */5 * * * * (every 5 min); next 10/50/100 runs, exports crontab + K8s CronJob |
|---|
| Banner ASCII | FIGlet, 16 fonts (Standard, Big, Slant…), max 20 chars |
|---|
Preguntas frecuentes
¿Qué genera el generador de box-shadow?
Crea valores CSS de box-shadow a partir de offset-x, offset-y, blur-radius, spread-radius y color, admite la palabra clave inset y permite apilar varias capas separadas por comas. Copia el resultado como CSS o Tailwind.
¿Qué estándar de contraste usa la herramienta de color?
WCAG 2.1. Indica si el texto cumple AA (4.5:1 para texto normal, 3:1 para texto grande) y AAA (7:1 / 4.5:1). Las paletas se generan con esquemas complementario, triádico, tetrádico o análogo, con salida en Hex, RGB, HSL y OKLCH.
¿Cuál es la expresión cron por defecto y qué hace?
El builder de cron empieza con */5 * * * *, que se ejecuta cada 5 minutos. Explica cada uno de los 5 campos, simula las próximas 10, 50 o 100 ejecuciones en zonas horarias como UTC y Asia/Tokyo, y exporta crontab y YAML de CronJob de Kubernetes.
¿Qué tipos de degradado admite?
Degradados lineales, radiales y cónicos, con interpolación de color seleccionable en sRGB, OKLCH o HSL. Arrastra las paradas de color, ajusta el ángulo y copia el valor de background como CSS o Tailwind.
¿Se sube mi información a algún sitio?
No. Cada herramienta es totalmente estática y del lado del cliente: toda la generación y la vista previa ocurren en tu navegador, y nada se envía a un servidor.
Herramientas relacionadas