kyjongSNSoft/landing-page-skill

Figma → ランディングページ

Figma デザインからデプロイ可能な静的ランディングページを生成します。index.html + css/main.css + js/{tool,pm_main,main}.js + images/*.webp を出力します。

呼び出し：/figma-landing-page <Figma リンク> [キャンペーン名] [出力ディレクトリ]

固定契約（いかなる状況でも逸脱しないこと）：

• テンプレートプレースホルダーは正確に 3 つ：__PAGE_TITLE__、__FUNCTION_NAME__（ともに main.js、title は index.html にも出現）、__PC_BASE__（tool.js 内；375 = H5 フレームのみ；1920 = H5+PC 両フレーム）。
• CTA 要素には追加で .join-btn クラスを付与すること（固定 JS のセレクタ契約、BEM クラスと併存）。
• ブレークポイント 576px を 3 か所で統一：JS rem 分岐、CSS @media (min-width: 576px)、プラットフォーム判定。
• px 正規化：H5 px × 375 ÷ H5 フレーム幅 ÷ 100 = rem；PC px × 1920 ÷ PC フレーム幅 ÷ 100 = rem。
• テンプレート JS 3 ファイル（tool.js rem 適用 / pm_main.js postMessage ブリッジ / main.js キャンペーン業務層、読み込み順序はこの通り）の固定部分は一切変更しないこと；ページインタラクションは main.js の // === Page-specific interactions === の下にのみ挿入する（IIFE 内部で、$p/pm/track/Date.prototype.format を直接使用可能）。
• 詳細ルール（切り抜き境界、クラス名、インタラクション推論表）は references/patterns.md、納品基準は references/checklist.md 参照——生成前にこれらのファイルを読むこと。

ステップ 1 — 入力解析と環境チェック

1. リンクから file key と node-id を抽出します。node-id のハイフンはコロンに変換してから Figma API を呼び出します（123-456 → 123:456）；API が 404 または空の結果を返した場合は、まずこの手順を確認します。
2. 3 つの環境チェックを行います（不合格の場合は修正してから続行）。
   • Figma MCP が接続されていること（未接続の場合はユーザーを認証に導きます。認証操作は確認ゲートの「唯一の中断」にはカウントしません）。まず whoami を呼び出して（割り当て制限を回避）シート権限を確認します：View/Collab または Starter シートの場合、MCP 呼び出しは月 6 回までです——予算が少ない場合は MCP をスキップし、ステップ 2/4 の REST ルートに進みます（PAT は ~/.figma_token に保存。ない場合は Figma の設定 → セキュリティで生成してもらい、ユーザー自身のターミナルでファイルに書き込ませ、チャット履歴に残らないようにします）。
   • which cwebp が成功すること——不足している場合は brew install webp をユーザーに伝えます；ユーザーがインストールを拒否した場合は、ページ全体を png で出力し、納品レポートにその旨を記載します。
   • node -e "require('playwright-core')" が成功すること——不足している場合は scratchpad ディレクトリで npm i playwright-core を実行します；ブラウザは既存の Chrome を再利用します（channel: 'chrome'）、ブラウザバイナリはダウンロードしません。
3. 出力ディレクトリのデフォルトは ./output/<キャンペーン名のスラグ>/ です（スキルの全成果物は output/ 配下に統一します；キャンペーン名がない場合は Figma ページ/フレーム名から推測し、確認ゲートで確認します）。ディレクトリが既に存在し空でない場合でもここでは中断しません——上書きの確認は確認ゲートの内容とします。

ステップ 2 — デザインの棚卸し

• スパースメタデータツール（get_metadata 系）を使用してノードツリーを読みます；ルートフレームに対して全量の design context を一度に取得しないでください。
• MCP が利用できない、または予算が尽きた場合：REST GET /v1/files/<key>/nodes?ids=<node>（depth なし = 全サブツリーの JSON。テキスト全文、フォント、fills のグラデーションの元の値、正確な bbox を含む——get_metadata よりも情報が多い）。これをローカルに保存して繰り返し解析し、1 回の API 呼び出しで全体をカバーします；CSS の色/グラデーション/コピーはこの JSON から直接取得し、get_code は不要です。
• フレーム識別：幅 ≤ 480 → H5 フレーム；≥ 1200 → PC フレーム；判定できないフレームは確認ゲートに含めます。H5 フレームのみ → __PC_BASE__ = 375；H5+PC 両フレーム → __PC_BASE__ = 1920。
• アセットリストを作成：セクションリスト（hero、banner、steps、tnc…）；各ノードに 切り抜き画像 / 実テキスト / インタラクティブコンポーネント をラベル付けします（判定ルールは references/patterns.md 参照）。
• すべての CTA（Join Now / 登録 / Sign Up ボタン類）をマークします——これらに .join-btn を付与します。

ステップ 3 — 確認ゲート（通常フローで生成前の唯一の中断）

1 メッセージで以下のすべてを列挙し、一度にユーザー確認を得ます；以降、納品まで中断しません。

• キャンペーン名、__PAGE_TITLE__ の値、__FUNCTION_NAME__ の値（例：WinsdayBillionDropLandingPage）
• 出力ディレクトリ（ディレクトリが空でない場合はここで上書き確認）
• 切り抜き画像リスト（ノード → images/<名前>.webp）
• CTA ノードリスト
• インタラクションリスト：各項目に推論根拠と必要なパラメータを添える（カウントダウン→終了時刻/期限切れ動作；カルーセル→自動再生/間隔；モーダル→トリガータイミング；表は references/patterns.md 参照）。デザインから推論できないパラメータはここでユーザーに入力してもらいます；分類できないノードは「静的」とマークします。
• フレーム識別の疑義項目

ステップ 4 — 切り抜き画像のエクスポート（4 段階のフォールバックチェーン、可用性順にダウングレード）

1. MCP download_assets（シート予算が十分な場合）：1 バッチあたり最大 20 ノード、scale 2x、format png；一時 URL を curl でダウンロードします。
2. REST レンダリング GET /v1/images/<key>?ids=…&format=png&scale=2：ids はカンマ区切りでバッチ処理しますが、1 バッチあたり最大 4 つの大ノード（超えると