Menu
用 Playwright 精确尺寸截图 HTML 页面，解决 browser_vision 视口固定 1280×720 导致的白边/缩放问题。触发词：精确截图、指定尺寸截图、HTML转PNG、封面生成
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
高德地图综合服务，支持POI搜索、路径规划、旅游规划、周边搜索和热力图数据可视化
Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
Generate professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "visual summary", "信息图", "可视化", or "高密度信息大图".
Darwin Skill (达尔文.skill): autonomous skill optimizer inspired by Karpathy's autoresearch. Evaluates SKILL.md files using an 8-dimension rubric (structure + effectiveness), runs hill-climbing with git version control, validates improvements through test prompts, and generates visual result cards. Use when user mentions "优化skill", "skill评分", "自动优化", "auto optimize", "skill质量检查", "达尔文", "darwin", "帮我改改skill", "skill怎么样", "提升skill质量", "skill review", "skill打分".
从 DESIGN.md 生成预览图并截图的工作流 - 解决 Playwright 浏览器路径问题和 YAML 解析
Cron jobs auto-deliver final responses to configured targets — send_message to the same target gets deduplicated and skipped. Print report content directly as final response instead.
| name | playwright-exact-screenshot |
| description | 用 Playwright 精确尺寸截图 HTML 页面，解决 browser_vision 视口固定 1280×720 导致的白边/缩放问题。触发词：精确截图、指定尺寸截图、HTML转PNG、封面生成 |
| trigger | 需要按精确像素尺寸截图 HTML 页面时 |
browser_vision 截图基于浏览器工具，视口固定 1280×720。当 HTML 设计稿尺寸大于或不等于视口时，会出现：
用 Playwright 脚本直接指定 viewport 尺寸，HTML 无需任何 hack。
路径：/opt/data/scripts/html2png.py
#!/usr/bin/env python3
"""HTML → PNG 截图工具，精确指定输出尺寸，无白边"""
import sys
from playwright.sync_api import sync_playwright
def screenshot_html(html_path, output_path, width, height):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={"width": width, "height": height})
page.goto(f"file://{html_path}")
page.wait_for_timeout(500)
page.screenshot(path=output_path, type="png")
browser.close()
print(f"OK: {output_path} ({width}x{height})")
if __name__ == "__main__":
screenshot_html(sys.argv[1], sys.argv[2], int(sys.argv[3]), int(sys.argv[4]))
/opt/hermes/.venv/bin/python /opt/data/scripts/html2png.py <html_path> <output_png> <width> <height>
示例：
# 小红书竖版封面
/opt/hermes/.venv/bin/python /opt/data/scripts/html2png.py /tmp/cover.html /tmp/cover.png 1080 1440
# 微信公众号横版封面
/opt/hermes/.venv/bin/python /opt/data/scripts/html2png.py /tmp/cover.html /tmp/cover.png 1550 660
使用此方案时，HTML 不需要任何 scale hack、100vw/vh、canvas 容器。直接写设计稿原始尺寸：
html, body { width: 1080px; height: 1440px; overflow: hidden; }
body { /* 设计内容 */ }
Playwright 会以指定的 viewport 尺寸渲染页面，截图即原始像素。
/opt/hermes/.venv/bin/python -c "from playwright.sync_api import sync_playwright"playwright install chromium问题症状：
playwright._impl._errors.Error: BrowserType.launch: Executable doesn't exist
at /opt/data/home/.cache/ms-playwright/chromium_headless_shell-1217/chrome-headless-shell-linux64/chrome-headless-shell
原因：Playwright 默认查找路径 /opt/data/home/.cache/ms-playwright/，但 NAS 上浏览器实际位于 /opt/hermes/.playwright/
解决方案：在脚本开头设置环境变量
import os
os.environ['PLAYWRIGHT_BROWSERS_PATH'] = '/opt/hermes/.playwright'
from playwright.sync_api import sync_playwright
# ... 后续代码不变
或在终端设置后执行：
PLAYWRIGHT_BROWSERS_PATH=/opt/hermes/.playwright /opt/hermes/.venv/bin/python /opt/data/scripts/html2png.py ...
page.wait_for_timeout(500) 等待字体加载和渲染完成，Google Fonts 等外部字体可能需要更长page.wait_for_load_state('networkidle')