Playwright 营销截图

要解决什么问题

上线 Product Hunt、写落地页或发社媒时，你往往需要一组风格统一、分辨率够高的应用界面图。手工在浏览器里截屏，很容易出现尺寸不一致、非视网膜像素、漏掉需要登录后的页面，或者根本不知道该截哪些路由。

技能如何工作

本技能用 Playwright 驱动无头浏览器，按 deviceScaleFactor: 2 在 1440×900 视口下输出约 2880×1800 的 PNG，接近真实 HiDPI 素材要求。流程大致是：

1. 确定 URL：使用你提供的地址，或结合 package.json 里的 dev 脚本推断本地服务（如 localhost:3000、5173）。
2. 收集需求：通过问答确认截图数量、用途（Product Hunt / 社媒 / 落地页 / 文档）以及是否需要登录与凭证。
3. 读代码找画面：先读 README、CHANGELOG、docs/，再按框架读路由（Next.js app/ 或 pages/、Rails routes.rb、Vue Router 等），并扫仪表盘、表单、图表、落地页组件等可拍点位。
4. 和你对齐清单：把发现的功能列出来，让你勾选或指定要截的页面与状态（已登录、弹窗打开、某 Tab 选中等）。
5. 生成并执行脚本：写入临时 Playwright 脚本，支持整页、元素聚焦、等待动画、点击后再截、暗色模式等；文件按 01-dashboard-overview.png 这类 kebab-case 命名。

适用边界与注意点

• 环境需已安装 Playwright；页面加载失败时先确认开发服务是否在跑。
• 登录依赖常见表单模式的智能定位，非常规登录页可能要你提供选择器或改脚本。
• 最佳效果依赖干净的演示数据、统一视口，以及 networkidle 等等内容加载完成；开发工具叠加层应关掉。