GOAT LabDesignPlayground: 17 herramientas de diseño frontend gratis
DesignPlayground es un kit gratuito y totalmente del lado del cliente con 17 utilidades frontend: generadores CSS, una paleta de color con verificador de contraste WCAG, un builder de cron, un editor de rutas SVG y banners FIGlet. Previsualiza en vivo y copia CSS o Tailwind.
- Gratis
- Sin registro
- Funciona sin conexión
¿Qué es DesignPlayground?
DesignPlayground es una colección de 17 herramientas frontend que funcionan en el navegador, agrupadas en 10 galerías de componentes (botones, tarjetas, inputs, insignias, loaders, tooltips, switches, avatares, alertas, progreso), 4 generadores (box-shadow, degradado, border-radius, paleta de color) y 3 herramientas (ruta SVG, cron, banner ASCII).
¿Cómo funciona?
Cada herramienta funciona por completo en tu navegador, sin subir nada. Ajustas los controles (sliders, selectores de color, campos), ves una vista previa en vivo y copias el resultado. Los generadores exportan CSS puro o Tailwind; la herramienta de cron simula los tiempos de ejecución; la paleta verifica el contraste WCAG.
¿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
| Total de herramientas | 17 (10 component galleries, 4 generators, 3 tools) |
|---|
| 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