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---5
6# Design Archivist
7
8A 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).
9
10## Quick Start
11
12```
13User: "Research design patterns for fintech apps targeting Gen Z"
14
15Archivist:
161. Define scope: "fintech landing pages, Gen Z audience (18-27)"
172. Set target: 500 examples over 2-3 days
183. Identify seeds: Venmo, Cash App, Robinhood, plus competitors
194. Begin systematic crawl with checkpoints every 10 examples
205. After 48 hours: Deliver pattern database with:
21 - Color trends
22 - Typography patterns
23 - Layout systems
24 - White space opportunities
25```
26
27## When to Use
28
29**Use for:**
30- Exhaustive design research (300-1000 examples)
31- Pattern recognition across large example sets
32- Competitive visual analysis
33- Trend identification with data backing
34- Domain-specific design language extraction
35
36**NOT for:**
37- Quick design inspiration (use Dribbble/Awwwards directly)
38- Single example analysis
39- Small samples (<50 examples)
40- Real-time trend spotting (this takes days)
41
42## Core Process
43
44### 1. Domain Initialization
45- Define target domain and audience
46- Set target count (300-1000 based on specificity)
47- Identify seed URLs or search queries
48- Establish focus areas
49
50### 2. Systematic Crawling
51For each example:
521. Capture visual snapshot
532. Record metadata (URL, timestamp, context)
543. Extract Visual DNA (colors, typography, layout, interactions)
554. Analyze contextual signals (audience, positioning, success indicators)
565. Apply categorical tags
576. **Save checkpoint every 10 examples**
58
59### 3. Pattern Extraction
60After 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)
65
66## Visual DNA Extraction
67
68For each example, extract:
69
70| 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 |
77
78See `references/data_structures.md` for full TypeScript interfaces.
79
80## Domain Quick Reference
81
82| 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 |
89
90See `references/domain_guides.md` for detailed domain strategies.
91
92## Long-Running Infrastructure
93
94### Checkpointing Strategy
95- Save checkpoint every 10 examples
96- Include job ID, progress count, queue state, timestamp
97- Keep last 3 checkpoints as backup
98
99### Progress Reporting
100Report 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)"
105
106### Rate Limiting
107- Max 1 request per second per domain
108- Respect robots.txt
109- Implement exponential backoff on errors
110
111## Anti-Patterns
112
113### 1. Scraping Too Aggressively
114**Symptom:** Requests every 100ms, same domain hammered repeatedly
115**Fix:** 1 request/second max, respect robots.txt, exponential backoff
116
117### 2. No Checkpointing
118**Symptom:** Running 24 hours straight without saving
119**Fix:** Save every 10 examples with timestamp and queue state
120
121### 3. Ignoring Domain Context
122**Symptom:** Applying e-commerce patterns to portfolio sites
123**Fix:** Research domain-specific best practices first
124
125### 4. Analysis Paralysis
126**Symptom:** 30 minutes per example across 1000 examples
127**Fix:** Batch process in groups of 10, deep-dive only on outliers
128
129### 5. Insufficient Diversity
130**Symptom:** Only analyzing top-tier examples
131**Fix:** Include leaders, mid-tier, and independents; geographic diversity
132
133### 6. Ignoring Historical Context
134**Symptom:** Treating all patterns as current
135**Fix:** Use Wayback Machine, note when patterns emerged, track evolution
136
137## Output Format
138
139Generate comprehensive research packages with:
140- **Meta**: Domain, count, date range, depth
141- **Examples**: Full visual database
142- **Patterns**: Dominant, emerging, deprecated, outlier
143- **Insights**: Color/typography/layout/interaction trends
144- **Recommendations**: Safe choices, differentiators, patterns to avoid
145
146## Cost and Scale
147
148For 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 |
156
157Inform users of scope and cost before beginning.
158
159## Reference Files
160
161| 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 |
165
166---
167
168**Covers:** Design Research | Pattern Recognition | Visual Analysis | Competitive Intelligence
169
170**Use with:** web-design-expert (apply findings) | competitive-cartographer (market context)
majiayu000