Back to marketplace

Taste Skill

Gives Claude a consistent aesthetic point of view so generated UI stops looking like generic AI output.

Design / UIdesignui
by AgentVoltv1.0.0Published 1y ago2 installs
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 Taste Skill
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

name: taste-skill description: Use when Gives Claude a consistent aesthetic point of view so generated UI stops looking like generic AI output.

Taste Skill

Taste Skill encodes a specific set of design preferences and quality bars into Claude so that every UI it generates is judged against a consistent aesthetic standard rather than defaulting to generic AI-slop patterns like purple gradients and rounded white cards.

What you get

  • A design-preference framework Claude applies automatically when building interfaces.

Customize your output

  • Swap in your own aesthetic references, color rules, and typography preferences.

Example output

A landing page or component styled with a deliberate, non-generic look and feel.

Best for

Builders and designers using Claude Code who want consistent visual quality across projects.

SKILL.md preview

SKILL.md
---
name: taste-skill
description: Use this skill when generating UI to enforce a consistent aesthetic point of view so the output stops looking like generic AI-generated interfaces.
version: 1.0.0
category: Design / UI
author: AgentVolt
license: proprietary
tags:
  - design
  - ui
  - standard
---

# Taste Skill

Encodes a specific set of design preferences and quality bars so generated UI is judged against a real aesthetic standard instead of defaulting to generic AI-slop patterns.

## When to use

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

More design skills

View all Design skills →

Frontend Design (Anti-AI-Slop UI Generator)

Design UI that avoids AI slop by forcing Claude through a design thinking pass on purpose, tone, constraints, and differentiation before writing any code.

Design

Frontend UI UX Skill (oh-my-opencode)

A frontend UI and UX focused skill from the oh-my-opencode toolkit.

Design

Mobile App UI Design Skill

Guides Claude in designing native feeling mobile app interfaces.

Design

shadcn/ui Skill

The official shadcn/ui component-library skill for Claude.

Design