古法编程

如何使用 AI 自动生成高质量的产品营销截图

解决产品发布时手动截图低效且质量不统一的问题：通过 AI 驱动 Playwright 自动化脚本，自动分析应用路由、处理登录验证并输出 2x Retina 高清营销截图。

为什么需要这个技能

在准备 Product Hunt 发布、社交媒体推广或编写官方文档时，高质量的界面截图至关重要。手动截图不仅耗时，且难以保证每张图的分辨率、比例和状态一致。

本技能让 AI 能够直接扫描你的代码库（如 Next.js、Vue 或 Rails），识别出核心功能页面，并调用 Playwright 模拟浏览器行为。通过设置 deviceScaleFactor: 2，AI 能生成真正的 HiDPI（视网膜）分辨率图像，确保在 4K 显示器或高清屏幕上依然锐利，无需手动调整。

适用场景

  • 产品发布：为 Product Hunt 或 App Store 快速生成一套完整的功能演示图。
  • 落地页优化：为 Landing Page 提供具有一致视觉风格的 UI 特性展示。
  • 技术文档：在 README 或官方文档中自动同步最新的 UI 界面截图。
  • 社交媒体推广：快速截取核心功能的亮点界面用于 X (Twitter) 或 LinkedIn 分享。

核心工作流

  1. 环境准备与 URL 确定：确认安装 playwright，并由 AI 检测开发服务器地址（如 localhost:3000）。
  2. 需求定义：通过交互确定截图数量（如 3-5 张或 10+ 张）、使用目的以及是否需要登录权限。
  3. 代码库分析：AI 扫描 README.md、路由配置文件（如 app/ 目录或 routes.rb）以及核心组件，自动构建一份“功能-路径-状态”映射表。
  4. 执行自动化脚本：AI 生成并运行一个 Node.js 脚本，实现以下关键配置：
    • HiDPI 设置：deviceScaleFactor: 2 确保高清。
    • 视口控制：统一设置为 1440x900。
    • 智能登录：利用智能定位器自动填充凭据并进入私有页面。
    • 精准捕获：支持全屏截取或通过 CSS 选择器截取特定元素。
  5. 结果验证：自动检查生成文件的像素尺寸与路径，输出清单供用户确认。

下载和安装

下载 screenshots 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐