メニュー
Use when creating product screenshots for marketing pages and app stores. Covers the staging (real data vs sample), the device frame, callouts, and how to keep screenshots fresh across product changes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill product-screenshot-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when designing 404 pages and the broader empty-state pattern library. Covers tone, illustration, search recovery, and the difference between 'no data yet' and 'this URL doesn't exist'.
Use when designing A/B tests. Covers hypothesis-driven testing, sample-size calculation, the test-design template, and the cultural rituals that make testing productive.
Use when shipping any user-facing UI. Covers the non-negotiable accessibility baseline: contrast, focus states, semantic HTML, keyboard navigation, screen-reader support, motion preferences. The minimum to avoid embarrassment and ADA risk.
SOC 職業分類に基づく
SKILL.md を表示中
| name | product-screenshot-design |
| description | Use when creating product screenshots for marketing pages and app stores. Covers the staging (real data vs sample), the device frame, callouts, and how to keep screenshots fresh across product changes. |
Real product screenshots build trust. Stylized illustrations of the product look fake.
Actual product screenshots > 3D mockups. Show the real UI. Buyers can tell the difference.
Use realistic sample data. NOT 'Lorem ipsum' or 'Customer 1'. Real-sounding names, dates, numbers.
Optional. Modern preference: borderless. If using a frame, use a current device (current MacBook, not 2017).
Arrow + caption pointing at specific UI elements. Use sparingly (1-2 per screenshot). Don't clutter.
Screenshots become stale when product changes. Plan to refresh quarterly. Mark screenshot date in alt text for tracking.
Lorem-ipsum data. Old screenshots showing deprecated UI. 8 callouts on one image. Vector mockups that don't match real product.
Applied across the X3 Compass design system.