用Claude Code插件在终端直接看截图与录屏

为Claude Code构建的开源插件可在终端内直接展示网页截图、Playwright录屏以及新旧版本对比的QA视频，免去手动切到浏览器刷新的繁琐步骤。

Reddit r/ClaudeCode/u/KxonixWasTaken

Claude CodeGhosttykittyffmpegPlaywrightclaude-show-your-work

收录于 2026-10-31 · 原文发布于 2026-10-11

要点

安装依赖：在终端运行 brew install ffmpeg。
在Claude中添加并安装插件：通过 /plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git 与 /plugin install show-your-work@iamumeransari。
支持在对话中直接查看构建的页面截图、图表和模型。
支持通过Playwright自动录制应用内点击流程并在聊天中内联播放。
支持新旧版本按帧同步对比的Before/after QA视频及变更列表。

可复制提示词

请在修改完前端页面后，使用 [Playwright] 录制应用操作流程，并在终端或聊天中展示截图、录屏或新旧版本对比，以便我直接检查效果，无需手动切换到浏览器刷新。

#Claude Code#前端开发#终端截图#QA测试

针对 AI 生成的前端界面存在紫色渐变、发光、表情符号标签、喧闹文案和不均等间距等问题，使用 unslop 技能进行逐项排查和多轮优化，将其转变为具有独特个性的设计界面。

用AI生成应用截图或前端界面时，切忌直接盲目让其出图。正确的做法是让AI先写好文案、挑选明确的风格、对比多个设计方向，并基于真实UI和严格尺寸规范进行导出。

使用专用的 dimensional-drawing 技能，教 AI 绘制类似苹果风格的单页技术图纸，展示组件的 paddings、gaps、圆角、层级及视口位置等架构。通过单色、变量替代及不虚构数值等规则，让 AI 精准呈现 UI 结构。

觉得有用？订阅 TG 频道或在 X 关注获取每日更新

内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。