Multi-perspective UI/UX roasting workflow with iterative improvement cycles
Sign in to like and favorite skills
Brutally honest UI/UX critique with multi-perspective analysis and iterative improvement.
/roast [mode] [target] [options] # Modes screen <target> # Single screen analysis (default) flow <target> # Multi-screen user journey audit # Full application review # Options --iterations=<1-10> # Roast cycles (default: 3) --focus=<area> # Priority: a11y|conversion|usability|visual|implementation --output=<path> # Output directory (default: reports/roast/) --fix=<mode> # Fix handling: auto|report|ask (default: ask)
/roast screen login # Roast login screen /roast screen settings --focus=a11y # Focus on accessibility /roast flow checkout --iterations=5 # 5-iteration checkout flow /roast flow onboarding --fix=auto # Auto-fix issues found /roast audit # Full app audit
Do NOT ask questions upfront. Apply smart defaults and begin immediately.
π₯ ROAST SESSION STARTED ββ Mode: screen ββ Target: login ββ Iterations: 3 ββ Focus: balanced ββ Output: reports/roast/
Auto-detect screenshot method:
πΈ Capturing screenshot... ββ Xcode MCP: [β found | β not found] ββ Playwright MCP: [β found | β not found] ββ Using: [xcode | playwright | manual upload]
Detection priority:
mcp__xcodebuildmcp__screenshotmcp__playwright__browser_take_screenshotCRITICAL: Always specify the output path explicitly!
// First, ensure directory exists Bash: mkdir -p reports/roast/screenshots // Playwright MCP - specify filename parameter mcp__playwright__browser_take_screenshot({ type: "png", filename: "reports/roast/screenshots/[target]_[iteration].png" }) // Xcode MCP - specify path parameter mcp__xcodebuildmcp__screenshot({ path: "reports/roast/screenshots/[target]_[iteration].png" })
Without explicit path, screenshots go to wrong location (e.g.,
.playwright-mcp/Show real-time progress:
π₯ Roasting: login (1/3) ββ πΈ Screenshot β ββ π¨ Designer: analyzing... ββ π» Developer: analyzing... ββ π€ User: analyzing... ββ βΏ A11y: analyzing... ββ π Marketing: analyzing...
Launch agents in parallel:
// All 5 agents run simultaneously Task(subagent_type="claude-roaster:roaster-designer", prompt="...") Task(subagent_type="claude-roaster:roaster-developer", prompt="...") Task(subagent_type="claude-roaster:roaster-user", prompt="...") Task(subagent_type="claude-roaster:roaster-a11y", prompt="...") Task(subagent_type="claude-roaster:roaster-marketing", prompt="...")
Update as each completes:
ββ π¨ Designer: β 3 issues ββ π» Developer: β 2 issues ββ π€ User: β 4 issues ββ βΏ A11y: β 5 issues (2 critical!) ββ π Marketing: β 2 issues
Display in terminal before asking about fixes:
π₯ ROAST RESULTS (Iteration 1/3) Found 16 issues: ββ π΄ Critical: 2 ββ π Major: 6 ββ π‘ Minor: 8 Top Critical Issues: 1. Missing form labels - add aria-label to inputs 2. Contrast ratio 2.1:1 - increase to 4.5:1 minimum π Full report: reports/roast/roast_login_1.md
Ask ONLY after showing results:
How should we handle these 16 issues? [1] Auto-fix critical & major (8 fixes) [2] Fix all issues (16 fixes) [3] Cherry-pick fixes [4] Report only (no changes)
If fixes chosen:
π§ Implementing fixes... ββ [1/8] Adding aria-labels... β ββ [2/8] Fixing contrast... β ββ [3/8] Increasing touch targets... β ... ββ β Complete πΈ Capturing updated screenshot...
Iteration 2/3 starting... [Repeat steps 2-6]
π₯ FINAL ROAST SUMMARY Session Complete! ββ Iterations: 3 ββ Issues found: 24 ββ Issues fixed: 18 ββ Resolution: 75% Score Improvement: | Category | Before | After | Ξ | |---------------|--------|-------|------| | Visual | 4/10 | 8/10 | +4 | | Usability | 5/10 | 9/10 | +4 | | Accessibility | 3/10 | 8/10 | +5 | | Overall | 4/10 | 8/10 | +4 | π reports/roast/roast_login_final.md
Single screen, multiple iterations:
/roast screen login --iterations=3 Iteration 1: Capture β Analyze β Report β Fix? Iteration 2: Capture β Analyze β Report β Fix? Iteration 3: Capture β Analyze β Final Report
Multiple screens, analyze journey:
/roast flow checkout πΊοΈ Flow: checkout (5 steps) ββ [1/5] Cart β πΈ analyzing... ββ [2/5] Shipping β πΈ analyzing... ββ [3/5] Payment β πΈ analyzing... ββ [4/5] Review β πΈ analyzing... ββ [5/5] Confirmation β πΈ analyzing... Cross-screen checks: ββ Visual consistency ββ Navigation clarity ββ Progress indication ββ Drop-off risk points
Auto-detect and roast all critical screens:
/roast audit π Scanning for critical screens... ββ Login β ββ Dashboard β ββ Settings β ββ Checkout β ββ Profile β Roasting 5 screens (3 iterations each)...
| Agent | Model | Focus | Weight |
|---|---|---|---|
| roaster (orchestrator) | Opus | Synthesis | - |
| roaster-designer | Sonnet | Visual, typography, color | 1.0x |
| roaster-developer | Sonnet | Implementation, structure | 1.0x |
| roaster-user | Sonnet | Usability, friction | 1.0x |
| roaster-a11y | Sonnet | Accessibility, WCAG | 1.0x |
| roaster-marketing | Sonnet | Conversion, trust | 1.0x |
With
option:--focus
reports/roast/ ββ roast_[target]_1.md ββ roast_[target]_2.md ββ roast_[target]_final.md ββ screenshots/ ββ [target]_1.png ββ [target]_2.png ββ [target]_final.png
# π₯ Roast Report: [Target] - Iteration [N] **Mode:** screen | **Focus:** balanced | **Date:** 2024-01-15  ## The Verdict [Brutal 2-3 sentence summary] ## Issues by Severity ### π΄ Critical (2) | Issue | Agent | Fix | |-------|-------|-----| | Missing labels | A11y | Add aria-label="Email" | | Low contrast | Designer | Change #999 to #595959 | ### π Major (6) ... ### π‘ Minor (8) ... ## Agent Deep Dives ### π¨ Designer [Full analysis] ### βΏ A11y Expert [Full analysis] ... ## Quick Wins - [ ] Fix 1 (< 2 min) - [ ] Fix 2 (< 2 min) ## Scores | Category | Score | |----------|-------| | Visual | 4/10 | | Usability | 5/10 | | Accessibility | 3/10 | | Overall | 4/10 |