메뉴
iOS アプリの App Store 用スクリーンショットを実シミュレータキャプチャとデバイスフレーム合成で自動生成する。「ストアスクリーンショット」「/store-screenshot」などで自動適用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | store-screenshot |
| description | iOS アプリの App Store 用スクリーンショットを実シミュレータキャプチャとデバイスフレーム合成で自動生成する。「ストアスクリーンショット」「/store-screenshot」などで自動適用。 |
iOS/macOS アプリの App Store 用スクリーンショットを自動生成する。 実際のシミュレータスクリーンショットをデバイスフレーム + テキストオーバーレイと合成して App Store 仕様の PNG を出力する。
store-assets/raw/ に保存screen フィールドは生スクリーンショットの絶対パスxcrun simctl が使えること| 属性 | 内容 |
|---|---|
| 専門性 | App Store スクリーンショットの ASO 最適化、シミュレータスクリーンショット撮影、合成レンダリング |
| 権限 | store-craft.config.json 生成、シミュレータ操作、PNG レンダリング実行 |
| 責任 | 実際のアプリ UI に基づく高品質 App Store スクリーンショットの生成 |
対象アプリをシミュレータで起動し、実画面をキャプチャして、ASO 最適化されたスクリーンショットセットを生成する。
screen フィールドが実 PNG パスを指しているENGINE_DIR="$(find ~/.claude/plugins/cache/store-craft -type d -name engine | head -1)"
if [ ! -d "${ENGINE_DIR}/node_modules" ]; then
cd "${ENGINE_DIR}" && npm install && npx playwright install chromium
fi
screenshot-designer エージェントを起動し、対象アプリを分析する。
Agent(subagent_type: "store-assets:screenshot-designer")
prompt: |
対象アプリ: {app_path}
分析してスクリーンショット構成案を出力してください。
どの画面をキャプチャすべきか、画面への遷移方法を含めてください。
エージェントの出力:
対象アプリをシミュレータでビルド・起動し、各画面をキャプチャする。
キャプチャ方法（優先順位）:
xbm-run でアプリ起動 → xbm-ui-verify で画面遷移・スクリーンショットxcrun simctl io booted screenshot {output.png}保存先: {project}/store-assets/raw/
store-assets/
├── raw/ # 生スクリーンショット（シミュレータから直接キャプチャ）
│ ├── 01_hero.png
│ ├── 02_chat.png
│ ├── 03_skills.png
│ └── ...
├── screenshots/ # 合成スクリーンショット（最終出力）
└── store-craft.config.json
撮影の注意点:
xcrun simctl status_bar booted override --time "9:41"各エントリの screen フィールドに 生スクリーンショットの絶対パス を設定する。
{
"app": { "name": "アプリ名", "tagline": "キャッチコピー" },
"devices": ["iphone-6.9"],
"theme": "ocean",
"locale": "ja",
"screenshots": [
{
"id": "hero",
"order": 1,
"headline": "メインキャッチコピー",
"subtext": "サブテキスト",
"textPosition": "top",
"screen": "/absolute/path/to/store-assets/raw/01_hero.png"
}
],
"outputDir": "./store-assets/screenshots"
}
エンジンの render スクリプトで生スクリーンショットをデバイスフレーム + テキスト + 背景と合成する。
cd "${ENGINE_DIR}"
npx tsx src/render.ts --config "${PROJECT_DIR}/store-craft.config.json"
生成された合成 PNG を確認し、テキストやテーマを調整する。
store-assets/raw/*.png — 生スクリーンショット（シミュレータキャプチャ）store-assets/screenshots/*.png — 合成スクリーンショット（最終出力、1320×2868）store-craft.config.json — スクリーンショット設定Do:
Don't:
App Store アセットの ASO 品質を LLM-as-Judge 方式で 5 軸定量評価する。スクリーンショット・メタデータ・Apple ガイドライン準拠を 100 点満点で採点し改善提案を出力。「ストア評価」「ASO評価」「/store-evaluate」などで自動適用。
App Store アイコンを SVG 設計から 1024x1024 PNG に変換して生成する。Apple HIG 準拠。「ストアアイコン」「/store-icon」などで自動適用。
App Store メタデータ（タイトル・サブタイトル・キーワード・説明文）を日本語 ASO 原則に基づいて最適化生成し fastlane/metadata/ に出力する。「ストアメタデータ」「ASO メタデータ」「/store-metadata」などで自動適用。
ASO 評価結果に基づきスクリーンショットのコピーとメタデータを CVR インパクト順に改善し Before/After 比較レポートを出力する。「ストア最適化」「ASO最適化」「/store-optimize」などで自動適用。
store-craft エンジンの開発サーバーを起動しブラウザでスクリーンショットをプレビューする。「ストアプレビュー」「/store-preview」などで自動適用。