# Researching Website Design

> Analyzes industry websites for design patterns, layout, typography, and content strategies using first-principles thinking. Use when researching website design, UI patterns, or competitive design analysis.

- Skill: `qte77/researching-website-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add qte77/researching-website-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/qte77/researching-website-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: qte77 (https://skillmd.com/u/qte77)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/qte77/researching-website-design

---


# Website Design Research

**Target**: $ARGUMENTS

Analyzes industry websites for design patterns through first-principles
thinking. Focus on layout, typography, color, and content presentation.
Pair with `auditing-website-accessibility` and `auditing-website-usability`
for implementation.

## Core Question

"How would users naturally expect this information organized if they had
never seen a website?"

## Workflow

1. **Find websites** - Search "[industry] companies/platforms", target 6-8 sites
2. **Extract design elements** - Colors (hex), typography, layout hierarchy, CTAs
3. **Track sources** - URL, authority level (H/M/L), cited research, cross-references
4. **Identify anomalies** - Who breaks conventions with better UX results?
5. **Synthesize findings** - Breakthroughs, patterns, contrarian insights, quick wins

## Output Format

### Source Index

```text
1. [Company] - [URL] - Authority: [H/M/L]
   Cites: [Studies/sources referenced]
   Cross-refs: [Shared sources with other sites]
```

### Design Breakthroughs (Max 3)

```text
BREAKTHROUGH #N (Impact: N/100)
Pattern: [Specific design element]
Principle: [Why it works for users]
Opportunity: [How to apply]
Sources: [URLs and cited research]
```

### Visual and Content Patterns

```text
COLORS: Primary #HEX [effect], Accent #HEX [effect]
TYPOGRAPHY: Headers [font/weight], Body [font/size]
HEADLINES: "[Pattern]" - [User psychology]
CTAS: "[Button text]" - [Action driver]
```

### Contrarian Insights

```text
Everyone: [Common practice]
Reality: [What creates better UX]
Evidence: [Sources]
```

### Quick Wins

```text
ELIMINATE: [Element hurting UX]
SIMPLIFY: [Over-complex pattern]
ADOPT: [Underused effective pattern]
```

## Rules

- Focus exclusively on visual design, layout, typography, and content
- Question every design assumption with first-principles thinking
- Extract exact values: hex codes, font names, button text
- Track cross-references between sites to identify authoritative sources
- Keep insights concise and actionable for design implementation