Playfulsystem
Candy Pop
This prompt produces genuinely distinct output
Generates UI that looks like a high-end candy shop — pastel rainbow gradients, oversized rounded elements, bubbly shadows, soft saturated colors. Sweet, vibrant, and irresistibly clickable.
pastelgradientscolorfulrounded
Added February 10, 2026 by unslop.dev
Example output
Feature card
✦
Magic Moments
Capture and relive your favorite memories with beautiful, automatically organized collections.
View code
<div style="padding: 2rem; background: linear-gradient(135deg, #fff0f3, #f3f0ff);">
<div style="background: white; border-radius: 1.5rem; padding: 2rem; max-width: 20rem; box-shadow: 0 4px 20px rgba(244,114,182,0.15), 0 2px 8px rgba(192,132,252,0.1);">
<div style="width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, #f472b6, #c084fc); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; box-shadow: 0 4px 12px rgba(244,114,182,0.25);">
<span style="color: white; font-size: 1.25rem;">✦</span>
</div>
<h3 style="font-family: 'Nunito', 'Quicksand', sans-serif; font-size: 1.25rem; font-weight: 800; color: #2d1b42; margin: 0 0 0.5rem 0;">Magic Moments</h3>
<p style="font-family: 'Nunito', 'Quicksand', sans-serif; font-size: 0.9375rem; color: #5b4a6a; line-height: 1.6; margin: 0 0 1.25rem 0;">Capture and relive your favorite memories with beautiful, automatically organized collections.</p>
<button style="background: linear-gradient(135deg, #f472b6, #c084fc); color: white; border: none; border-radius: 9999px; padding: 0.625rem 1.5rem; font-size: 0.875rem; font-weight: 700; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 12px rgba(244,114,182,0.3);">Get Started</button>
</div>
</div>Stats row
2.4k
Photos
128
Albums
47
Shared
View code
<div style="padding: 2rem; background: linear-gradient(135deg, #f0f0ff, #fff0f3, #f0fff4);">
<div style="display: flex; gap: 1rem; max-width: 36rem;">
<div style="flex: 1; background: white; border-radius: 1.25rem; padding: 1.25rem; text-align: center; box-shadow: 0 4px 16px rgba(96,165,250,0.12);">
<div style="font-family: 'Nunito', sans-serif; font-size: 2rem; font-weight: 800; color: #60a5fa; margin-bottom: 0.125rem;">2.4k</div>
<div style="font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8b7a9a; text-transform: uppercase; letter-spacing: 0.05em;">Photos</div>
</div>
<div style="flex: 1; background: white; border-radius: 1.25rem; padding: 1.25rem; text-align: center; box-shadow: 0 4px 16px rgba(244,114,182,0.12);">
<div style="font-family: 'Nunito', sans-serif; font-size: 2rem; font-weight: 800; color: #f472b6; margin-bottom: 0.125rem;">128</div>
<div style="font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8b7a9a; text-transform: uppercase; letter-spacing: 0.05em;">Albums</div>
</div>
<div style="flex: 1; background: white; border-radius: 1.25rem; padding: 1.25rem; text-align: center; box-shadow: 0 4px 16px rgba(52,211,153,0.12);">
<div style="font-family: 'Nunito', sans-serif; font-size: 2rem; font-weight: 800; color: #34d399; margin-bottom: 0.125rem;">47</div>
<div style="font-family: 'Nunito', sans-serif; font-size: 0.75rem; font-weight: 600; color: #8b7a9a; text-transform: uppercase; letter-spacing: 0.05em;">Shared</div>
</div>
</div>
</div>Tag group with input
Favorites ✕
Travel ✕
Summer ✕
View code
<div style="padding: 2rem; background: #fff0f3;">
<div style="max-width: 24rem;">
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
<span style="font-family: 'Nunito', sans-serif; background: linear-gradient(135deg, #f472b6, #fb7185); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px;">Favorites ✕</span>
<span style="font-family: 'Nunito', sans-serif; background: linear-gradient(135deg, #c084fc, #a78bfa); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px;">Travel ✕</span>
<span style="font-family: 'Nunito', sans-serif; background: linear-gradient(135deg, #60a5fa, #38bdf8); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.375rem 1rem; border-radius: 9999px;">Summer ✕</span>
</div>
<input type="text" placeholder="Add a tag..." style="width: 100%; background: white; border: 2px solid rgba(244,114,182,0.2); border-radius: 9999px; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-family: 'Nunito', sans-serif; color: #2d1b42; outline: none; box-sizing: border-box;" />
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a candy pop style — sweet, saturated, and visually delicious. Think: if a high-end confectionery brand designed a web app. Pastel gradients, bubbly shapes, rainbow accents, and components that look good enough to eat. Not childish — polished, considered, and intentionally joyful. VISUAL RULES: - Background: Soft pastel base. Light pink (#fff0f3), lavender (#f3f0ff), or mint (#f0fff4). Subtle gradient okay: `background: linear-gradient(135deg, #fff0f3, #f0f0ff, #f0fff4)`. - Palette: Pastel rainbow with saturated pops. Pink (#f472b6), lilac (#c084fc), sky (#60a5fa), mint (#34d399), lemon (#fbbf24), coral (#fb7185). Use 2-3 per component, rotating across components. - Text: Dark but warm. #2d1b42 (deep purple-black) for headings. #5b4a6a for body. #8b7a9a for secondary. Never pure black. - Shadows: Colored and soft. NOT gray shadows. `box-shadow: 0 4px 16px rgba(244,114,182,0.2)` (pink shadow). Match shadow color to element's accent color. Always soft and diffused. - Border radius: Maximum roundness. 1.5rem (24px) on cards. 9999px (full) on buttons, badges, inputs. 2rem on large containers. Corners should disappear. - Typography: Rounded sans-serif. `font-family: 'Nunito', 'Quicksand', 'Poppins', sans-serif`. Headings bold (700-800). Body regular (400). Slightly larger sizes than typical — text-base to text-lg for body. - Borders: None or very subtle. If borders, use white with low opacity: `border: 2px solid rgba(255,255,255,0.5)` for a frosted candy effect. - Spacing: Generous and airy. p-6 to p-8 in cards. gap-4 to gap-6 in grids. Everything needs room to be sweet. SPECIFIC PATTERNS: - Cards: White bg with colored shadow, rounded-3xl, p-6. Accent stripe or dot in a candy color. Content centered or left-aligned. - Buttons: Gradient fills (pink→lilac or sky→mint), rounded-full, white text, colored shadow. Bold. Hover: slight scale(1.02) and deeper shadow. - Badges: Solid pastel fill, rounded-full, tiny. text-xs bold. White or dark text depending on fill lightness. - Inputs: White bg, rounded-full, subtle border. Focus: colored ring in accent color (ring-2 ring-pink-300). - Progress bars: Gradient fill (rainbow or two-tone), rounded-full track and fill, 8px height. Soft shadow on fill. - Icons: Simple, rounded line icons if needed. Match accent color. ANTI-PATTERNS: - No dark backgrounds. This is light-mode only. - No sharp corners. Minimum border-radius: 12px on any container. - No gray shadows. Always tinted with the nearest accent color. - No thin, austere typography. Everything should feel bouncy and substantial. - No monospace fonts. Nothing technical or serious. - No 1px borders. If borders exist, they're soft and decorative.
Related prompts
AI
Smart Component Builder
Updated 2 hours ago
Generate production-ready UI components from natural language descriptions. Supports React, Vue, and Svelte output.
React
AI-Powered
Open Source
New
Simple Pricing
Choose the plan that works for you
Most Popular
$29/mo
Everything you need to get started
✓ Unlimited projects
✓ 50GB storage
✓ Priority support
✓ Custom domains
Playful
Playful Rounded
system
Generates friendly, bouncy UI with oversized border-radius, saturated candy colors, chunky elements, and generous padding. The design equivalent of a smile — approachable, fun, never childish.
✦
Creative Toolkit
Everything you need to bring your ideas to life, packed into one delightful workspace.
Create your account
Playful
Claymorphism
system
Generates UI with soft 3D depth — inflated surfaces, inner shadows, pastel backgrounds, and elements that look like friendly clay objects sitting on a shelf. Tactile, dimensional, inviting.
Playful
Acid Rave
system
Generates UI pulsing with 90s rave energy — acid green on black, warped typography, smiley faces, repetitive grid patterns, and the frenetic joy of underground dance culture. 303 bassline as a design system.