UI/UX Review with Scoring

Imported from tiptipid/product-management-tiptip (.agent/skills/uiux-review/SKILL.md). Install upstream with npx skills add tiptipid/product-management-tiptip --skill uiux-review. Copyright stays with the author.

Embedded Context

This skill is self-contained. All referenced frameworks are embedded below.

Customer Journey Stages

Trust Signal Checklist (must be visible on relevant pages)

Primary Persona

• Who: Foreign leisure traveler (India, China, South Korea, Australia), age 28–42
• Device: Mobile-first (375px primary viewport)
• Core anxiety: "Is this platform safe? Will my money be protected?"

Reviewer Persona (3 specialist perspectives)

Design Standards Reference

Figma MCP Tools (read-only, official server)

Approved Design Tools

Figma only. No Sketch, no Adobe XD.

Purpose

Provides structured design review by scoring UI designs via Figma links or screenshots against UX standards and customer journey requirements. Catches trust signal gaps, accessibility issues, and consistency problems before engineering builds the wrong thing.

Supports two input paths: Figma link (preferred — provides structural data + visual + design tokens) and screenshots (fallback — for live site audits or teams without Figma MCP). Uses Claude Haiku 4 for vision analysis.

Input

Accepts design input via two paths (auto-detected based on available MCPs and user input):

• Path A — Figma link (preferred when Figma MCP is connected) — URL to a Figma frame or page; agent extracts metadata, screenshot, and design tokens via Figma MCP tools (get_metadata, get_screenshot, get_variable_defs, get_design_context)
• Path B — Screenshots / Attached images (when Figma MCP is unavailable, or for live site audits) — PNG/JPG attached directly by the user, or captured via Playwright MCP from a live URL. This path is fully supported and produces the same scorecard — structural analysis is inferred from visual inspection instead of Figma metadata.
• Context — Which journey stage and initiative this UI belongs to
• Device target — Desktop, mobile, or both

Output

• Design scorecard (markdown) with:
  • Score per dimension (0–10 scale, 5 dimensions)
  • Total score (0–50)
  • Pass/Fail recommendation (Pass ≥ 35, Conditional 25–34, Fail < 25)
  • Annotated feedback per dimension with specific UI element references
  • SEO Impact Notes for any dimension scoring below 6
• All outputs prefixed with ⚠️ AI DRAFT — PM REVIEW REQUIRED

Process

1. Load — Auto-detect input path:
   • If Figma MCP is available AND Figma link provided → call get_metadata for structural data (component tree, sizes, positions), get_screenshot for visual snapshot, and get_variable_defs for design tokens (colors, spacing, typography). Use get_design_context for code-ready specs when evaluating consistency.
   • If screenshots / images attached (or Figma MCP unavailable) → use attached images directly for vision analysis. If a live URL is provided instead of images, use Playwright MCP to capture screenshots at both mobile (375px) and desktop (1280px) viewports.
   • If BOTH Figma link AND screenshots provided → use Figma data for structural scoring (Information Architecture, Mobile Responsiveness, Accessibility) and screenshots for visual scoring (Trust Signals, CTA Clarity)
2. Identify context — Determine which journey stage and initiative this UI supports
3. Score — Dispatch 3 specialist agents in parallel (see Parallel Execution below), each scoring their assigned dimensions on 0–10 scale:

4. SEO Impact Check — For each dimension scored below 6, note the SEO consequence:
   • Trust Signals < 6 → missing AggregateRating structured data hurts rich snippets
   • CTA Clarity < 6 → CLS from layout shifts may trigger ranking penalty
   • Info Architecture < 6 → missing Schema.org TourTrip/Event; poor heading hierarchy hurts crawlability
   • Mobile < 6 → Core Web Vitals failure directly impacts Google mobile ranking
   • Accessibility < 6 → missing alt text hurts image search; no semantic HTML hurts crawlability
5. Benchmark — Compare against competitor UX (Klook, KKday, GYG) if screenshots are available
6. Report — Generate scorecard with actionable design-specific feedback + SEO Impact Notes

Parallel Execution

3 specialist agents run concurrently, each scoring their assigned dimensions:

Merge step: A coordinator combines the 3 agent outputs into a single scorecard, resolves any cross-dimension conflicts (e.g., badge placement noted by both Agent 1 and Agent 2), calculates the total score, and generates the Priority Fixes list ordered by impact.

Constraints

• All outputs must begin with ⚠️ AI DRAFT — PM REVIEW REQUIRED
• Trust signals scoring MUST reference the specific items from the Trust Signal Checklist (see Embedded Context)
• Do NOT suggest tools outside the approved stack — e.g., no Sketch, no Adobe XD
• In Claude Code, use model: "haiku" for vision analysis subagents (vision-optimized, fast structured responses)
• Mobile review is mandatory — if only desktop screenshot is provided, flag mobile review as incomplete
• When Figma MCP is unavailable, explicitly note in the report: "Reviewed from screenshots — structural data (design tokens, component tree) not available. Scores for Information Architecture and Accessibility are based on visual inspection only."

How to Use

With Figma MCP (preferred)

1. Get the Figma frame link (right-click frame → "Copy link")
2. Open Claude Code in the product-management directory (Figma MCP must be connected)
3. Say: Use the uiux-review skill to score this [page name]. Figma: [link]. This is for [initiative name] at the [journey stage] stage.

With screenshots (when Figma MCP is unavailable)

1. Take screenshots at mobile (375px) and desktop (1280px), or provide a live URL for Playwright to capture

2. Open Claude Code in the product-management directory

3. Say: Use the uiux-review skill to score this [page name]. This is for [initiative name] at the [journey stage] stage. and attach the screenshots — OR: Use the uiux-review skill to audit the live page at [URL]. This is for [initiative name] at the [journey stage] stage.

4. Review the scorecard with your designer — prioritize dimensions scoring below 6

Example

Input: Screenshot of listing detail page (mobile), Initiative: Free Cancellation Badge (#1, P0)

Expected Output (excerpt):

⚠️ AI DRAFT — PM REVIEW REQUIRED

## UI/UX Scorecard: Listing Detail Page (Mobile)
**Initiative**: Free Cancellation Badge (#1, P0) · **Journey Stage**: Evaluation/Booking

| Dimension | Score | Feedback |
|---|---|---|
| Trust Signals | 4/10 | ❌ Cancellation badge is present but placed below the fold — Baymard research shows above-fold trust signals reduce abandonment ~35%. Social proof counter missing. Klook shows both on every listing. |
| CTA Clarity | 7/10 | ✅ "Book Now" is prominent with action verb. ⚠️ "Add to Wishlist" competes — Fitts's Law: reduce secondary CTA visual weight so primary is the obvious target. |
| Information Architecture | 6/10 | ⚠️ Price shows base only — add-ons at checkout violate Nielsen #2 (match real world). Meeting point in collapsed accordion breaks progressive disclosure. Missing Schema.org TourTrip markup. |
| Mobile Responsiveness | 8/10 | ✅ Layout works at 375px. Tap targets meet Apple HIG 44pt. ⚠️ Image carousel swipe indicator barely visible — CLS risk if images load late. |
| Accessibility | 5/10 | ❌ Price text contrast 3.2:1 (WCAG AA requires ≥ 4.5:1). Badge icon has no alt text — hurts image search. No ARIA landmarks on page sections. |

### Total: 30/50 — ⚠️ CONDITIONAL PASS

### Priority Fixes
1. Move cancellation badge above the fold (Trust Signals — Baymard)
2. Fix price text contrast to ≥ 4.5:1 (Accessibility — WCAG AA)
3. Show all-inclusive price on listing (Info Architecture — Nielsen #2)

### SEO Impact Notes
- Trust Signals (4/10): No AggregateRating structured data → no star rating rich snippet in Google search
- Info Architecture (6/10): Missing Schema.org TourTrip markup → invisible to Google's activity carousel
- Accessibility (5/10): Badge images lack alt text → missed image search traffic; no heading hierarchy → poor crawlability