claude-show-your-work Skill 技能

claude-show-your-work - 让 Claude Code 在终端里展示图片和视频的 Plugin

技能简介

claude-show-your-work 是一款 Claude Code 插件，让 Agent 直接在终端里展示图片和播放视频，把"做完的事"摆在用户眼前。无论是设计稿、QA 测试录像、对比截图，还是调好的图表与动效，Agent 都可在同一会话里实时呈现给用户，并在每个视频旁列出修改点与勾选项。

核心能力

• 图像直显：Claude 完成网页截图、海报、设计稿后自动展示，桌面 / 平板 / 手机同图三连看。
• 视频播放：QA 测试、广告短片、调试录屏都在 Claude Code 终端里直接播放，无需切到外部播放器。
• 多版本历史：每次迭代都保留历史版本，可在同一会话里横向对比多个候选方案。
• Compare 视图：bug 修复时同时录制旧版本与新版本，并排播放，自动同步进度条。
• 设计并排对比：四个首页 hero 候选左右排开，用户回复编号即可挑选，避免来回切换窗口。
• FFmpeg 内存优化：长视频按 12fps / 960px / 最多 900 帧抽取并分批加载，几乎不占内存与磁盘。
• 错误兜底：文件缺失、非图像、视频损坏、FFmpeg 未装等情况，给出可在 Claude 中一键修复的提示按钮。

安装配置

1. 环境要求：macOS；Claude Code ≥ 2.1.287；Ghostty 终端；如需视频播放，安装 FFmpeg（brew install ffmpeg）。
2. 添加 Marketplace：在 Claude Code 中执行 /plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git。
3. 安装插件：执行 /plugin install show-your-work@iamumeransari。
4. tmux 兼容（如使用）：在 ~/.tmux.conf 中加 set -g allow-passthrough on。
5. 终端支持：仅 Ghostty 可显示；iTerm2、Terminal.app 与 VS Code 终端会触发降级提示。

使用步骤

1. 在 Claude Code 会话中输入 /plugin marketplace add ...，再输入 /plugin install show-your-work@iamumeransari。
2. 启动 Claude Code，自动检查 Ghostty 与 FFmpeg 环境是否齐备，缺失会主动提示安装。
3. 让 Claude 做任意视觉任务，例如"做四个首页 hero 方案给我选"、"修一下计费页并录制前后对比"。
4. Claude 完成时会自动把图片或视频推送到你的会话；用 Cmd+点击链接或聊天内嵌预览查看。
5. 反馈修改意见，Claude 重新生成版本并在 Compare 视图中并排演示新旧两版。

适用场景

• 设计稿评审：让 Claude 给出多版落地页候选，用户在同一窗口里挑方向。
• QA 录像回放：自动测试修复后，录制新旧版本对比录像并通过 Chat 内的勾选项定位失败用例。
• 图表 / 数据可视化：让 Claude 生成的 Matplotlib、D3 图表直接在终端里展示，无需切换到浏览器。
• 广告 / 短视频提案：让 Claude 写脚本、画分镜、配音、生成短片，过程中随时对照模板调整。
• 教学 / 演示：在客户演示环节，把 Claude 写的代码 / 渲染的结果直接在屏幕里轮播。
• 产品本地化对比：让 Claude 在多个不同语言的版本上执行同一操作并并排播放。

适用人群

• 设计 / 前端从业者：希望让 Claude 把设计稿实时铺在桌面上，而不是丢一串路径。
• 测试 / QA 工程师：希望 Claude 把每次回归测试录像直接推送到自己的 PR 评论里。
• 内容创作者 / 编导：用 Claude 写文案 + 配音 + 剪辑一气呵成，并在过程中随时看预览。
• 产品 / 客户成功：让 Claude 直接给客户演示功能完成后的视频回放。
• 重视细节的 Claude Code 重度用户：希望终端里不仅有文字，还有图像与视频反馈。

工作原理

claude-show-your-work 利用 Claude Code 内置的 Mods 能力注册自定义 UI 面板，并通过 Ghostty 终端的图像 passthrough 协议把像素推送至屏幕。视频被 FFmpeg 抽帧（最高 12fps、960px 宽、最多 900 帧）并按 6 秒一段缓存，不会一次性占用大量内存或磁盘。展示的内容只往屏幕发送不发送回 Claude，所以展示本身不消耗 token 配额——所有算力都用在真正的工作上。

官方链接

• 项目仓库：https://github.com/iamumeransari/claude-show-your-work
• Claude Code Mods 文档：https://docs.claude.com/en/claude-code