Generate interactive design decision playgrounds for testing fonts, colors, spacing, and layouts. Opens automatically in browser for live testing. Use when user needs to make visual design choices.
Helps users make design decisions through interactive browser-based playgrounds instead of iterative back-and-forth that creates code bloat.
open commandfont-picker.html - Test font pairings with real contentcolor-palette.html - Test color schemesspacing-tester.html - Test spacing scaleslayout-tester.html - Test layout options.claude/skills/design-playground/templates//tmp/design-playground-[type].htmlopen /tmp/design-playground-[type].html (macOS)User will copy design tokens from playground export. Format:
{
"fonts": {
"heading": "...",
"body": "...",
"mono": "..."
},
"colors": {
"text": "...",
"background": "...",
"accent": "..."
},
"spacing": {
"scale": "..."
}
}
After user provides exported tokens: