Terminal Screenshot
Render a terminal program's colored output to a PNG so Claude can actually see the visual result — color contrast, alignment, highlighting — instead of only reading raw ANSI escape codes.
Claude can read your terminal text but not see whether the colors and alignment actually look right. This playbook renders the real visual output to a PNG it can inspect.
Who it's for: developers, CLI tool authors, dotfile tinkerers
Example
"Check how my git diff colors actually look" → A PNG of the real terminal output Claude can see, so it verifies the visual result after a config change
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add terminal-screenshot# Terminal Screenshot
Render the colored output of a terminal command into a PNG image, then read that
image to judge the result visually.
## Why this exists
When a command's output arrives as a tool result, Claude sees plain text plus raw
escape codes like `\x1b[48;2;92;30;34m` — not the rendered colors. That makes it
impossible to honestly answer "is the diff's add/remove contrast strong enough?"
or "did this theme come out too dark?". Reading hex values is guessing. This skill
turns the output into an image so the judgement is based on what a human wouldGet new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
Render a terminal program's colored output to a PNG so Claude can actually see the visual result — color contrast, alignment, highlighting — instead of only reading raw ANSI escape codes.
What's Inside
The template covers:
- Why this exists
- The method: capture, then render
- Capture recipes per tool
- TUI programs (lazygit, htop, top) — out of scope
- Installing freeze (the preferred renderer)
- Bundled scripts
Quick Start
Step 1: Create a Project Folder
Make a dedicated folder for this workflow and open it in Claude Code.
Step 2: Download the Template
Click Download above to save the template, then drop it into your project as CLAUDE.md (or paste it into your existing one).
Step 3: Start Working
Tell Claude what you need in plain language — it will follow the template's workflow automatically. For example:
Check how my git diff colors actually look
Claude reads the template and runs the steps for you.