design-playground
Visual canvas for designing and iterating UI components
All Skills in This Repository (7)
Pure Emerald Level Indicators
B1u3B01tno-bound-explore
Replace Tailwind-only visual styling with inline CSS in generated components.
B1u3B01tux-variation-designer
Generate divergent UX interaction-design variations as a React JSX artifact.
B1u3B01tmake-interfaces-feel-better
Enforce typography, surface, shadow, and animation standards in frontend UI code.
B1u3B01tdesign-variations
Generate multiple distinct visual variations of a UI component or page.
B1u3B01tnothing-design
Generate monochrome UI designs with three-layer hierarchy and token-aligned spacing.
B1u3B01tfrontend-design
Generate production-grade frontend interfaces with cohesive typography, color, and motion.
B1u3B01tstick-to-design-system
Restricts AI component iterations to existing Tailwind utility classes from the codebase.
Frequently Asked Questions
FAQPage SchemaHow to install Design Playground?▼
Run `npx skills add B1u3B01t/design-playground --all -g -y` in your terminal to install all skills in this suite globally.
What does Design Playground do?▼
It adds a local canvas page to your Next.js app where you drag in real components, preview them with mock data, and generate layout and style variations to compare side by side.
How to generate UI design variations?▼
The design-variations and ux-variation-designer skills produce multiple meaningfully different layouts and interaction models for any component, so you can compare directions instead of settling for one option.
Does Design Playground work with Cursor and Claude Code?▼
Yes. It connects to locally installed coding agents like Cursor, Claude Code, or Codex as child processes, with no API keys stored in the app.
What are the requirements for Design Playground?▼
You need Next.js 15+ with App Router, React 19, Tailwind CSS v4, and Node.js 20+. Everything runs locally and your code stays on your machine.
Related Repositories in Design & Creative
View All in Design & Creative→
nextlevelbuilderui-ux-pro-max-skill
AI design intelligence for professional UI, brands, and presentations
shadcn-uiui
Build and customize beautiful React component libraries with AI
nexu-ioopen-design
Open-source AI design studio for decks, prototypes, images, and video