100AI
DESIGNSINDEX ↓GITHUB ↗
← ALL DESIGNSDESIGN 002 / 100OPEN LIVE EXPERIENCE ↗

LIVE · IMMERSIVE & EXPERIMENTAL

Tasteprint
Visual Direction Lab

Choose three images before you can explain why. Tasteprint turns the pattern between them into traits, a palette, composition rules, motion guidance, and a prompt another AI can use.

01Quiet Voltage
03Soft Rebellion
04Night Signal
YOUR SIGNAL3/3

Make instinct legible.

TASTEPRINT · CASE 002

Your eye already knows.
Make it legible.

OPEN LIVE PRODUCT ↗
01

PRODUCT MODEL

WHY IT EXISTS
STARTING PROBLEM

A striking focus effect showed attention, but did not turn attention into a decision.

PRODUCT PROMISE

Let people express visual taste through instinctive choices first, then translate the overlap into language a creative team or AI can act on.

The user leaves with a named direction, five traits, a palette, design rules, and a copyable creative prompt.
01 · BROWSE

Read with the eye

A deliberately varied field of visual studies invites recognition before explanation.

02 · FOCUS

Isolate one signal

The active image sharpens and enlarges while the rest of the field recedes.

03 · SELECT

Commit to three

A fixed three-slot constraint forces a useful pattern instead of an endless moodboard.

04 · TRANSLATE

Make taste reusable

The chosen set becomes a direction sheet and prompt that can move into another workflow.

02

STYLE DNA

VISUAL + BEHAVIORAL RULES
FOCUS

Attention becomes the interface

One image sharpens while the surrounding field blurs. The effect explains the choice instead of merely decorating the card.

COLOR

Mineral paper with one signal orange

Ink and paper hold the workspace together. Orange appears only when instinct becomes an explicit selection or result.

TYPE

Editorial emotion, systematic evidence

Old-style serif carries intuition. Sans and monospaced microtype keep steps, counts, and generated rules exact.

SPACE

A working table, not a component grid

Cards rotate and overlap around a calm thesis, recreating the useful mess of an art director's selection surface.

MOTION

Weighted focus without performance

Slow sharpening and scale establish hierarchy; touch and reduced-motion modes preserve the same product state without relying on animation.

LOOP

Choose, translate, reuse

Three selections become a direction sheet and a copyable prompt, giving the visual exploration a concrete downstream action.

03

SOURCE & PROMPT

ORIGINAL + DISTILLED
REUSE CONTRACT

Turn focus into
callable direction.

The original component defines a visual focus state. The optimized prompt preserves that behavior, then adds a selection constraint, a deterministic result, accessibility rules, and a downstream creative action.

DRAFT V0.1BLIND REPRODUCTION PENDING

The live product, build, selection loop, result sheet, and copy action are verified. The prompt has not yet generated a fresh project without the reference implementation.

ORIGINAL INPUTOWNER-SUPPLIED COMPONENT

InteractiveImageGallery

A 245-line integration brief with a React, shadcn, and Tailwind gallery component. It enlarges the hovered image and blurs every non-active card.

  • Mixed image and text cards
  • Hovered card scales to 105%
  • Non-active cards blur and fade
  • 300ms focus transition
  • Responsive flex-wrap composition
export function InteractiveImageGallery({ items, className }) {
  const [hoveredId, setHoveredId] = React.useState<string | null>(null)

  return (
    <div className={cn(
      "relative min-h-screen flex flex-wrap justify-center items-center gap-8 p-10",
      className
    )}>
      {items.map((item) => item.type === "image" ? (
        <div
          key={item.id}
          className={cn(
            "relative transition-all duration-300 rounded-xl overflow-hidden",
            "hover:scale-105",
            hoveredId && hoveredId !== item.id
              ? "blur-sm opacity-50"
              : "opacity-100"
          )}
          onMouseEnter={() => setHoveredId(item.id)}
          onMouseLeave={() => setHoveredId(null)}
        >
          <Image src={item.src} alt="gallery item" width={200} height={200} />
        </div>
      ) : (
        <Card key={item.id}>{item.text}</Card>
      ))}
    </div>
  )
}
OPTIMIZED PROMPTDRAFT V0.1

Productized design instructions

Written after the working product was built, then organized into goal, visual language, layout, interaction, motion, accessibility, use cases, and limits.

Design an editorial visual-direction product that turns instinctive image choices into a usable creative brief.

Product goal: help a founder, designer, or creator articulate visual taste without needing design vocabulary.
User loop: scan a deliberately varied image deck, focus one card at a time, keep exactly three instinctive choices, generate a deterministic tasteprint, then copy the resulting AI creative prompt.
Result: combine the selected cards into a direction name, five traits, a five-color palette, typography, composition, and motion rules, plus a reusable AI prompt.
Visual language: warm mineral paper, fine construction grid, ink-black typography, one safety-orange signal color, slightly rotated image cards, crisp rules, and restrained analog softness.
Layout: a centered editorial thesis above an asymmetric field of floating square cards; two instruction cards interrupt the composition; a persistent three-slot dock makes progress and the next action unmissable.
Interaction: hovering or focusing a card sharpens and enlarges it while other cards blur; clicking or pressing Space keeps it; selection order is numbered; shuffle changes every card position; the result opens as a large art-direction sheet.
Typography: an expressive old-style serif for thesis and direction names, disciplined sans for navigation, and compact monospaced labels for system state.
Motion: weighted focus transitions around 400ms, subtle image scale, and one modal entrance; no spring physics, bounce, or continuous decorative motion.
Accessibility: use native buttons, visible focus, an aria-live selection status, a focus-contained dialog with Escape support, touch-safe targets, and reduced-motion behavior.
Use cases: early brand discovery, campaign mood alignment, portfolio art direction, creative-team kickoff, and AI image or site prompting.
Avoid: production asset hotlinks, generic dashboard cards, purple gradients, opaque taste scores, faux AI analysis, tiny touch targets, motion-only state, and results without an actionable takeaway.
BLIND REPRODUCTION PENDING
PRESERVED

The attention hierarchy

One focused card stays sharp and slightly larger while the surrounding deck becomes secondary.

ADDED

A decision and an output

Exactly three selections unlock a direction name, traits, palette, design rules, and a prompt with a clear next action.

REBUILT

The production interface

The generic flex gallery became an art-director table with local artwork, selection state, shuffle, keyboard support, and a focus-contained result sheet.

04

WHEN TO USE

FIT + LIMITS

Use it for

  • Early brand and visual identity discovery
  • Campaign or launch mood alignment
  • Creative-team kickoff workshops
  • Portfolio and editorial art direction
  • AI image, site, and campaign prompting

Avoid it for

  • Formal brand approval without a human designer
  • Accessibility, compliance, or UX scoring
  • High-volume asset tagging and DAM workflows
  • Decisions that require audience research evidence
  • Projects without distinct visual source material
05

EVIDENCE & REUSE

STATUS + PROVENANCE
LIVE PRODUCTVERIFIED
RESPONSIVE BUILDPASSED
SELECTION + RESULTIMPLEMENTED
KEYBOARD + TOUCHVERIFIED
BLIND PROMPT TESTPENDING
SOURCE NOTE

The original interactive gallery component was supplied by the project owner and attributed to 21st.dev ↗. The exact component page should be added when available. Its focus behavior was the starting point; the product loop, local artwork, result model, and final interface were created for this study.

REUSE BOUNDARY

Reuse the focus hierarchy, three-choice constraint, translation model, and documented style rules. Do not treat the Tasteprint name, local artwork, generated direction labels, or finished interface as assets to duplicate verbatim.