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.