一键在 Manus 中运行任何 Skill

web-render-screenshot

星标0

分支0

更新时间2026年4月24日 06:36

Generate ultra-high-resolution screenshots from HTML content using Playwright. Default 4x device scale factor produces crisp, pixel-perfect output ideal for UI mockups, dashboards, data visualizations, infographics, website previews, and any content requiring accurate text rendering. Use when: (1) user wants a website/webpage screenshot or mockup image, (2) content has text, numbers, tables, charts that must be legible, (3) user wants a UI design rendered as an image, (4) HTML Canvas or data-driven visuals need to be exported as PNG/JPEG. Triggers: "website screenshot", "网页截图", "网站首页图", "UI mockup image", "dashboard image", "数据可视化图片", "render HTML to image". Prefer this over AI image generation (stable-image-ultra) when the content has structured text, data, or UI elements. AI image generation cannot produce readable text.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

wujiaming88

wujiaming88/skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Web Render Screenshot

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use

Scenario	Use This Skill	Use AI Image Gen Instead
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.

Quick Start

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 <input.html> [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:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters

Parameter	Default	Description
`device_scale_factor`	4	Ultra-high resolution (4x). Output = viewport × 4
`viewport.width`	1920	CSS pixel width
`viewport.height`	1080	CSS pixel height
`full_page`	true	Capture entire scrollable content
`wait`	1000ms	Wait after page load for rendering
`format`	png	Lossless output (use jpeg for smaller files)

Resolution Reference

Scale	Output for 1920×1080 viewport	File Size (typical)	Use Case
1x	1920×1080	~100KB	Draft / preview
2x	3840×2160	~1-2MB	Standard high-res
3x	5760×3240	~3-5MB	High-quality print
4x	7680×4320	5-8MB	Ultra-high (default)

Script Options

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips

Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
Chinese fonts: Always include fallback chain for cross-platform rendering
Emoji icons: Use emoji for weather/status/category icons — they render at any scale
Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.

同仓库更多 Skills

同仓库

report2article

wujiaming88/skills

把报告编排成读者向文章：只重组排序起标题，不增删改内容。解决标题夸张、子标题冗长、逻辑弱，支持超长报告信息不丢

2026-07-070

software-engineering-discipline

wujiaming88/skills

Engineering discipline for AI coding agents. Apply when writing, refactoring, or reviewing code that will be maintained. Not a tutorial on SOLID/DRY (you already know those) — it calibrates the trade-off calls and hard limits where agents predictably go wrong, and forces you to verify instead of guess.

2026-07-070

gaokao-zhiyuan

wujiaming88/skills

面向全国所有省份的通用高考志愿填报建议器：用省份快速学习协议现查现学任意省当年规则，出默认保守的冲稳保三档+可直接录入本省志愿系统的草表。位次锁定推演、官方源+历年+多源交叉验证、零杜撰。Use for 高考志愿填报/选校选专业/冲稳保梯度/志愿草表/各省志愿规则适配/录取概率推演。

2026-06-280

xhs-content-forge

wujiaming88/skills

把技术博客长文/选题改写成小红书笔记(标题5选1+正文+配图清单+标签),走「五岳AI虚拟公司」过程纪实人设、强制去AI味与护城河自检。用于小红书选题/写笔记/内容改造/博客拆稿。

2026-06-140

xhs-cover-maker

wujiaming88/skills

把 xhs-content-forge 的配图清单渲染成小红书封面/配图(4x高清、文字清晰)。固定五岳AI公司视觉IP,5套版式:封面×3(大字报/对比/看板)+内页×2(要点图/金句卡)。用于小红书出封面/做配图/渲染笔记图。

2026-06-140

deep-investment-research

wujiaming88/skills

系统化投研能力中枢。覆盖宏观/行业/政策/个股/投资可行性/风险/投资规划七类研究，内置9条研究红线、深度研究5步法、7专题框架、5研究模板、8重点行业一手源清单，以及多源数据采集脚本（SEC EDGAR/HKEX/AKShare/FRED/政策门户等）。Use for: 任何投资研究、行业分析、公司研究、个股深度研究、政策解读、可行性评估、风险分析、投资规划，以及研究所需的真实一手数据采集。纯研究，不做盯盘/交易信号/交易执行。

2026-06-100

name

web-render-screenshot

description

Web Render Screenshot

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use

Scenario	Use This Skill	Use AI Image Gen Instead
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.

Quick Start

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 <input.html> [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:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters

Parameter	Default	Description
`device_scale_factor`	4	Ultra-high resolution (4x). Output = viewport × 4
`viewport.width`	1920	CSS pixel width
`viewport.height`	1080	CSS pixel height
`full_page`	true	Capture entire scrollable content
`wait`	1000ms	Wait after page load for rendering
`format`	png	Lossless output (use jpeg for smaller files)

Resolution Reference

Scale	Output for 1920×1080 viewport	File Size (typical)	Use Case
1x	1920×1080	~100KB	Draft / preview
2x	3840×2160	~1-2MB	Standard high-res
3x	5760×3240	~3-5MB	High-quality print
4x	7680×4320	5-8MB	Ultra-high (default)

Script Options

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips

Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
Chinese fonts: Always include fallback chain for cross-platform rendering
Emoji icons: Use emoji for weather/status/category icons — they render at any scale
Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.