Screenshots to Blog Post: Using Claude Code as a Writing Partner
I had 12 screenshots on my Desktop documenting a walkthrough of velo-workspace — the same project I introduced in its own post. I wanted a blog post. I did not want to write it from scratch.
The Prompt
The setup was minimal. I pointed Claude Code at ~/Desktop/*.png and told it to review the screenshots and put together a narrative following the screenshot path – /setup first, then /new to create an artifact.
That was the entire brief. No outline, no bullet points, no “here’s what I want you to emphasize.”
What Happened
Claude Code read all 12 screenshots in two batches, identified the two-phase narrative arc (setup and artifact creation), and produced a full draft post with:
- An intro framing the VQL friction problem
- Section-by-section walkthrough mapped to each screenshot
- Image references with alt text, pre-named for an asset directory
- A closing section on why the workflow matters
It also pulled context from the existing projects.md description of velo-workspace and the blog’s post templates to match the site’s structure and voice.
The whole thing took one prompt and maybe 30 seconds of wall time.
The Edit Session
The first draft was a starting point, not a finished product. What followed was a back-and-forth editing session – still inside Claude Code – where I directed revisions the same way I’d work with a human co-author.
Adding a preface. The draft jumped straight into the friction problem. I wanted to lead with the fact that Velociraptor is excellent out of the box – the custom artifact need only comes up for edge cases specific to your environment. One prompt, and Claude rewrote the opening to lead with that context.
New section on the iteration loop. The draft focused on artifact creation but missed the other half of the value: closing the edit-deploy-test cycle. I described the gap and Claude added a section covering how /push and /test keep you in the workspace instead of context-switching to the GUI.
Section renaming. Small thing, but the original “What It Actually Does” heading didn’t fit once the structure evolved. We landed on “Walkthrough” after a quick back-and-forth.
Image pipeline. Claude had pre-named all 12 image references in the draft (01-welcome.png through 12-new-complete.png), but the actual files were still raw screenshots on my Desktop. One command copied and renamed them all into assets/images/velo-workspace/.
Screenshot normalization. The screenshots varied in size and resolution – some were full-width terminal captures, others were smaller dialog prompts. Claude added a .screenshot CSS class with a .screenshot-sm variant, then assigned the smaller tier to the screenshots with larger text (the setup prompts, workflow question, completion message) so the apparent font size stays consistent across the post.
The whole session – from initial prompt to styled draft with images – was maybe 15 minutes. Most of that was me deciding what I wanted, not waiting for output.
What Still Needed Human Judgment
Claude handled the mechanics well. The parts that required me:
- Voice and framing – deciding to lead with “I love Velociraptor” rather than jumping into a problem statement
- What to emphasize – the iteration loop section was my idea, not something Claude would have inferred from screenshots alone
- Visual sizing – I could see the screenshots rendering in the browser and knew which ones felt too large or too small
- Editorial taste – knowing when a section heading is wrong, even if the content under it is fine
The pattern is consistent: I bring the intent and editorial judgment, Claude handles the execution. Neither part is trivial, and the combination is faster than either alone.
The Meta Observation
This post is itself an example of the pattern. I described what I wanted, Claude Code did the heavy lifting on structure and prose, and I directed revisions until it matched what I’d actually publish.
The interesting part is not that an LLM can write blog posts – that’s table stakes at this point. The interesting part is using Claude Code’s multimodal capability to read a set of screenshots in sequence and reconstruct the narrative from visual context alone. No transcript, no logs, no copy-pasted terminal output. Just PNGs.
This is related to what I explored in Teaching Claude How You Think — both are about shaping Claude’s behavior to match your working style, whether that’s triage response modes or editorial collaboration.
The second interesting part is the editing workflow. This wasn’t “generate and ship.” It was a collaborative editing session where I stayed in the driver’s seat – adding sections, adjusting tone, renaming headings, fixing visual presentation – and Claude executed each revision in seconds. The same workflow that would normally involve a text editor, an image tool, CSS tweaks, and a browser happened entirely inside one terminal session.
For documentation-heavy work – release announcements, tool walkthroughs, tutorial posts – this collapses the most tedious part of the process: going from “I have the screenshots” to “I have a publishable draft.”