ksdisch

Screenshot Iterate — Design skill for Claude Code

Design community

Visual loop — implement against a mock, screenshot the running app with a browser tool, compare, and iterate until it matches.

How to install Screenshot Iterate

Installs to ~/.claude/skills/ksdisch-claude-config-screenshot-iterate/SKILL.md

Terminal

mkdir -p ~/.claude/skills/ksdisch-claude-config-screenshot-iterate && curl -fsSL https://raw.githubusercontent.com/ksdisch/claude-config/HEAD/commands/screenshot-iterate.md -o ~/.claude/skills/ksdisch-claude-config-screenshot-iterate/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Screenshot Iterate does

description: Visual loop — implement against a mock, screenshot the running app with a browser tool, compare, and iterate until it matches. Pass the mock image (e.g. @mock.png) plus what to build as the argument. argument-hint: <@mock.png + what to implement> allowed-tools: Bash, Read, Edit, Write, Glob, Grep, ToolSearch

Task: $ARGUMENTS

Run the **write code → screenshot → iterate** loop until the result matches the visual target. The whole point is to give yourself eyes: don't iterate

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★