GOAT LabDesignPlayground：UI部品とデザインの作業台
部品のデザインを比較し、実際に操作して、単体で動くサンプルを保存できます。CSS生成、配色、SVG編集、cronなどの既存ツールも利用できます。
DesignPlaygroundとは？
フォーム、ナビゲーション、オーバーレイ、データ表示、チャート、認証、AIインターフェース、モバイルレイアウトを扱うブラウザツール集です。認証・決済・AIの例はローカルデモです。
仕組みは？
部品とデザインを選び、独立したプレビューで操作を試します。HTML・CSS・JavaScript全体のコピーやHTMLファイルの保存が可能です。生成ツールでは従来の出力形式を利用できます。
どんなときに使う？
コピペできるCSSのbox-shadow・グラデーション・border-radiusが欲しいとき、コントラストチェック付きの調和の取れたカラーパレットが必要なとき、すぐ使えるUIコンポーネントのスタイル、検証済みのcron式、編集したSVGパス、READMEやCLI向けのFIGletバナーが欲しいときに。何もインストールせずにすべて完結します。
概要（ひと目でわかる）
| コンポーネント集 | デザイン切替と単体HTML保存に対応した対話型サンプル |
|---|
| ジェネレーター | box-shadow, gradient, border-radius, color-palette |
|---|
| カラー出力形式 | Hex, RGB, HSL, OKLCH |
|---|
| チェックするWCAGレベル | AA 4.5:1 (normal) / 3:1 (large); AAA 7:1 / 4.5:1 |
|---|
| パレットスキーム | Complementary, triadic, tetradic, analogous |
|---|
| グラデーションタイプ | linear, radial, conic (sRGB/OKLCH/HSL interpolation) |
|---|
| cronデフォルト / シミュレーション | */5 * * * * (every 5 min); next 10/50/100 runs, exports crontab + K8s CronJob |
|---|
| ASCIIバナー | FIGlet, 16 fonts (Standard, Big, Slant…), max 20 chars |
|---|
よくある質問
box-shadowジェネレーターは何を出力しますか？
offset-x、offset-y、blur-radius、spread-radius、colorからCSSのbox-shadow値を生成します。insetキーワードに対応し、カンマ区切りで複数のレイヤーを重ねられます。結果はCSSまたはTailwindとしてコピーできます。
カラーツールはどのコントラスト基準を使いますか？
WCAG 2.1です。テキストがAA（通常テキスト4.5:1、大きい文字3:1）とAAA（7:1 / 4.5:1）を満たすかどうかを判定します。パレットは補色・トライアド・テトラード・類似色のスキームで生成し、Hex、RGB、HSL、OKLCHで出力します。
デフォルトのcron式は何で、どんな動作をしますか？
cronビルダーは */5 * * * * から始まり、これは5分ごとに実行されます。5つのフィールドそれぞれを解説し、UTCやAsia/Tokyoなどのタイムゾーンで次の10/50/100回の実行時刻をシミュレートし、crontabとKubernetes CronJobのYAMLを書き出します。
どのグラデーションタイプに対応していますか？
線形（linear）、放射状（radial）、円錐状（conic）のグラデーションに対応し、色の補間方式をsRGB、OKLCH、HSLから選べます。カラーストップをドラッグし、角度を設定して、backgroundの値をCSSまたはTailwindとしてコピーできます。
入力したデータはどこかにアップロードされますか？
いいえ。すべてのツールは完全に静的かつクライアントサイドで動作します。生成もプレビューもすべてブラウザ内で行われ、サーバーには一切送信されません。
関連ツール