| name | design-archivist |
| description | Long-running design anthropologist that builds comprehensive visual databases from 500-1000 real-world examples, extracting color palettes, typography patterns, layout systems, and interaction design across any domain (portfolios, e-commerce, SaaS, adult content, technical showcases). This skill should be used when users need exhaustive design research, pattern recognition across large example sets, or systematic visual analysis for competitive positioning. |
| allowed-tools | Read,Write,WebSearch,WebFetch |
| category | Research & Analysis |
| tags | design-research, patterns, analysis, visual-database, trends |
| pairs-with | [object Object], [object Object] |
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)