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)
1---2name: design-archivist3description: 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.4---56# Design Archivist78A 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).910## Quick Start1112```13User: "Research design patterns for fintech apps targeting Gen Z"1415Archivist:161. Define scope: "fintech landing pages, Gen Z audience (18-27)"172. Set target: 500 examples over 2-3 days183. Identify seeds: Venmo, Cash App, Robinhood, plus competitors194. Begin systematic crawl with checkpoints every 10 examples205. After 48 hours: Deliver pattern database with:21 - Color trends22 - Typography patterns23 - Layout systems24 - White space opportunities25```2627## When to Use2829**Use for:**30- Exhaustive design research (300-1000 examples)31- Pattern recognition across large example sets32- Competitive visual analysis33- Trend identification with data backing34- Domain-specific design language extraction3536**NOT for:**37- Quick design inspiration (use Dribbble/Awwwards directly)38- Single example analysis39- Small samples (<50 examples)40- Real-time trend spotting (this takes days)4142## Core Process4344### 1. Domain Initialization45- Define target domain and audience46- Set target count (300-1000 based on specificity)47- Identify seed URLs or search queries48- Establish focus areas4950### 2. Systematic Crawling51For each example:521. Capture visual snapshot532. Record metadata (URL, timestamp, context)543. Extract Visual DNA (colors, typography, layout, interactions)554. Analyze contextual signals (audience, positioning, success indicators)565. Apply categorical tags576. **Save checkpoint every 10 examples**5859### 3. Pattern Extraction60After accumulating examples, identify:61- **Dominant patterns** - The "norm" (most common approaches)62- **Emerging patterns** - The "future" (gaining traction)63- **Deprecated patterns** - The "past" (avoid these)64- **Outlier patterns** - The "experimental" (unique approaches)6566## Visual DNA Extraction6768For each example, extract:6970| Category | What to Extract |71|----------|-----------------|72| **Colors** | Palette, primary/secondary/accent, dominance percentages |73| **Typography** | Font families, weights, sizes, hierarchy |74| **Layout** | Grid system, spacing base, structure, whitespace |75| **Interactions** | Hover effects, transitions, scroll behaviors |76| **Animation** | Presence level, types, timing |7778See `references/data_structures.md` for full TypeScript interfaces.7980## Domain Quick Reference8182| Domain | Focus Areas | Seed Sources |83|--------|-------------|--------------|84| **Portfolios** | Clarity, credibility, storytelling | Awwwards, Dribbble, Behance |85| **SaaS Landing** | Conversion, trust signals, pricing | Product Hunt, SaaS directories |86| **E-Commerce** | Product photos, checkout, mobile | Shopify stores, major retailers |87| **Adult Content** | Premium positioning, discretion | Adult ad networks, VR platforms |88| **Technical Demos** | Visual drama, performance, interactivity | Shadertoy, Codrops, ArtStation |8990See `references/domain_guides.md` for detailed domain strategies.9192## Long-Running Infrastructure9394### Checkpointing Strategy95- Save checkpoint every 10 examples96- Include job ID, progress count, queue state, timestamp97- Keep last 3 checkpoints as backup9899### Progress Reporting100Report at intervals:101- "Analyzed 250/1000 examples (25% complete)"102- "Current rate: 100 examples/day"103- "Estimated completion: 7 days"104- "Top emerging pattern: glassmorphic cards (15% of recent examples)"105106### Rate Limiting107- Max 1 request per second per domain108- Respect robots.txt109- Implement exponential backoff on errors110111## Anti-Patterns112113### 1. Scraping Too Aggressively114**Symptom:** Requests every 100ms, same domain hammered repeatedly115**Fix:** 1 request/second max, respect robots.txt, exponential backoff116117### 2. No Checkpointing118**Symptom:** Running 24 hours straight without saving119**Fix:** Save every 10 examples with timestamp and queue state120121### 3. Ignoring Domain Context122**Symptom:** Applying e-commerce patterns to portfolio sites123**Fix:** Research domain-specific best practices first124125### 4. Analysis Paralysis126**Symptom:** 30 minutes per example across 1000 examples127**Fix:** Batch process in groups of 10, deep-dive only on outliers128129### 5. Insufficient Diversity130**Symptom:** Only analyzing top-tier examples131**Fix:** Include leaders, mid-tier, and independents; geographic diversity132133### 6. Ignoring Historical Context134**Symptom:** Treating all patterns as current135**Fix:** Use Wayback Machine, note when patterns emerged, track evolution136137## Output Format138139Generate comprehensive research packages with:140- **Meta**: Domain, count, date range, depth141- **Examples**: Full visual database142- **Patterns**: Dominant, emerging, deprecated, outlier143- **Insights**: Color/typography/layout/interaction trends144- **Recommendations**: Safe choices, differentiators, patterns to avoid145146## Cost and Scale147148For 1000-example analysis:149| Item | Cost |150|------|------|151| Screenshots | ~$20 (Playwright cloud @ $0.02/each) |152| LLM Analysis | ~$15 (100 batches × $0.15) |153| Storage | ~$0.01 (200MB) |154| **Total** | **~$35** |155| **Runtime** | 48-72 hours |156157Inform users of scope and cost before beginning.158159## Reference Files160161| File | Contents |162|------|----------|163| `references/data_structures.md` | TypeScript interfaces for VisualDNA, ContextAnalysis, Checkpoint |164| `references/domain_guides.md` | Detailed domain-specific strategies and focus areas |165166---167168**Covers:** Design Research | Pattern Recognition | Visual Analysis | Competitive Intelligence169170**Use with:** web-design-expert (apply findings) | competitive-cartographer (market context)
jsgforever