screenshots

此技能利用 Playwright 以程序化方式捕获您的 Web 应用程序的高分辨率营销截图。专为开发人员、产品经理和营销人员设计，无需手动干预即可为 Product Hunt 发布、社交媒体营销活动、落地页首屏或技术文档制作一致的视觉资产。通过自动化浏览器状态（包括身份验证、视口大小调整和元素聚焦），此技能确保截图在整个视觉系列中保持统一、专业的“Retina”质量。

• 自动检测并配置 Playwright，设置 deviceScaleFactor: 2 以实现真正的 HiDPI/Retina 输出。
• 智能地爬取路由配置（Next.js、Rails、React Router、Vite 等）以映射和发现可截图的功能页面。
• 支持多步骤身份验证工作流，以捕获“登录”状态视图，包括敏感的仪表板和特定用户设置。
• 提供可配置的截图数量和针对社交媒体、产品发布和文档的特定使用场景预设。
• 与代码库集成，识别关键 UI 组件（如数据可视化、表单、模态框和落地页区段）以进行针对性快照。
• 提供结构化的规划阶段，AI 在开始生成前会呈现发现的功能以供用户确认。

使用注意事项与限制：

• 需要在环境中安装 Playwright；技能会使用 npm 或 npx 命令进行预检。
• 最适合具有明确路由结构的应用程序；若路由高度动态或过度依赖第三方集成，可能需要手动调整选择器。
• 捕获身份验证状态时，请确保测试凭据或模拟数据可用，以避免未经授权的访问错误。
• 输出文件会保存至本地 /screenshots 目录；请确保您的环境具有必要的写入权限。
• 默认视口大小为 1440x900，但可根据需要调整以适应手机或平板电脑的响应式要求。