关于
使用 Playwright 生成应用的营销截图。适用于为 Product Hunt、社交媒体、落地页或文档创建截图
name: screenshots description: "使用 Playwright 生成应用的营销截图。当用户想要为 Product Hunt、社交媒体、落地页或文档创建截图时使用。" risk: safe source: "https://github.com/Shpigford/skills/tree/main/screenshots" date_added: "2026-02-27"
截图
使用 Playwright 直接生成营销级别的应用截图。截图以真正的 HiDPI（2x 视网膜）分辨率捕获，使用 deviceScaleFactor: 2。
何时使用此技能
在以下情况使用此技能：
- 用户想要为 Product Hunt 创建截图
- 为社交媒体创建截图
- 为落地页生成图片
- 创建文档截图
- 用户请求营销级别的应用截图
前提条件
Playwright 必须可用。检查方法：
npx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright
如果未找到，通知用户：
Playwright 是必需的。使用以下命令安装：
npm install -D playwright或npm install -D @playwright/test
步骤 1：确定应用 URL
如果提供了 $1，将其用作应用 URL。
如果未提供 URL：
- 通过查找
package.json脚本检查开发服务器是否可能正在运行 - 使用
AskUserQuestion询问用户 URL 或提供帮助启动开发服务器
常见默认 URL 建议：
http://localhost:3000（Next.js、Create React App、Rails）http://localhost:5173（Vite）http://localhost:4000（Phoenix）http://localhost:8080（Vue CLI、通用）
步骤 2：收集需求
使用 AskUserQuestion 提出以下问题：
问题 1：截图数量
- 标题："数量"
- 问题："你需要多少张截图？"
- 选项：
- "3-5" - 关键功能快速集
- "5-10" - 全面功能覆盖
- "10+" - 完整营销套件
问题 2：用途
- 标题："用途"
- 问题："这些截图将用于什么？"
- 选项：
- "Product Hunt" - 主图和功能亮点
- "社交媒体" - 吸引眼球的功能演示
- "落地页" - 营销板块和优势展示
- "文档" - UI 参考和教程
问题 3：认证
- 标题："认证"
- 问题："应用是否需要登录才能访问你想截图的功能？"
- 选项：
- "无需登录" - 仅公开页面
- "是的，我会提供凭据" - 需要先登录
如果用户选择"是的，我会提供凭据"，询问后续问题：
- "登录页面 URL 是什么？"（例如
/login、/sign-in） - "邮箱/用户名是什么？"
- "密码是什么？"
脚本将使用 Playwright 的智能定位器自动检测登录表单字段。
步骤 3：分析代码库以发现功能
深入探索代码库以了解应用并识别截图机会。
3.1：首先阅读文档
始终先阅读这些文件以了解应用的功能：
-
README.md（以及子目录中的任何 README 文件）- 阅读完整 README 以了解：
- 应用是什么以及解决什么问题
- 关键功能和能力
- 已记录的截图或功能描述
-
CHANGELOG.md 或 HISTORY.md - 值得突出的近期功能
-
docs/ 目录 - 关于功能的任何额外文档
3.2：分析路由以发现页面
阅读路由配置以发现所有可用页面：
| 框架 | 要读取的文件 | 查找内容 |
|-----------|--------------|---------------------|
| Next.js App Router | app/ 目录结构 | 每个包含 page.tsx 的文件夹是一个路由 |
| Next.js Pages Router | pages/ 目录 | 每个文件是一个路由 |
| Rails | config/routes.rb | 阅读整个文件获取所有路由 |
| React Router | 搜索 createBrowserRouter 或 <Route | 带路径的路由定义 |
| Vue Router | src/router/index.js 或 router.js | 带路径定义的路由数组 |
| SvelteKit | src/routes/ 目录 | 每个包含 +page.svelte 的文件夹是一个路由 |
| Remix | app/routes/ 目录 | 基于文件的路由 |
| Laravel | routes/web.php | 路由定义 |
| Django | urls.py 文件 | URL 模式 |
| Express | 搜索 app.get、router.get | 路由处理器 |
重要：实际阅读这些文件，不要只检查它们是否存在。路由定义告诉你哪些页面可用于截图。
3.3：识别关键组件
查找代表可截图功能的组件：
- 仪表盘组件
- 具有独特 UI 的功能板块
- 表单和交互输入
- 数据可视化（图表、图形、表格）
- 模态框和对话框
- 导航和侧边栏
- 设置面板
- 用户资料板块
3.4：检查营销资产
查找暗示关键功能的现有营销内容：
- 落地页组件（通常在
components/landing/或components/marketing/中） - 功能列表组件
- 定价表