GOAT LabDesignPlayground: Werkbank für UI-Komponenten
Designs vergleichen, Interaktionen ausprobieren und eigenständige Beispiele exportieren. CSS-Generatoren, Farbwerkzeuge, SVG-Bearbeitung und Cron-Werkzeuge bleiben verfügbar.
- Kostenlos
- Ohne Anmeldung
- Offline nutzbar
Was ist DesignPlayground?
Eine Sammlung für den Browser mit Formularen, Navigation, Overlays, Datenansichten, Diagrammen, Anmeldung, KI-Oberflächen und mobilen Layouts. Anmeldung, Zahlung und KI sind lokale Demonstrationen.
Wie funktioniert es?
Komponente und Stil wählen, die isolierte Vorschau bedienen und das vollständige HTML/CSS/JavaScript kopieren oder als HTML-Datei herunterladen. Generatoren behalten ihre bisherigen Exportformate.
Wann sollte ich es nutzen?
Nutze es, wenn du einen kopierfertigen CSS-box-shadow, -Gradient oder -border-radius brauchst, eine harmonische Farbpalette mit Kontrastprüfung, fertige UI-Komponenten-Styles, einen geprüften Cron-Ausdruck, einen bearbeiteten SVG-Pfad oder ein FIGlet-Banner für eine README oder CLI – alles, ohne etwas zu installieren.
Auf einen Blick
| Komponentenbibliothek | Interaktive Muster mit Stilwahl und eigenständigem HTML-Export |
|---|
| Generatoren | box-shadow, gradient, border-radius, color-palette |
|---|
| Farb-Ausgabeformate | Hex, RGB, HSL, OKLCH |
|---|
| Geprüfte WCAG-Stufen | AA 4.5:1 (normal) / 3:1 (large); AAA 7:1 / 4.5:1 |
|---|
| Paletten-Schemata | Complementary, triadic, tetradic, analogous |
|---|
| Gradient-Typen | linear, radial, conic (sRGB/OKLCH/HSL interpolation) |
|---|
| Cron-Standard / Simulation | */5 * * * * (every 5 min); next 10/50/100 runs, exports crontab + K8s CronJob |
|---|
| ASCII-Banner | FIGlet, 16 fonts (Standard, Big, Slant…), max 20 chars |
|---|
Häufig gestellte Fragen
Was gibt der box-shadow-Generator aus?
Er erstellt CSS-box-shadow-Werte aus offset-x, offset-y, blur-radius, spread-radius und color, unterstützt das Schlüsselwort inset und erlaubt es, mehrere durch Kommas getrennte Ebenen zu stapeln. Kopiere das Ergebnis als CSS oder Tailwind.
Welchen Kontraststandard verwendet das Farb-Tool?
WCAG 2.1. Es zeigt an, ob Text AA (4.5:1 für normalen Text, 3:1 für großen) und AAA (7:1 / 4.5:1) besteht. Paletten werden über komplementäre, triadische, tetradische oder analoge Schemata erzeugt, mit Ausgabe in Hex, RGB, HSL und OKLCH.
Was ist der Standard-Cron-Ausdruck und was bewirkt er?
Der Cron-Builder startet mit */5 * * * *, was alle 5 Minuten ausgeführt wird. Er erklärt jedes der 5 Felder, simuliert die nächsten 10, 50 oder 100 Ausführungszeiten in Zeitzonen wie UTC und Asia/Tokyo und exportiert crontab sowie Kubernetes-CronJob-YAML.
Welche Gradient-Typen werden unterstützt?
Lineare, radiale und konische Gradienten, mit wählbarer Farbinterpolation in sRGB, OKLCH oder HSL. Ziehe die Farbstopps, lege den Winkel fest und kopiere den background-Wert als CSS oder Tailwind.
Werden meine Daten irgendwohin hochgeladen?
Nein. Jedes Tool ist vollständig statisch und clientseitig – die gesamte Generierung und Vorschau erfolgt in deinem Browser, und nichts wird an einen Server gesendet.
Verwandte Tools