From naksha
Audits a design for quality — accessibility, usability, visual consistency, content, and motion — using HTML files, Figma URLs, preview servers, or screenshots for visual AI critique.
How this command is triggered — by the user, by Claude, or both
Slash command
/naksha:design-review [file path, URL, screenshot path, or 'current preview']This command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# /design-review You are conducting a structured design quality audit. This is a review, not a redesign. ## Target Target: **$ARGUMENTS** The user will provide one of: - **A screenshot or image file** (`.png`, `.jpg`, `.gif`, `.webp`) → **Visual AI Critique Mode** (see Section A) - **A Figma URL** (contains `figma.com`) → screenshot it, then run Visual AI Critique + code audit - **An HTML file path** → read it and run Code-Level Audit (Section B) - **A running preview server** → take a screenshot for Visual AI Critique, then inspect code - **"current preview"** → inspect whatever is cur...
You are conducting a structured design quality audit. This is a review, not a redesign.
Target: $ARGUMENTS
The user will provide one of:
.png, .jpg, .gif, .webp) → Visual AI Critique Mode (see Section A)figma.com) → screenshot it, then run Visual AI Critique + code auditDual-mode strategy: When both a visual and code source are available (e.g., preview server), run both Section A (visual) and Section B (code) and merge the findings into a single report.
MCP Fallback: If Preview MCP tools are unavailable, read the HTML source and perform a static code-level audit. If Figma MCP is unavailable, ask the user for a screenshot or file export.
Search up to 3 directory levels for .naksha/project.json. If found, extract v5 fields to use as audit criteria throughout this review:
constraints.grid → the expected base spacing unit. Flag any spacing value in the design that is NOT a multiple of this unit (e.g., if grid is "8px", flag 13px, 22px, 7px margins).constraints.dark_mode → if false and the design includes dark mode styles (prefers-color-scheme: dark, [data-theme="dark"], etc.), flag as constraint violation: "Dark mode was explicitly ruled out."constraints.breakpoints → the expected responsive breakpoints. Flag missing breakpoints or breakpoints at unexpected values.constraints.max_content_width → if any layout container exceeds this value, flag it.constraints.accessibility_target → sets the required contrast threshold. "WCAG AAA" requires 7:1; "WCAG AA" requires 4.5:1. Use instead of the default 4.5:1 if "WCAG AAA" is set.constraints.out_of_scope → if the design implements something in this list (e.g., dark mode was out-of-scope but is present), flag as a scope violation.constraints.notes → treat each note as an expected design rule. Check for violations.component_patterns → for any component named in this list, check whether the implementation matches the recorded pattern (background, border, radius, padding, etc.). Flag mismatches as pattern deviation.browser_findings (5 most recent) → use as reference context — these are research findings or prior visual captures. Reference them when relevant but do not penalize for deviating from external sites.If constraints are loaded, add a Constraint Compliance section to the report (see Report Format below) that lists each constraint and whether it passes or fails.
If no project memory found: run the review without constraint context — this is fine, no message needed.
Use this section when the input is an image file, a Figma URL, or a captured preview screenshot.
figma_get_component_image or figma_take_screenshot to export the framepreview_screenshot to capture the current statepreview_screenshotLive Website URL (non-Figma):
If $ARGUMENTS contains a URL that is NOT a Figma URL (doesn't contain figma.com):
mcp__plugin_playwright_playwright__browser_resize to set viewport to 1440×900mcp__plugin_playwright_playwright__browser_navigate to load the URLmcp__plugin_playwright_playwright__browser_take_screenshot to capture the current viewMCP Fallback: If Playwright is unavailable, ask the user to provide a screenshot file path.
Analyze the screenshot against the following 6 principles. Score each 0–10.
Evaluate how clearly the design communicates importance through size, weight, color, and contrast.
What to check:
Scoring rubric:
Evaluate the internal consistency and spatial organization.
What to check:
Scoring rubric:
Evaluate color usage, contrast ratios, and palette discipline.
What to check:
Scoring rubric:
Evaluate type scale, readability, and consistency.
What to check:
Scoring rubric:
Evaluate whether related items are visually grouped and unrelated items separated (Gestalt proximity principle).
What to check:
Scoring rubric:
Evaluate the overall visual weight distribution and aesthetic balance.
What to check:
Scoring rubric:
Visual Score = (Hierarchy + Alignment + Color + Typography + Proximity + Balance) / 6
Convert to letter grade:
From the screenshot, identify patterns that suggest common design anti-patterns:
| Anti-pattern | Visual signal | Recommendation |
|---|---|---|
| Wall of text | Dense text blocks with no visual breaks | Add subheadings, bullets, or card boundaries |
| Button soup | Multiple CTAs competing at same visual weight | Use hierarchy: one primary, one secondary, rest as links |
| Card avalanche | Grid of identical cards with no visual variety | Add featured/hero card or vary layout rhythm |
| Icon ambiguity | Icons without labels | Add text labels or tooltips |
| Form intimidation | Long vertical form with no grouping | Group fields into sections with progress |
| Modal overdependence | Frequent interrupting overlays | Consider inline disclosure or new page |
| Hover-only state | Interactions not discoverable | Add subtle affordance (border, shadow, arrow) |
Use this section when the input is an HTML file, a preview server, or alongside Section A when both are available.
Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/ux-researcher.md — focus on the WCAG AA Checklist section.
Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/ux-researcher.md — apply Nielsen's 10 heuristics.
Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/design-system-lead.md — use the Consistency Review Checklist.
Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/content-designer.md — use the Content QA Checklist.
Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/motion-designer.md — use the Motion QA Checklist.
## Visual Design Review
Screenshot: [filename or source]
### Scores
| Principle | Score | Grade |
|-----------|-------|-------|
| Visual Hierarchy | X/10 | |
| Alignment & Grid | X/10 | |
| Color & Contrast | X/10 | |
| Typography | X/10 | |
| Proximity & Grouping | X/10 | |
| Balance & Composition | X/10 | |
| **Overall Visual** | **X/10** | **[Letter]** |
### Critical Issues (must fix)
[Issue + why + specific fix]
### Improvements (should fix)
[Issue + why + specific fix]
### Anti-patterns Detected
[Pattern name + location + recommendation]
### Working Well
[Positive observations — always include at least 3]
### Constraint Compliance (only if project constraints loaded)
| Constraint | Expected | Status |
|------------|----------|--------|
| grid | 8px multiples | ✅ PASS / ❌ FAIL — [specific violation] |
| dark_mode | false | ✅ PASS / ❌ FAIL — "dark mode styles found in …" |
| [etc.] | | |
## Code Quality Review
**Overall Score**: X/100 (grade letter)
**Critical Issues** (must fix before shipping)
- Issue, why it matters, code fix
**Improvements** (should fix)
- Issue, why it matters, code fix
**Minor** (nice to have)
- Issue, suggestion
**Working Well**
- What the design does right
Merge into a unified report: show both Visual (X/10 per principle) and Code (X/100 overall) scores, then consolidate issues by severity across both audit types. Avoid repeating the same issue in both sections.
After a design review, suggest follow-up actions based on findings:
/design — redesign specific areas that scored poorly/design-system — create tokens if the review found hardcoded values/figma-sync — check if Figma designs match the reviewed code/figma-component-library — build a proper component library if the review found inconsistencynpx claudepluginhub adityaraj0421/naksha-studio --plugin naksha/design-reviewReviews code, screenshots, or visual artifacts against visual design principles, identifies violations with scores, and suggests research-backed fixes.
/design-critiqueEvaluates a design against WCAG 2.2 accessibility, brand consistency, and layout principles, producing a prioritized critique with blockers, should-fix, and nice-to-have items.
/design-reviewReviews visual design quality—layout, typography, spacing, colour, consistency—for provided URL or detected dev/deployed app, producing severity-ranked issues report with fixes.
/reviewReviews HTML file for design anti-patterns, principles violations, and accessibility issues. Generates markdown report with status tables and recommendations.
/ux-auditRuns a structured 6-lens UX review of a live surface (URL, file, or screenshot), producing a severity-tagged Polaris-style report with findings, evidence, and fixes.
/auditAudits frontend designs from code or descriptions, computes AI Slop Score, detects generic patterns, suggests improvements, and generates a detailed report without changes.