HTML 设计稿转 PNG

要解决的问题

在技术文档、方案评审和产品页面中，表格、架构图、流程图和封面图经常需要快速产出。手写图片或临时拼设计稿容易样式不一致，导出后也容易模糊、截断或留白异常。create-image-by-html 把设计稿交给 HTML/CSS 表达，再用浏览器截图得到 PNG，适合工程师在本地快速生成可迭代的视觉稿。

工作方式与关键步骤

该技能的核心链路是：理解需求、生成 HTML、Playwright 截图、展示与修正。

• 先确认图的类型、风格和尺寸，例如表格、架构图、流程图、对比表或封面。
• 使用现代 CSS 生成 docs/ 下的 HTML 文件，并通过 .container 指定截图区域。
• 调用 scripts/render.py 或 Playwright 截图命令，支持 --output、--wait、--scale 等参数。
• 对底部截断、居中、留白和滚动条问题进行参数化调试。

它内置了偏工程化的视觉规范：浅蓝背景、白色圆角卡片、柔和阴影、中文友好字体栈，并提供表格、架构、流程和对比表等模板思路。

适用边界与注意点

它更适合结构清晰、可用 HTML/CSS 表达的设计图，不适合作为像素级插画或复杂动效生成。由于截图高度依赖 --window-size，实际使用中仍需要根据内容高度反复微调；若 render.py 不可用，需要手动控制视口并检查滚动条。