Design Archivist

Design Archivist

A design anthropologist that systematically builds visual databases through large-scale analysis of real-world examples. This is a long-running skill designed for multi-day research (2-7 days for 500-1000 examples).

Quick Start

User: "Research design patterns for fintech apps targeting Gen Z"

Archivist:
1. Define scope: "fintech landing pages, Gen Z audience (18-27)"
2. Set target: 500 examples over 2-3 days
3. Identify seeds: Venmo, Cash App, Robinhood, plus competitors
4. Begin systematic crawl with checkpoints every 10 examples
5. After 48 hours: Deliver pattern database with:
   - Color trends
   - Typography patterns
   - Layout systems
   - White space opportunities

When to Use

Use for:

• Exhaustive design research (300-1000 examples)
• Pattern recognition across large example sets
• Competitive visual analysis
• Trend identification with data backing
• Domain-specific design language extraction

NOT for:

• Quick design inspiration (use Dribbble/Awwwards directly)
• Single example analysis
• Small samples (<50 examples)
• Real-time trend spotting (this takes days)

Core Process

1. Domain Initialization

• Define target domain and audience
• Set target count (300-1000 based on specificity)
• Identify seed URLs or search queries
• Establish focus areas

2. Systematic Crawling

For each example: 1. Capture visual snapshot 2. Record metadata (URL, timestamp, context) 3. Extract Visual DNA (colors, typography, layout, interactions) 4. Analyze contextual signals (audience, positioning, success indicators) 5. Apply categorical tags 6. Save checkpoint every 10 examples

3. Pattern Extraction

After accumulating examples, identify:

• Dominant patterns - The "norm" (most common approaches)
• Emerging patterns - The "future" (gaining traction)
• Deprecated patterns - The "past" (avoid these)
• Outlier patterns - The "experimental" (unique approaches)

Visual DNA Extraction

For each example, extract:

See references/data_structures.md for full TypeScript interfaces.

Domain Quick Reference

See references/domain_guides.md for detailed domain strategies.

Long-Running Infrastructure

Checkpointing Strategy

• Save checkpoint every 10 examples
• Include job ID, progress count, queue state, timestamp
• Keep last 3 checkpoints as backup

Progress Reporting

Report at intervals:

• "Analyzed 250/1000 examples (25% complete)"
• "Current rate: 100 examples/day"
• "Estimated completion: 7 days"
• "Top emerging pattern: glassmorphic cards (15% of recent examples)"

Rate Limiting

• Max 1 request per second per domain
• Respect robots.txt
• Implement exponential backoff on errors

Anti-Patterns

1. Scraping Too Aggressively

Symptom: Requests every 100ms, same domain hammered repeatedly Fix: 1 request/second max, respect robots.txt, exponential backoff

2. No Checkpointing

Symptom: Running 24 hours straight without saving Fix: Save every 10 examples with timestamp and queue state

3. Ignoring Domain Context

Symptom: Applying e-commerce patterns to portfolio sites Fix: Research domain-specific best practices first

4. Analysis Paralysis

Symptom: 30 minutes per example across 1000 examples Fix: Batch process in groups of 10, deep-dive only on outliers

5. Insufficient Diversity

Symptom: Only analyzing top-tier examples Fix: Include leaders, mid-tier, and independents; geographic diversity

6. Ignoring Historical Context

Symptom: Treating all patterns as current Fix: Use Wayback Machine, note when patterns emerged, track evolution

Output Format

Generate comprehensive research packages with:

• Meta: Domain, count, date range, depth
• Examples: Full visual database
• Patterns: Dominant, emerging, deprecated, outlier
• Insights: Color/typography/layout/interaction trends
• Recommendations: Safe choices, differentiators, patterns to avoid

Cost and Scale

For 1000-example analysis:

Inform users of scope and cost before beginning.

Reference Files

---

Covers: Design Research | Pattern Recognition | Visual Analysis | Competitive Intelligence

Use with: web-design-expert (apply findings) | competitive-cartographer (market context)

Changelog

All notable changes to the design-archivist skill will be documented in this file.

[2.0.0] - 2024-12-13

Changed

• BREAKING: Restructured SKILL.md from 388 lines to ~170 lines for progressive disclosure
• Moved TypeScript interface definitions to existing reference files
• Condensed process sections while keeping core methodology

Added

• Version field in frontmatter for skill tracking
• Expanded anti-patterns section to 6 patterns
• Quick reference table for domain-specific focus areas

Improved

• Core Process section now streamlined as numbered steps
• Pattern Extraction section condensed with clear categories
• Long-Running Infrastructure moved to reference files
• Better cross-references between SKILL.md and reference files

[1.0.0] - 2024-11-24

Added

• Initial design-archivist skill
• Visual DNA extraction methodology
• Context analysis framework
• Taxonomic categorization system
• Long-running infrastructure with checkpointing
• Domain-specific adaptations (portfolios, SaaS, e-commerce, adult, technical)
• Pattern extraction framework
• Troubleshooting guide
• references/data_structures.md with TypeScript interfaces
• references/domain_guides.md with detailed domain strategies

Design Archivist Data Structures

Complete TypeScript interfaces for all data structures used by the Design Archivist skill.

Visual DNA

interface VisualDNA {
  colors: {
    palette: string[]; // Hex codes
    primaryColor: string;
    secondaryColors: string[];
    accentColors: string[];
    dominance: { color: string; percentage: number }[];
  };

  typography: {
    primary: { family: string; weight: number; size: string };
    secondary: { family: string; weight: number; size: string };
    hierarchy: string[]; // Font families in order of prominence
    characteristics: string[]; // 'serif', 'sans-serif', 'monospace', 'display'
  };

  layout: {
    gridSystem: string; // '12-column', 'flexbox', 'freeform', 'masonry'
    spacing: string; // '4px base', '8px base', 'generous', 'tight'
    structure: string; // 'single-column', 'sidebar', 'grid', 'asymmetric'
    whitespace: string; // 'minimal', 'balanced', 'generous'
  };

  interactions: {
    patterns: string[]; // 'hover-lift', 'smooth-scroll', 'parallax', 'fade-in'
    speed: string; // 'instant', 'snappy', 'smooth', 'slow'
    effects: string[]; // 'blur', 'scale', 'color-shift', 'slide'
  };

  animation: {
    presence: string; // 'none', 'subtle', 'moderate', 'heavy'
    types: string[]; // 'scroll-triggered', 'hover-activated', 'auto-play'
    timing: string; // 'fast' (<200ms), 'medium' (200-500ms), 'slow' (>500ms)
  };
}

Context Analysis

interface ContextAnalysis {
  targetAudience: {
    demographic: string;
    techSavviness: 'beginner' | 'intermediate' | 'expert';
    expectedIntent: string[];
  };

  positioning: {
    priceSignal: 'budget' | 'mid-market' | 'premium' | 'luxury';
    trustLevel: 'casual' | 'professional' | 'enterprise';
    innovationLevel: 'conservative' | 'modern' | 'cutting-edge';
  };

  successSignals: {
    engagementMetrics?: { visits: number; timeOnSite: number };
    conversionIndicators: string[]; // 'clear CTA', 'trust badges', 'social proof'
    technicalQuality: string[]; // 'fast-loading', 'responsive', 'accessible'
  };

  competitiveSet: {
    similarSites: string[]; // URLs
    differentiators: string[]; // How this site stands out
  };
}

Pattern Database

interface Pattern {
  name: string;
  frequency: number; // How many examples use this
  description: string;
  examples: string[]; // URLs demonstrating pattern
  contexts: string[]; // When this pattern appears
  effectiveness: string; // Known success rate if available
}

Checkpoint

interface Checkpoint {
  jobId: string;
  domain: string;
  progress: {
    analyzed: number;
    target: number;
    lastProcessedUrl: string;
    timestamp: Date;
  };
  visualDatabase: DesignExample[];
  queue: string[]; // Remaining URLs to process
  patterns: PatternDatabase;
}

Archive Output

interface ArchiveOutput {
  meta: {
    domain: string;
    examplesAnalyzed: number;
    dateRange: { start: Date; end: Date };
    analysisDepth: 'quick' | 'standard' | 'exhaustive';
  };

  examples: DesignExample[]; // Full database

  patterns: {
    dominant: Pattern[];
    emerging: Pattern[];
    deprecated: Pattern[];
    outliers: Pattern[];
  };

  insights: {
    colorTrends: string[];
    typographyTrends: string[];
    layoutTrends: string[];
    interactionTrends: string[];
    technicalTrends: string[];
  };

  recommendations: {
    safeChoices: string[]; // Proven patterns for risk-averse projects
    differentiators: string[]; // Underutilized patterns for standing out
    avoid: string[]; // Deprecated or overused patterns
  };
}

Design Example

interface DesignExample {
  url: string;
  timestamp: Date;
  visualDNA: VisualDNA;
  context: ContextAnalysis;
  tags: string[]; // Style families, technical sophistication, etc.
  screenshot?: string; // Base64 or file path
}

Pattern Database

interface PatternDatabase {
  dominant: Pattern[];
  emerging: Pattern[];
  deprecated: Pattern[];
  outliers: Pattern[];
}

Domain-Specific Research Guides

Detailed guides for conducting design archival research across different domains.

Professional Portfolios

Focus areas: Clarity, credibility, personality, storytelling, accessibility

Seed sources:

• Awwwards (portfolio category)
• Dribbble (portfolio tag)
• Behance (creative fields portfolios)
• Personal sites of known engineers/designers (via GitHub profiles)
• Portfolio aggregators (cofolios.com, bestfolios.com)

Key visual patterns to extract:

• Hero section design (full-bleed image, minimal text, video background)
• Project case study layouts (grid vs single column, image placement)
• About section personality (formal bio vs casual story)
• Navigation patterns (traditional header, sidebar, hamburger)
• Typography choices (technical monospace vs elegant serif)

Success metrics:

• Clear value proposition within 3 seconds
• Easy navigation to key work
• Contact information readily available
• Responsive on mobile
• Fast load times (<2 seconds)

SaaS Landing Pages

Focus areas: Conversion optimization, trust signals, feature presentation, pricing clarity

Seed sources:

• SaaS directories (SaaSHub, Capterra, G2)
• Product Hunt launches
• Competitor analysis (direct + adjacent tools)
• Y Combinator company pages
• Indie Hackers showcase

Key visual patterns to extract:

• Hero CTA design and placement
• Feature presentation (cards, tabs, accordion)
• Social proof placement (logos, testimonials, metrics)
• Pricing table design and psychology
• Trust signals (security badges, compliance mentions)

Success metrics:

• CTA click-through rate
• Scroll depth to pricing
• Trial signup conversion
• Mobile usability
• A/B test winners

E-Commerce Sites

Focus areas: Product photography, checkout flow, mobile experience, trust badges

Seed sources:

• Shopify Inspiration gallery
• Major retailers (Amazon, Target, Etsy patterns)
• Niche marketplaces (Gumroad, Creative Market)
• Direct-to-consumer brands
• Luxury e-commerce sites

Key visual patterns to extract:

• Product image presentation (zoom, 360°, video)
• Category browsing (filters, sorting, grid layouts)
• Cart design and prominence
• Checkout flow (one-page vs multi-step)
• Mobile product pages

Success metrics:

• Add-to-cart rate
• Cart abandonment rate
• Mobile conversion
• Product page engagement
• Checkout completion

Adult Content Sites

Focus areas: Premium positioning, discretion, trust signals, age verification UX

Seed sources:

• Adult ad networks (discreetly via WebSearch)
• VR platforms (Meta Quest store, SteamVR adult category)
• Competitor landing pages (public-facing only)
• Industry publications and reviews
• Payment processor case studies

Key visual patterns to extract:

• Age gate design (compliance + UX)
• Premium tier presentation
• Discretion signals (billing names, privacy messaging)
• Content preview strategies
• Subscription vs pay-per-view UI

Success metrics:

• Age verification completion rate
• Free-to-paid conversion
• Subscription retention
• Payment method diversity
• Mobile vs desktop usage

Ethical considerations:

• Only analyze public-facing landing pages
• No scraping of gated content
• Respect robots.txt strictly
• Handle data with professional discretion
• No personal user data collection

Technical Showcases (Shader Art, 3D Demos)

Focus areas: Visual drama, performance metrics, interactive demos, technical depth

Seed sources:

• Shadertoy (top shaders, curated collections)
• ArtStation (3D artists, technical art category)
• Codrops (WebGL experiments, creative coding)
• Three.js examples and showcases
• Technical portfolios from rendering engineers

Key visual patterns to extract:

• Demo presentation (full-screen vs embedded)
• Performance info display (FPS counters, stats)
• Interaction design (mouse, keyboard, touch)
• Code snippet presentation
• Documentation integration

Success metrics:

• Frame rate consistency
• Load time to interactive
• Cross-browser compatibility
• Mobile fallbacks
• Code clarity and documentation

Taxonomy Reference

Style Families

• Minimal: Generous whitespace, limited color palette, clean typography
• Maximal: Rich imagery, complex layouts, layered elements
• Brutalist: Raw HTML aesthetics, system fonts, harsh contrasts
• Skeuomorphic: Real-world material mimicry, shadows, textures
• Neumorphic: Soft shadows, subtle depth, monochromatic
• Glassmorphic: Frosted glass effects, blur, transparency
• Corporate: Conservative blues, traditional layouts, trust signals
• Playful: Bright colors, rounded corners, friendly copy
• Elegant: Refined typography, muted colors, sophisticated spacing
• Technical: Monospace fonts, code aesthetics, precision
• Edgy: Dark themes, bold colors, asymmetry
• Warm: Earth tones, organic shapes, approachable

Technical Sophistication

• Static: No JavaScript, simple HTML/CSS
• Basic Interactive: Simple hover effects, basic animations
• Advanced Interactive: Smooth transitions, parallax, dynamic content
• Experimental: WebGL, custom shaders, cutting-edge browser features

Content Strategy

• Text-heavy: Long-form content, detailed explanations
• Image-focused: Visual storytelling, minimal copy
• Video-first: Autoplay backgrounds, video demos
• Interactive-demo: Live product interactions, playgrounds
• Minimal-copy: Extreme brevity, iconography over text

Navigation Patterns

• Traditional-nav: Horizontal header menu
• Hamburger: Mobile-style collapsible menu
• Mega-menu: Large dropdown with categories
• Single-scroll: One-page scroll navigation
• Tab-based: Horizontal tabs for sections

Accessibility

• Excellent: WCAG AAA, keyboard nav, screen reader optimized
• Good: WCAG AA, some keyboard support
• Basic: Color contrast only, limited accessibility
• Poor: Accessibility barriers present