Jonathon's AI Wiki

Soft Skill Creative Direction

6 min read

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

The soft-skill teaches Claude to design like a $150k/year agency designer. It defines the exact fonts, spacing, shadows, card structures, and animations that separate premium UI from generic AI output. Its core mechanism is the “Absolute Zero” directive --- a hard-fail system that instantly rejects banned patterns rather than gradually degrading. Where taste-skill provides a creative arsenal, soft-skill provides a creative philosophy with enforcement teeth.

The Absolute Zero Directive

Absolute Zero means zero tolerance for known-bad patterns. The skill does not “try to avoid” these --- it treats them as instant build failures:

Instant Failures

  • Banned fonts: Inter, Roboto, Arial, Open Sans, system defaults
  • Banned icons: Emoji as UI elements, inconsistent stroke widths, rocket icons for “launch”
  • Banned borders: Rounded elements with a thick colored border on one side
  • Banned layouts: Three identical cards in a row, hero metric template (big number + label + trend), everything centered
  • Banned motion: Bounce/elastic easing, layout property animation, linear easing as default
  • Banned colors: Purple-to-blue gradients, cyan on dark, neon glows, pure black/white, gradient text

If any of these appear in the output, the design has failed. There is no “acceptable in small amounts.” This binary enforcement is what makes the skill effective --- it removes the temptation to use familiar-but-bad patterns.

Creative Variance Engine

The engine ensures no two projects look the same. It provides three categories of variation:

Vibe Archetypes

Ethereal Glass

  • OLED black backgrounds (#000 or near-black with cool undertone)
  • Mesh gradient accent elements (not as backgrounds --- as decorative shapes)
  • Floating card architecture with depth through shadow and blur
  • Monospace accent text for metadata
  • Subtle grain texture overlay for tactility
  • Color: moonstone blues, arctic whites, crystalline grays

Editorial Luxury

  • Warm cream backgrounds (#faf8f5, f5f0eb)
  • Serif typography for headlines (Fraunces, Playfair Display, Cormorant)
  • Film grain texture on media
  • Generous whitespace (py-24 to py-40 between sections)
  • Color: warm golds, deep burgundy, aged paper tones
  • Asymmetric editorial layouts with dramatic type scale contrast

Soft Structuralism

  • Silver-grey palette (#e8e8e8, d4d4d4, 9a9a9a)
  • Bold geometric sans-serif (Satoshi, General Sans, Clash Display)
  • Diffused shadows (large radius, low opacity, color-tinted)
  • Rigid grid structure with precise alignment
  • Color: cool silvers, concrete grays, one warm accent
  • Minimalist but not empty --- structural elements as decoration

Layout Archetypes

Asymmetrical Bento

  • Mixed-size grid cells with no predictable pattern
  • 2:1, 1:1, 3:2 aspect ratios in the same grid
  • Content determines cell size, not a uniform template
  • Some cells span multiple rows or columns

Z-Axis Cascade

  • Overlapping elements at different z-index levels
  • Parallax depth through shadow intensity and blur
  • Cards that peek behind other cards
  • Creates a physical, layered feeling like stacked papers

Editorial Split

  • Massive display type on the left (40-80% of viewport width)
  • Interactive content on the right
  • The split is the visual anchor --- everything else is secondary
  • Works best with serif or display typefaces at extreme sizes

Haptic Micro-Aesthetics

Specific small-scale patterns that create a premium tactile feel:

Double-Bezel

Nested container architecture where an outer container has one style (e.g., dark background, 1px border) and an inner container has a different style (e.g., slightly lighter background, no border). Creates depth without shadow.

.outer { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 16px; padding: 4px; }
.inner { background: #222; border-radius: 12px; padding: 24px; }

Button-in-Button

A primary button with a trailing icon wrapped in its own circular container. The icon container has a slightly different background shade, creating a button-within-button effect.

<button class="flex items-center gap-3 bg-blue-600 pl-6 pr-2 py-2 rounded-full">
  <span>Get Started</span>
  <span class="bg-blue-500 p-2 rounded-full"><ArrowRight /></span>
</button>

Macro-Whitespace

Sections separated by py-24 to py-40 instead of the typical py-8 to py-16. This reads as confident and premium --- cheap designs cram content together. Luxury designs let it breathe.

Motion Choreography

Fluid Island Nav

Navigation bar that morphs its shape contextually:

  • Default: floating pill with compressed menu
  • Scroll down: shrinks to minimal mark/logo
  • Hover: expands to reveal full navigation
  • Uses clip-path and width animation (on the nav container only, not on content)

Magnetic Button Hover

Buttons respond to cursor proximity before the cursor is directly over them:

  • Track cursor position relative to button center
  • Translate button position slightly toward cursor when within 100px
  • Scale up 1.02-1.05 on proximity
  • Spring physics for the return to rest position

Scroll Interpolation

Content enters the viewport with a choreographed sequence:

  • Start state: translate-y-16 blur-md opacity-0
  • End state: translate-y-0 blur-none opacity-100
  • Duration: 600-800ms with ease-out-expo
  • Stagger: 100-150ms between sequential elements
  • Trigger: IntersectionObserver at 20% visibility threshold

Variance Mandate

The skill enforces a hard rule: NEVER generate the same layout or aesthetic twice. If you built an Ethereal Glass dashboard last project, the next dashboard must use Editorial Luxury or Soft Structuralism. If you used Asymmetrical Bento, the next project uses Editorial Split or Z-Axis Cascade.

This is enforced through:

  • Rotating through vibe archetypes
  • Varying layout archetypes independently of vibe
  • Combining different haptic micro-aesthetics each time
  • Using different font pairings (from the ui-ux-pro-max database of 57 options)

The variance mandate exists because the most insidious form of AI slop is not any single bad pattern --- it is predictability. If every project looks different, none of them look like AI.

Key Takeaways

  • The Absolute Zero directive is a hard-fail system, not a preference. Banned patterns are instant failures, not warnings.
  • Three vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) provide distinct starting aesthetics
  • Three layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) prevent repetitive structure
  • Haptic micro-aesthetics (Double-Bezel, Button-in-Button, Macro-Whitespace) create premium feel at the component level
  • Motion choreography (Fluid Island Nav, Magnetic Hover, Scroll Interpolation) adds life without being gratuitous
  • The variance mandate ensures no two projects share the same aesthetic --- predictability is the enemy
  • This skill builds on frontend-design’s direction and complements taste-skill’s creative arsenal

Try It

  1. Start a new UI task and explicitly request a vibe archetype: “Use the Editorial Luxury archetype with warm cream backgrounds and serif headlines”
  2. Add a layout archetype: “Layout should be Editorial Split with massive display type on the left”
  3. Request haptic details: “Use Double-Bezel containers and Button-in-Button CTAs”
  4. Add motion: “Implement Scroll Interpolation (translate-y-16 blur-md opacity-0 to clean) with 150ms stagger”
  5. On the next project, force a different combination --- if you used Editorial Luxury, switch to Ethereal Glass or Soft Structuralism
  6. After 3 projects, review them side by side --- they should look like they were designed by different people

Graph View

Backlinks