Communitygithub.com

TheMattBerman/ランディングページファクトリー

保存クラス(正確な製品、ブランド環境、コンセプト補助)に基づいてビジュアルを計画・生成します。戦略主導のショット選択とビジュアルQAを、一般的な雰囲気プロンプトではなく使用します。

ランディングページファクトリー とは?

このスキルは、ランディングページや製品ページ用のビジュアルを、戦略的な保存クラスに基づいて計画・生成するためのものです。「きれいな画像を作る」のではなく、販売されているものを視覚的に偽ることなく、コンバージョンを支援します。保存クラスには「正確な製品保存」(形状・素材・パッケージを忠実に再現)、「ブランド環境保存」(ブランドの世界観を表現)、「コンセプト補助ビジュアル」(説明的・雰囲気的な画像)の3つがあり、それぞれに明確な要件が定義されています。このスキルは、Claude Code(旧称Cowork)や任意のランタイムで利用可能で、Bloomをファーストパスの画像プロバイダーとして使用し、利用できない場合はNano Bananaへのフォールバック、さらに手動アセットへの切り替えをサポートします。各画像は、セクション適合性、パレット忠実度、形状・マテリアル忠実度(該当時)、アーチファクト不在などの厳格なQAルーブリックで評価され、失敗した場合は再生成されます。また、生成前に戦略文書、ブランドプロフィール、パレット、コピー、製品参照を必須入力とし、最終的なショット計画とプロバイダーメタデータをワークスペースに出力します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/TheMattBerman/landing-page-factory/tree/HEAD/skills/page-visuals

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ページビジュアル

仕事は「きれいな画像を作る」ことではありません。仕事は、販売されているものについて視覚的に嘘をつくことなく、コンバージョンを支援することです。

製品、パッケージ、UI、またはマテリアルに精度が必要な場合は、適宜ルーティングします。

必須入力

  1. workspace/pages/[page-name]/strategy.json
  2. workspace/brand/profile.md
  3. workspace/brand/palette.json
  4. workspace/pages/[page-name]/copy.md
  5. オペレーターから提供された製品参照、パッケージ参照、スクリーンショット、または画像アセット

プロバイダーポリシー

Page Factory のブランドアーティファクトを信頼できる情報源として使用します。

  • workspace/brand/extract.md と workspace/brand/profile.md が正規のブランド理解を定義します
  • プロバイダー側のブランドオンボーディングは画像生成のためのサポートコンテキストであり、抽出やプロファイリングの代わりにはなりません
  • 推奨プロバイダー順序: Bloom をファーストパス、Nano Banana をフォールバック、そして信頼性が重要な場合は手動/オペレーターアセット

プロバイダーの選択は必須です。

Bloom がその実行用に設定されている、または期待されている場合、最初に Bloom を確認する必要があります。 Bloom が意図されたプロバイダーである場合、Cowork ネイティブの画像生成、汎用ビルトイン画像ツール、またはアドホックな画像プロンプトを黙って代用しないでください。

Bloom が設定されていない、ブロックされている、または到達できない場合:

  1. それを明示的に伝える
  2. オペレーターに以下のいずれかを尋ねる:
    • Bloom を提供/設定する
    • Nano Banana フォールバックを使用する
    • 手動/オペレーターアセットを提供する
  3. 信頼性が重要な実行において、より弱いプロバイダーで黙って続行しない

Nano Banana がフォールバックパスである場合、オペレーターが必要なアダプター/コマンドまたは API ベースのワークフローを提供したことを確認します。 名前がドキュメントに現れるという理由だけで Nano Banana が存在するとは想定しないでください。

Bloom 固有のガイダンス

Bloom が利用可能な場合:

  • ブランドが Bloom に既に存在するか確認する
  • 存在しない場合、ソース URL からブランドをオンボーディングする
  • Bloom のブランドコンテキストが弱い、または不完全な場合、リポジトリの抽出されたブランドファクト、プロファイル、パレットを使用してそれを補完する
  • 正確な製品ショットを生成する前に、製品、パッケージ、または UI 参照をアップロードする
  • ベースの構図が強固で変更リクエストが限定的な場合、Bloom の編集/リサイズを使用する

以下の場合、Nano Banana にフォールバックする:

  • Bloom が利用できない、または設定されていない
  • Bloom のオンボーディングが繰り返し失敗する
  • Bloom のクレジットが不十分である
  • 妥当なリトライ後も必要な画像がビジュアル QA ルーブリックに合格しない

Nano Banana に切り替える前に、なぜ Bloom が使用されなかったのかを明示的に記す:

  • 利用不可
  • 未設定
  • ランタイムによってブロックされた
  • リトライ後の QA 失敗
  • クレジット不足

プロバイダーヘルパー

スキルローカルの画像プロバイダーエントリポイントを使用して、プロバイダーフォールバック付きの実際の画像生成を実行します:

bash skills/page-visuals/scripts/image-provider.sh \
  --page-name [page-name] \
  --shot-id [shot-id] \
  --prompt "[prompt]" \
  --preservation-class [exact_product|branded_environment|concept_support]

Cowork またはスキルフォルダのみをアップロードするランタイム向けのプライマリインターフェースとして skills/page-visuals/scripts/ を使用します。 リポジトリルートの /scripts コピーはローカル開発の便宜上のものであり、パッケージング要件ではありません。

保存クラス

計画されたすべてのビジュアルは、プロンプト作成前に分類されなければなりません。

1. 正確な製品保存

製品の形状、素材、パッケージ、UI、またはインダストリアルデザインが信頼や理解に重要な場合に使用します。

要件:

  • シルエットを保存する
  • プロポーションを保存する
  • 素材の外観を保存する
  • 該当する場合はパッケージを保存する
  • 該当する場合は UI/スクリーンコンテンツを保存する
  • 可能な場合は常に参照を使用する

2. ブランド環境保存

製品をブランド固有のコンテキストに配置できるが、完全なオブジェクトの忠実性は必要ない場合に使用します。

要件:

  • パレットとオーディエンスの世界に合わせる
  • ブランドの雰囲気とカテゴリーのリアリズムを維持する
  • ストックフォトのような演出を避ける

3. コンセプト補助ビジュアル

画像が説明的、雰囲気的、または背景支援であり、信頼性が重要な製品証明ではない場合に使用します。

要件:

  • メカニズムまたはセクションの役割を支援する
  • コピーに従属する
  • 偽の製品詳細を導入しない

ショット優先順位階層

以下の順序で生成します:

  1. 証明 / メカニズムビジュアル
  2. 製品明確化ビジュアル
  3. ライフスタイルアスピレーションビジュアル
  4. 装飾支援ビジュアル

時間や予算が限られている場合は、最初に 4 を削除します。

必須ショット計画出力

workspace/pages/[page-name]/visuals/index.md に以下を書き込みます:

# ビジュアル計画: [page-name]
生成日:

| ショット | セクション | 保存クラス | 目的 | 必要な参照 | ステータス |
|---|---|---|---|---|---|
| hero-1 | hero | 正確な製品 / ブランド環境 / コンセプト補助 | | | planned |

ビジュアルが実際に生成されたら、可能な場合はプロバイダーメタデータを計画に追加します:

## プロバイダー実行

| ショット | プロバイダー | ブランドコンテキストソース | ソース画像 ID / 参照 | 結果 |
|---|---|---|---|---|
| hero-1 | bloom | リポジトリプロファイル + Bloom オンボーディング | bloom:img_123, ローカル製品参照 | approved |

また、workspace/pages/[page-name]/visuals/manifest.json に、以下の機械可読フィールドを書き込みます:

  • 使用されたプロバイダー
  • 該当する場合のフォールバックプロバイダーとフォールバック理由
  • 該当する場合の Bloom ブランド ID と画像 ID
  • ショットに使用されたソース参照
  • ローカル出力パス
  • ステータスとメモ

プロンプトルール

常に以下を含めます:

  • 意図されたセクションと役割
  • 保存クラス
  • 構図要件
  • パレットの方向性
  • ムード / 照明
  • 忠実性の制約
  • 明示的な除外事項

正確な製品保存の場合

プロンプトには以下を明記する必要があります:

  • オブジェクトのシルエットとプロポーションを保存する
  • 素材の仕上げを保存する
  • 参照からのみパッケージ/UI を保存する
  • 創作テキストや変更されたブランドマークなし
  • プロバイダーがサポートする場合は、生成前に参照を添付またはアップロードする

ブランド環境の場合

プロンプトには以下を明記する必要があります:

  • オーディエンスコンテキスト
  • 本物の使用瞬間
  • 環境、小道具、ワードローブ、または照明によるパレット統合
  • 決まりきったストックフォトのポーズなし

コンセプト補助の場合

プロンプトには以下を明記する必要があります:

  • セクションの役割
  • ミニマリズム / 抽象度
  • 虚偽の主張を含む詳細なし

スクリーンショット / UI 処理

戦略がスクリーンショット処理を必須としている場合:

  • スクリーンショットまたは UI 参照を保存する
  • アドリブで偽の UI 精度を作り出さない
  • 実際の UI アセットが存在しない場合、フラグを立ててショット計画をダウングレードする

ビジュアル QA ルーブリック

生成されたすべての画像は評価される必要があります:

評価軸スコア /10合格閾値
セクション適合性8
パレット忠実度8
シルエット / 形状忠実度該当時 8
素材忠実度該当時 8
パッケージ / UI 忠実度該当時 8
構図の明確さ8
アーチファクトの不在9
テキストアーチファクトの不在10

必要な評価軸のいずれかが不合格の場合、拒否して再生成します。

失敗ロジック

正確な製品忠実度が繰り返し失敗する場合:

  • 緩いブランド雰囲気プロンプトの使用をやめる
  • より厳密な参照を要求する
  • 利用可能な場合は、保存された写真またはオペレーター提供のアセットにダウングレードする
  • モデルが苦戦しているからといって、正確さを偽らない

Bloom がファーストパスプロバイダーであり、繰り返し失敗する場合:

  • 問題がコアな忠実性ではなく構図やクロップである場合、完全な再生成の前にプロバイダーネイティブの編集/リサイズを試みる
  • Bloom がまだ QA をクリアできない場合、Nano Banana に切り替える
  • 両方のプロバイダーが失敗し、ショットが信頼性上重要な場合、実際のオペレーターアセットを要求する

Cowork が Bloom を独自のデフォルト画像動作で黙って置き換えるのを許可しないでください。 ランタイムが Bloom にアクセスできない場合、一時停止してその旨を伝えます。

評価リファレンス

スコアリング基準と合格閾値については、skills/page-qa/references/eval-rubric.md を参照してください。

引き継ぎ

ビジュアルが承認されたら、page-build を実行します。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

TheMattBerman/landing-page-factory

Build an evidence-backed brand profile from site extract and page strategy. Separates observed facts from synthesis so downstream skills preserve the brand instead of rewriting it.

TheMattBerman/landing-page-factory

Top-level operator skill for Landing Page Factory. Classifies requests, chooses stage order, enforces prerequisites and hard stops, manages variant pages, reruns changed stages, and handles page-package admin.

TheMattBerman/landing-page-factory

Build a deployable landing page from strategy, copy, visuals, and brand profile using category-aware routing, preservation hierarchy, and explicit QA. Single-file HTML output.

TheMattBerman/landing-page-factory

Write mechanism-preserving, proof-disciplined landing page copy from strategy, brand profile, and extract language bank. Includes mandatory sharpness audit and claim control.

TheMattBerman/landing-page-factory

Final landing-page QA pass against strategy, proof provenance, mechanism clarity, trust preservation, accessibility, and anti-slop. Gates whether a page is shippable or draft-only.

TheMattBerman/landing-page-factory

Normalize raw extract or manual brief into a page strategy artifact: mechanism, offer, audience, proof provenance, CTA, preservation plan, and review flags. Mandatory before copy or build.

TheMattBerman/landing-page-factory

Extract operator-grade source facts from a website or manual brief: claims, proof, CTAs, mechanism language, trust cues, visual patterns, and page structure with provenance. First stage of Page Factory.

関連スキル