From screenshot-creator
Generates App Store/Google Play promotional screenshots in Pencil (.pen) format using 5-agent team for strategy, Pencil design, copywriting, spec validation, and quality review. Use for app promo images.
npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin screenshot-creatorThis skill uses the workspace's default tool permissions.
以下を確認する(不明ならユーザーに質問):
Generates iOS App Store and Google Play screenshots using each::sense AI, with device frames, feature highlights, localized versions, and promotional visuals optimized for store requirements.
Generates Next.js pages for creating and exporting App Store/Google Play marketing screenshots as advertisements for iOS/Android apps using html-to-image across phones, tablets, and feature graphics.
Generates production-ready App Store screenshots for iOS apps by scaffolding Next.js + Tailwind + TypeScript project, designing ad-style slides, and exporting PNGs at Apple resolutions.
Share bugs, ideas, or general feedback.
以下を確認する(不明ならユーザーに質問):
ユーザーがアプリの実際のスクリーンショット(PNG/JPG)を提供した場合:
new)では相対パスが解決できないため、
mcp__pencil__open_document で既存ファイルを開くか、保存先を確定させる// 絶対パスで配置(.pen が未保存でも動作する - 推奨)
mockup=I(mockupArea, {type: "frame", width: 320, height: 520,
fill: {type: "image", url: "/Users/xxx/project/screenshots/top.png", mode: "fill"},
cornerRadius: [40, 40, 40, 40]})
// 相対パスで配置(.pen ファイルが保存済みの場合のみ)
mockup=I(mockupArea, {type: "frame", width: 320, height: 520,
fill: {type: "image", url: "./screenshots/top.png", mode: "fill"},
cornerRadius: [40, 40, 40, 40]})
mode: "fill" - フレームを埋めるように配置(推奨)mode: "fit" - フレーム内に収まるように配置mode: "stretch" - 引き伸ばし(非推奨)new)でも確実に動作する注意:
G()操作(AI生成/Stock画像)と image fill(ローカルファイル)は使い分ける。 実スクリーンショットがある場合は image fill を優先使用する。
iOS シミュレーターのスクリーンショットには macOS のタイトルバー・ツールバーが含まれることがある。 PhoneMockup に配置する前に必ずシミュレーター枠を除去すること。
除去手順(リーダーが実行):
# Python (PIL) でシミュレーター枠を自動除去
from PIL import Image
img = Image.open("screenshot.png")
w, h = img.size
# シミュレーター chrome を検出: 上部の連続する灰色行(RGB 20-80)を除去
crop_top = 0
found_black = False
for y in range(min(100, h)):
pixels = [img.getpixel((x, y))[:3] for x in range(w//4, 3*w//4, 8)]
avg = sum(sum(p)/3 for p in pixels) / len(pixels)
if avg < 5:
found_black = True
elif found_black and 15 < avg < 90:
crop_top = y + 1 # ツールバー行
elif found_black and avg >= 90:
break
elif not found_black and avg > 15:
crop_top = y + 1 # タイトルバー行
cropped = img.crop((0, crop_top, w, h))
cropped.save("screenshot_clean.png")
TeamCreate で screenshot-creator チームを作成。
以下 5 エージェントを 1つのメッセージで並列に Task ツールで起動する。
| name | 役割 | 主な手段 |
|---|---|---|
creative-director | 戦略立案・ディレクション | WebSearch(MCP不使用) |
screenshot-designer | Pencil でビジュアル構築 | Pencil MCP (batch_design, get_screenshot) |
copy-writer | キャッチコピー・説明文 | WebSearch |
quality-reviewer | 品質レビュー・スコアリング | Pencil MCP (get_screenshot, batch_get) |
spec-validator | 技術仕様の数値検証 | Pencil MCP (batch_get, snapshot_layout, get_screenshot) |
TaskCreate で 6 つのタスクを作成:
addBlockedBy: ["1", "2"])addBlockedBy: ["3"])addBlockedBy: ["3"])addBlockedBy: ["4", "5"])Note: spec-validator(技術検証)と quality-reviewer(デザイン評価)は 並列実行 される。 spec-validator は数値ベースの仕様違反を検出し、quality-reviewer は主観的なデザイン品質を評価する。 両者の結果が揃ってから最終確認に進む。
MCP ツール使用エージェント(screenshot-designer, quality-reviewer, spec-validator):
subagent_type: "general-purpose"
team_name: "screenshot-creator"
mode: "bypassPermissions"
run_in_background: true
プロンプトに agents/screenshot-designer.md(または quality-reviewer.md / spec-validator.md)の内容を全文含めること。
MCP ツール不使用エージェント(creative-director, copy-writer):
subagent_type: "screenshot-creator:{role-name}"
team_name: "screenshot-creator"
mode: "bypassPermissions"
run_in_background: true
全エージェント共通でプロンプトに含める情報:
コピーは チーム内で十分に議論・検討してから ユーザーに提案する。 いきなりユーザーに聞くのではなく、エージェント間で案を練り上げた上で選択肢を提示する。
Phase 1: チーム内ブレスト(エージェント間 SendMessage)
Phase 2: ユーザー確認(リーダー経由)
AskUserQuestion でユーザーに選択肢を提示:
Phase 3: 確定・配置
フロー図:
copy-writer ←→ creative-director ←→ quality-reviewer (Phase 1: チーム議論)
↓
copy-writer → リーダー → AskUserQuestion → ユーザー (Phase 2: ユーザー確認)
↓
copy-writer → screenshot-designer (Phase 3: 確定・配置)
copy-writer が自律的に判断してよい項目:
alignItems: "center" か / textAlign: "center" か / headline の fontSize ≥ 30 かリーダーが以下を確認:
shutdown_request を送信TeamDelete でチーム削除最終確認後、以下の手順で PNG エクスポートする。
⚠ 重要:
export_nodesのデフォルト scale は 2(@2x)。App Store には @3x が必要。scale: 3を必ず指定すること。 scale: 2 だと 856×1852px になり、App Store に提出できない。
clip: true を設定PhoneMockup のドロップシャドウがフレーム外にはみ出し、エクスポート画像のサイズがフレームサイズより大きくなる。
エクスポート前に必ず全フレームに clip: true を設定する:
U("frame1Id", {clip: true})
U("frame2Id", {clip: true})
U("frame3Id", {clip: true})
batch_get で全フレームの ID と name を取得する:
mcp__pencil__batch_get:
filePath: "path/to/file.pen"
patterns: [{"type": "frame", "name": "SS"}]
searchDepth: 1
結果から id:name マッピングを作成する:
b4SOM:SS01_Hero dBSNw:SS03_Result SM4Ui:SS04_Template
dhs8L:SS01_Hero_EN WG7lQ:SS03_Result_EN eE2yT:SS04_Template_EN
...
export_nodes を言語グループごとに呼び出す。scale: 3 を必ず指定:
mcp__pencil__export_nodes:
filePath: "path/to/file.pen"
outputDir: "/tmp/pencil-export"
nodeIds: ["b4SOM", "dBSNw", "SM4Ui", ...]
format: "png"
scale: 3 ← 必須!デフォルトの 2 では App Store サイズにならない
export_nodes はノード ID をファイル名にする(例: b4SOM.png)。
付属スクリプトでフレーム名にリネームし、言語別フォルダに整理し、サイズを検証する:
scripts/export-screenshots.sh /tmp/pencil-export ./exported \
b4SOM:SS01_Hero dBSNw:SS03_Result SM4Ui:SS04_Template \
dhs8L:SS01_Hero_EN WG7lQ:SS03_Result_EN eE2yT:SS04_Template_EN \
mKJ5F:SS01_Hero_ZH BEODM:SS03_Result_ZH rwu06:SS04_Template_ZH \
sKzRu:SS01_Hero_KO HYsfY:SS03_Result_KO 0utRp:SS04_Template_KO
スクリプトの動作:
b4SOM.png → SS01_Hero.png)_EN → EN/、_ZH → ZH/、_KO → KO/、なし → JP/)出力ディレクトリ構造:
exported/
JP/SS01_Hero.png
JP/SS03_Result.png
JP/SS04_Template.png
EN/SS01_Hero.png
EN/SS03_Result.png
...
| フレームサイズ | @3x エクスポート | App Store サイズ |
|---|---|---|
| 428 × 926 pt | 1284 × 2778 px | iPhone 6.5" ✓ |
| 430 × 932 pt | 1290 × 2796 px | iPhone 6.7" ✓ |
| 440 × 956 pt | 1320 × 2868 px | iPhone 6.9" ✓ |
clip: true を忘れるとシャドウ分だけ画像が大きくなり、App Store に提出できない。 scale: 3 を忘れると @2x(856×1852px)になり、App Store に提出できない。
App Store は言語ごとに異なるスクリーンショットを登録できる。 日本語版を作成後、C()(コピー)操作でフレームを複製し、CaptionArea のテキストのみ差し替えることで効率的に多言語版を作成できる。
ユーザーに対応言語を確認する。一般的な構成:
1. 日本語版フレームを C() で複製:
// 英語版(y を下にずらして配置)
en_hero=C("ja_heroFrameId", document, {
name: "SS01_Hero_EN",
x: 0, y: 960,
placeholder: true,
descendants: {
"captionAreaId/headlineId": {content: "Set Your Packing List"},
"captionAreaId/subtextId": {content: "Never forget your things"}
}
})
placeholder: true でコピーし、テキスト差し替え後に U(id, {placeholder: false}) で解除descendants で CaptionArea 内のテキストノードのみ差し替え(PhoneMockup の画像はそのまま)2. 全言語を一括でコピー:
1回の batch_design で全言語×全スクリーンを同時にコピーできる(最大25操作/回)。
3画面×3言語 = 9操作なら1回で完了。
3. placeholder 解除:
U("en_heroId", {placeholder: false})
U("en_resultId", {placeholder: false})
// ...全フレーム
4. get_screenshot で各言語を目視確認
フレーム名に言語サフィックスを付ける:
SS01_Hero → SS01_Hero_EN, SS01_Hero_ZH, SS01_Hero_KOSS03_Result → SS03_Result_EN, SS03_Result_ZH, SS03_Result_KO言語ごとにフォルダを分けてエクスポートする:
product/screenShot/export/ja/ ← 日本語版
product/screenShot/export/en/ ← 英語版
product/screenShot/export/zh/ ← 中国語版
product/screenShot/export/ko/ ← 韓国語版
PhoneMockup フレームのアスペクト比は、実際のスクリーンショット画像の比率と一致させること。
比率がズレると fill モードで画像の上下・左右がクリップされ、アプリ画面の一部が見切れる。
手順:
sips -g pixelWidth -g pixelHeight <image> で確認| 項目 | 値 |
|---|---|
| 推奨 PhoneMockup サイズ | 320 × 640(比率 0.50、一般的なシミュレータスクショに対応) |
| iPhone 標準比率 | 約 0.46(390 / 844) |
| シミュレータスクショ比率 | 約 0.50(864 / 1723) |
| NG 例 | 350 × 600(比率 0.58 → 上下が大きくクリップ) |
| NG 例 | 300 × 660(比率 0.45 → 画像比率 0.50 と不一致で左右クリップ) |
フレーム全体内での推奨配分:
iPhone 6.5"(デフォルト: 428 × 926 pt):
| エリア | 2行構成 | 3行構成 | 備考 |
|---|---|---|---|
| CaptionArea | 130pt | 160pt | padding: [30, 24, 12, 24] |
| MockupArea | 残り(796pt) | 残り(766pt) | PhoneMockup + 余白 |
MockupArea の背景色は CaptionArea と同じ #F2F7F5 に統一すること。
別の色(例: #E8EFED)を使うと色の境目が目立ち、デザインが分断される。
原則: CaptionArea を小さく、PhoneMockup を大きくして、アプリ画面をできるだけ多く見せる。
テキストは短く、中央揃えで配置する。2行構成 or 3行構成をユーザーに確認する。
構成A(2ノード — 推奨):
構成B(3ノード):
CaptionArea カラーパターン(2種類):
| パターン | 背景 | ヘッドライン | サブテキスト | ロゴ |
|---|---|---|---|---|
| ライト(推奨) | #F2F7F5 | #1A1A1A | #4A5A54 | rgba(0,0,0,0.2) |
| ダーク | #2D6B5E | #FFFFFF | #FFFFFF | rgba(255,255,255,0.5) |
ルール:
alignItems: "center", justifyContent: "center" で中央配置textAlign: "center" で中央揃え\n 改行は使わない(縦長になるため)— 行を分けるには別テキストノードにするI() で CaptionArea にテキストノードを追加すると末尾(logo・accent の後)に配置される。必ず M() で正しい位置(headline の直後)に移動することコピーの書き方:
各エージェントの責務:
| エージェント | テキストに関する責務 |
|---|---|
| copy-writer | ヘッドライン + サブテキスト2行のコピーを作成。短く・ベネフィット重視・中央揃えで映える文を提供 |
| screenshot-designer | copy-writer のコピーを CaptionArea に 3 ノード構成で配置。fontSize・fill・textAlign を設定 |
| spec-validator | テキストノード数 ≤ 3 / alignItems: "center" / textAlign: "center" / headline fontSize ≥ 30 を数値検証 |
| quality-reviewer | コピーの簡潔さ・インパクト・ベネフィット訴求・全スクリーン間の一貫性を主観評価 |
CaptionArea ノード構成例(2行構成 — 推奨):
captionArea=I(frame, {type: "frame", layout: "vertical", alignItems: "center",
justifyContent: "center", gap: 6, height: 130, padding: [30, 24, 12, 24], fill: "#F2F7F5"})
headline=I(captionArea, {type: "text", content: "持ち物メモをセット",
fontSize: 32, fontWeight: "700", textAlign: "center", fill: "#1A1A1A"})
sub1=I(captionArea, {type: "text", content: "忘れ物はもうしない",
fontSize: 18, textAlign: "center", fill: "#4A5A54"})
CaptionArea ノード構成例(3行構成):
captionArea=I(frame, {type: "frame", layout: "vertical", alignItems: "center",
justifyContent: "center", gap: 6, height: 160, padding: [40, 24, 12, 24], fill: "#F2F7F5"})
headline=I(captionArea, {type: "text", content: "悩みを書くだけ",
fontSize: 32, fontWeight: "700", textAlign: "center", fill: "#1A1A1A"})
sub1=I(captionArea, {type: "text", content: "テキストを入力して",
fontSize: 18, textAlign: "center", fill: "#4A5A54"})
sub2=I(captionArea, {type: "text", content: "ボタンを押すだけでOK",
fontSize: 18, textAlign: "center", fill: "#4A5A54"})
以下は絶対に守ること:
snapshot_layout で problems が空であることを確認)mode: "fill" 使用時は、画像の実際の比率と PhoneMockup の比率を一致させる検証手順:
snapshot_layout で PhoneMockup の problems フィールドを確認 → 空であることget_screenshot で PhoneMockup の角丸が完全に表示されていることを目視確認これらは spec-validator の検証項目にも含まれる。FAIL 時は screenshot-designer に即修正を依頼する。