Batch processing with Claude Code and the Ittybit CLI

View Markdown

You have a directory of product photos that need resizing for three breakpoints, converting to WebP, and alt text for accessibility. That’s a lot of repetitive CLI work. Instead of writing the script yourself, tell Claude Code what you want and let it generate the whole thing.

Prerequisites

Install the Ittybit CLI and authenticate:

npm install -g ittybit
ittybit login

Make sure you have Claude Code installed:

npm install -g @anthropic-ai/claude-code

Prompt Claude Code

Open your project directory in Claude Code and give it a plain-language description of what you need:

Process every .jpg and .png in ./images/ — resize each to 400px, 800px,
and 1200px wide, convert to WebP at medium quality, and save to ./output/
with the pattern {name}-{width}.webp

The generated script

Claude Code produces a bash script that loops through your images and calls the Ittybit CLI for each breakpoint.

#!/usr/bin/env bash
set -euo pipefail

INPUT_DIR="./images"
OUTPUT_DIR="./output"
WIDTHS=(400 800 1200)
QUALITY="medium"

mkdir -p "$OUTPUT_DIR"

for file in "$INPUT_DIR"/*.{jpg,png}; do
  [ -f "$file" ] || continue

  name=$(basename "${file%.*}")

  for width in "${WIDTHS[@]}"; do
    output="${OUTPUT_DIR}/${name}-${width}.webp"

    echo "Processing: $name -> ${width}px"

    ittybit image \
      -i "$file" \
      -o "$output" \
      --width "$width" \
      --format webp \
      --quality "$QUALITY"
  done
done

echo "Done. $(ls "$OUTPUT_DIR"/*.webp 2>/dev/null | wc -l) files written to $OUTPUT_DIR/"

Save it, make it executable, and run:

chmod +x process-images.sh
./process-images.sh

Adding alt text with Claude Vision

The images are resized, but they still need alt text. Ask Claude Code to extend the script with a second pass that sends each original image to the Claude Vision API and writes the descriptions to a JSON manifest.

Now add a second pass: for each original image, use the Claude API to
generate a short alt text description. Write all the results to
output/manifest.json mapping each filename to its alt text.

Claude Code appends a second loop:

#!/usr/bin/env bash
set -euo pipefail

INPUT_DIR="./images"
OUTPUT_DIR="./output"
MANIFEST="${OUTPUT_DIR}/manifest.json"

# Requires ANTHROPIC_API_KEY in your environment
: "${ANTHROPIC_API_KEY:?Set ANTHROPIC_API_KEY before running this script}"

echo "{" > "$MANIFEST"
first=true

for file in "$INPUT_DIR"/*.{jpg,png}; do
  [ -f "$file" ] || continue

  name=$(basename "$file")
  base64_image=$(base64 < "$file" | tr -d '\n')
  media_type="image/$(echo "${file##*.}" | tr '[:upper:]' '[:lower:]')"

  echo "Generating alt text: $name"

  alt_text=$(curl -s https://api.anthropic.com/v1/messages \
    -H "x-api-key: $ANTHROPIC_API_KEY" \
    -H "anthropic-version: 2023-06-01" \
    -H "content-type: application/json" \
    -d "{
      \"model\": \"claude-sonnet-4-20250514\",
      \"max_tokens\": 128,
      \"messages\": [{
        \"role\": \"user\",
        \"content\": [
          {
            \"type\": \"image\",
            \"source\": {
              \"type\": \"base64\",
              \"media_type\": \"${media_type}\",
              \"data\": \"${base64_image}\"
            }
          },
          {
            \"type\": \"text\",
            \"text\": \"Write a concise alt text description for this image in one sentence. Return only the description, nothing else.\"
          }
        ]
      }]
    }" | python3 -c "import sys,json; print(json.load(sys.stdin)['content'][0]['text'])")

  if [ "$first" = true ]; then
    first=false
  else
    echo "," >> "$MANIFEST"
  fi

  # Escape quotes in alt text for valid JSON
  escaped=$(echo "$alt_text" | sed 's/"/\\"/g')
  printf '  "%s": "%s"' "$name" "$escaped" >> "$MANIFEST"
done

echo "" >> "$MANIFEST"
echo "}" >> "$MANIFEST"

echo "Manifest written to $MANIFEST"

Example output

After running both scripts on a directory with three product photos:

output/
  hero-400.webp
  hero-800.webp
  hero-1200.webp
  product-front-400.webp
  product-front-800.webp
  product-front-1200.webp
  product-back-400.webp
  product-back-800.webp
  product-back-1200.webp
  manifest.json

The manifest maps original filenames to their generated descriptions:

{
  "hero.jpg": "A flat-lay arrangement of headphones, a notebook, and a coffee cup on a wooden desk",
  "product-front.png": "Front view of a matte black wireless speaker on a white background",
  "product-back.png": "Rear panel of a wireless speaker showing USB-C port and pairing button"
}

Putting it all together

Combine both passes into a single script so one command handles everything:

chmod +x batch-process.sh
./batch-process.sh

Or run it directly through Claude Code in one shot:

Look at the images in ./images/ and write a script that:
1. Resizes each to 400, 800, and 1200px wide as WebP
2. Generates alt text for each using your vision capabilities
3. Outputs everything to ./output/ with a manifest.json
Then run the script.

Claude Code writes the script, executes it, and reports the results — all in one conversation turn.