UI/UX Review with Scoring

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

Content truncated.