Jonathon's AI Wiki

Taste Skill Deep Dive

6 min read

Source: skill files (taste-skill SKILL.md)

The taste-skill is a senior UI/UX engineer that overrides default LLM biases toward safe, generic output. It introduces design dials for tuning aesthetic intensity, a creative arsenal of 30+ named patterns, a spring-physics motion engine, and a strict ban on the patterns that make AI output look like AI output. Where frontend-design sets the philosophy, taste-skill provides the specific vocabulary of patterns and components to execute it.

Design Dials

Three numeric dials control the output intensity. Higher is not always better --- the right setting depends on the project.

DESIGN_VARIANCE: 8 (default)

Controls how far the output deviates from conventional patterns.

  • 1-3: Conservative. Familiar layouts, standard patterns. Safe for enterprise/compliance contexts.
  • 4-6: Moderate. Some unexpected choices, but overall recognizable. Good for SaaS products.
  • 7-8: High. Distinctive layouts, unusual type choices, asymmetric compositions. The sweet spot for most projects.
  • 9-10: Experimental. May sacrifice some usability for visual impact. Portfolio/showcase territory.

MOTION_INTENSITY: 6 (default)

Controls the amount and complexity of animation.

  • 1-3: Minimal. Subtle transitions only. Good for content-heavy sites where motion distracts.
  • 4-6: Moderate. Hover effects, entrance animations, micro-interactions. The productive middle ground.
  • 7-8: Rich. Orchestrated staggering, spring physics, scroll-driven reveals.
  • 9-10: Full choreography. Every interaction has motion. Only for portfolios and showcases.

VISUAL_DENSITY: 4 (default)

Controls how much content and visual information occupies the viewport.

  • 1-3: Sparse. Generous whitespace, minimal elements. Luxury/editorial feel.
  • 4-6: Balanced. Comfortable spacing with meaningful content density.
  • 7-8: Dense. Data-rich layouts, compact spacing. Dashboards and power-user tools.
  • 9-10: Maximum density. Information-first, minimal chrome. Trading terminals and dev tools.

The Lila Ban

Purple and blue glows with neon gradients are THE most common AI fingerprint. The skill names this “The Lila Ban” and enforces it as a hard rule:

  • No purple-to-blue gradient backgrounds
  • No neon accent colors on dark mode
  • No cyan/teal as the primary action color on dark backgrounds
  • No glowing borders or shadow-glows in brand colors

This is not about avoiding these colors entirely. It is about avoiding the specific combination pattern (dark background + purple/blue gradient + neon accent) that instantly signals AI generation.

What to use instead: Warm neutrals with a single saturated accent. Tinted near-blacks with gold, terracotta, sage, or slate accents. Monochromatic palettes with one unexpected color. The goal is a palette that could not have been the default output of any AI system.

Creative Arsenal

30+ named patterns that the skill draws from. Each is a specific, implementable design technique:

Layout Patterns

  • Bento Grid --- asymmetric grid with mixed-size cells, like Apple’s product pages
  • Masonry Flow --- Pinterest-style variable-height grid
  • Editorial Split --- massive typography on one side, interactive content on the other
  • Z-Axis Cascade --- overlapping elements with depth through z-index and shadow
  • Offset Grid --- columns that do not align vertically, creating visual tension

Interactive Patterns

  • Magnetic Buttons --- cursor proximity warps the button position slightly
  • Parallax Tilt Card --- 3D tilt effect on hover, following cursor position
  • Spotlight Borders --- border that illuminates in the direction of the cursor
  • Liquid Swipe --- fluid transition between content panels
  • Elastic Pull --- overscroll with spring-back physics
  • Drag-to-Reorder --- direct manipulation with physics-based animation

Visual Patterns

  • Frosted Layers --- strategic glassmorphism (not everywhere, 1-2 elements)
  • Grain Texture --- subtle film grain overlay for warmth and tactility
  • Gradient Mesh --- multi-point gradient backgrounds (not purple-to-blue)
  • Clip Path Reveals --- content revealed through animated shape masks
  • Duotone Media --- images filtered to two brand colors

Content Patterns

  • Type Wall --- oversized display type as the primary visual element
  • Data Narratives --- numbers presented as stories, not grids
  • Contextual Tooltips --- rich hover cards with preview content
  • Inline Expansion --- content expands in place instead of navigating away

Motion Engine

The skill uses spring physics as the foundation for all motion:

Spring Parameters

stiffness: 100   (how quickly the element reaches target)
damping: 20      (how quickly oscillation dies down)
mass: 1          (inertia of the element)

Higher stiffness = snappier. Higher damping = less bounce. These produce natural-feeling motion that linear easing cannot replicate.

Motion Techniques

  • Perpetual micro-interactions --- subtle ongoing animations (floating elements, breathing shadows) that make the interface feel alive even when idle
  • layoutId transitions --- Framer Motion pattern where an element smoothly morphs between positions across layout changes
  • Staggered orchestration --- child elements animate in sequence with delays, creating a cascading reveal effect
  • Velocity-based curves --- animation speed responds to input velocity (fast swipe = fast animation)

Timing Rules

  • Micro-interactions: 150-300ms
  • Entrance animations: 500-800ms with stagger
  • Page transitions: 300-500ms
  • Spring settle time: varies by spring parameters, typically 400-800ms
  • Always implement prefers-reduced-motion: reduce as a media query gate

Technical Rules

Dependency Verification (Mandatory)

Before using any external library, verify it is installed. Do not assume Framer Motion, GSAP, or Three.js are available. Check package.json or import the library and verify it resolves.

RSC Safety (React Server Components)

Global state, animation libraries, and event handlers only work in "use client" components. Any component that uses:

  • useState, useEffect, useRef
  • Framer Motion, GSAP
  • onClick, onHover, onChange

must have "use client" at the top of the file.

CSS Rules

  • No h-screen --- use min-h-[100dvh] for dynamic viewport height
  • Grid over flex-math --- use CSS Grid for 2D layouts, not flexbox with calculated percentages
  • No Inter font --- see anti-ai-slop-guide for alternatives
  • Hardware-accelerated transforms --- use transform, opacity, filter for animations. Never animate width, height, top, left.
  • Custom properties for theming --- --color-primary, --space-md, --radius-lg rather than hardcoded values

Banned Content

  • Generic names --- “John Doe” becomes “Sarah Chen” or “Marcus Rivera”
  • Fake numbers --- “99.99% uptime” becomes “99.7% uptime” (realistic)
  • AI copy cliches --- “Elevate your workflow” becomes a specific value proposition
  • Broken Unsplash --- source.unsplash.com is unreliable
  • Custom cursors --- they break accessibility and annoy users

Placeholder Images

Always use picsum.photos/seed/{descriptive-name}/800/600 for placeholder images. The seed parameter ensures the same descriptive name always returns the same image, making the UI consistent across reloads.

<img src="https://picsum.photos/seed/dashboard-hero/1200/600" alt="..." />
<img src="https://picsum.photos/seed/team-sarah/400/400" alt="..." />
<img src="https://picsum.photos/seed/product-shot/800/600" alt="..." />

Key Takeaways

  • Design dials (DESIGN_VARIANCE: 8, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4) are defaults that should be adjusted per project
  • The Lila Ban (no purple/blue neon gradients) eliminates the most common AI visual fingerprint
  • The Creative Arsenal provides 30+ named, implementable patterns --- use them by name for consistent results
  • Spring physics (stiffness: 100, damping: 20) produces more natural motion than CSS easing curves
  • Technical rules are non-negotiable: dependency verification, RSC safety, min-h-[100dvh], grid over flex-math
  • picsum.photos/seed/{name}/800/600 for consistent placeholder images
  • The skill builds on frontend-design’s direction --- it provides the components, not the philosophy

Try It

  1. On your next project, explicitly set the three dials: “DESIGN_VARIANCE: 8, MOTION_INTENSITY: 7, VISUAL_DENSITY: 5”
  2. Ask for a specific Creative Arsenal pattern by name: “Use a Bento Grid layout with Spotlight Borders on the feature cards”
  3. Request spring physics animation: “Animate the card entrance with spring physics (stiffness: 120, damping: 15) and staggered orchestration”
  4. Check The Lila Ban: if any purple/blue gradient appears in the output, flag it immediately and request a warm neutral palette
  5. Verify placeholder images use picsum.photos/seed/ format, not broken Unsplash URLs

Graph View

Backlinks