capture-guide

# 捕获指南 ## 同时运行捕获任务 始终并行运行截图和 HTML 抓取（它们是独立的请求）： bash # 同时运行两者 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 "两次捕获均已完成" 或者在同一条消息中使用两个智能体工具调用。 ## 读取截图 使用 Read 工具读取 PNG 文件路径 —— Claude 具有多模态能力，可以直接分析图像。根据设计令牌类别（颜色、排版、布局、组件、效果）描述你所看到的内容。 ## 读取 HTML HTML 文件可能非常大。使用 Grep 提取最有用的部分： bash # 提取 CSS 自定义属性 grep -o '--[a-zA-Z-]*:[^;]*' /tmp/target_page.html | head -100 # 提取 @import 字体声明 grep -E '@import|fonts.googleapis' /tmp/target_page.html | head -20 # 提取 块内容 grep -A 500 '<style' /tmp/target_page.html | head -600 # 提取关键元素的内联样式 grep -o 'style="[^"]*"' /tmp/target_page.html | head -50 # 查找 Tailwind 配置 grep -A 20 'tailwind.config' /tmp/target_page.html | head -50 ## 常见问题 ### HTML 文件过大 使用带有特定模式的 Grep，而不是读取整个文件。重点关注 `` 标签、`:root`、`@import` 和 ``。 ### 压缩后的 CSS 压缩后的 CSS 没有空格。你仍然可以使用以下命令提取颜色： bash grep -oE '#[0-9a-fA-F]{3,8}' /tmp/target_page.html | sort -u grep -oE 'rgb([^)]+)' /tmp/target_page.html | sort -u grep -oE 'rgba([^)]+)' /tmp/target_page.html | sort -u ### 外部 CSS 文件 HTML 可能引用了外部 `.css` 文件。你会看到 ``。遗憾的是，相对路径在 API 响应中无法直接使用。请使用带有抓取脚本的完整 URL： bash bash scripts/scrape_html.sh "https://target.com/assets/style.abc123.css" "/tmp/target_styles.css" ### JS 渲染的站点（HTML 内容为空） 如果 HTML 内容稀疏（React/Next.js SPA），设计信息存在于： 1. 截图（完全渲染）—— 最有用 2. `` 中链接的外部 CSS 块 3. 包含配置数据的内联 `` 块 在这种情况下，请回退到从截图中进行纯视觉提取。 ## 截图质量 截图捕获的是桌面视口下完全渲染的页面