๐ŸŽ Get the FREE AI Skills Starter Guide โ€” Subscribe โ†’
BytesAgainBytesAgain
๐Ÿฆ€ ClawHub

Web Render Screenshot

by @wujiaming88

Generate ultra-high-resolution screenshots from HTML content using Playwright. Default 4x device scale factor produces crisp, pixel-perfect output ideal for...

Versionv1.0.0
โšก When to Use
TriggerAction
|----------|---------------|------------------------|
| Website UI / mockup | โœ… | โŒ |
| Dashboard / data viz | โœ… | โŒ |
| Text-heavy infographic | โœ… | โŒ |
| Weather/finance/news page | โœ… | โŒ |
| Artistic illustration | โŒ | โœ… |
| Photorealistic scene | โŒ | โœ… |
**Rule**: If it has text that must be readable โ†’ use this skill.
๐Ÿ’ก Examples

Step 1: Create the HTML

Write a self-contained HTML file with inline CSS. Guidelines:

  • Use system fonts or Google Fonts CDN for Chinese support: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
  • All styles inline (no external CSS files)
  • Design for the target viewport (default: 1920ร—1080)
  • Use emoji for icons when appropriate (universally supported)
  • Ensure overflow: hidden on body if single-viewport capture is desired
  • Step 2: Take the Screenshot

    Use the bundled script:

    python3 scripts/screenshot.py  [output.png] [options]
    

    Or inline Python when the script cannot be invoked directly:

    from playwright.sync_api import sync_playwright

    with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page( viewport={"width": 1920, "height": 1080}, device_scale_factor=4, # 4x ultra-high res (default) ) page.goto("file:///path/to/input.html", wait_until="networkidle") page.wait_for_timeout(1000) page.screenshot(path="output.png", full_page=True) browser.close()

    Step 3: Deliver

    Output MEDIA: for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

    View on ClawHub
    TERMINAL
    clawhub install web-render-screenshot

    ๐Ÿงช Use this skill with your agent

    Most visitors already have an agent. Pick your environment, install or copy the workflow, then run the smoke-test prompt above.

    ๐Ÿ” Can't find the right skill?

    Search 60,000+ AI agent skills โ€” free, no login needed.

    Search Skills โ†’