View screenshots and recordings directly in the terminal with Claude Code

An open-source plugin built for Claude Code displays webpage screenshots, Playwright recordings, and side-by-side QA comparison videos right inside the terminal, eliminating the tedious step of manually switching to the browser to refresh.

Reddit r/ClaudeCode/u/KxonixWasTaken

Claude CodeGhosttykittyffmpegPlaywrightclaude-show-your-work

Added 2026-10-31 · originally published 2026-10-11

Key points

Install dependencies: run brew install ffmpeg in the terminal.
Add and install the plugin in Claude: use /plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git and /plugin install show-your-work@iamumeransari.
View built page screenshots, charts, and models directly within the conversation.
Automatically record in-app click workflows via Playwright and play them inline in the chat.
Generate frame-synced before/after QA videos and changelists comparing old and new versions.

Pitfalls

The tedious workflow of manually switching to the browser, finding the localhost tab, refreshing manually, and trying to remember the previous styling after modifying code

Copy-ready prompt

After modifying the frontend pages, use [Playwright] to record the application workflow and display screenshots, recordings, or before-and-after comparison videos directly in the terminal or chat so I can review the results immediately without manually switching to the browser to refresh.

View original post

#Claude Code#Frontend Development#Terminal Screenshots#QA Testing

Remove that AI-generated look from frontend interfaces with unslop

Fix typical AI-generated UI flaws such as purple gradients, glows, emoji labels, loud copy, and uneven spacing by using the unslop skill for step-by-step audits and multi-round refinement, transforming generic outputs into interfaces with real character.

Design high-converting screenshots with AI by planning copy and style first

When generating app screenshots or frontend interfaces with AI, avoid blindly asking for direct output. The correct approach is to have the AI write the copy first, select a clear style, compare multiple design directions, and export based on real UI and strict dimension specifications.

Apple-style UI component technical drawings and architecture

Use the dedicated dimensional-drawing skill to instruct AI to render Apple-style single-page technical drawings showcasing component architectures such as paddings, gaps, border radii, hierarchies, and viewport positions. Ensure precise UI structure representation through rules like monochrome styling, variable substitution, and prohibiting fabricated values.

Found this useful? Get daily updates on Telegram or X.

Join on Telegram Follow @CaiXiang23766

Summarized by AI from the original source - refer to the original post for details. Copyright belongs to the original author.

Key points

Pitfalls

Related techniques