design-review

design-review is a skill for Claude Code from HalidSaglam/saglitzdesign-mcp. It costs 92 tokens per session (901 once invoked), scanned A, original, MIT.

A structured review method for judging a user interface from its screenshot, live page, or code. It uses the same usability checklist each time and cites the specific elements being discussed.

In plain words
What is it for?
Use it to review a mockup, website, or app screen, identify usability and accessibility problems, rank their severity, and suggest improvements.
Why use it?
It makes design feedback more consistent and evidence-based, instead of relying on vague opinions or guessing about parts of the interface that were not actually observed.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the saglitzdesign plugin — 9 skills, 10 commands, 2 MCP servers shipped together

Good fit Use it to review a mockup, website, or app screen, identify usability and accessibility problems, rank their severity, and suggest improvements.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/halidsaglam/saglitzdesign-mcp/design-review
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add HalidSaglam/saglitzdesign-mcp --skill design-review
Clone the repo
git clone --depth 1 https://github.com/HalidSaglam/saglitzdesign-mcp

Made for: Claude Code.

Or install saglitzdesign, the plugin that ships this one along with the rest of its 9 skills, 10 commands, 2 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-review

README.md
[![agentmods](https://agentmods.dev/badge/skills/halidsaglam/saglitzdesign-mcp/design-review/github.svg)](https://agentmods.dev/skills/halidsaglam/saglitzdesign-mcp/design-review)
Your own site
<a href="https://agentmods.dev/skills/halidsaglam/saglitzdesign-mcp/design-review"><img src="https://agentmods.dev/badge/skills/halidsaglam/saglitzdesign-mcp/design-review/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-review

Your own site · 80×15
<a href="https://agentmods.dev/skills/halidsaglam/saglitzdesign-mcp/design-review"><img src="https://agentmods.dev/badge/skills/halidsaglam/saglitzdesign-mcp/design-review.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 901 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00092 $0.00901
Opus 5 $0.00046 $0.00451
Sonnet 5 $0.00018 $0.00180
Haiku 4.5 $0.00009 $0.00090

Measured 8d ago against content hash fd5c3449314e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

design-review scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design-review/SKILL.md · 43 lines

How it starts

The opening of the file, as written. The whole thing — 43 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design Review

Most AI design feedback guesses: it flags issues inconsistently, pads the list to look thorough, and critiques a text description instead of the actual pixels. Do the opposite — a fixed rubric applied to what you actually see.

Full rubric + checklists are in the SaglitzDesign MCP (npx saglitzdesign-mcp): docs design-critique-scoring, accessibility, principles-heuristics, ai-default-aesthetic; tools design_review_checklist, plus the deterministic auditors that turn opinions into numbers — design_lint, audit_design_system, audit_accessibility, audit_ux_copy, audit_generic_design — and the /saglitzdesign:critique_screenshot and /saglitzdesign:design_review workflows.

Method

  1. Look first, judge second. Describe what you actually see — layout, hierarchy, the primary action, which states are shown. If you're unsure what an element is, say so; don't invent.
  2. Apply the fixed rubric. Score each of Nielsen's 10 heuristics 0–4 (total /40). Use the same rubric every time so scores are reproducible. Bands, as design-critique-scoring publishes them: 36–40 excellent (polish only, ship it), 28–35 good, 20–27 acceptable, 12–19 poor, 0–11 critical.
  3. Cite specific elements. Every finding points to a concrete element: "the secondary 'Learn more' button competes with the primary CTA — two filled buttons," not "improve hierarchy."
  4. No padding. Report only real issues. If the screen is genuinely good, a short list is the correct answer.
  5. Rank by severity P0→P3, each with one concrete fix and the rule it comes from.

What to check (fast pass)

  • Hierarchy: exactly one primary action per view? Does the important thing look most important? (squint test)
  • Spacing: consistent scale? Grouping via space (within < between)? Aligned to one grid?
  • Type: ≤2–3 sizes? Hierarchy via size/weight/color, not more fonts? Readable line length/height?
  • Color & contrast: one accent used sparingly? Text ≥4.5:1, UI ≥3:1? Dark mode not naive inversion?
  • Consistency: one radius system? Borders OR shadows? One icon family/weight?
  • States: empty, loading, error, long-content, zero-results designed?
  • Copy: verb-first buttons? Specific, human microcopy? No "Submit"/"Click here"?
  • Accessibility: keyboard reachable, visible focus, tap targets ≥44pt, meaning not by color alone.
  • Motion (if any): ease-out on enter, ease-in on exit, interruptible, respects reduced-motion.

Read the full file on GitHub · 43 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago Changed fd5c3449314e
  2. 12d ago First seen · 43 lines · 92 tokens per session scan A d5ea7f59cbe0

Subscribe to this mod's changes

design-review is a skill published in the GitHub repository HalidSaglam/saglitzdesign-mcp (5 stars, last pushed 10d ago), licensed MIT. It adds 92 tokens to every session and 901 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

logo-creator

Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.

ReScienceLab/opc-skills · 59 tokens

conversational-ux

Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.

Owl-Listener/designer-skills · 43 tokens

design-negotiation

Advocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals. Use in the conversation itself. For the commercial vocabulary behind it, use business-design (ux-strategy).

Owl-Listener/designer-skills · 48 tokens

platform-conventions

Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).

Owl-Listener/designer-skills · 55 tokens

design-debt-audit

Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).

Owl-Listener/designer-skills · 59 tokens

design-impact-reporting

Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use metrics-definition (ux-strategy).

Owl-Listener/designer-skills · 44 tokens