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.4license: Apache-2.05---67# Design Archivist89A 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).1011## Quick Start1213```14User: "Research design patterns for fintech apps targeting Gen Z"1516Archivist:171. Define scope: "fintech landing pages, Gen Z audience (18-27)"182. Set target: 500 examples over 2-3 days193. Identify seeds: Venmo, Cash App, Robinhood, plus competitors204. Begin systematic crawl with checkpoints every 10 examples215. After 48 hours: Deliver pattern database with:22 - Color trends23 - Typography patterns24 - Layout systems25 - White space opportunities26```2728## When to Use2930**Use for:**31- Exhaustive design research (300-1000 examples)32- Pattern recognition across large example sets33- Competitive visual analysis34- Trend identification with data backing35- Domain-specific design language extraction3637**NOT for:**38- Quick design inspiration (use Dribbble/Awwwards directly)39- Single example analysis40- Small samples (<50 examples)41- Real-time trend spotting (this takes days)4243## Core Process4445### 1. Domain Initialization46- Define target domain and audience47- Set target count (300-1000 based on specificity)48- Identify seed URLs or search queries49- Establish focus areas5051### 2. Systematic Crawling52For each example:531. Capture visual snapshot542. Record metadata (URL, timestamp, context)553. Extract Visual DNA (colors, typography, layout, interactions)564. Analyze contextual signals (audience, positioning, success indicators)575. Apply categorical tags586. **Save checkpoint every 10 examples**5960### 3. Pattern Extraction61After accumulating examples, identify:62- **Dominant patterns** - The "norm" (most common approaches)63- **Emerging patterns** - The "future" (gaining traction)64- **Deprecated patterns** - The "past" (avoid these)65- **Outlier patterns** - The "experimental" (unique approaches)6667## Visual DNA Extraction6869For each example, extract:7071| Category | What to Extract |72|----------|-----------------|73| **Colors** | Palette, primary/secondary/accent, dominance percentages |74| **Typography** | Font families, weights, sizes, hierarchy |75| **Layout** | Grid system, spacing base, structure, whitespace |76| **Interactions** | Hover effects, transitions, scroll behaviors |77| **Animation** | Presence level, types, timing |7879See `references/data_structures.md` for full TypeScript interfaces.8081## Domain Quick Reference8283| Domain | Focus Areas | Seed Sources |84|--------|-------------|--------------|85| **Portfolios** | Clarity, credibility, storytelling | Awwwards, Dribbble, Behance |86| **SaaS Landing** | Conversion, trust signals, pricing | Product Hunt, SaaS directories |87| **E-Commerce** | Product photos, checkout, mobile | Shopify stores, major retailers |88| **Adult Content** | Premium positioning, discretion | Adult ad networks, VR platforms |89| **Technical Demos** | Visual drama, performance, interactivity | Shadertoy, Codrops, ArtStation |9091See `references/domain_guides.md` for detailed domain strategies.9293## Long-Running Infrastructure9495### Checkpointing Strategy96- Save checkpoint every 10 examples97- Include job ID, progress count, queue state, timestamp98- Keep last 3 checkpoints as backup99100### Progress Reporting101Report at intervals:102- "Analyzed 250/1000 examples (25% complete)"103- "Current rate: 100 examples/day"104- "Estimated completion: 7 days"105- "Top emerging pattern: glassmorphic cards (15% of recent examples)"106107### Rate Limiting108- Max 1 request per second per domain109- Respect robots.txt110- Implement exponential backoff on errors111112## Anti-Patterns113114### 1. Scraping Too Aggressively115**Symptom:** Requests every 100ms, same domain hammered repeatedly116**Fix:** 1 request/second max, respect robots.txt, exponential backoff117118### 2. No Checkpointing119**Symptom:** Running 24 hours straight without saving120**Fix:** Save every 10 examples with timestamp and queue state121122### 3. Ignoring Domain Context123**Symptom:** Applying e-commerce patterns to portfolio sites124**Fix:** Research domain-specific best practices first125126### 4. Analysis Paralysis127**Symptom:** 30 minutes per example across 1000 examples128**Fix:** Batch process in groups of 10, deep-dive only on outliers129130### 5. Insufficient Diversity131**Symptom:** Only analyzing top-tier examples132**Fix:** Include leaders, mid-tier, and independents; geographic diversity133134### 6. Ignoring Historical Context135**Symptom:** Treating all patterns as current136**Fix:** Use Wayback Machine, note when patterns emerged, track evolution137138## Output Format139140Generate comprehensive research packages with:141- **Meta**: Domain, count, date range, depth142- **Examples**: Full visual database143- **Patterns**: Dominant, emerging, deprecated, outlier144- **Insights**: Color/typography/layout/interaction trends145- **Recommendations**: Safe choices, differentiators, patterns to avoid146147## Cost and Scale148149For 1000-example analysis:150| Item | Cost |151|------|------|152| Screenshots | ~$20 (Playwright cloud @ $0.02/each) |153| LLM Analysis | ~$15 (100 batches × $0.15) |154| Storage | ~$0.01 (200MB) |155| **Total** | **~$35** |156| **Runtime** | 48-72 hours |157158Inform users of scope and cost before beginning.159160## Reference Files161162| File | Contents |163|------|----------|164| `references/data_structures.md` | TypeScript interfaces for VisualDNA, ContextAnalysis, Checkpoint |165| `references/domain_guides.md` | Detailed domain-specific strategies and focus areas |166167---168169**Covers:** Design Research | Pattern Recognition | Visual Analysis | Competitive Intelligence170171**Use with:** web-design-expert (apply findings) | competitive-cartographer (market context)
curiositech