技能 screenshots
📸

screenshots

低風險 ⚙️ 外部命令🌐 網路存取📁 檔案系統存取

使用 Playwright 生成行銷截圖

為 Product Hunt、社群媒體或文件建立行銷品質的截圖非常耗時。此技能使用 Playwright 自動截取视网膜解析度的截圖。

支援: Claude Codex Code(CC)
⚠️ 68 差
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「screenshots」。 為我的 Next.js 應用程式在 localhost:3000 生成 5 張行銷截圖

預期結果:

已建立 screenshots 目錄並 capture 5 張 retina 品質的圖片：01-landing-hero.png、02-features-grid.png、03-dashboard-view.png、04-analytics-panel.png、05-settings-modal.png。所有檔案都是 2880x1800 解析度，可直接用於行銷。

正在使用「screenshots」。 截取點擊年度切換按鈕後的價格頁面截圖

預期結果:

導航至 /pricing，點擊年度計費切換按鈕，等待價格更新動畫，截取 pricing-annual.png，顯示更新後的價格顯示。

安全審計

低風險
v1 • 2/25/2026

Static analysis detected 83 pattern matches, but all are false positives. The SKILL.md file contains documentation and code examples for a legitimate Playwright screenshot tool. External commands are standard development tooling (npx, npm, node, mkdir). Network references are localhost examples in documentation. Filesystem operations create a screenshots directory for user output.

1
已掃描檔案
402
分析行數
6
發現項
1
審計總數
低風險問題 (3)
SKILL.md:24-26SKILL.md:158-160SKILL.md:283-285
External Command Execution
Skill executes shell commands for Playwright operations and file management. Commands are standard development tooling with hardcoded arguments.
SKILL.md:74-77
User Credential Collection
Skill prompts users for login credentials (email, password) to access authenticated pages for screenshots. Credentials are used in generated scripts.
SKILL.md:40-43
Localhost Network Access
Skill accesses localhost URLs provided by users for screenshot capture. This is expected behavior for a web app screenshot tool.

風險因素

⚙️ 外部命令 (5)
SKILL.md:24-26 SKILL.md:158-160 SKILL.md:283-285 SKILL.md:288-290 SKILL.md:361-364
🌐 網路存取 (1)
SKILL.md:40-43
📁 檔案系統存取 (1)
SKILL.md:158-160
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
31
社群
84
安全
91
規範符合性

你能建構什麼

Product Hunt 上市

生成 5-10 張英雄截圖，展示關鍵功能，用於您的 Product Hunt 上市頁面。

文件截圖

為使用者指南和教學文件建立一致的 UI 參考截圖。

社群媒體內容

製作出引人注目的功能演示截圖，針對 Twitter、LinkedIn 和其他社群平台進行優化。

試試這些提示

基本截圖請求 
為 Product Hunt 上市截取我的應用程式在 http://localhost:3000 的截圖。我需要 5 張截圖，展示儀表板、主要功能和設定頁面。
需要認證的應用程式截圖 
我的應用程式需要登入。登入頁面在 /sign-in。使用 email demo@example.com 和密碼 Demo123!。登入後，截取儀表板和使用者個人資料頁面。
全頁功能截圖 
截取價格頁面和功能頁面的全頁截圖（不僅僅是視窗）。在截取前等待 500ms 讓動畫完成。
深色和淺色模式變體 
生成登陸頁面的淺色和深色模式截圖。使用 1440x900 視窗和 2x retina 縮放，用於行銷。

最佳實務

  • 使用種子或演示資料以確保截圖顯示真實內容
  • 始終等待 networkidle 狀態以確保頁面完全載入
  • 在檔名中使用數字前綴以保持一致的排序

避免

  • 不要將含有敏感資料的截圖提交到版本控制
  • 避免截取含有個人使用者資料或憑證可見的截圖
  • 未經使用者明確確認，不要使用生產環境 URL

常見問題

我需要單獨安裝 Playwright 嗎？
是的。使用此技能前請執行 npm install -D playwright 或 npm install -D @playwright/test。
截圖的解析度是多少？
截圖使用 2x device scale factor 以 2880x1800 像素 capture，提供 retina 品質。
這個技能可以截取需要登入的應用程式截圖嗎？
可以。在提示時提供您的登入憑證，技能將在截取截圖前進行認證。
截圖儲存在哪裡？
截圖儲存在專案根目錄的 screenshots 目錄中，使用描述性的 kebab-case 檔名。
我可以截取深色模式的截圖嗎？
可以。如果您的應用程式支援深色模式，技能可以在截取前設定瀏覽器的色彩配置為深色。
如果我的開發伺服器沒有執行怎麼辦？
技能會偵測 Playwright 是否無法連線，並在繼續前協助您啟動開發伺服器。

開發者詳情

作者

sickn33

授權

MIT

儲存庫

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/screenshots

引用

main

檔案結構

📄 SKILL.md