ux-proofsheet
Turn a design into a proofsheet: scored critique + competitor evidence.
Output a self-contained HTML report. This is a UX/pattern benchmark, not a
pixel diff — recreate UI from tokens; cite permanent Mobbin + Figma links for
real pixels. First-pass for judgment; junior guidance / senior pressure-test.
UX copy is a high-value axis — always include a copy matrix when copy is in scope.
Paste-ready prompts: references/prompt-cookbook.md.
Tools
- Figma MCP —
get_metadata, get_design_context, get_screenshot
- Mobbin MCP —
search_screens, search_flows, search_sections (primary evidence)
- Web search — fallback when Mobbin is missing; competitor context
No design artifact? Ask for a Figma URL, screenshot, or description before proceeding.
Step 0 — Preflight + mode
Preflight (full path): confirm Mobbin can return a search and Figma can
get_design_context / get_screenshot. If Mobbin is down, use the degraded path
(below) — do not silently gut the review.
Mode (ask once if unclear; default Full when a Figma board is attached):
|
Quick |
Full |
| Scope |
1 screen / 1 pattern |
All provided screens + key states |
| Evidence |
4–6 cards, 3+ apps |
~10–20 screens, 6+ apps |
| Report |
Scorecard, what's working, top findings, thin grid, next steps |
All sections below incl. prevalence, copy matrix, share summary |
Step 0b — Degrade gracefully
| Missing |
Behavior |
| Mobbin |
Web-search + cite links. Header: "Mobbin not connected — competitor evidence is link-based." Never invent mobbin_url. |
| Figma / pasted image |
Critique from image; no node IDs / tokens. Say so. No fake contrast. |
| Text only |
Reconstruct layout as a labelled structural list. |
Never fabricate a mobbin_url, node ID, token, or contrast number.
Step 1 — Read the design
get_metadata — node IDs + structure. Large dumps → save to file and run
scripts/parse_figma_metadata.py (do not paste the raw tree).get_design_context — labels, hierarchy, tokens (for HTML recreations + hygiene).get_screenshot — study the image yourself; report visuals are recreations.
Large boards: list candidate frames from the parser, pick primary flows
(annotations, Old/New, named screens), and state what you skip.
Inventory: sections/patterns, category, platform, user goals, every screen
provided, states (empty/loading/error/first-run/roles), canvas annotations.
Step 2 — Mid-run confirm (mandatory)
Before searching, send one short confirm:
Scope: [screens/frames] · Mode: Quick|Full
Direct: [apps] · Cross-industry: [apps]
Annotations I'll address: […]
OK to search?
If the user already named competitors and screens tightly, confirm in one line
and proceed. Always include both same-industry and cross-industry.
Step 3 — Search evidence
2–3 searches per section from different angles. Tool pick: screens / flows /
search_sections (marketing; no platform param). See references/search-recipes.md.
Retry ladder: add context → narrow element → drop category (cross-industry) →
exclude_screen_ids → disclose weakness (never invent).
Named-competitor guarantee: app-name search → pattern search → closest
analogue + disclose "X not found — used Y". Look at every screenshot before citing.
Step 4 — Evidence tiers
Tag sources. Tier 1 (Mobbin / live) = pattern authority. Tier 2 (systems) = light
in v1. See references/evidence-tiers.md. Resolve either/or choices with a
recommendation + evidence (references/critique-rubric.md).
Step 5 — Scored HTML report
Use assets/report-template.html. Theme with extracted tokens. Recreate
screens/elements in HTML/CSS — never hotlink expiring Figma/Mobbin image URLs.
Always pair recreations with permanent View ↗ (Mobbin) and Open in Figma ↗.
Degraded substitutions (never invent)
| Missing |
Substitute |
| Figma |
No crop/link/node ID; label source: description. Contrast: "not computed — no tokens". |
| Mobbin |
Cited web link per card; "link, not embedded". |
| Text-only |
Labelled structural list for "design under review". |
Sections (Full; Quick = ★ only)
- ★ Header + scorecard — verdict (structural vs cosmetic), position, dimension scores, severity tally. Rubric for scoring.
- ★ Design under review — HTML recreation of every in-scope screen (Old→New if two states).
- ★ What's working — protect differentiators.
- ★ Findings by dimension — Nav & IA, UX copy, Visual & tokens, Placeholder ("Fix before share"), Accessibility. Each: recreated crop, ID, Figma deep link, severity, quoted string, Fix, Backs. Run
scripts/contrast.py when tokens exist.
- UX copy matrix — your string vs 3–5 apps (required on Full when copy is in scope). See rubric.
- ★ Benchmark grid — recreated element mock + permanent
mobbin_url, same- + cross-industry labels, "Backs: [finding]", counter-evidence.
- Prevalence — pattern | apps | in-industry | cross-industry.
- ★ Prioritized next steps
- Share summary — pasteable Slack/Notion block (verdict, position, High/Med IDs, top 3 steps) + pasteable finding cards for High/Med.
- Follow-ups — sibling skills + continue commands: dig into
N1, only [app], re-run copy, Quick on [screen].
- Footer — methodology, tokens used, limits, mode (Quick/Full).
Output rules
- Scorecard first; every claim backed by a real pull or linked source.
- One search per claim — never cite an app you didn't retrieve.
- Show recreations + clickable Figma/Mobbin links (not bare IDs).
- Quote exact strings/tokens.
- Popularity ≠ correctness; convention = majority of direct set only.
- No fabrication.
- Durable HTML — recreate; never hotlink expiring image URLs.
- Balance: name what's working; protect differentiators.
- Cover every in-scope screen + key states.
- Resolve either/ors with a recommendation.
- Confirm scope before searching (Step 2).
Reference files
references/critique-rubric.md — dimensions, severity, scoring, copy matrix, finding cardsreferences/evidence-tiers.md — tiers + degradationreferences/search-recipes.md — queries, retry ladder, named-competitor guaranteereferences/prompt-cookbook.md — paste-ready prompts
Scripts
scripts/contrast.py — measured WCAG ratios from token pairsscripts/parse_figma_metadata.py — triage large get_metadata dumpsscripts/embed_images.py — optional; only if you truly have durable local assets (not the default path)
1---2name: ux-proofsheet3description: Benchmark a UI/UX design against how real apps actually ship. Give it a Figma URL, screenshot, or a description of an interaction; it reads the design, pulls real competitor screens from Mobbin for the same patterns, and produces a scored, evidence-backed HTML review — a competitive-position scorecard, findings tied to Figma nodes, and a grid of real competitor screenshots to borrow from. Use whenever the user wants design feedback grounded in real competitor examples, or says things like "how do others handle this?", "review my design vs competitors", "compare my wireframe to similar products", "find examples of how [app] does X", "is this pattern conventional or novel?", "benchmark my UX", "competitive design review", "quick proofsheet", or shares a Figma link about UX quality or patterns. Works for iOS, web app, and web marketing screens. Not for pure visual/brand critique with no competitive angle, accessibility-only audits, or generating new UI — this evaluates an existing design against the market.4---56# ux-proofsheet78Turn a design into a **proofsheet**: scored critique + competitor evidence.9Output a self-contained **HTML report**. This is a UX/pattern benchmark, not a10pixel diff — recreate UI from tokens; cite permanent Mobbin + Figma links for11real pixels. **First-pass** for judgment; junior guidance / senior pressure-test.12**UX copy is a high-value axis** — always include a copy matrix when copy is in scope.1314Paste-ready prompts: `references/prompt-cookbook.md`.1516## Tools1718- **Figma MCP** — `get_metadata`, `get_design_context`, `get_screenshot`19- **Mobbin MCP** — `search_screens`, `search_flows`, `search_sections` (primary evidence)20- **Web search** — fallback when Mobbin is missing; competitor context2122No design artifact? Ask for a Figma URL, screenshot, or description before proceeding.2324## Step 0 — Preflight + mode2526**Preflight (full path):** confirm Mobbin can return a search and Figma can27`get_design_context` / `get_screenshot`. If Mobbin is down, use the degraded path28(below) — do not silently gut the review.2930**Mode** (ask once if unclear; default Full when a Figma board is attached):3132| | **Quick** | **Full** |33|---|---|---|34| Scope | 1 screen / 1 pattern | All provided screens + key states |35| Evidence | 4–6 cards, 3+ apps | ~10–20 screens, 6+ apps |36| Report | Scorecard, what's working, top findings, thin grid, next steps | All sections below incl. prevalence, copy matrix, share summary |3738## Step 0b — Degrade gracefully3940| Missing | Behavior |41|---|---|42| **Mobbin** | Web-search + cite links. Header: *"Mobbin not connected — competitor evidence is link-based."* Never invent `mobbin_url`. |43| **Figma** / pasted image | Critique from image; no node IDs / tokens. Say so. No fake contrast. |44| **Text only** | Reconstruct layout as a labelled structural list. |4546**Never fabricate** a `mobbin_url`, node ID, token, or contrast number.4748## Step 1 — Read the design49501. `get_metadata` — node IDs + structure. Large dumps → save to file and run51 `scripts/parse_figma_metadata.py` (do not paste the raw tree).522. `get_design_context` — labels, hierarchy, **tokens** (for HTML recreations + hygiene).533. `get_screenshot` — study the image yourself; report visuals are recreations.5455**Large boards:** list candidate frames from the parser, pick primary flows56(annotations, Old/New, named screens), and **state what you skip**.5758Inventory: sections/patterns, category, platform, user goals, **every screen59provided**, states (empty/loading/error/first-run/roles), canvas annotations.6061## Step 2 — Mid-run confirm (mandatory)6263Before searching, send **one short confirm**:6465```66Scope: [screens/frames] · Mode: Quick|Full67Direct: [apps] · Cross-industry: [apps]68Annotations I'll address: […]69OK to search?70```7172If the user already named competitors and screens tightly, confirm in one line73and proceed. Always include **both** same-industry and cross-industry.7475## Step 3 — Search evidence76772–3 searches per section from different angles. Tool pick: screens / flows /78`search_sections` (marketing; no platform param). See `references/search-recipes.md`.7980**Retry ladder:** add context → narrow element → drop category (cross-industry) →81`exclude_screen_ids` → disclose weakness (never invent).8283**Named-competitor guarantee:** app-name search → pattern search → closest84analogue + disclose *"X not found — used Y"*. Look at every screenshot before citing.8586## Step 4 — Evidence tiers8788Tag sources. Tier 1 (Mobbin / live) = pattern authority. Tier 2 (systems) = light89in v1. See `references/evidence-tiers.md`. Resolve either/or choices with a90recommendation + evidence (`references/critique-rubric.md`).9192## Step 5 — Scored HTML report9394Use `assets/report-template.html`. Theme with extracted tokens. **Recreate**95screens/elements in HTML/CSS — never hotlink expiring Figma/Mobbin image URLs.96Always pair recreations with permanent **View ↗** (Mobbin) and **Open in Figma ↗**.9798### Degraded substitutions (never invent)99100| Missing | Substitute |101|---|---|102| Figma | No crop/link/node ID; label *source: description*. Contrast: *"not computed — no tokens"*. |103| Mobbin | Cited web link per card; *"link, not embedded"*. |104| Text-only | Labelled structural list for "design under review". |105106### Sections (Full; Quick = ★ only)1071081. ★ **Header + scorecard** — verdict (structural vs cosmetic), position, dimension scores, severity tally. Rubric for scoring.1092. ★ **Design under review** — HTML recreation of every in-scope screen (Old→New if two states).1103. ★ **What's working** — protect differentiators.1114. ★ **Findings by dimension** — Nav & IA, UX copy, Visual & tokens, Placeholder ("Fix before share"), Accessibility. Each: recreated crop, ID, Figma deep link, severity, quoted string, Fix, Backs. Run `scripts/contrast.py` when tokens exist.1125. **UX copy matrix** — your string vs 3–5 apps (required on Full when copy is in scope). See rubric.1136. ★ **Benchmark grid** — recreated element mock + permanent `mobbin_url`, same- + cross-industry labels, "Backs: [finding]", counter-evidence.1147. **Prevalence** — pattern \| apps \| in-industry \| cross-industry.1158. ★ **Prioritized next steps**1169. **Share summary** — pasteable Slack/Notion block (verdict, position, High/Med IDs, top 3 steps) + pasteable finding cards for High/Med.11710. **Follow-ups** — sibling skills + **continue commands**: dig into `N1`, only `[app]`, re-run copy, Quick on `[screen]`.11811. **Footer** — methodology, tokens used, limits, mode (Quick/Full).119120## Output rules1211221. Scorecard first; every claim backed by a real pull or linked source.1232. One search per claim — never cite an app you didn't retrieve.1243. Show recreations + clickable Figma/Mobbin links (not bare IDs).1254. Quote exact strings/tokens.1265. Popularity ≠ correctness; convention = majority of **direct** set only.1276. No fabrication.1287. Durable HTML — recreate; never hotlink expiring image URLs.1298. Balance: name what's working; protect differentiators.1309. Cover every in-scope screen + key states.13110. Resolve either/ors with a recommendation.13211. Confirm scope before searching (Step 2).133134## Reference files135136- `references/critique-rubric.md` — dimensions, severity, scoring, copy matrix, finding cards137- `references/evidence-tiers.md` — tiers + degradation138- `references/search-recipes.md` — queries, retry ladder, named-competitor guarantee139- `references/prompt-cookbook.md` — paste-ready prompts140141## Scripts142143- `scripts/contrast.py` — measured WCAG ratios from token pairs144- `scripts/parse_figma_metadata.py` — triage large `get_metadata` dumps145- `scripts/embed_images.py` — optional; only if you truly have durable local assets (not the default path)
mananritwik