webflow-build

Webflowビルド：承認済みデザイン → Webflow、セクションごとに

すべてのデザイン決定は担当者が承認し、Claudeは構築、検証、報告を行います。セクションは、承認されたデザインとすべての幅で一致し、あらゆる方法でアクセスしても機能し、手動ステップがリストアップされたときにのみ完了と見なされます。

• checklists.md はすべてのステップをゲートします：デザインハンドオフ、Webflowの基礎、メディアページ、各コンポーネント、各完成ページ、ビルドハンドオフ。進捗は docs/handoff/progress.json に pnpm progress で記録され（checklists.md › 進捗の記録方法）、Benchのタスクパネルに表示されます。
• conventions.md は、すべてのビルドの出発点となるページとセクションの構造、クラスと変数の命名、コンポーネント、CMS、スタイルガイドのパターンを定義します。
• lessons/ には、以前のビルドで時間を要した教訓が領域別に保存されています。作業を開始する前に、該当する領域のファイルを読んでください。
• プロトタイプは常に最初に作成されます：FigmaファイルからページごとにBench（またはClaudeがターミナルで同じ手順）で構築され、Webflowで何かが構築される前にクライアントが承認します。手順は以下にあります（プロトタイプ、Figmaから）；webflow-prototype スキルにはプロジェクトセットアップ、入力、スナップショット、スタイルガイドが含まれ、その figma.md にはファイルの読み方があります。
• rules.md には、すべてのWebflowスキルに共通のルール（OKなしでのコミットやプッシュの禁止、Designer優先、チャット内での認証情報禁止、手動ステップ、教訓）、セッションのまとめ方、貢献方法が記載されています。
• starter-site.md は、プロジェクトが複製するスターターWebflowサイトについて説明しており、ベースシステムがすでに含まれています。
• webflow-style-guide スキルは、すべてのサイトで使用される単一のレイアウトで、プロトタイプとWebflowビルドの最初のページであるスタイルガイドページを作成します。
• media.md はメディアページです：サイトの動画がアップロードされ、Webflowが変換してホストする場所で、最初の動画を再生するページの前に構築されます。
• すでに公開されているサイトはビルドの対象ではありません：webflow-audit スキル（監査後、小さな検証済みバッチ、および1回限りの修正）を使用してください。
• ビルドハンドオフ後、webflow-launch スキルが引き継ぎます：ローンチ前のQA、ローンチ日、クライアントハンドオフ、最初の30日間。

すべてのチェックリスト項目には、誰が行うかが示されています：

• [Claude] Claude が行います（MCP、リポジトリ、またはスクリプトを通じて）。
• [Claude checks] Claude が確認して報告します；Claudeが修正できないものは担当者が修正します。
• [Person] 担当者が行います（クライアント、PM、デザイナー、DNS、アカウント）。Claudeはそれをリマインドして追跡することはできますが、実行することはありません。

セッション開始（毎セッション）

1. ワークスペースの CLAUDE.md、次にこのリポジトリの AGENTS.md と GOTCHAS.md、次に docs/handoff/ を読んでください（HANDOFF.md、MANUAL-TODO.md、BUILD-NOTES.md、レビューフェーズが始まったら REVIEW.md）。lessons/README.md にざっと目を通し、今日の領域のレッスンファイルを読んでください（MCP作業：lessons/mcp.md）。すでに記録されたミスを繰り返さないでください。
2. プロジェクトのメモリを読んでください：前回のセッションが停止した場所、未解決の手動ステップ、未解決の質問。pnpm progress show を実行して、ステージ、まだ開いているチェックリスト、担当者自身のToDoを確認してください。現状と次に何をするかを1行で述べてください；不明な場合は、どのページまたはセクションかを尋ねてください。
3. 最初のWebflowバッチの前に、ビルド前 を checklists.md で実行してください；プロトタイプ ステージはそれが完了する前に（入力は webflow-prototype のものです）。conventions.md への変更はデザイナーと合意してください。入力が不足している場合は、それを要求してください；コンテンツ、状態、SEOフィールドを推測しないでください。
4. Webflow MCP：webflow_guide_tool を1回呼び出し、その後はセッション全体で1つのセッションIDとエージェントIDを再利用してください。
5. プロトタイプ開発サーバーが実行中で、webflow-build.config.json が存在します（pnpm new-project が作成します；webflow-prototype › プロジェクトセットアップ）。
6. 今日のスコープは1ページです（作業リズムを参照）。それを述べてください。

常時適用ルール

共有ルールは rules.md にあります。ビルドは以下を追加します：

• クラスと変数を作成、編集、削除する前に、一度に1バッチずつ、名前と値を指定して尋ねてください。 それらを明確に暗示するリクエスト（例：モックを承認した後の「Webflowで構築する」）は、OKと見なします。
• 公開はサイトが公開済みかどうかに依存します。
  • 新しいビルド（カスタムドメイン未設定）： webflow.io ステージングドメインへの公開は問題ありません。
  • 公開済みサイト： 公開はサイト全体に及びます。保留中の他のすべての編集（他の人の未完了の編集を含む）を送信します。ステージングにのみ公開し、他に何が公開されるかを確認し、担当者が「公開」と入力するまで待ってからカスタムドメインに公開してください（webflow-audit に手順があります）。
  • カスタムドメインに公開したり、リリースを作成したり、DNSを変更したりする場合は、尋ねずに行わないでください。
• すべてのWebflow書き込みバッチの後に、2つのことを述べてください：「Designerをリロードしてください」（開いているDesignerタブはMCPの変更を表示せず、古いタブから保存するとそれらを上書きする可能性があります）、およびまだ公開されていないもの。
• ページに手動ステップをマークしてください。 何かが視覚的に未完了のままになる MANUAL-TODO.md 行（値がまだ欠けている、バインディングが行われていない）には、要素の横、またはスタイルガイド上のその見本の横にマーカーを配置します：data-manual-todo="<letter>" とテキスト「手動ステップ : <内容>」を含むキャプション。これはキャンバスとステージングに表示されるため、誰も未完了の状態をデザインとしてレビューしません。行にチェックを入れるバッチでそれを削除してください；ビルドハンドオフまたはローンチ時に残っていてはいけません（公開されたHTMLで data-manual-todo を検索してください）。

プロトタイプ、Figmaから

すべてのサイトはFigmaファイルから始まります。プロトタイプはそこからページごとに構築され、Webflowで何かが構築される前に承認されます。

Bench内で。 クライアントの追加 › Figmaデザインから で、クライアントフォルダ、このテンプレートからのリポジトリ、空の prototype/（prototype-starter/ のコピー）をセットアップします。Figmaからプロトタイプを構築 で、フレームをページにグループ化します；担当者が各ページをそのアドレスとともに選択して順序付けます。その後、1つのAIジョブがそれらを一度に1ページずつ構築します：各ページは、そのフレームのノードIDとともに独自のメッセージとして送られます。構築された各ページは、比較 › Figmaと比較 のために独自のFigmaフレームを保持します。Benchは、クライアントが開いたときと1時間ごとにファイルを再度確認し、フレームが変更されたページの更新を提案します：それらのフレームで変更されたものだけを変更し、プロトタイプでそれ以降に行われた編集を保持します。

Bench外で、 Claudeはターミナルで同じ手順に従います：フレームをリストし、ページ、その順序、アドレスを担当者と合意し、一度に1ページずつ構築します。

1ページ：

1. そのフレーム。 デスクトップ、タブレット、モバイルで同じ名前のフレームは1ページです。各フレームをFigmaコネクタ（get_design_context、get_screenshot、get_variable_defs）またはFigmaアプリのMCPサーバー（figma.md）で読み取ります。タブレットフレームがない場合：デスクトップとモバイルの間からタブレットを描画します。モバイルフレームがない場合：大きい方のフレームから電話で機能するようにし、その旨を述べてください。ページではないフレーム（スタイルガイド）は、トークン、タイプ、コンポーネントのために読み取られます。
2. トークン ファイルの変数とテキストスタイルから、CSSカスタムプロパティとして：スナップショットの変数への変更と src/css/proposed.css 内の新しいもの（旧 → 新）、conventions.md §4 に従って命名；生成された tokens.css には決して入れないでください。
3. フォント テキストスタイルが使用するもの、public/fonts/ にライセンスとともに配置し、src/css/prototype.css で宣言し、partials/head.html でプリロードします。
4. 画像 ファイルから prototype/images/ にエクスポート：写真はデザインが使用する最大サイズのWebP、アイコンはSVG。
5. ファイルにあるものだけ。 ファイルが提供しない値、状態、テキスト、画像は質問です：それを発明する前に尋ねてください（Benchでは、mcp__bench__todo_add で追加して続行します）。
6. 配置場所： Webflowアドレスで prototype/<page>/index.html（ホームは prototype/index.html）、prototype/vite.config.js の pages に追加。ナビとフッターは共有パーシャルです。そのページと、必要なパーシャルとトークンのみを変更してください。コミット、プッシュ、公開はしないでください。
7. 確認 デスクトップ、タブレット、モバイルでそのフレームと並べて確認し、Figmaプロトタイプのリンクが機能することを確認してください（メニュー、タブ、フォーム）。

次に、ページは プロトタイプページ完了 を実行し（webflow-prototype の checklists.md）、担当者が承認します（Benchでは：ページで右クリック）。checklists.md の プロトタイプ ステージは、クライアントの書面による承認に至るまで、すべてを追跡します：

• 各ページは、デスクトップ、タブレット、モバイルでFigmaフレームと一致します（Benchの「Figmaフレームと一致する」チェック）；
• Figmaファイルがクライアントにリンクされている；
• フレームが選択され、順序付けられ、各フレームにページアドレスがある；
• 選択されたすべてのフレームがプロトタイプページとして構築されている；
• トークン、フォント、画像はファイルから取得され、作り物ではない；
• Figmaプロトタイプのリンクが機能する；
• 各ページがプロトタイプで承認されている；
• クライアントがプロトタイプを書面で承認した。

ビルドの順序

これは プロトタイプ ステージが完了した後に開始されます。構造と名前は conventions.md に従います。各ステップは checklists.md でゲートされます：

1. 変数；
2. タグスタイル（MCPが到達できるようにDesignerで一度設定）；
3. クラス；
4. CMSコレクション；
5. リポジトリポート（プロトタイプからのモジュールとリポジトリCSS）とローダー、ステージングが実際のコードを実行するように → 基礎完了；
6. スタイルガイドページ、最初に構築されるページ（webflow-style-guide スキル）→ スタイルガイドベース完了；
7. メディアページ、任意のページが動画を再生する場合（media.md）→ メディア完了；
8. コンポーネント、実際のページマークアップから構築（スタイルガイドプレビューからではない）、それぞれがスタイルガイド行を追加 → コンポーネント完了；
9. ページ、セクションごと → ページ完了；
10. スタイルガイド最終確認、その後 ビルドハンドオフ；
11. レビューフェーズ：docs/handoff/REVIEW.md は、ページごとに構築されたもの、各フィードバックラウンド、ローンチ前に残っているものをリストし、webflow-launch スキルが引き継ぐまで続きます。

スターターから複製されたサイトには、すでにステップ1〜3のベースとページシェルがあります；プロジェクトはそれに追加します。各インポートの前に pnpm wf:preflight を実行してください；クラスバッチは pnpm wf:styles で計画してください（チェックを参照）。

セクションループ

各セクションについて、ページ順に：

1. プロトタイプを読む：そのマークアップ、CSS、それをアニメーション化するモジュール、状態とインタラクション仕様のためのページのFigmaフレーム。すべての data-* フック、id、aria属性に注意してください。
2. Webflowが何を持っているかを確認する：クラス（query_styles）、コンポーネントとそのプロパティ、CMSフィールド、アセット。作成する前に再利用してください；新しいものは conventions.md（セクション2〜4）に従って命名してください。
3. 構築、優先順位順に：
   • コンポーネントインスタンス；
   • DOM要素（button、ARIAロールが維持されなければならない ul/li、svg、タグ付き span）のための要素ビルダー、ネストされた子要素を含む；
   • プレーンマークアップのためのWHTMLインポート、その後、それが削除するものを修正（以下のインポーターチェックリストを参照）。 ページコンテンツは、G | Page W コンポーネントの G | Main スロットにあります。スロットがまだ空のページでは：G | Page W の後に To Slot ラッパーでセクションを構築し、担当者にラッパーをスロットにドラッグするよう依頼し、次にそれをグループ解除します（各子要素をラッパーの前に移動し、ラッパーを削除します）。セクションがスロットに入ったら、次に直接構築します（conventions.md §1）。スロットコンテンツは query_elements で確認してください；ページツリーはスロットを空として表示します。
4. 配線する：属性、CMSバインディング、プロパティ値、リンク、フォーム設定。
5. 公開し、その後チェックを実行します。修正、再公開、再確認。
6. 報告する：何が構築されたか、何が一致したか、何が異なりその理由、手動ステップ、コミットOKを待っているファイル。

ページが完了したら、checklists.md で ページ完了 を実行します。

インポーターチェックリスト（WHTMLインポート後毎回）

• <button> がリンクになった → DOM button として再構築し、子要素を内部に移動。
• <img> がすべての属性とアセットリンクを失った → set_image_asset、data-*、loading、サイズ（または aspect-ratio を持つクラス）を再追加。
• <span> がテキストSpanになった → 形状は <div> として；分割されたテキスト部分はDOM span として（そうしないと、親のテキストを編集するとそれらがフラット化されます）。
• 1つのクラスが欠けているクラスリストは、すべてのクラスを失った → 最初にクラスを作成し、styleNames を再確認。
• DOM要素はリテラルな class 属性を保持する → remove_attribute class。
• <br> の前の通常のスペースはトリミングされる → Line.&nbsp;<br>Next。
• ブール属性は値が必要（muted="true"）でないと、公開時に削除される。
• リストは role="list" として公開される → DOM ul/li でARIAロールを維持。

キャンバス衛生

• 空の要素上のすべてのクラス：すべての辺にパディング0、font-size: inherit（キャンバスの .wf-empty は75pxのパディングとフォントサイズ0を追加します）。
• すべてのグリッドは少なくとも1つの行テンプレートと1つの列テンプレートを設定します；単一の子要素はグリッドではなくフレックスで中央配置します。
• 疑似要素（アイコンフォントグリフ）だけで描画される要素は、そのテキストとしてスペースを取得します（set_settings、キー text）。