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:
- •Capture visual snapshot
- •Record metadata (URL, timestamp, context)
- •Extract Visual DNA (colors, typography, layout, interactions)
- •Analyze contextual signals (audience, positioning, success indicators)
- •Apply categorical tags
- •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:
| Category | What to Extract |
|---|---|
| Colors | Palette, primary/secondary/accent, dominance percentages |
| Typography | Font families, weights, sizes, hierarchy |
| Layout | Grid system, spacing base, structure, whitespace |
| Interactions | Hover effects, transitions, scroll behaviors |
| Animation | Presence level, types, timing |
See references/data_structures.md for full TypeScript interfaces.
Domain Quick Reference
| Domain | Focus Areas | Seed Sources |
|---|---|---|
| Portfolios | Clarity, credibility, storytelling | Awwwards, Dribbble, Behance |
| SaaS Landing | Conversion, trust signals, pricing | Product Hunt, SaaS directories |
| E-Commerce | Product photos, checkout, mobile | Shopify stores, major retailers |
| Adult Content | Premium positioning, discretion | Adult ad networks, VR platforms |
| Technical Demos | Visual drama, performance, interactivity | Shadertoy, Codrops, ArtStation |
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:
| Item | Cost |
|---|---|
| Screenshots | ~$20 (Playwright cloud @ $0.02/each) |
| LLM Analysis | ~$15 (100 batches × $0.15) |
| Storage | ~$0.01 (200MB) |
| Total | ~$35 |
| Runtime | 48-72 hours |
Inform users of scope and cost before beginning.
Reference Files
| File | Contents |
|---|---|
references/data_structures.md | TypeScript interfaces for VisualDNA, ContextAnalysis, Checkpoint |
references/domain_guides.md | Detailed domain-specific strategies and focus areas |
Covers: Design Research | Pattern Recognition | Visual Analysis | Competitive Intelligence
Use with: web-design-expert (apply findings) | competitive-cartographer (market context)