design-playground

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.

Generate divergent UX/layout variations for interface components. Use when a user uploads a screenshot or describes an existing UI and wants redesign explorations, UX improvements, layout alternatives, or interaction pattern variations. Triggers on phrases like "make it better UX", "redesign this", "give me variations", "improve the flow", "simplify the UX", "explore different approaches", "how else could this work", or any request to rethink how an interface element works — not just how it looks. This skill focuses on structural and interaction design divergence, NOT cosmetic/style variation.

Enables maximum creative freedom using inline CSS styles instead of Tailwind. Use when exploring expressive, unconventional designs without design system constraints.

Constrains iterations to use only existing Tailwind utility classes from the codebase. Use when maintaining design system consistency is important and the component should integrate seamlessly with the existing UI.

Generates multiple distinct visual variations of a component or page, exploring divergent styles, layouts, and aesthetic directions. Use when the user wants to explore design alternatives, iterate on a UI with variety, compare visual approaches, or generate multiple versions of a component or page.