Amplifier

The Problem

Design studios face two recurring pain points:

• Unorganized reference libraries — thousands of saved images with no consistent tagging, making them unsearchable when you actually need them
• Inefficient client onboarding — lengthy back-and-forth to understand brand vision, then manually curating mood boards from that disorganized library

The Solution

Amplifier is two connected systems:

1. AI Image Tagger — Upload reference images in bulk. Claude Sonnet analyzes each image and suggests tags across dynamic categories (industry, style, mood, color, etc.). The designer reviews AI suggestions in a flat summary view, corrects if needed, and accepts with a single keystroke. Over time, the AI learns from corrections to improve future accuracy.
2. Visual Briefing Tool — Clients fill out a 10-step brand questionnaire. Claude Haiku extracts visual keywords from their responses. Those keywords automatically search the tagged reference library and surface relevant images ranked by match score. Clients favorite the ones that resonate. The complete brief — answers, keywords, selected references — is packaged into an HTML email and sent to the studio.

The tagger builds the library. The briefing tool makes it useful.

Key Features

Review-Centric Tagging Interface

• AI suggests tags — the designer's job is to verify, not tag from scratch
• Flat tag summary at top shows all AI selections as removable pills — no scrolling through categories
• Full tag palette collapsed below, only opened when the AI missed something
• Keyboard shortcuts: Enter (accept & next), S (skip), arrow keys (navigate)
• Sticky image preview stays visible while reviewing tags

AI-Powered Image Analysis

• Claude Sonnet Vision analyzes each image against a configurable vocabulary
• Prompt caching reduces API response time by ~60-70%
• Next-image prefetching — AI analyzes the next image while you review the current one
• Correction learning — the system tracks where designers disagree with AI and adjusts future prompts

Smart Duplicate Detection

• Three-tier detection: SHA-256 hash (exact match), perceptual hash (visually similar), filename match
• Perceptual hashing uses 8x8 grayscale representation with Hamming distance at 90% threshold
• Side-by-side comparison with option to upload anyway for non-exact matches

Dynamic Vocabulary System

• Categories, tags, storage types, and search weights are all configurable — no schema changes needed
• Supports arrays, nested JSONB, and text fields
• Both the tagger and briefing search read the same config — add a new category and both systems adapt automatically

Guided Briefing Workflow

• 10-step questionnaire covering brand strategy, personality, visual identity, audience, and vision
• Auto-saves progress to localStorage with resume prompt on return
• AI keyword extraction from free-form responses via Claude Haiku
• Weighted search across the reference library — each vocabulary category has a configurable search weight
• Adaptive scoring thresholds — loosens match criteria automatically if results are sparse
• Favorite selection with visual gallery
• HTML email generation with full brief + curated images

Analytics Dashboard

• AI accuracy tracking per category
• Frequently missed tags (AI under-suggests)
• Frequently wrong tags (AI over-suggests)
• Per-image correction analysis
• Vocabulary usage statistics

Architecture

Client (React)
  ├── Briefing Flow (public)
  │     ├── Questionnaire → /api/extract-keywords (Claude Haiku)
  │     ├── Keywords → /api/search-references (weighted DB search)
  │     └── Submit → /api/send-briefing (HTML email)
  │
  └── Tagger System (auth-protected)
        ├── Upload → Duplicate Detection (SHA-256 + pHash)
        ├── Review → /api/suggest-tags (Claude Sonnet Vision + prompt cache)
        ├── Save → Supabase (images + tags + corrections)
        └── Analytics → /api/retrain-prompt (correction analysis)

Supabase
  ├── PostgreSQL (reference_images, tag_vocabulary, tag_corrections)
  ├── Auth (email/password, RLS policies)
  └── Storage (originals + thumbnails)

Engineering Highlights

Prompt Caching Strategy

The vocabulary (which can be large) is placed in the system message with Anthropic's ephemeral cache. The first request in a session pays the full cost, but subsequent image analyses reuse the cached vocabulary — reducing latency by 60-70% and cutting token costs.

Correction-Based Learning

Every time a designer overrides the AI's suggestions, the delta is recorded. The analytics engine aggregates corrections to identify patterns — "you frequently miss the 'tech' tag" or "you over-suggest 'minimal' in 40% of images." These insights are injected into the system prompt for future requests, creating a feedback loop without fine-tuning.

Modular Hook Architecture

The tagger UI orchestrates 9 custom hooks (useAISuggestions, useImageUpload, useDuplicateDetection, etc.) that each own a single concern. When the entire UI was redesigned from checkbox-based to review-centric, only the view layer changed — every hook stayed untouched.

Security Hardening

• Server-side authentication via getUser() on all admin routes — not just JWT session checks
• All API inputs validated with Zod schemas
• HTML escaping on all email template interpolation points (XSS prevention)
• Prompt injection prevention by separating system instructions from user data in Claude calls
• Per-route, per-IP rate limiting on public endpoints
• Generic error responses — no internal details leaked to clients

Tech Stack

Results

• From unstructured to searchable — reference images tagged and discoverable by keyword in seconds
• Client onboarding time reduced — guided questionnaire replaces unstructured emails and calls
• AI accuracy improves over time — correction tracking creates a self-improving tagging system
• Zero manual mood board curation — briefing tool auto-surfaces relevant references from the library
• Batch processing practical — keyboard shortcuts and review-centric design let designers process 50+ images in minutes