Webflow プロトタイプ

Webflow プロトタイプ: Figma デザイン → 承認済み localhost プロトタイプ

プロジェクトの第一フェーズです。すべてのサイトは Figma ファイルから始まり、そのデザインはコードで構築されます。実際の URL とブレークポイントで、Webflow が持つ変数名とクラス名を使用し、ページごとに承認を得ます。このフェーズの成果物はモックアップではなく、Webflow ビルドの出発点となるマークアップ、クラス、モジュール、手動ステップのリストです。

このフェーズでは Webflow に書き込みを行いません。 サイト（スナップショット）を読み取り、変更を提案します。書き込みは、プロトタイプが承認された後、別のセッションで webflow-build スキルが担当します。

• checklists.md は、入力、各プロトタイプページ、およびハンドオフを管理します。
• prototype-starter/ は、プロジェクトの開始点となるプロトタイプフォルダです（pnpm new-project がコピーします）。
• figma.md は、Figma コネクタを介して Figma ファイルを読み取ります。フレーム（ブレークポイント別）、スクリーンショット、変数、測定値を取得します。
• フレームから1ページを構築する手順は webflow-build にあります（SKILL.md › プロトタイプ（Figma から））。Bench の AI が従う手順と同じです。その checklists.md の プロトタイプ ステージは、クライアントの承認までのプロトタイプを追跡します。
• webflow-style-guide スキルがスタイルガイド（プロトタイプの最初のページ）を作成します。
• conventions.md（webflow-build 内）は、プロトタイプが従うページとセクション構造、クラスと変数の命名規則を定めています。lessons/ には、以前のビルドで時間を要した教訓が格納されています。
• rules.md には、すべての Webflow スキルが共有するルール（OK がない限りコミットやプッシュをしない、Designer が優先、チャットに認証情報を記載しない）、セッションのまとめ方、およびコントリビューション方法が記載されています。

すべてのチェックリスト項目には、誰が実行するかが明記されています：[Claude]、[Claude checks]（Claude が確認・報告し、Claude が対応できない部分は人が修正）、または [Person]（Claude はリマインダーと追跡を行いますが、実行は主張しません）。

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

1. ワークスペースの CLAUDE.md、次にリポジトリの AGENTS.md と GOTCHAS.md、そして docs/handoff/ を読みます。lessons/README.md にざっと目を通します。lessons/mcp.md のインポーターに関する教訓が、プロトタイプのマークアップの書き方を決定します。
2. プロジェクトメモリ（前回のセッションで停止した場所、未解決の質問）を読みます。現状と次のアクションを1行で述べます。
3. 新しいプロジェクトの場合、最初に checklists.md の プロトタイプの前に を実行します。入力が不足している場合は尋ねます。コンテンツ、ステート、SEO フィールドを推測しないでください。
4. プロトタイプ開発サーバーが実行中です（prototype/ 内で pnpm dev）。
5. 本日の範囲は1ページです。どのページか述べてください。

プロジェクトセットアップ（新規プロジェクト）

Bench 内の場合： 「クライアントを追加」→「Figma デザインから」を選択すると、クライアントフォルダ、このテンプレートからのリポジトリ、空の prototype/ がセットアップされ、ユーザーが選択したフレームからプロトタイプが構築されます（ステップ6）。ユーザー側の手順（4）と入力は引き続き適用されます。

Bench 外の場合： フローは1つのメッセージから始まります（README › プロジェクトの開始）。例："新規プロジェクト：Webflow サイト 、Figma 。リポジトリとワークスペースをセットアップし、「プロトタイプの前に」を実行し、Figma ファイルからページごとにプロトタイプを構築してください。Webflow の変更は私の指示があるまで待ってください。"

その前に、ユーザーは GitHub 上でテンプレートからリポジトリを作成し、それをクライアントフォルダ（<Client>/wf-<client>/）にクローンし、スターターサイトをクライアント名で複製しておく必要があります（starter-site.md）。

1. まずはスキル。 pnpm update-skills を提案します（尋ねてください。ローカルのスキル編集は置き換えられます）。これにより、プロジェクトが最新の教訓から開始されます。

2. サイトを見つける。 Webflow コネクタを介してサイトをリストし、ユーザーが指定した名前と一致するものを探します：サイト ID とショートネーム（ステージングサブドメイン、<short name>.webflow.io）。2つ一致する場合、または一致しない場合は、ユーザーに確認します。GitHub の Org とリポジトリは git remote get-url origin で読み取ります。

3. リポジトリに入力し、ワークスペースをセットアップする：

   pnpm install
   pnpm new-project --client "<Client>" --slug <short name> --org <org> --site-id <id>
   

   これにより、AGENTS.md のプロジェクト情報、package.json の name、loader.html の REPO、ハンドオフのタイトルが入力され、webflow-build.config.json が書き込まれます。リポジトリの周りにワークスペースを作成します：<Client>/CLAUDE.md（AGENTS.md、GOTCHAS.md、docs/handoff/ をインポート）、.mcp.json、スキルへのリンク、prototype/（prototype-starter/ のコピー）、Assets/。Figma リンクをワークスペースの CLAUDE.md（Design 行）に書き込みます。見つからない値はすべてユーザーに確認します。決して推測しないでください。

4. ユーザーの手順を、この順序でリストし、 完了するまで docs/handoff/MANUAL-TODO.md で追跡します。

   1. リポジトリ設定 → Pages → Source: GitHub Actions。開発者チームを追加します。
   2. 最初のプッシュ：Claude はセットアップのコミットを依頼します。プッシュ後、ステージングワークフローが成功する必要があります（https://<org>.github.io/<repo>/styles.css が読み込まれること）。
   3. loader.html からローダーを貼り付けます（ORG と REPO は既に入力されています）：Site settings の head code と footer code。埋め込み 2a と 2b はすでに G | Components にプレースホルダーとともにあります。Claude は許可を得た後、MCP を介してそれらを埋めるか、ユーザーが直接貼り付けます。
   4. ローンチまでステージングパスワードと noindex を設定します。

5. ワークスペースに移動する。 次のセッションから、Claude はリポジトリ内ではなく <Client>/ で開かれます。そこに MCP サーバー、スキル、インポートがセットアップされています。prototype/ で pnpm install を実行します。

6. 入力、次にプロトタイプ。 checklists.md の プロトタイプの前に を実行し（コンポーネント計画とビデオリストを含みます）、Figma ファイルを読み取り（figma.md）、Webflow スナップショットを取得し、ファイルからプロトタイプを構築します：最初にスタイルガイド（webflow-style-guide スキル）。コンテンツページの前に承認を得ます。その後、選択されたフレームからページごとに構築します（webflow-build › プロトタイプ（Figma から））。各ページは プロトタイプページ完了 を通過します。

7. デザインから docs/handoff/HANDOFF.md を埋めます。初回セッションから MANUAL-TODO.md と BUILD-NOTES.md を最新の状態に保ちます。

プロトタイプ

• Webflow をミラーリングします： 同じ URL、同じブレークポイント（991、767、479）、Webflow のクラス名、および conventions.md のページシェルとセクション構造。ナビゲーションとフッターは単一のパーシャル（それぞれ1つのコンポーネント）です。
• コンポーネントと CMS をマークします： コンポーネントインスタンスのルートに data-component="<Component name>"（Nav と Footer のパーシャルもこれを持ちます）、コンポーネントプロパティが設定するものに data-prop="<Prop name>"、コレクションリストのラッパーに data-collection="<Collection name>"、CMS フィールドにバインドされた要素（リストアイテム内または CMS テンプレートページ上）に data-field="<Field name>" を設定します。見た目は変わりません。また、これらは Webflow では作成されません。Webflow には独自のコンポーネントと CMS バインディングがあります（prototype-starter/README.md › コンポーネントと CMS マーカー）。
• サイトの変数を読み取ります： Webflow のスナップショットから読み取ります（prototype-starter/README.md › Webflow スナップショット）。スナップショットの書き込みまたは更新後：pnpm css、次に pnpm check:snapshot、その後 pnpm check:drift を実行します。これはスナップショットとステージングサイトが公開するスタイルシートを比較し、異なるすべての変数、クラス、値をリストします（最初にステージングに公開してください）。
• Webflow コネクタがない場合？（まだセットアップされていない、別のサイトにサインインしている、または MCP コールが許可されていない）pnpm css:published <staging URL> は、サイトが公開する CSS から tokens.css、webflow.css、webflow-base.css を構築し（GET のみ。ページごとの CSS はページごとに読み取られてマージされます）、CSS が許す限りスナップショットを復元します。CSS は正確ですが、Designer 名、モード名、空のクラス、インタラクションは含まれていません（スクリプトのヘッダーに推測されるすべての項目がリストされます）。そのため、HANDOFF.md にスナップショットは暫定的なものであると明記し、推測された名前で変数やクラスを提案せず、必ず Designer で確認し、MCP が利用可能になり次第スナップショットを置き換えてください（webflow-snapshot/source.json を削除し、pnpm css を実行）。source.json が存在する間、pnpm css は実行を拒否します。
• 変数の変更は提案のみで、実行はしません： proposed.css に old → new の形式で、グループ化し、承認のためにアルファベットでラベル付けします。新しいクラスは new-classes*.css に、Designer が保持できる形式で記述します。
• マークアップはインポーター向けに記述します： シェイプは div であり、空のスパンではありません。フォームコントロールは <form> 内に配置します。ブール属性には値を設定します。改行の前には   を付けます。モジュールはクラス名ではなく data-* フックに依存します。pnpm wf:preflight ですべてをチェックします。

順序。

1. スナップショット、pnpm css、pnpm check:snapshot、pnpm check:drift（コネクタがない場合：pnpm css:published、その後同じチェック）。
2. スタイルガイド（webflow-style-guide スキル）。コンテンツページの前に承認を得ます。
3. ページを、Figma フレームから一度に1つずつ（webflow-build › プロトタイプ（Figma から））。各ページについて：構築します。導入されたすべてのクラスまたはコンポーネントの行を追加します（pnpm style-guide）。pnpm screens（2560 から 360 までのすべての幅：オーバーフローとエラー）と pnpm check:states（フォーカス状態とプレス状態）を実行します。プロトタイプページ完了 を実行します。ユーザーが 1440、820、667、390 で承認します。
4. クライアントがプロトタイプを書面で承認します。
5. ハンドオフ（下記参照）。

ビルドへの引き継ぎ

checklists.md の プロトタイプハンドオフ を実行します。ビルドセッションが出発点とするパッケージ：

• docs/handoff/HANDOFF.md：ページ、変数とクラス、CMS、作成するコンポーネント、モジュールとそのフック、ビデオリスト。
• pnpm wf:styles：すべての新しいクラスを、コネクタが作成できるもの、ユーザーが Designer で手動設定するもの（すでに MANUAL-TODO.md に行があります）、リポジトリの CSS に追加するものに分類します。
• pnpm wf:preflight：ページごとの既知のインポーターステップ。
• 承認されたプロトタイプ自体（実行中）。ビルドの比較対象として使用されます（pnpm wf:compare、wf:pass）。

次に、ユーザーにビルドセッションを開始するメッセージを、入力済みの状態で渡します。ワークスペースフォルダで開かれた新しいセッションに貼り付けます：

の続行：Webflow でビルド。プロトタイプは承認済み（すべてのページとスタイルガイド、<日付>）。ワークスペースの CLAUDE.md、docs/handoff/、および webflow-build スキルを読んでください。基礎から始めてください：proposed.css から変数バッチを提案し、各 Webflow 書き込みの前に私の許可を待ってください。その後、タグスタイル、クラス（スタイル計画から）、CMS コレクション、リポジトリポートとローダー、スタイルガイドページ、メディアページ（ビデオリストにエントリがある場合）、コンポーネント、そしてページを、1セッションに1ページずつ進めてください。

ビルドは独自のセッションで実行されるため、ビルドルールのみが読み込まれ、プロトタイプは参照用としてそのまま残ります。

作業リズム

• 1セッションにつき1ページ、完全に完了させる： 構築、すべての幅でチェック、ステートの完了、プロトタイプページ完了 の実行、ハンドオフの更新。
• docs/handoff/ は常に最新の状態に保つ： セッション終了時ではなく、決定が行われた時点で HANDOFF.md に反映します。
• 教訓は還元する。 まとめの際に、template-candidate の教訓をすべてテンプレートに提供します（rules.md › コントリビューション）。