# Capture Guide ## Running Both Captures Always run screenshot and HTML scrape in parallel (they're independent requests): ```bash # Run both simultaneously bash scripts/screenshot.sh "https://target.com" "/tmp/target_screenshot.png" & SCREENSHOT_PID=$! bash scripts/scrape_html.sh "https://target.com" "/tmp/target_page.html" & HTML_PID=$! wait $SCREENSHOT_PID $HTML_PID echo "Both captures complete" ``` Or just use two Agent tool calls in the same message. ## Reading the Screenshot Use the Read tool on the PNG file path — Claude is multimodal and can directly analyze the image. Describe what you see in terms of the design token categories (colors, type, layout, components, effects). ## Reading the HTML The HTML file can be very large. Use Grep to extract the most useful parts: ```bash # Extract CSS custom properties grep -o '\-\-[a-zA-Z-]*:[^;]*' /tmp/target_page.html | head -100 # Extract @import font statements grep -E '@import|fonts\.googleapis' /tmp/target_page.html | head -20 # Extract