From sage
Benchmarks design patterns and UX conventions from category-leading competitors. Use during redesigns to identify industry conventions and differentiation opportunities.
How this skill is triggered — by the user, by Claude, or both
Slash command
/sage:ux-researchThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- sage-metadata
Benchmark the current design against category leaders. Not to copy — to understand what conventions users already expect, and where intentional deviation creates differentiation.
Core Principle: Users don't experience your product in isolation. They bring expectations from every other product in your category. An edtech homepage that ignores conventions from Duolingo, Coursera, and Khan Academy isn't being original — it's being confusing. Research identifies what's convention (match it) vs. what's commodity (differentiate from it).
Do NOT use for:
From the current design system and project context, determine:
## Category Definition
Product type: [edtech / SaaS / e-commerce / marketplace / fintech / ...]
Page type: [homepage / landing page / dashboard / product page / ...]
Target audience: [students / professionals / developers / consumers / ...]
Market: [geography, language — affects design conventions]
If unclear, ask the user: "Is this primarily a [A] or [B]? This determines which competitors I research."
Select reference products based on:
## Reference Products
1. [Product] — [why selected: direct competitor / category leader / aspirational]
2. [Product] — [why]
3. [Product] — [why]
For the Prep homepage example:
For each reference product, capture (via web search and page analysis):
### [Product Name]
**Hero pattern:**
[What's in the hero? Headline copy approach? CTA text? Visual treatment?
Single CTA or multiple? Video? Animation? Social proof in hero?]
**Value proposition:**
[How do they explain what they do? How many words? What framework —
problem → solution → benefit? Feature list? Outcome-focused?]
**Social proof approach:**
[Testimonials? Logos? Numbers? Scores? User photos? Video testimonials?
Placement — above fold or below? How prominent?]
**CTA strategy:**
[Primary CTA text and placement. How many CTAs on page?
Free trial? Demo? Sign up? Pricing? What's the conversion path?]
**Visual style:**
[Color approach? Illustration vs. photography? Light vs. dark?
Playful vs. professional? Information density?]
**Mobile approach:**
[What changes on mobile? What's hidden? What's prioritized?
Sticky nav? Sticky CTA?]
From the analysis, extract patterns that appear in 3+ reference products:
## Category Conventions (appearing in most leaders)
1. [Convention]: [what it is, who does it]
Example: "Hero with single clear CTA — Duolingo, Coursera, Khan Academy
all use one primary CTA above the fold"
2. [Convention]: [what it is]
Example: "Social proof near hero — score numbers, student count, or
testimonials within first viewport"
3. ...
Patterns where reference products are similar to each other but different from the audited product — or where the category has a gap:
## Differentiation Opportunities
1. [Opportunity]: Most competitors [do X]. Current product [does Y differently].
Assess: is Y intentionally different (brand identity) or accidentally missing?
2. [Opportunity]: No competitor [does Z]. Could this be a meaningful differentiator?
3. [Opportunity]: Competitors [do X poorly]. An excellent version of X would stand out.
Save to .sage/work/<feature>/category-benchmarks.md:
# Category Benchmarks: [product] — [page type]
**Category:** [edtech / SaaS / ...]
**References analyzed:** [count]
**Date:** [timestamp]
## Reference Products
[from Step 2]
## Category Conventions
[from Step 4 — what most leaders do]
## Differentiation Opportunities
[from Step 5 — where to stand out]
## Detailed Analysis
[from Step 3 — per-product breakdowns]
Show to user: "Here's what category leaders do. This feeds into the design evaluation — we'll compare your current design against these patterns."
MUST (violation = uninformed redesign):
SHOULD (violation = shallow research):
MAY (context-dependent):
npx claudepluginhub xoai/sageResearches UX design patterns and best practices from category leaders and competitors for product types. Analyzes homepages, landing pages, or app screens to identify conventions and differentiation opportunities during redesigns.
Audits brand, UX, and site design of leading sites in a vertical to produce cross-site experience patterns and the design bar a new build must meet or beat.
Pesquisa concorrentes, analisa tendências visuais de nicho, gera moodboards e produz dossiê estratégico para UI/UX. Use para benchmarking visual, redesign ou direcionamento de interface.