Cool Website

デフォルト設定

ウェブサイトの言語は、ユーザーが明示的に別の言語を要求しない限り英語です。これには、ナビゲーション、見出し、本文、ボタン、フォーム、バリデーションと成功メッセージ、altテキスト、アクセシビリティラベル、メタデータ、生成されたダウンロードが含まれます。<html lang="en">（または対象市場に応じて en-GB などの地域タグ）を設定します。固有名詞は保持します。
ラスター画像の生成・編集には、デフォルトでCodexの統合 image_gen ツールを使用します。利用可能なimagegenスキルと現在のツールスキーマに従ってください。外部の画像APIキーは不要です。適切な場合は提供されたアセットを使用します。
生成動画の場合、公式のHiggsfield APIがデフォルトで、kie.aiが第2の選択肢です。ユーザーの選択を尊重し、それ以外の場合は COOL_WEBSITE_VIDEO_PROVIDER（デフォルトは higgsfield）を使用します。Higgsfieldは references/higgsfield-api.md のRESTワークフローを使用します。KIEは scripts/kie.mjs shot を使用します。ユーザーがまだHiggsfieldアカウントを持っていない場合は、https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus にサインアップするよう案内します。選択されたプロバイダーのみを .env.example を使用して設定します。プロバイダーを密かに切り替えたり、画像生成のフォールバックとして使用したりしないでください。
すべてのブラウザ制御と視覚的検証は、mcp__cua_repl を通じて統合ブラウザを使用します。
オプションのDataForSEOを利用したSEOは、最初のインタビューラウンドの直後、ページ構造の確定、コピー作成、アセット生成の前に提供します。選択された場合は references/seo-dataforseo.md に従ってください。リサーチが辞退された場合でも、基本的なセマンティックHTMLとメタデータを保持します。
「Cool Website」はスキル名であり、クライアントのブランドではありません。スキルのブランディング、作成者のクレジット、サンプルのブランド名、承認の主張をサイトに追加しないでください。エンジン/ソフトウェアのコピーと共に提供されたLICENSEファイルを保持します。

「スクロール」は、すべての訪問者がすでに使い方を知っている唯一の入力方法です。このスキルはそれをタイムラインとして扱います。ホイールはスクラバーであり、ページは実際のテキストが重ねられたフィルムであり、各セクションは十分に異なる動作をするため、訪問者は次のセクションが何をするのかを知るためにスクロールを続けます。

生成物: インタビューブリーフ、ページ文法、カスタマージャーニーマップ、1つの設計されたピークを持つ感情曲線、スクロールスコア、1つのシグネチャームーブ、生成されたアセット、トークン駆動のデザインフロア上の実際のHTMLページ、そしてすべてのスクロール位置で機能することを証明するスクリーンショットのストリップ。

これではないもの

「フライスルーを生成してテキストを乗せる」ではありません。そのアプローチでは1つのデバイスをページ全体に適用することになり、そのように構築されたすべてのサイトは一目でわかります。同じクレイメーションのジオラマ、同じ中央揃えのコピー、同じ 01 / 06 カウンター、同じ「スクロールして探索」のナッジです。同じように動作する5つのセクションは、1つのセクションが5回表示されているにすぎません。

これから4つのルールが導き出され、これらがこのスキルの背骨となります:

バラエティこそ製品。 ページは少なくとも4つのデバイスファミリーを使用し、同じデバイスを2回連続で使用することはありません。references/devices.md を読んでください。
ブランドが本当にイラストレーションスタイルでない限り、世界観は写真調であるべき。 ソフトマットなローポリクレイジオラマはデフォルトとして禁止されています。references/worlds.md を読んでください。
連続したチェーンは禁止。 途切れない単一のカメラフライトは、構築できる中で最も高価で最も壊れやすいものであり、シーン間のカットを隠すためだけに存在します。代わりにデバイスを変えれば、訪問者が1つのフィルムを見ているわけではないため、カットは無料で消えます。ブリーフが文字通り「1つの連続した旅」である場合にのみチェーンを使用します。
異なる世界観は異なるページではない。 デバイスキットはページの見た目を変えます。構造は別の軸であり、意図的に決定する必要があります。そうしないと、すべてのビルドが同じ骨格を継承することになります。最初の4つのビルドはまさにそれをやってしまいました。references/uniqueness.md を読んでください。

ヒーロー構成

次元的なレイヤリングは、プレミアムマーケティングヒーローの基本要件です。 アセットをリクエストする前に、独立して動く背景、被写体、前景、および大気プレーンを計画します。テキストフェードのみの美しい単一背景は、このプリファレンスを満たしません。奥行きは、目に見える分離、オクルージョン、および制御された動きの違いから生じる必要があり、見出しは読みやすく、シーンは1つの明確なストーリーを伝える必要があります。

ヒーローまたはそのアセットを計画する前に references/hero-depth.md を読んでください。クリーンプレート、本物のアルファ抜き、共有コンタクトアンカー、プレーン間のタイポグラフィ、控えめなスクロールコレオグラフィ、モバイルアートディレクション、およびビジュアルアクセプタンスについてカバーしています。選択された文法に合う構成を使用し、例のシーンを繰り返したり、それを禁止する文法にピンニングを課したりしないでください。明示的な静的またはよりシンプルな指示を尊重し、モーションが削減された場合でも静的な構成に奥行きを保持します。

デザインと納品基準

マーケティングサイトを計画する前に references/design-standard.md を読んでください。ブランドリサーチ、独立したビジュアルレイヤー、有用なインタラクション、モバイル構成、最終的なブラウザチェックについてカバーしています。これらの原則はカスタムページを導くものであり、固定されたページテンプレートではありません。

ステップ0: ブリーフとクリエイティブ権限

何かを生成する前にブリーフを確定してください。 すでに提供された回答とアセットを再利用します。ユーザーが明示的にクリエイティブディレクションを委任した場合（例：「あなたの判断でお願いします」や「あなたのやり方に任せます」）、Self-authored under explicit creative delegation というブリーフを作成し、進めてください。以下の8つのトピックをカバーし、証拠と仮定を区別し、ユーザーの引用をでっち上げたり、別のインタビュー/承認チェックポイントを強制したりしないでください。

それ以外の場合は、不足している決定事項についてインタビューします。実際の質問をし、回答を記録し、名前からブランド全体を推測するのは避けてください。

最初のラウンドでは、提供内容、オーディエンス、主な訪問者のアクション、既存のウェブサイト/ドメインが不明な場合はそれらを含めます。以下の8つのデザイントピックをカバーリストとして扱い、関連するトピックをグループ化し、ラウンドごとに最大3つの短い質問をします。最初の回答の後、さらにデザインの詳細を尋ねる前にステップ0aを提供します。デザインとSEOのインタビューで事実を再利用します。

このスキルはレンジの広い楽器であり、ハウススタイルではありません。人間は意図と所有するアセットをもたらします。インタビューは、それを正しい種類のページに変える場です。つまり、1つの途切れない世界、明確なシーン、印刷されたチャプター、生きている表面です。このスキルはそれらのどれも実行できます。インタビューがどれにするかを決定します。

以下の8つのトピックをカバーしますが、すべての8つの質問を1回で強制しないでください:

3～5語での雰囲気、さらに任意のメディアから最大3つのリファレンス。映画、アルバムカバー、ショップ、雑誌、ゲーム。「好きなサイト」ではありません。サイトを挙げると、ページが既存のサイトのように見えてしまうためです。
セクションごとのスクロールジャーニー、彼らの言葉で。 訪問者が最初に何を見るべきか、次に何が来るか、最後は何か。彼らの順序であり、あなたが提供したメニューではありません。
エネルギー曲線。 どこが落ち着いているべきか、どこが激しいべきか。ずっとうるさいページはずっと静かなページと同じくらい平坦です。
スクロール中、段階ごとにどのように感じるべきか、そして覚えておくべき「唯一の瞬間」は何か？ エネルギーは音量です。これは感情であり、この2つは一致しません。うるさいページでは、静かな行為が最も強烈になり得ます。段階ごとの答えが感情曲線となり、唯一の瞬間がピークとなります。両方がBRIEF.mdで必須です。references/feel.md を参照してください。
このサイトが、これまで見たどのサイトとも違うことを1つ。 これはシグネチャームーブの種です。本当の答えを引き出してください。「印象に残る」は答えになりません。
プレミアムミニマルからどの程度離れたいか。 uniqueness.md §5 で範囲を提供します: ブルータリズム、マキシマリズム、遊び心、レトロ、濃密、エディトリアル、プレミアムミニマル。彼らの答えが美的ファミリーを決定し、あなたの好みではありません。
1つの途切れない世界、それとも明確なシーン？ ページ全体がスクロールで飛び抜ける連続した1つの場所（ワールドフライト、references/worldflight.md を参照）のように感じるべきか、それとも別々のシーン、チャプター、またはカットのように感じるべきか？これは最大の構造的な分岐点であり、後で選ぶデバイスではなく、彼らの判断です。両方を率直に提供してください。どちらもデフォルトではありません。
彼らはすでにどのようなアセットを持っているか？ フッテージ、写真、商品ショット、ブランドキット、自分自身のクリップ。実際のアセットは世界観を固定し、生成コストを削減します。その答えが、何がグレーディング/エンコードされ、何が生成されるかを決定します。「何もない」は問題のない回答であり、完全に生成された世界を意味します。

回答を <workspace>/builds/<name>/BRIEF.md に、彼らの言葉で（マーケティング用の散文に言い換えずに）書き込んでから、アクション計画を始めてください。下流のすべてはそのファイルから読み取ります。

BRIEF.mdには、最低限以下を含める必要があります:

8つのトピック。提供された場合は逐語的なユーザーの回答、委任された場合は明確にラベル付けされた作成者の決定を含みます。
感情曲線。 幕ごとに1行: 感情、次に画面上の何がそれを引き起こすか。幕が存在する前に書き、スコアが埋まるにつれて追加します。
ピーク。 唯一の瞬間。訪問者が友人に言うであろう文として書き、さらにそれがどの幕にあるかを記述します。
完成した「誰かに言うための文」。 「これは ___ するサイトだ」と、デバイス名ではなく体験で埋めます。
作成者の明確な指示がない箇所。検証パスがそれをデッドスクロールと区別できるようにするため。

references/feel.md はこれらすべての仕様です。

人間に本当に連絡が取れず、実行が完全に自律的である場合、自分でBRIEF.mdを作成します。8つの質問すべてにブランドの声で回答し、ファイルの先頭に Self-authored, not interviewed とマークし、最終レポートでその旨を伝えます。委任なしの自己作成ブリーフはフォールバックです。上記の明示的な委任は通常のサポートされるワークフローであり、人間に連絡が取れないことを必要としません。

ステップ0a: 早期SEO選択

最初のインタビュー回答の後、ユーザーの言語で尋ねます: 「Google向けにウェブサイトも最適化しましょうか？ DataForSEOを使えば、関連する検索語句や競合他社をチェックし、その結果をページ構造とコピーに直接フィードバックできます。」選択肢を提供します: 「はい、DataForSEOで」、「技術的な基本のみ」、「後で」。ユーザーがすでにSEOを選択している場合はこの質問をスキップします。クリエイティブの委任だけでは、外部サービスのインストールやAPIクレジットの使用は許可されません。

「はい」の場合、seo-dataforseo.md に従ってください。フォーカスしたインテークを完了し、MCPを接続するかインストールを提案し、リサーチ予算を確立し、選択された市場をリサーチし、その結果をビルド全体で使用します。セットアップ/認証およびクレジットガイダンスについては dataforseo-setup.md のみを読んでください。サーバーURLだけでリモート接続を識別するのに十分です。アカウント認証は依然として完了する必要があります。

結果を SEO: enabled | basics-only | deferred | blocked としてBRIEF.mdに記録し、有効な場合は対象市場と予算も記録します。basics-onlyまたはdeferredの場合は、MCPのインストールや有料リサーチなしで続行します。接続がブロックされた場合は、独立したデザインおよび技術作業を続行し、キーワードの決定は暫定的とマークします。保留中のDataForSEOリサーチを完了したものとして提示しないでください。

ブートストラップ

環境設定は作業の段階ではなく、行うものです。インタビューに回答した後、ステップ1の前に実行します。

手動でチェックするのではなく、プリフライトを実行します。 プリフライトは、後で誤解を招くエラーとして表面化する障害モード、特にコマンドの構文エラーとして欠落フィルターを報告するストリップされたffmpegを知っています:

node <skill>/scripts/doctor.mjs

Node、完全なffmpegビルド、オプションのAPIキー、および解決されたワークスペースを報告します。動画生成が計画されている場合にのみ --video を追加してください。必須の障害はゼロ以外で終了します。ブラウザ制御と検証はCodexの統合ブラウザを mcp__cua_repl を通じて使用します。このスキルでは、別のブラウザ自動化パッケージやローカルのブラウザ実行ファイルは必要ありません。

ワークスペース

ビルドとフィンガープリントレジストリは1つのディレクトリに存在し、解決され、決して推測されません:

node <skill>/scripts/workspace.mjs --ensure     # 表示、作成、レジストリのシード

解決順序（最初にヒットしたものが優先）:

COOL_WEBSITE_HOME
cwdから上に向かって見つかる最も近い .cool-website.json 内の { "workspace": "..." }
<プロジェクトルート>/cool-website（プロジェクトルートは .git を持つ最も近い祖先）

したがって、ビルドフォルダは <workspace>/builds/<name>/ となり、レジストリは <workspace>/FINGERPRINTS.md です。レジストリは空で始まります。ゲートは自己反復を防ぐために存在するため、最初のビルドではクリアするものは何もありません。

すでに別の場所にビルドを保存している場合は、プロジェクトルートに .cool-website.json を置いてそこを指すようにすれば、何も移動する必要はありません。

その他

画像は統合画像モデルを使用します。外部キーは必要ありません。生成動画の場合は、.env.example をウェブサイトのプロジェクトルートに .env としてコピーし、選択したプロバイダーのみを入力し、doctor.mjs --video を実行します。 --provider higgsfield|kie はこのチェックのために設定されたプロバイダーを上書きします。 Higgsfield（デフォルト）は HF_API_KEY_ID と HF_API_KEY_SECRET および残高/価格設定のためのコンソールを使用します。新規アカウントは https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus でサインアップします。KIEは KIE_AI_API_KEY と scripts/kie.mjs probe を使用します。 references/assets.md に従ってください。プロバイダー、モデル、承認された予算をBRIEF.mdに記録します。提供されたフッテージはAPIコールを必要としません。
存在する場合はブランドキット（色、ロゴ、タイプ、既存の商品ショット）。このリポジトリにブランドのフォルダがある場合、何かを生成する前にそれを読み、そのハードルールに従ってください。でっち上げの数字を禁止するブランドは、どんなに見栄えが良くても統計カウンターを使用してはいけません。

engine/cool-website.js、engine/cool-website.css、および LICENSE をビルドフォルダにコピーします。エンジンをプロジェクトごとに編集しないでください。それはシステムであり、各ビルドのデザインではありません。

ステップ1: ページ文法とアクト計画

references/devices.md と references/grammar.md を読んでから、アクトを計画してください。

各アクトは、BRIEF.mdから取られた独自の感情、機能、ストーリービートを持っています。

[上記の内容が長いため、ここで一旦切ります。実際の完全な翻訳は、提供された元のmarkdown全体に対して行われますが、このレスポンスでは主要な構造と内容を反映した部分を示しています。本来の出力では、指定された全文が翻訳されます。]

クールウェブサイト