webflow-dev

Webflow 開発

既存の Webflow サイトを実装システムとして扱い、提供されたデザインをビジュアル面の信頼できる基準とします。既存のクラス、コンポーネント、アセット、レスポンシブパターン、インタラクションを使ってデザインを再現してください。

対象範囲とアクセス

編集を始める前に、対象となるサイト、ページ、ブランチ、ソースフレームを正確に確認してください。ユーザーが別の対象への変更または公開を許可しない限り、現在のブランチで作業し、未公開のままにしてください。依頼された変更に広範な影響が含まれない限り、共有コンポーネントとグローバルスタイルを保護してください。

Figma または Paper には、利用可能なソースネイティブの連携機能を使用してください。デザインにアクセスできない場合は、利用可能で許可されたエクスポートを使用するか、不足している依存関係を説明してください。別のネイティブ連携機能で必要なデザイン情報を取得できる場合、デスクトップ MCP は不要です。

実装上の制約

新しい構造を追加する前に、対象箇所と、サイト内の類似セクションを確認してください。タイポグラフィ、色、コンテナ、余白、ボタン、レイアウトには、サイトのユーティリティを再利用してください。コピー、順序、寸法、アセット、トリミング、レスポンシブ対応の意図について、ソースデザインを実際に確認してください。

既存のパターンでは必要な構造、インタラクション、またはレスポンシブ調整を表現できない場合に限り、クラスを作成してください。意味のある名前を付け、繰り返し使用する要素には共有クラスを適用してください。タイポグラフィと色には既存のユーティリティを使用してください。新しいクラスはすべて有効な要素に適用し、明確な目的を持たせてください。

サイト内で一致するアセットを再利用してください。不足している画像素材はデザインから適切な解像度でエクスポートし、一度だけインポートしてください。ソースの SVG 画像素材がある場合は保持し、デザイン内の特定のアイコンに合わせてください。適切な代替テキストを設定してください。

スライダー、タブ、アコーディオン、フォーム、フィルターは、機能要件です。既存のネイティブコンポーネントを優先し、カスタムコードは該当セクションに限定してください。お客様の声のスライダーには、interaction-checks.md を使用してください。

ツールとクリーンアップの確認

部分的な成功を示すメッセージや、スタイルが適用されなかったことを示す警告を確認してください。ツールの結果が不明確な場合は、適用されたグローバルクラス、判別しにくいコンボクラスの計算済みスタイル、カスタムコードの内容、管理対象の画像参照を確認してください。依頼された結果に影響する警告は解消してください。

この作業で置き換えた要素、コード、スタイルのみを削除してください。スタイルを削除する前に、有効な要素で使用されていないことを確認してください。使われない重複セクション、プレースホルダー、この作業で作成した未使用クラスを残さないでください。

受け入れ確認と引き継ぎ

対象範囲のすべてのセクションを、サイトに設定されているブレークポイントでソースデザインと比較してください。コピー、階層、余白、色、アセットとトリミング、要素の並び替え、インタラクションを確認し、キーボード操作への対応も検証してください。変更が局所的な場合は、変更したセクションと、影響を受ける共有動作に重点を置いて検証してください。

完了した変更、新しいクラスとその目的、実施した検証、重大な制約、公開状況を報告してください。依頼がない限り、セクションごとの進捗記録や再利用したユーティリティの完全な一覧は不要です。