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。
我的数据会被上传到任何地方吗？
不会。每款工具都完全是静态且在客户端运行的——所有生成和预览都在你的浏览器中完成，不会向服务器发送任何内容。
相关工具