Skill: aa-on-ai/whimsical-design (version 1.0.0)

# Whimsical Design Skill ## ⚠️ Creative Pack — NOT auto-apply This skill is part of the creative pack. Do NOT apply it by default on every visual task. **Use ONLY when at least one is true:** - user explicitly asks for personality, delight, whimsy, or brand expression - task is marketing, landing page, portfolio, launch, or editorial - the default/safe output is clearly the problem (everything looks the same) - multiple creative directions are being explored on purpose **Do NOT use when:** - building utility UI, admin tools, settings pages, or internal tools - the product already has a clear design language you should match - the default aesthetic is already appropriate for the product category - task is primarily about structure, states, or production hardening If in doubt, skip this skill. Core skills (design-review, ux-baseline-check, ui-polish-pass) are always safe. This one requires judgment about whether "push past safe" is actually what the product needs. ## When It Applies Design-review catches quality problems. This skill pushes toward delight. Use alongside `skills/design-review/SKILL.md` when the triggers above are met. ## The Bar Would someone screenshot this and send it to a friend? Would it make them smile? If no, push further. ## Core Principles ### 1. Whimsy Over Sterile Default away from corporate SaaS. Toward warmth, personality, surprise. Think: the feeling of opening a Playdate box, or the first time you saw a Teenage Engineering product page. - Pixel art, hand-drawn textures, playful illustrations - Warm color palettes over cold neutral grays - Personality in empty states, loading screens, error messages - Small details that reward people who look closely ### 2. Juice Everything should feel alive. Static interfaces are dead interfaces. - Micro-interactions on hover, click, drag - Subtle spring animations on state changes - Parallax, bob, breathe — things that move even when idle - Sound design where appropriate (click, whoosh, chirp) - The difference between "functional" and "delightful" is 50ms of easing **Concrete recipes:** - Hover on cards: `scale(1.02)` + subtle shadow increase + 150ms ease-out - Button press: `scale(0.97)` for 100ms, then back. feels tactile. - Page entrance: stagger children with 50ms delay each, fade+translateY(8px), 300ms ease-out - Status indicators: pulse animation on "live" items (opacity 1→0.4→1, 2s infinite) - Charts: animate data points in on mount, left-to-right, 400ms ease-out with 30ms stagger - Hover on table rows: background-color transition 150ms + slight translateX(2px) to feel "picked up" - Toggle switches: spring physics (slight overshoot on slide, ~200ms) - Empty states: gentle floating animation on the illustration (translateY ±4px, 3s ease-in-out infinite) ### 3. Bold Aesthetic Commitment Before writing a single line of code, commit to a specific aesthetic direction. not "clean and modern" — that's a non-decision. pick an extreme and execute it with intention: - brutally minimal (nothing that doesn't earn its place) - maximalist chaos (dense, layered, overwhelming in the best way) - retro-futuristic (old tech aesthetics, modern capability) - organic/natural (textures, warmth, imperfection) - luxury/refined (thin weights, generous space, precious materials) - playful/toy-like (rounded, bouncy, colorful, tactile) - editorial/magazine (type-forward, dramatic scale, reading rhythm) - brutalist/raw (exposed structure, no decoration, confrontational) - industrial/utilitarian (functional, dense, no-nonsense) the key is intentionality, not intensity. bold maximalism and refined minimalism both work. what doesn't work is the timid middle — the agent default of "a little of everything." write one sentence describing your aesthetic direction before building. if you can't articulate it, you haven't committed. ### 4. Background Atmosphere agents default to flat solid color backgrounds. that's the single biggest "AI built this" tell after card grids. backgrounds create mood before any content loads. techniques: - **noise/grain texture** — `background-image: url("data:image/svg+xml,...")` with a subtle noise pattern at 3-5% opacity. makes flat colors feel tactile. - **gradient mesh** — 2-3 radial gradients layered at low opacity. creates depth without being gaudy. - **subtle pattern** — dots, lines, or geometric shapes at 2-4% opacity. adds texture without distraction. - **layered transparencies** — overlapping semi-transparent shapes in the background. creates depth and atmosphere. ```css /* noise texture overlay */ .textured { position: relative; } .textured::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } /* gradient mesh */ .atmospheric { background: radial-gradient(ellipse at 20% 50%, rgba(232, 114, 58, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(45, 106, 79, 0.06) 0%, transparent 50%), #FAFAF8; } ``` don't: use these on every surface. use them on the page background and hero sections. inner components should be clean. ### 5. Craft Signals The opposite of "AI generated this." Every surface should feel touched by a human. - Grain textures, noise overlays, subtle paper feel - Intentional imperfection — slightly uneven, hand-placed, organic - Serif accents mixed with clean sans (not all one or the other) - Asymmetric layouts that feel composed, not random - Custom illustrations over stock icons where possible - SVG elements that respond to cursor or scroll ### 6. Color With Feeling Color should create mood, not just differentiate elements. - **Dominant + accent, not evenly distributed** — one dominant color owns the page. one sharp accent draws attention to what matters. a timid, evenly-spread palette is an agent default. commit: what's the ONE color someone remembers? - Studio Ghibli palettes: warm earth tones, saturated sky blues, forest greens - Pantone-chip energy: specific, intentional, named - Avoid: gray-on-white corporate void, neon-on-dark "developer tool" - Dark modes should feel cozy (deep indigos, warm blacks), not cold **Concrete recipes:** - Warm light mode: background `#FAFAF8` (not pure white), text `#1A1A1A` (not pure black), accent `#E8723A` (warm orange) or `#2D6A4F` (forest green) - Cozy dark mode: background `#1C1917` (warm black, not zinc-900), text `#E7E5E4`, accent `#F59E0B` (amber) or `#818CF8` (soft indigo) - Data viz palette (warm): `#E8723A`, `#2D6A4F`, `#D4A373`, `#588157`, `#BC6C25` — earthy, distinct, accessible - Data viz palette (cool): `#3B82F6`, `#8B5CF6`, `#06B6D4`, `#6366F1`, `#14B8A6` — techy but not cold - Status colors: success `#16A34A` (not neon green), warning `#D97706` (not yellow), error `#DC2626` (not pink), info `#2563EB` - Gradient (subtle, not gaudy): `from-amber-50 to-orange-50` for warm sections, `from-slate-50 to-blue-50` for cool sections — backgrounds only, never on text ### 7. Typography as Character Type carries personality before anyone reads a word. - Mix weights dramatically (thin headlines + chunky body, or vice versa) - Consider display faces for headers — not just system fonts - Letterspacing and line-height are design decisions, not defaults - Monospace for data/code, but make it feel intentional (not "I forgot to style this") ## References (study these) **Product / Physical** - Teenage Engineering — products as objects of desire, every surface designed - Panic / Playdate — joy in every interaction, surprise and delight as core values - Nothing Phone — glyphs, transparency, making tech feel human **Digital** - Perplexity marketing pages — confident whitespace, editorial feel, illustrations - Linear changelog — density with craft, every detail considered - Vercel ship pages — motion, drama, typographic confidence - Raycast — command palette as art form - Arc Browser — sidebar as expression **Visual Language** - Old Apple ads (Think Different era) — simplicity with soul - Studio Ghibli color grading — warm, lived-in, natural light - Indie game UIs (Celeste, Hollow Knight, Slay the Spire) — personality in every pixel - Poolsuite / Poolsuite FM — retro-futurism, nostalgia as design language ## Anti-Patterns (NEVER DO THESE) - Glassmorphism for its own sake (blur ≠ design) - Neon gradients as a substitute for personality - Generic card grids with drop shadows - Bootstrap energy (you know it when you see it) - "Clean and modern" as the entire design brief - Stock illustrations from undraw/humaaans (everyone uses these) - Gray-200 backgrounds with gray-300 borders everywhere - Tailwind defaults without customization - Cookie-cutter hero sections (headline + subhead + CTA + mockup) - Animations that don't serve meaning (spinning logos, floating shapes) ## Pre-Flight Checklist (run alongside design-review) ### Whimsy Check - [ ] **The smile test** — does this make you smile? Would you show someone? - [ ] **Personality audit** — remove one element. Does it still feel like "us"? If yes, you haven't gone far enough. - [ ] **Empty state check** — what happens when there's no data? Is it delightful or depressing? - [ ] **Error state check** — is the error message human? Funny? At least warm? - [ ] **Hover state check** — does hovering over things feel rewarding? ### Craft Check - [ ] **Texture** — is there grain, noise, or tactile quality? Or is it flat vectors on white? - [ ] **Typography** — are font choices intentional? Is there contrast in scale/weight? - [ ] **Color** — does the palette create a mood? Could you name the vibe in one word? - [ ] **Motion** — do transitions have easing? Do elements enter and exit with intention? - [ ] **Detail** — is there at least one "easter egg" level detail someone might notice on second look? ### Kill Switch - [ ] **Not whimsy for whimsy's sake** — does the personality serve the product or distract from it? - [ ] **Readable** — is body text still legible? Are CTAs still clear? - [ ] **Accessible** — does color contrast pass WCAG? Do animations respect prefers-reduced-motion? - [ ] **Performance** — are animations GPU-accelerated? Are textures optimized? ## Updating This Skill After design reviews where Aaron gives feedback on visual personality, tone, or craft: - What delighted him → add to Principles or References - What felt flat → add to Anti-Patterns - Specific decisions (texture style, color choice, animation timing) → project channel memory The goal: every build should feel more "us" than the last.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)