mcpField
P
product-shots-social-post

product-shots-social-post

github.com/motifulマーケティング・グロース121137 回インストール20 週間前に更新
リポジトリ

product-shots-social-post について

product-shots-social-postは、フィード、ストーリー、リール、カルーセルなど、各プラットフォームに適したビジュアルを設計するスキルです。形式の制約、業界別プリセット、段階的なワークフローと必須のセルフチェックを組み合わせます。

主な機能

  1. 019種類のソーシャル形式
  2. 027種類の業界別ビジュアルプリセット
  3. 03プラットフォーム別の寸法と安全領域
  4. 047段階のデザインワークフロー
  5. 05カルーセルの一貫性アンカー
  6. 0614項目のセルフチェック

活用シーン

  1. 01プラットフォームに合うフィード投稿の設計
  2. 02一貫したビジュアルのカルーセル作成
  3. 03ストーリーやリールカバーの案出し
  4. 04納品前のソーシャルビジュアル確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/motiful/product-shots --skill product-shots-social-post

インストール後、Claude Code で/product-shots-social-postを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
carousel-framework.md
grid-and-caption.md
hard-constraints.md
industry-dna.md
workflow-and-self-check.md

詳細

ソーシャル投稿

Instagram、TikTok、Facebook、Pinterest、RedNote、LinkedIn、X/Twitterなどのソーシャルプラットフォーム向けに、9つの標準フォーマット、7つの業界別ビジュアルDNAプリセット、7ステップのワークフロー、スライド間の一貫性を固定するカルーセルフレームワーク、セルフ監査ゲートを組み合わせて、プラットフォームに適したビジュアル(フィード、ストーリー、リール、カルーセル)をデザインします。各出力では、デザインの説明、任意のキャプション、セルフチェックのスコアを生成します。

フォーマット分類(フィード正方形 1:1/フィード縦長 4:5/ストーリー 9:16/リールカバー 9:16/カルーセル 4:5/その他)は、Instagram、TikTok、Facebook、RedNote、Pinterestでそのまま共通して使えます。同じアスペクト比が、これらすべてのプラットフォームの標準フォーマットです。プラットフォーム固有のセーフゾーン調整については、references/hard-constraints.mdを参照してください。

エンゲージメントの原則

以下のルールは、すべてのセクションに適用されます。作業を始める前にお読みください。

  1. 最初にサイズを確定する — すべてのリクエストを、幅×高さとアスペクト比が明示された9つのフォーマットのいずれかに割り当てます。フォーマットが決まるまで作業は行いません。
  2. 構図より先に業界DNAを確認する — ユーザーの業界を7つのプリセットのいずれかに合わせ、プロンプトパッチ、構図、色、ライティング、よくあるエラーをひとまとまりとして読み込みます。
  3. 制約の優先順位を守る — ハード制約(セクション0)>業界ルール(セクション1)>ユーザーの希望>モデルのデフォルト設定。ユーザーが色を指定した場合は、業界のデフォルト設定よりユーザーの指定を優先します。
  4. カルーセルの一貫性はスライドごとに繰り返す — 一貫性アンカーは一度だけ宣言するのではなく、各スライドのプロンプト冒頭に一字一句同じ形で繰り返します。
  5. 納品前にセルフ監査を必ず行う — すべての出力で14項目のチェック(セクション4)に合格し、7行のセルフチェックのスコアを出力します。
  6. 禁止語は生成用プロンプトから除外する — プラットフォーム名、UI用語、スクリーンショット用語、ブランドツール名を画像モデルに渡してはいけません。これらは内部でのフォーマット選択と業界の照合にのみ使用します。
  7. ユーザーの言語に合わせる — ユーザーが英語で書いた場合は英語で、中国語で書いた場合は中国語で応答します。求められていない限り、言語を切り替えないでください。
  8. 選択肢の提示には<suggestion>を使う — プラットフォーム、フォーマット、業界の選択肢を提示する際は、<suggestion>タグで囲みます。一度に複数の質問をしてはいけません。

実行手順

generate_social_visual(user_request) → design_description + caption + self_check + image

# Step 0 — Pin hard constraints (MUST, before any decision)
load references/hard-constraints.md
    → Dimensions table / Safe Zones / Text Overlay Rules / Design Quality Baseline / Banned Words
keep these in working context for Steps 1, 5, 6 — violation produces fake UI artifacts,
watermarks, occluded CTAs, or platform-policy breaks.
preflight = enforce_constraints(format=null, output_text=null, prompt_text=user_request)
                                              # references/hard-constraints.md
                                              # pre-flight banned-word scan on the user request
assert preflight.pass

# Step 1 — Confirm Format and Scenario (lock dimensions first)
format = resolve_format(user_request)         # references/hard-constraints.md §Default Format Selection
    if user specified format → use it
    else apply default scenario logic:
        single image content       → Feed Portrait 4:5
        multi-page knowledge       → Carousel 4:5
        short-lived / ad           → Story 9:16
        short-video cover          → Reel Cover 9:16
dimensions, ratio, safe_zone = lookup(format) # references/hard-constraints.md

# Step 2 — Identify Industry (auto-load Visual DNA)
industry_bundle = load_industry_dna(user_request)
                                              # references/industry-dna.md
                                              # returns {prompt_patch, composition, color,
                                              # lighting, common_errors, ig_references}
                                              # on no_match → closest industry as base + adjust

# Step 3 — Define Engagement Goal
goal = SHARE | SAVE | COMMENT
    if user specified → use it
    else infer from content type:
        education / how-to     → SAVE
        lifestyle / humor      → SHARE
        opinion / debate       → COMMENT

# Step 4 — Define the Hook (3-Second Rule)
hook_type = Bold Claim | Curiosity Gap | Visual Shock
    drives Slide-1 design (Carousel) or headline strategy (single image)

# Step 5 — Composition + Color (Industry × Format cross-decision)
composition = industry_bundle.composition + safe_zone constraints
color       = brand_color (if exists, overrides) or industry_bundle.color
lighting    = industry_bundle.lighting
text        = format.text_overlay_rule (references/hard-constraints.md §Text Overlay)
if format == Carousel:
    slides = build_carousel(content, hook_type, industry_bundle, brand_color, goal)
                                                                              # references/carousel-framework.md

# Step 6 — Self-Check Gate (mandatory)
audited_output = run_workflow(user_request)
                                              # references/workflow-and-self-check.md
                                              # runs Section 2 steps + Section 4 14-item audit
findings = enforce_constraints(format, audited_output.output_text, audited_output.prompt_text)
                                              # references/hard-constraints.md
                                              # re-validates sizing, safe zone, overlay, quality, banned words
assert findings.pass
    if any item fails → revise prompt, regenerate
    if all pass       → emit self_check score block

# Step 7 — Iterative Refinement
on user satisfied → offer style variants / cross-platform adaptation / Carousel expansion / caption (if absent)
on user request   → adjust color / composition / style / format / hook (supports local edit, no full regen)

# Output assembly + dispatch image generation
grid_strategy, caption = finalize_grid_and_caption(format, user_caption, brand_account_context)
                                              # references/grid-and-caption.md
emit design_description (6 items per references/workflow-and-self-check.md §Section 6)
emit caption — separate text block, never rendered into image
emit self_check_score (7-line block)

image = Skill("product-shots-image-gen",
              f"generate: {rendered_prompt} | format={format} | aspect={ratio}")
# Do NOT substitute with direct API call.
assert image.delivered

モジュールファイルの目次

  • references/hard-constraints.md — セクション0(サイズ/セーフゾーン/テキストオーバーレイ/品質基準)+セクション9(プロンプトの禁止語)。必須レベル。EPのステップ0で読み込みます。
  • references/industry-dna.md — セクション1:7つの業界 × 6つの項目(プロンプトパッチ、構図、色、ライティング、よくあるエラー、ソーシャルの参考例)。
  • references/carousel-framework.md — セクション3:7スライドフレームワーク+スワイプ心理+ビジュアルの一貫性とタイポグラフィ(スライド間アンカーテンプレート)。
  • references/workflow-and-self-check.md — セクション2(コアワークフローの7ステップ)+セクション4(よくあるミスのセルフ監査、14項目)+セクション6(出力形式)。
  • references/grid-and-caption.md — セクション5(フィードのグリッド美学、5つの戦略)+セクション7(キャプションとコピーライティング。ソーシャルキャプションのペルソナを含む)。

セクション一覧

Goal
Language Rule
0. Hard Constraints                            → references/hard-constraints.md
  Dimensions / Safe Zones / Text Overlay / Quality Baseline
1. Industry Visual DNA                          → references/industry-dna.md
  1.1 Beauty / 1.2 Fashion / 1.3 Tech / 1.4 Lifestyle
  1.5 Travel / 1.6 Food / 1.7 Fitness
2. Core Workflow                                → references/workflow-and-self-check.md §Workflow
  Step 1: Confirm Format and Scenario — Lock Dimensions First
  Step 2: Identify Industry — Auto-Load Visual DNA
  Step 3: Define Engagement Goal
  Step 4: Define the Hook — 3-Second Rule
  Step 5: Composition and Color — Industry × Format Cross-Decision
  Step 6: Self-Check Gate
  Step 7: Iterative Refinement
3. Carousel Standards (Applies when format = Carousel) → references/carousel-framework.md
  A. The 7-Slide Framework
  B. Swipe Psychology
  C. Visual Consistency and Typography
4. Common Mistakes and Self-Audit (Mandatory Gate)    → references/workflow-and-self-check.md §Self-Audit
5. Feed Grid Aesthetics                               → references/grid-and-caption.md §Grid
  Common Grid Strategies / Grid Rules
6. Output Format                                       → references/workflow-and-self-check.md §Output Format
  Design Description (6 Items) / Caption / Self-Check Score
7. Caption & Copywriting                               → references/grid-and-caption.md §Caption
  In-Image Text vs. Caption / Caption Logic / Social Caption Persona
8. Prompt Banned Words — Prevent Artifacts / Watermarks / Screenshot Look
                                                       → references/hard-constraints.md §Section 9
IMPORTANT!Suggestion

目標

Instagram、TikTok、Facebook、Pinterest、RedNote、LinkedIn、X/Twitter向けに、プラットフォームに適したビジュアル(フィード、ストーリー、リール、カルーセル)をデザインします。各プラットフォームに合ったサイズとセーフゾーン、7つのビジュアルDNAプリセットに沿った業界適合性、エンゲージメントの最適化(SHARE/SAVE/COMMENT)、グリッドの一貫性(フィード全体の調和)を実現します。すべての出力で14項目のセルフ監査に合格し、7行のセルフチェックのスコアを出力します。

言語ルール

Always respond in the user's language.
IF user writes in English THEN respond in English
IF user writes in Chinese THEN respond in Chinese
NEVER switch language unprompted.

重要 — 選択肢の形式

IMPORTANT!Suggestion:
Always use <suggestion> format to guide the user.
Do not ask several questions at once.

Example: use <suggestion> format to provide options like
Instagram / TikTok / Facebook / Pinterest / RedNote / LinkedIn / X (Twitter) / Other platform.

これはフロントエンドのレンダリング指示です。選択肢は<suggestion>タグで囲み、UI上でクリック可能なチップとして表示します。

スキル間の注意事項

  • 上流ルーター:asset_type ∈ {post, carousel, feed, story, reel} かつ is_promotion != True の場合、オーガニックソーシャル分岐では product-shots からここにルーティングされます。プロモーション/広告クリエイティブのリクエストは、代わりに product-shots-ad-creative にルーティングされます。
  • 業界別ビジュアル DNA プリセット(7 業界)は、product-shots および product-shots-ad-creative と共有されます(スキル間の一貫性)。
  • 関連スキル:product-shots-main-image/product-shots-detail-page(Amazon の商品画像/商品詳細ページ画像)は、ソーシャル投稿に転用できるソースアセットを生成できます。product-shots-multi-angle(モデルの9アングルシリーズ)は、ソーシャルカルーセル向けに再構成できるファッションルックブックのコンテンツを生成します。product-shots-ad-creative は、有料プロモーション/広告目的のクリエイティブを扱い、プラットフォームによる削除リスクのルールに対応します。
  • 画像生成バックエンド:レンダリングされたプロンプトは、基盤となる API(OmniMaaS/OpenAI/Gemini)を抽象化する product-shots-image-gen(product-shots の画像生成エンジン)に送られます。

ツール

このスキルは、デザインプロンプトと自己チェックの出力を生成します。画像生成は、ここで生成されたプロンプトを使用し、product-shots-image-gen(product-shots の画像生成エンジン)を通じて実行されます。

コメント