| user-invocable | false |
| name | html-screenshot |
| description | Capture screenshots of HTML files or URLs using agent-browser. Auto-screenshot after visual changes (colors, layout, elements). Cost-free local rendering.
USE FOR:
- "截图" / "screenshot" / "帮我截图"
- "看看效果" / "show me how it looks" / "preview"
- "渲染一下" / "render this HTML" / "visualize"
- "帮我看看" / "let me see the result" / "generate preview"
- User wants to see what an HTML file or URL looks like
- Auto-trigger after any visual modification (colors, layout, elements)
REQUIRES:
- `agent-browser` CLI installed globally
|
| metadata | {"openclaw":{"emoji":"📸","requires":{"bins":["agent-browser"]}}} |
HTML Screenshot (Simplified)
Pattern: Tool Wrapper (Google ADK) — 检测视觉变更 → 调用 agent-browser → 截图 → 按频道发送
Capture screenshots of HTML files using agent-browser. Auto-screenshot after visual modifications only.
Key Principle: Only screenshot when it matters (visual changes), not for code refactoring or comments.
When to Use
Prerequisites
无需特殊依赖，装了就能用。
- User wants to visualize HTML code
- Generate website mockups or previews
- Create visual documentation
- Compare design variations
- Keywords: "screenshot", "preview", "show me how it looks", "render", "visualize"
Don't use when: The user needs an image file from HTML/Markdown (use html2img), or only needs to read text content without visual rendering (use web_fetch).
Quick Start
{baseDir}/scripts/screenshot.sh /path/to/file.html /tmp/output.png
{baseDir}/scripts/screenshot.sh https://example.com /tmp/output.png
{baseDir}/scripts/screenshot.sh /path/to/file.html /tmp/output.png 1920x1080
{baseDir}/scripts/screenshot.sh /path/to/file.html /tmp/output.png --full-page
Output
- Returns the path to the saved screenshot
- Default viewport: 1440x900
- Format: PNG with transparency support
Dependencies
Requires agent-browser CLI. Install via:
npm install -g @antiwork/agent-browser
Examples
Visualize HTML code
{baseDir}/scripts/screenshot.sh ./design.html /tmp/preview.png
Compare designs
{baseDir}/scripts/screenshot.sh ./design-v1.html /tmp/v1.png
{baseDir}/scripts/screenshot.sh ./design-v2.html /tmp/v2.png
Generate portfolio mockups
{baseDir}/scripts/screenshot.sh ./portfolio-section.html /tmp/mockup.png --full-page
When to Screenshot
Channel-Specific Rules
Telegram (High Need - User can't see local files):
- ✅ Any CSS style changes (colors, fonts, sizes, spacing, borders, shadows)
- ✅ Any layout changes (margins, padding, positioning, display)
- ✅ Adding/removing/modifying visible elements
- ✅ Changing visible text (even small changes)
- ❌ Only skip: comments, code formatting, invisible attributes
Browser/Terminal (Medium/Low Need - User can view themselves):
- ✅ Significant visual changes (colors, major layout, new elements)
- ❌ Minor tweaks (small text changes, subtle spacing)
- ❌ Code refactoring, comments, formatting
Universal Exclusions (All Channels)
- ❌ Code refactoring (renaming classes, variables)
- ❌ Adding/removing comments
- ❌ Code formatting (indentation, line breaks)
- ❌ Changing alt text, meta tags, or other invisible content
User Control
| User says | Action |
|---|
| "看看效果" / "截图" / "show me" | Screenshot immediately |
| "不用看" / "不用截图" / "skip" | Don't screenshot this time |
| (nothing) | Auto-screenshot if visual change |
Judgment Logic
Completed modification
↓
Check channel
├─ Telegram → Is it ANY visual change (loose)?
│ ├─ Yes → Auto-screenshot and send
│ └─ No (comments/formatting) → Don't screenshot
│
└─ Browser/Terminal → Is it SIGNIFICANT visual change?
├─ Yes → Auto-screenshot and send
└─ No → Don't screenshot, user can view themselves
Rationale: Telegram users depend on screenshots (can't view local files), while Browser/Terminal users can preview themselves.
Error Handling
Never fail silently. Always inform user if screenshot fails.
Failure Scenarios
| Failure | Response |
|---|
| File path error | "Screenshot failed: File not found at [path]" |
| agent-browser not running | "Screenshot failed: Browser not available. File is at: [path]" |
| Render timeout | Retry once, then: "Screenshot timeout. You can open the file manually: [path]" |
| Telegram send failed | "Screenshot ready but send failed: [path]" |
Fallback
When screenshot fails, always provide:
- Clear error message
- File path for manual opening
- Ask if user wants to retry
Example:
❌ Screenshot failed: Browser not available
📁 You can open the file here: /path/to/file.html
🔄 Want me to retry?
Smart Channel Adaptation
Automatically choose the best delivery method based on current channel:
Telegram (channel=telegram)
message({
action: "send",
channel: "telegram",
media: "/tmp/screenshot.png",
message: "已修改：[说明]"
})
Web/Browser (channel=webchat)
Read({path: "/tmp/screenshot.png"})
Terminal/CLI (others)
"✓ Screenshot saved: /tmp/screenshot.png\nOpen with: open /tmp/screenshot.png"
Detection: Check runtime context for channel parameter
channel=telegram → Send via message toolchannel=webchat → Use Read tool- Others → Return path only
Standard Workflow
When user requests to "see how it looks" or "show me the result":
- Generate or locate HTML file
- Take screenshot: Use scripts/screenshot.sh
- Send to user: Use message tool with the screenshot
{baseDir}/scripts/screenshot.sh /path/to/design.html /tmp/preview.png
Common Scenarios
Scenario A: HTML Design Preview
- User: "生成一个网站预览" or "帮我看看这个 HTML 效果"
- Action: Screenshot HTML → Send to current channel
Scenario B: Before/After Comparison
- User: "对比一下两个版本"
- Action: Screenshot both → Send as album or separate messages
Scenario C: Design Iteration
- User: "调整一下颜色，再给我看看"
- Action: Modify HTML → Screenshot → Send updated preview
Integration with Other Skills
- ui-ux-pro-max: Generate design → Screenshot → Show preview
- agent-browser: Complex interactions → Screenshot result → Send
- content-research-writer: Generate article HTML → Screenshot → Preview layout
Notes
- For file:// URLs, use absolute paths
- agent-browser uses Chromium for rendering
- Screenshots are deterministic (same HTML = same image)
- Supports responsive viewports
- Always send screenshots to user when they want to "see" results
