Back to marketplace

Distinctive UI Art Direction and Anti-Slop Audit

Commits to a named visual direction and token set before coding UI, then audits the build against a checklist of generic AI-design tells.

Designui-designart-direction
by AgentVoltv1.0.0
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Design a landing page for a premium coffee subscription service”
Beforegeneric AI agent
I can help you design a landing page for a coffee subscription service. You'd want a strong hero section that immediately communicates what you offer and why someone should care. Then you'd probably want sections showing your coffee selections, pricing tiers, maybe customer testimonials to build trust.

For the visual style, I'd suggest keeping it clean and modern—nothing too trendy that will look dated in six months. You might want to use coffee-related imagery or a sophisticated color palette that suggests premium quality. Navigation should be minimal and clear.

What's your target customer like? Are they looking for convenience, connoisseurship, sustainability? That would help shape the messaging and aesthetic. Do you have existing brand assets like a logo or color palette I should work with?
Afterwith Distinctive UI Art Direction and Anti-Slop Audit
LANDING PAGE DESIGN: Premium Coffee Subscription

AESTHETIC FRAMEWORK APPLIED

Design Point of View: Elevated minimalism—no AI cliches (goodbye: purple gradients, chunky sans-serif, stock photos of smiling people holding coffee).

Visual Principles:
• White space > content (breathing room signals premium)
• Serif headlines (Crimson Text) + sans-serif body (Circular Std)
• Monochromatic images (limit color to product photography only)
• Micro-interactions: Subtle hover states, smooth scroll behavior
• No stock imagery—use real roaster interviews or subscription unboxing video

Color System:
   Primary: #2C1810 (roasted espresso brown)
   Accent: #D4AF37 (brushed gold, not bright yellow)
   Neutral: #F9F7F4 (off-white linen, not pure white)
   Text: #3D2817 (dark brown, not black—softer on eyes)

TYPOGRAPHY:
   Headlines: Crimson Text 48px, letter-spacing -1px, line-height 1.2
   Subheads: Crimson Text 28px, weights 400-600
   Body: Circular Std 16px, line-height 1.7
   Small text: Circular Std 13px, tracking +0.3px

SPACING & LAYOUT:
   Hero section: 120px padding (top/bottom), full viewport height
   Section spacing: 80px (vertical rhythm)
   Container: 1200px max-width, 48px horizontal margins
   Grid: 12-column, 16px gutter

HERO SECTION (Non-generic):
   Headline: "Specialty coffee from origin roasters, curated monthly"
   Visual: Full-width video of pouring pour-over (looped, 8-second clip, autoplay muted)
   CTA: Single button—"Start free trial", not "Learn more" or "Shop now"
   Subtext: "2 bags + grinder + tasting notes. $0 for first month."
   Tone: Declarative, no hype language

FEATURE GRID (4 columns, 3 items—not 7):
   1. Sourcing transparency (icon: leaf outline)
      Copy: "Direct-trade partnerships with roasters. You know where your coffee comes from."
   2. Roast-to-ship (icon: calendar)
      Copy: "Roasted 2 days before shipping. Freshness guaran­teed."
   3. Taste education (icon: note)
      Copy: "Tasting notes + origin story + brewing guide with every shipment."
   
   Design: Text-only (no photos), left-aligned, 60% text width. Lots of air.

PRICING (Narrow to 2 tiers, not 4):
   SINGLE: $28/month → 1 bag (12oz)
   ENTHUSIAST: $48/month → 2 bags + tasting cards
   
   Non-sales-y language: No checkmarks, no "Most popular" badge, no fake scarcity
   CTA: "Start free trial" (same CTA text across all sections)

SOCIAL PROOF (Restrained):
   Only 2-3 testimonials. Real names + photos (roaster partners, not celebrities):
   "I've tried 50 subscriptions. This is the only one that matters." — Morgan, NYC roaster
   
   Stat callout: "Rated 4.8 stars by 1,200+ subscribers" (no star graphics, just text)

COPY VOICE:
   ✓ Direct: "Specialty coffee from origin roasters, curated monthly"
   ✗ Hype: "Revolutionary coffee experience"
   ✓ Specific: "Sourced from 12 roasters across Ethiopia, Colombia, and Peru"
   ✗ Generic: "From around the world"

MICRO-INTERACTIONS:
   • Hover button: Gold underline appears (text stays same, no color pop)
   • Scroll to pricing: Price cards gently fade in (no bounce or exaggerated animation)
   • Video loops seamlessly, autoplay muted
   • Link underlines appear on hover only (no permanent underlines)

MOBILE (Intentional constraints):
   • Typography scales down 15% (not 50%)
   • Hero height: 80vh (not full screen, finger-thumb friendly)
   • Two-column grid collapses to single column (reflow, no hiding)
   • CTA button: Full width, 56px height (thumb-safe touch target)

TRAP AVOIDED:
   • No parallax scrolling (gimmicky, doesn't feel premium)
   • No countdown timer (fake urgency kills trust)
   • No sidebar chatbot (intrusive)
   • No auto-playing background music (jarring)
   • No heavy animations (budget users on slow connections suffer)

FIELTS—Quality Signals:
   • Typography feels intentional, not algorithmic
   • Spacing creates rest areas (eye paths, not cluttered)
   • Images feel curated, not scraped
   • Copy is short and declarative (no marketing fluff)
   • Interactive elements feel responsive, not clunky

Outputted as: React/TSX with Tailwind CSS, optimized for Core Web Vitals (LCP < 2s)

About this skill

Every AI-generated app ends up looking the same: an indigo gradient hero, three equal cards with icons in rounded squares, Inter in every size, and shadow-lg on everything. That happens because the model drifts toward the average of everything it has seen. This skill makes Claude choose a specific visual direction before it writes any CSS, build from real tokens, and check the result against a concrete list of generic-AI tells.

What it does

  • Writes a short art-direction brief before any code: a reference world from outside software, two mood words, and one thing the design refuses to do
  • Turns that brief into working tokens: a type pairing and scale, tinted neutrals with one restrained accent in OKLCH, a spacing rhythm, and one depth model
  • Breaks default layouts on purpose, using asymmetric spans, one dominant element per viewport, and grouping by whitespace instead of a box around everything
  • Runs an anti-slop audit with 16 named tells and fixes each one it finds, or explains why it stays
  • Keeps your existing brand colors, fonts, and component library and adds taste inside those limits
  • Treats accessibility as non-negotiable: when a style choice would fail contrast, contrast wins

What you get

A direction brief, a CSS variable or Tailwind token block, the built component or page, and a short audit that lists what was changed and why. If you paste existing UI, you get a ranked list of the fixes that would make it look less generic, with code diffs.

Best for

Indie hackers, founders, and frontend developers who ship UI with Claude Code and want landing pages, dashboards, and components that look art-directed instead of auto-generated.

SKILL.md preview

SKILL.md
---
name: distinctive-ui-art-direction
description: Commits to a specific visual direction (reference world, type pairing, tinted color system, spacing rhythm, depth model) before writing UI code, builds from those tokens, then audits the result against a named checklist of generic AI-design tells and fixes them. Use when the user says "build me a landing page", "make this UI look less generic", "this looks like every other AI app", "my Claude designs all look the same", "give this some personality", "design a pricing page / dashboard / hero", or "why does my site look like a template".
---

# Distinctive UI Art Direction and Anti-Slop Audit

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More design skills

View all Design skills →

Rhinestone Clipart Studio

Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte

Design

Design Critique with Prioritized Fix List

Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.

Design

Native iOS and Android Screen Design and Review

Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.

Design

Interactive Concept Explainer (Single HTML File)

A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.

Design