design-review-panel

Rates UI screenshots with parallel design-expert and user-persona agent panels until scores meet a target.

1.2k|117|Updated Mar 16, 2016
One-click install
npx skills add https://github.com/matthiasn/lotti --skill design-review-panel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review-panel
Source: https://github.com/matthiasn/lotti/tree/main/.claude/skills/design-review-panel
Command: npx skills add https://github.com/matthiasn/lotti --skill design-review-panel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI polish work often relies on subjective, ungrounded feedback. This Skill replaces guesswork with reproducible screenshots reviewed by a panel of design-expert agents and user-persona agents that return calibrated numeric scores, so redesign iterations converge on a measurable quality bar.

Core Features & Use Cases

  • Multi-agent expert panel: Runs one agent per craft dimension (visual hierarchy, design-system consistency, color/contrast, typography, spacing, interaction flow) in parallel, each returning a 1-10 score with severity-tagged, evidence-backed issues.
  • Optional persona panel: Simulates users with different cognitive styles (ADHD, power user, low-vision, minimalist, novice) returning verdicts, blockers, frictions, and delights.
  • Iterate-to-target loop: Re-screenshots and re-rates after each fix round until both panel averages clear a configurable target (default 8/10), then hardens to PR-ready with tests, l10n, and changelog fragments.
  • Use Case: When redesigning a modal or screen in the Lotti Flutter app, capture baseline screenshots, summon the panel, and iterate on the ranked must-fix list until the workflow returns cleared=true.

Quick Start

Ask the assistant to run the design review panel on a specific UI surface, for example: summon the design panel to rate the AI popup model picker and iterate until both panels average at least 8 out of 10.

Frequently Asked Questions about design-review-panel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a multi-agent design review on a UI screen?▼

Capture reproducible screenshots of the surface first, then invoke the design-review-panel workflow with the surface description and screenshot paths. Parallel expert and persona agents Read the images and return calibrated 1-10 scores with evidence-backed issues.

How to get numeric design feedback on a Flutter UI?▼

Use the captureInApp screenshot harness to render the surface at phone and desktop sizes, then run the panel workflow. Each expert agent scores a craft dimension like typography or spacing, and the loop iterates until averages reach the target.

What screenshots does the design review panel need?▼

It requires reproducible PNGs captured via the app-screenshots harness, typically phone and desktop in dark mode, plus light and large-text variants when accessibility is in scope. Panels must Read actual pixels; without screenshots the workflow aborts.

Why did the design panel workflow abort with no screenshots configured?▼

Some harnesses do not thread Workflow args into the script, leaving the screenshot list empty. Copy panel_workflow.js to a scratch path and inline the screenshot paths and surface as top-level constants, then re-run.

When should I skip the user-persona panel?▼

Pass includePersonas: false when you only need craft-dimension expert scoring, such as early iterations. The recommended flow brings personas in once experts reach 8 so both panels converge together toward the target.