From design-research
Research UI/UX patterns for any concept. Use when the user asks for 'ui research', 'design inspiration', 'moodboard', 'UI examples', or 'how do other apps handle X'. Decomposes concepts into searchable patterns, searches design sources (Dribbble, Behance, Mobbin, v0), and presents a scannable summary. User can then request a full HTML gallery.
npx claudepluginhub jjcall/design-researchThis skill uses the workspace's default tool permissions.
Research UI/UX patterns for any concept. Uses a **two-phase flow**:
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.
Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.
Research UI/UX patterns for any concept. Uses a two-phase flow:
This lets you review results quickly before committing to the heavier gallery generation.
When the user requests UI research, extract:
CONCEPT: {the design concept to research}
QUERY_TYPE: inspiration | comparison | deep-dive
CONTEXT: {any additional context provided}
Display your parsing:
📋 Researching: {CONCEPT}
Type: {QUERY_TYPE}
Context: {CONTEXT if any}
Break the concept into 5-8 searchable sub-patterns using three passes:
Identify the obvious, directly-related patterns:
"planning mode UI" →
- Task lists and todos
- Kanban boards
- Timeline/Gantt views
- Calendar interfaces
- View switcher patterns
Identify adjacent patterns the user didn't ask for but will find useful:
Adjacent patterns:
- Approval gates
- AI reasoning visualization
- Mode toggle UX
- Bulk editing
- Drag-and-drop interactions
For each pattern, use bundled data files to expand terms:
data/synonyms.jsondata/products.jsonExample expansion for "kanban board":
Base terms: ["kanban", "task board"]
Synonyms: ["card view", "column layout", "swim lanes", "board view"]
Product queries: ["Linear board", "Trello UI", "Notion kanban", "Asana board"]
Display the decomposition to the user:
🔍 Decomposed into {N} patterns:
1. **Kanban Boards** — Card-based task organization
Terms: kanban, task board, column layout
Products: Linear, Trello, Notion
2. **Timeline Views** — Chronological display
Terms: timeline, gantt, roadmap
Products: Linear, Notion, Airtable
...
Run 20-30 parallel WebSearch queries across design sources AND social platforms.
Design References (visual examples):
site:dribbble.com {terms} UI 2025 2026
site:behance.net {terms} UI UX case study
site:figma.com/community {terms}
site:mobbin.com {terms}
Discussions (what designers are saying):
Reddit (uses ScrapeCreators API if SCRAPECREATORS_API_KEY is set):
# With API key: better engagement data, more results
search_reddit_scrapecreators(query, timeframe="month")
# Fallback: WebSearch
site:reddit.com (r/UI_Design OR r/web_design OR r/userexperience) {terms}
X/Twitter and HN (WebSearch):
site:x.com {terms} UI design
site:news.ycombinator.com {terms} design
Video Tutorials (walkthroughs):
site:youtube.com {terms} UI tutorial
site:youtube.com {terms} figma walkthrough
Product Launches (new tools):
site:producthunt.com {terms}
AI Sources (generated examples):
site:v0.dev {terms}
site:ui-syntax.com {terms}
For each sub-pattern, generate queries using templates from data/sources.json:
queries = []
for pattern in sub_patterns:
for source in ['mobbin', 'dribbble', 'behance', 'v0']:
queries.append(generate_query(source, pattern.base_terms[0]))
for product_query in pattern.product_queries[:3]:
queries.append(product_query + " UI")
By default, prioritize recent content (last 30 days). Can be adjusted:
/design-research planning mode UI # Default: last 30 days
/design-research planning mode UI --days=7 # Last week only
/design-research planning mode UI --days=90 # Last quarter
/design-research planning mode UI --quick # Fewer sources, faster
/design-research planning mode UI --deep # More sources, comprehensive
For design galleries (Dribbble, Behance), append current year to queries. For social sources (Reddit, X, YouTube), filter by post date.
BEFORE proceeding to image collection, filter out collection/search pages:
For each URL from search results, classify it:
/shots/12345, /gallery/123/, /explore/screens/uuid/search?q=, /browse/, /tags/, /designers/Remove all collection pages (quality 0.0) — these redirect or show lists, not individual designs
Log what was filtered:
📋 URL Quality Check:
- 45 URLs collected
- 12 filtered as collection/search pages
- 33 individual pages kept
Filtered examples:
✗ dribbble.com/search?q=kanban (collection)
✗ mobbin.com/browse/web/screens (collection)
Only proceed with individual/unknown URLs to Step 4
| Source | Individual Pattern | Collection Patterns |
|---|---|---|
| Dribbble | /shots/\d+ | /search?, /tags/, /designers |
| Behance | /gallery/\d+/ | /search/projects/, /galleries/ |
| Mobbin | /explore/screens/[uuid] | /browse/, /explore/web/screens, /explore/mobile/screens |
| Figma | /community/file/\d+ | /community/search, /community/explore |
| v0 | /t/[id], /chat/[id] | /chat$, /docs/ |
After filtering, display a scannable summary grouped by source type. Do NOT build the gallery yet.
Group results into four categories:
Show engagement metrics inline for social sources.
📋 Found 67 references for "planning mode UI"
Design References (34)
★ dribbble.com/shots/25799561 — Kanban Dashboard Redesign [img]
★ behance.net/gallery/198234567 — Task Board UI Kit [img]
★ figma.com/community/file/1234 — Kanban Components [img]
★ mobbin.com/explore/screens/abc — Linear Roadmap [img]
... +30 more
Discussions (18)
★ r/UI_Design: "How Linear nailed planning mode" [847↑ • 234💬]
★ r/web_design: "Best planning UI patterns in 2026" [523↑ • 156💬]
★ @frankchimero: "The best planning UIs let you zoom..." [1.2K♥ • 89↺]
★ @round: "Linear's planning mode is *chef's kiss*" [892♥ • 45↺]
○ HN: "Show HN: Open-source planning tool" [234↑ • 89💬]
... +13 more
Tutorials (8)
★ youtube.com/watch?v=abc — Building a Planning App in Figma [12K▶]
★ youtube.com/watch?v=xyz — Linear Clone Tutorial [8.5K▶]
★ youtube.com/watch?v=def — Kanban Board from Scratch [6.2K▶]
... +5 more
Launches (7)
★ producthunt.com/posts/planwise — "AI planning assistant" [456↑]
★ producthunt.com/posts/taskflow — "Visual task management" [312↑]
... +5 more
───────────────────────────────────────
67 total • 34 designs • 18 discussions • 8 tutorials • 7 launches
Top voices: @frankchimero, r/UI_Design, Juxtopposed
Say "build gallery", "open in tabs", or "show insights"
| Symbol | Meaning |
|---|---|
| ★ | Individual page (quality 1.0) |
| ○ | Unknown quality (0.5) |
| [img] | Image available |
| ↑ | Upvotes (Reddit, HN, PH) |
| ♥ | Likes (X, Dribbble) |
| 💬 | Comments |
| ↺ | Shares/Retweets |
| ▶ | Views (YouTube) |
After displaying the summary, store in memory:
RESEARCH_STATE: {
concept: "{CONCEPT}",
refs: [...all references with metadata...],
categories: [...],
engagement_stats: {...},
filtered_count: {N},
ready_for_gallery: true
}
When user says "show insights", analyze the discussions and generate a sentiment summary:
📊 What Designers Are Saying About "planning mode UI"
Loved (mentioned positively):
- Linear's keyboard-first approach (12 mentions)
- Notion's flexibility for custom workflows (8)
- "Finally a Gantt that doesn't suck" — r/UI_Design (6)
Criticized (common complaints):
- Mobile planning UIs are all terrible (9)
- Feature overload, hard to learn (7)
- "Why can't I just drag tasks?" — @round (5)
Hot Debates:
- Timeline vs Kanban for sprint planning
- AI-generated tasks: helpful or annoying?
Products Mentioned:
- Linear (23x) — keyboard shortcuts, clean design
- Notion (18x) — flexibility, databases
- Asana (12x) — enterprise, integrations
- Height (8x) — newcomer, AI features
Only run this step when user says: "build gallery", "generate it", "looks good", "create the HTML", etc.
The skill uses Playwright for reliable screenshot capture. This handles:
If Playwright isn't installed, run:
cd ~/Code/design-research
python scripts/design_research.py --setup
This installs Playwright and Chromium (~150MB).
~/.cache/design-research/screenshots/📸 Capturing screenshots...
[1/34] dribbble.com/shots/25799561 ✓
[2/34] figma.com/community/file/1234 ✓
[3/34] mobbin.com/explore/screens/abc ✓
...
Done: 30 captured, 4 failed (using placeholders)
For URLs where Playwright fails, try WebFetch + OG tags:
<meta property="og:image" content="...">
<meta name="twitter:image" content="...">
| Source | CDN Pattern |
|---|---|
| Dribbble | cdn.dribbble.com/userupload |
| Behance | mir-s3-cdn-cf.behance.net |
| Figma | figma.com/community/thumbnail |
| Mobbin | mobbin.com/_next/image |
| v0.dev | Preview images in meta tags |
Read template: Load data/gallery-template.html
Build data object:
{
"concept": "planning mode UI",
"categories": [
{ "id": "all", "label": "All", "count": 52 },
{ "id": "kanban", "label": "Kanban Boards", "count": 15 }
],
"sources": [
{ "id": "dribbble", "label": "Dribbble", "color": "#ea4c89", "count": 12 }
],
"refs": [
{
"url": "https://dribbble.com/shots/123",
"title": "Kanban Board Design",
"desc": "Clean task management UI",
"source": "dribbble",
"sourceLabel": "Dribbble",
"cat": "kanban",
"tags": ["kanban", "tasks"],
"img": "https://cdn.dribbble.com/...",
"urlQuality": 1.0,
"imageStatus": "available"
}
],
"allTags": ["kanban", "timeline", "calendar"],
"tier": 2,
"generatedAt": "2024-04-12T10:30:00"
}
Inject data at the /*GALLERY_DATA*/ marker
Write to .design-research-output/{date}-{concept}.html
✅ Gallery built!
📊 Results:
- {N} references
- {M} with images
- Sources: Dribbble ({X}), Mobbin ({Y}), ...
📁 Saved: .design-research-output/{filename}
🔗 Opening in browser...
After displaying the summary (Phase 1), retain context for follow-ups:
RESEARCH_STATE: {
concept: "{CONCEPT}",
refs: [...all references...],
categories: [...],
decomposition: {...},
filtered_count: {N},
gallery_built: false
}
| User says | Claude does |
|---|---|
| "build gallery" / "generate it" / "looks good" | → Run Step 5 (gallery generation) |
| "open in tabs" / "open all" | → Open all references in browser tabs |
| "open kanban in tabs" | → Open only kanban category refs in tabs |
| "open top 10 in tabs" | → Open first 10 refs in tabs |
| "open dribbble in tabs" | → Open only Dribbble refs in tabs |
| "more kanban examples" | Run targeted searches, add to refs, show updated summary |
| "focus on dribbble only" | Filter refs to Dribbble, show filtered summary |
| "remove the medium articles" | Filter out medium.com refs, show updated summary |
| "now do mobile" | New research sprint with mobile queries |
| "compare Linear vs Asana" | Pull from refs + targeted searches |
When user says "open in tabs", "open all", or similar:
This will open 34 tabs. Continue? (say "yes" or specify a limit like "top 10")
open "https://dribbble.com/shots/123"
open "https://figma.com/community/file/456"
# ... etc
✓ Opened 15 tabs in your browser
| Command | Behavior |
|---|---|
| "open in tabs" | All refs (with confirmation if > 15) |
| "open top 10" | First 10 refs (highest quality) |
| "open top 5 kanban" | First 5 from kanban category |
| "open dribbble in tabs" | All Dribbble refs |
| "open ★ only" | Only quality 1.0 (individual pages) |
Say "build gallery" to generate the browsable HTML.
Say "open in tabs" to open all references in your browser.
Or refine:
- "more {category} examples"
- "focus on {source} only"
- "remove {source}"
- "open top 10 in tabs"
Gallery saved. I still have all {N} references in memory.
- "add more examples" → extend and rebuild
- "open in tabs" → open refs in browser
- "new research for {concept}" → start fresh
When troubleshooting research results (images not loading, wrong pages appearing), output diagnostic information:
After collecting search results, show classification for each URL:
DEBUG: URL Classification
────────────────────────────────────────
URL: https://dribbble.com/shots/12345678-kanban-board
Source: dribbble
Quality: 1.0 (individual)
Pattern: /shots/\d+
URL: https://dribbble.com/search?q=kanban
Source: dribbble
Quality: 0.0 (collection) ← FILTERED
Pattern: /search?
URL: https://mobbin.com/browse/web/screens
Source: mobbin
Quality: 0.0 (collection) ← FILTERED
Pattern: /browse/
URL: https://medium.com/design/kanban-patterns
Source: unknown
Quality: 0.5 (unknown)
Pattern: none
────────────────────────────────────────
Summary: 28 kept, 17 filtered as collections
For URLs that pass filtering, show WebFetch results:
DEBUG: Image Extraction
────────────────────────────────────────
URL: https://dribbble.com/shots/12345678
Fetched: Yes
OG Image: https://cdn.dribbble.com/userupload/12345/original.png
Status: ✓ Image found
URL: https://behance.net/gallery/123456/project
Fetched: Yes
OG Image: null
CDN Search: Found mir-s3-cdn-cf.behance.net/project_modules/...
Status: ✓ Image found via CDN
URL: https://mobbin.com/explore/screens/abc-123
Fetched: No (blocked/timeout)
Fallback: Using source placeholder
Status: ✗ No image
────────────────────────────────────────
Summary: 24 with images, 9 without (using placeholders)
Enable debug output when:
| Symptom | Likely Cause | Fix |
|---|---|---|
| All placeholders | WebFetch not attempted or failing | Check if URLs are being fetched |
| Search pages in results | Post-search filtering not applied | Ensure Step 3 filtering runs |
| Mobbin redirects | Captured browse URLs, not screen URLs | Mobbin browse pages require auth; filter them out |
| "X with images" but none show | img field has URL but it's broken | Check OG image URLs are valid |
The plugin includes a CLI for direct use:
# Research a concept
python scripts/design_research.py "planning mode UI"
# Check environment (tier detection)
python scripts/design_research.py --diagnose
# Use mock data for testing
python scripts/design_research.py --mock "kanban board" --no-open
# View research history
python scripts/design_research.py --history
# Re-run previous research
python scripts/design_research.py --rerun {id}
# Open previous gallery
python scripts/design_research.py --open {id}
| Tier | Environment | Image Source | Time | Quality |
|---|---|---|---|---|
| 0 | Playwright (recommended) | Full screenshots | 3-5 min | ★★★★★ |
| 1 | CLI (no screenshots) | Links only | 1 min | ★☆☆☆☆ |
| 2 | WebFetch | OG images | 3 min | ★★★☆☆ |
Playwright provides:
python scripts/design_research.py --setup
python scripts/design_research.py --screenshot "https://figma.com/community/file/123456"
The plugin includes bundled data for term expansion:
data/synonyms.json — UI/UX terminology map (100+ patterns)data/products.json — Pattern → product mappings (100+ patterns × 5-10 products)data/sources.json — Source metadata (CDN patterns, colors, query templates)These are seed data for acceleration, not restrictions. For novel concepts not in the data files, generate expansions dynamically.