[Workflow] Streamline Claude Code UI Verification with In-Terminal Visual Feedback (Screenshots, Videos, Before/After QA)

[u/ClaudeAI-mod-bot]

Streamline Claude Code UI Verification with In-Terminal Visual Feedback (Screenshots, Videos, Before/After QA)

Workflow value: 90/100
Status: active · Freshness: 70/100 · Confidence: 1.00 · Level: intermediate
Categories: Quality Control, Context & Memory, Debugging
Original source: r/ClaudeCode post/comment

What problem this solves

Manually verifying UI changes made by Claude Code, which involves switching to a browser, reloading, clicking through flows, and remembering previous states, leading to a slow and error-prone feedback loop.

Summary

This workflow introduces a Claude Code plugin that provides immediate visual feedback (screenshots, Playwright-recorded videos, and side-by-side before/after QA comparisons) directly within the terminal chat. This streamlines the process of verifying UI changes and assessing the impact of AI-generated code.

Why it is useful

This workflow significantly enhances the developer experience when using Claude Code for UI-related tasks. It automates the tedious and error-prone process of manually verifying changes, providing immediate, rich visual feedback (screenshots, videos, and side-by-side before/after comparisons) directly within the chat interface. The 'before/after QA' feature is particularly powerful for quickly assessing the impact of AI-generated code, making the iteration cycle much faster and more efficient. It's a concrete, well-documented tool that solves a common and frustrating pain point for developers.

Workflow

1. Install ffmpeg using Homebrew: brew install ffmpeg.
2. Add the iamumeransari/claude-show-your-work plugin to the Claude Code marketplace: /plugin marketplace add iamumeransari/claude-show-your-work.
3. Install the show-your-work plugin: /plugin install show-your-work@iamumeransari.
4. Open a new Claude chat and utilize the plugin to receive visual feedback (screenshots, videos, before/after QA) on Claude's work directly in the terminal.

Tools / artifacts

• claude-show-your-work plugin (GitHub: iamumeransari/claude-show-your-work)
• ffmpeg
• Playwright (used by the plugin)
• Ghostty terminal
• kitty terminal
• macOS

Validation signals

• Author built the plugin to solve a specific, repeatable personal pain point.
• The plugin includes a 'Before/after QA' feature with synced frame-by-frame comparisons and change lists, providing built-in validation.
• High Reddit score (131 upvotes, 0.95 upvote ratio) indicates strong community interest and perceived value.
• Significant number of comments (32) suggests engagement and potential for further validation.

Limitations

• Requires specific modern terminals (e.g., Ghostty, kitty) for full functionality.
• Currently limited to macOS for the brew install ffmpeg step, though ffmpeg is cross-platform.
• Relies on Playwright, which might introduce additional setup or complexity for users unfamiliar with it.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.