Screenshot Creator

screenshot-creator スキル（シングルエージェント版）

エージェントチームは使わない。 以下の役割を1エージェントが順番に担当する: creative-director → copy-writer → screenshot-designer → spec-validator → quality-reviewer

⚠️ 既知の落とし穴（必読 — 毎回ハマる）

Step 0: シミュレータ準備（スクショ撮影前）

Dynamic Island を含むスクショはNG。 iPhone SE 3rd gen を使う。

# iPhone SE 3rd gen 起動（Dynamic Island なし・ノッチなし）
xcrun simctl boot CBA51D41-D404-4843-AA18-738C5068FFE4

# アプリインストール（build済み .app のパス）
xcrun simctl install CBA51D41-D404-4843-AA18-738C5068FFE4 /path/to/App.app

# スクショ撮影
xcrun simctl io CBA51D41-D404-4843-AA18-738C5068FFE4 screenshot /path/to/screen_home.png

万が一 iPhone 14+ のスクショを使う場合: Dynamic Island（上部185px）を Python でクロップ:

python3 -c "
from PIL import Image
for src, dst in [('/tmp/screen_home.png','/tmp/screen_home_clean.png'),('/tmp/screen_history.png','/tmp/screen_history_clean.png')]:
    img = Image.open(src)
    img.crop((0, 185, img.width, img.height)).save(dst)
    print(dst, img.crop((0,185,img.width,img.height)).size)
"

⚠️ クロップ後は必ず新しいファイル名で保存すること（Pencilが同一パスを再読みしないため）。

Step 1: ヒアリング

以下を確認する:

Step 2: スタイルガイド取得（Asian / Japanese テーマ）

mcp__pencil__get_style_guide を呼び出す。タグは 必ず以下を指定:

tags: ["japanese", "zen", "wellness", "minimal", "calm"]

スタイルガイドが返ってきたら、カラーパレット・フォント・背景色をメモする。 指定がない場合は CaptionArea ライトパターン（#F2F7F5 / #1A1A1A / #6B7B75）を使う。

Step 3: コピー作成（copy-writer 役割）

各スクリーンのヘッドライン + サブテキスト2行を決定する。

コピー原則

14文字を超えるヘッドラインは fontSize 22px でも内幅342pxに収まらない。 必ず14文字以内に収める。

ヘッドラインパターン（参考）

Step 4: .pen ファイル作成とデザイン構築（screenshot-designer 役割）

4-1. ドキュメント準備

// 新規ファイルが必要な場合
mcp__pencil__open_document("new")
// または既存パスを開く
mcp__pencil__open_document("/path/to/file.pen")

4-2. フレーム作成（iPhone 6.9" = 390×844pt）

親フレームに layout: "vertical" は必須。 これがないと CaptionArea と MockupArea が横並びになる。

// 1枚目
frame1=I("document", {type: "frame", name: "SS01_Hero", layout: "vertical", width: 390, height: 844, fill: "#F2F7F5"})
// 2枚目（右に配置）
frame2=I("document", {type: "frame", name: "SS02_Feature1", layout: "vertical", x: 430, width: 390, height: 844, fill: "#F2F7F5"})
// 3枚目
frame3=I("document", {type: "frame", name: "SS03_Feature2", layout: "vertical", x: 860, width: 390, height: 844, fill: "#F2F7F5"})

4-3. 各フレームにコンテンツを構築

構造（必須）:

フレーム（390×844, layout: vertical） ← layout: "vertical" 必須
├── CaptionArea（height: 160, layout: vertical, alignItems: center, justifyContent: center）
│   ├── headline（fontSize: 22, fontWeight: 700, textAlign: center, width: fill_container）← 22px・fill_container 必須
│   ├── sub1（fontSize: 16, textAlign: center, width: fill_container）
│   └── sub2（fontSize: 16, textAlign: center, width: fill_container）
└── MockupArea（height: 684, alignItems: center, justifyContent: center）
    └── PhoneMockup（width: 320, height: 640, cornerRadius: 44）
        └── image fill（実スクリーンショット必須 — AI生成禁止）

CaptionArea ライトパターン（デフォルト）:

captionArea=I(frame1, {type: "frame", layout: "vertical", alignItems: "center",
  justifyContent: "center", gap: 6, height: 160, padding: [40, 24, 12, 24], fill: "#F2F7F5"})

// ⚠️ width: "fill_container" は必須。これがないとテキストがフレーム外にはみ出す
headline=I(captionArea, {type: "text", content: "ヘッドライン",
  fontSize: 22, fontWeight: "700", textAlign: "center", fill: "#1A1A1A", width: "fill_container"})
sub1=I(captionArea, {type: "text", content: "サブテキスト1行目",
  fontSize: 16, textAlign: "center", fill: "#6B7B75", width: "fill_container"})
sub2=I(captionArea, {type: "text", content: "サブテキスト2行目",
  fontSize: 16, textAlign: "center", fill: "#6B7B75", width: "fill_container"})

MockupArea + PhoneMockup:

// alignItems + justifyContent で PhoneMockup を中央配置
mockupArea=I(frame1, {type: "frame", width: "fill_container", height: 684,
  alignItems: "center", justifyContent: "center", padding: [0, 35, 20, 35]})

// ⚠️ 実スクリーンショット必須（AI生成禁止）
// Step 0 で撮影した Dynamic Island なしのスクショを使う
phoneMockup=I(mockupArea, {type: "frame", width: 320, height: 640,
  fill: {type: "image", url: "/absolute/path/to/screenshot_clean.png", mode: "fill"},
  cornerRadius: [44, 44, 44, 44]})

4-4. 画像確認

各フレーム構築後に mcp__pencil__get_screenshot で目視確認する。

チェックリスト:

• ヘッドラインがフレーム内に収まっているか（左右にはみ出ていないか）
• CaptionArea → MockupArea の順で縦積みになっているか（横並びはNG）
• PhoneMockup内のアプリ画面に Dynamic Island（黒いピル）が映っていないか
• PhoneMockup の角が丸くクリップされているか

4-5. 禁止事項

Step 5: 技術仕様バリデーション（spec-validator 役割）

mcp__pencil__batch_get と mcp__pencil__snapshot_layout で以下を数値検証:

FAIL 項目は U("{nodeId}", {property: value}) で即修正する。

Step 6: 品質レビュー（quality-reviewer 役割）

mcp__pencil__get_screenshot で全フレームを確認し、10点満点でスコアリング:

合格基準: 7/10 以上。 7未満なら問題箇所を特定して修正する。

Step 7: PNG エクスポートとアップロード

get_screenshot はディスクに書かない。 base64 をMCPレスポンスで返すだけ。

正しいフロー:

1. Step 0 で撮影したシミュレータスクショ（例: /path/to/screen_home_clean.png）を直接使う
2. sips -z 2796 1290 で App Store 必須サイズ（1290×2796）にリサイズ:

# ⚠️ sips の引数順は height width（幅が先ではない）
cp /path/to/screen_home_clean.png /path/to/screen1.png
cp /path/to/screen_history_clean.png /path/to/screen2.png
cp /path/to/screen_paywall_clean.png /path/to/screen3.png

sips -z 2796 1290 /path/to/screen1.png
sips -z 2796 1290 /path/to/screen2.png
sips -z 2796 1290 /path/to/screen3.png

3. asc screenshots upload でアップロード（version-localization ID は asc-id-resolver スキルで取得）:

asc screenshots upload --version-localization <LOC_ID> --path /path/to/screen1.png --device-type APP_IPHONE_67
asc screenshots upload --version-localization <LOC_ID> --path /path/to/screen2.png --device-type APP_IPHONE_67
asc screenshots upload --version-localization <LOC_ID> --path /path/to/screen3.png --device-type APP_IPHONE_67

4. 報告フォーマット:

## スクリーンショット完成

.pen ファイル: {filePath}

| スクリーン | フレーム名 | フレームID | PNG |
|-----------|----------|---------|-----|
| SS01 | SS01_Hero | {id} | screen1.png |
| SS02 | SS02_Feature1 | {id} | screen2.png |
| SS03 | SS03_Feature2 | {id} | screen3.png |

spec-validator: 全10項目 PASS
quality-reviewer: {X}/10
ASC upload: 完了 ✅

出力成果物

• Pencil .pen ファイル（全スクリーンショット）
• 各フレームのノードID一覧
• コピーテキスト一覧（日本語）
• 技術仕様バリデーション結果（10項目 PASS/FAIL）
• 品質スコア（10点満点）

App Store スクリーンショット仕様

詳細は references/app-store-screenshot-specs.md を参照。

PhoneMockup レイアウトガイドライン

アスペクト比の一致（重要）

PhoneMockup のアスペクト比は 実際のスクリーンショット画像の比率と一致 させること。

CaptionArea とのバランス

CaptionArea を小さく、PhoneMockup を大きくして、アプリ画面をできるだけ多く見せる。

推奨シミュレータ（Dynamic Island なし）