WindsurfでWeb制作を進めるなら、ページ全体を一度に生成させるより、既存プロジェクトを読ませ、小さな画面単位で実装し、ブラウザー表示とコード差分を交互に確認する方が手戻りを抑えられます。着手前に完成条件を「見た目」「動作」「既存設計との整合」に分け、各段階で何を確かめるか決めてください。
製品とドキュメントは移行中です。以前のWindsurf公式ドキュメントの一部は、現在Devin DesktopのCascade関連ページへ案内されます。そこで説明されるCode / Chat modeやチェックポイントを、すべてのWindsurf利用者が同じ画面・条件で使えるとみなさないでください。利用中のアプリ、プラン、組織設定で表示される機能を確認し、Previewsがない場合は通常の開発サーバーとブラウザーで代替します。
目次
まず「できた状態」を確認可能な条件にする
「このサイトを作って」だけでは、ページ構成、色、余白、レスポンシブ挙動をAIが仮定します。後から違いを見つけても、どの前提が外れたのか追いにくくなります。最初にページの目的、対象ユーザー、参照デザイン、必要な画面幅、主要操作、再利用する部品を短く整理します。
たとえば商品紹介ページなら、「初めて来た人が対象サービスと料金の差を理解し、詳細を見るか問い合わせるか決められる」を目的にします。完成条件は、H1がページの目的を示す、料金表がスマートフォンでも読める、問い合わせボタンがフォームへ進む、既存のヘッダーとフッターを再利用する、のように検査できる形にします。色の印象だけでなく、操作結果も条件に含めます。
Projectを読ませてから変更範囲を決める
既存サイトでは、最初の作業は新しいコードを書くことではありません。README、依存関係、ルート構成、共通レイアウト、CSS変数、画像の置き場所、実行とテストの方法を調べ、いまの設計を把握します。似たページを一つ見つけ、何を流用できるか確認します。
最初の依頼は「編集を始めず、関連ファイル、既存パターン、実行方法、変更候補、未確定事項を列挙する」とします。ここで無関係な置換や新規依存が提案されていないか確認してください。実装範囲は必要なページと共通部品に限定します。ページ専用の装飾を共通CSSへ押し込むと、他の画面に回帰が広がることがあります。
Design specは数値・参照先・状態で伝える
「今風に」「余白を広く」だけでは、完成イメージの幅が大きすぎます。参照画像がある場合は画面幅、最大コンテンツ幅、見出し階層、カード間隔、画像比率、ボタン位置などを示します。数値が分からない場合は、既存ページのどの要素に合わせるか指定します。
通常状態だけでなく、空、読み込み中、エラー、長い日本語、画像なしも扱います。フォームなら入力中・送信中・成功・失敗、検索なら結果あり・0件を別々に考えます。アニメーションは目的と停止条件を伝え、不要なら追加しません。指示が多い場合は、構造、見た目、細部の順に分けると各変更の意味を追いやすくなります。
Section単位で実装と確認を行う
ヘッダー、ヒーロー、主要コンテンツ、補足情報、フッターのように、意味のあるまとまりごとに作ります。各まとまりで「入力、表示、操作結果」を確認してから次へ進みます。ヒーローだけ仕上げ、下部を仮の文章で埋めるのではなく、ページ全体の情報順を先に決めておきます。
依頼には編集対象と変更禁止範囲を含めます。例：「既存HeaderとFooterは再利用し、料金セクションだけ追加。routeとデータ形式は変えない。実装前に関連componentを調べ、差分を小さくする」。生成後は差分を見て、ファイルの無断追加、似たcomponentの重複、本番URLの直書き、既存APIの変更がないか確認します。大きな変更は、レビュー可能な単位に切ります。
Previewが使える場合の確認順
利用中の環境にPreviews機能があれば、ローカルアプリをIDE内またはブラウザーで開き、表示要素とコードの対応を確かめます。現在の公式ドキュメントは旧Windsurf URLからDevin Desktopの説明へ移る場合があるため、実際のアプリで機能が表示されるか確認してください。見当たらなければ通常の開発サーバーを起動し、ブラウザーで確認すれば目的は満たせます。
1440pxだけでなく390px前後でも表示します。横スクロール、見出しの改行、押しやすさ、比較表の可読性、画像の切れ、固定要素との重なりを見ます。ボタンを押し、遷移先、フォーム結果、開閉状態を確かめます。スクリーンショットは視覚QAに役立ちますが、動作確認の代わりにはなりません。
Visual feedbackを再現可能な依頼にする
「見た目が変」ではなく、画面幅、場所、期待と実際を伝えます。例：「390pxで料金カードの右端が画面外に出る。カードを親幅内に収め、価格と注記は折り返す。desktopの3列表示は維持する」。スクリーンショットや選択要素を共有できる機能があれば、対象も添えます。
エラーを渡すときは全文、発生操作、直前の変更、再現手順をまとめます。AIの原因説明が正しいか、該当ファイルと差分を確かめてください。表示上の問題に対してページ全体を作り直す必要はありません。修正後は同じ幅・同じ操作で再現しなくなったか確認します。
まずは使ってみる
記事の文脈に合うToolへ進めます。報酬の有無で見た目は変えていません。
Windsurf
画面と動作のQA表
表は横にスクロールできます
| 観点 | 確認すること | 未達の場合 |
|---|---|---|
| 構造 | 見出し順、既存レイアウト、主要セクション | 情報順を先に直す |
| 見た目 | 参照との差、文字幅、余白、画像比率 | 対象sectionだけ調整 |
| 操作 | link、button、form、開閉状態 | 期待結果を再定義 |
| responsive | 390pxとdesktop、横はみ出し | 問題要素を特定 |
| accessibility | keyboard、label、contrast、代替text | 操作と意味を補う |
| 技術 | lint、型、test、build | 原因別に確認 |
| 差分 | 不要file、重複部品、secret | 不要変更を除く |
検証commandはプロジェクトに既にあるものを使い、存在を確認せず別ツールを追加しないでください。build成功は画面品質の証明ではなく、見た目が正しいことも動作や型の証明ではありません。それぞれ別の確認です。
作業が大きくなった場合の分け方
複数ページ、API、データ移行、認証を一つの依頼で同時に扱うと、変更範囲と失敗原因が広がります。画面構造と見た目を先に作り、データ連携や送信処理は別の変更として扱うとレビューしやすくなります。ただしページ目的に不可欠な動作は後回しにせず、最小の正常系を早めに通します。
仕様が決まっていない点は「未決定」として一覧にします。例：ログイン要否、料金を読むデータ、公開前のnoindex条件。見た目調整では決められず、データ契約やSEOを変える可能性がある判断は、コードで隠さないでください。小さな仮定がURLや保存形式を変える場合は実装前に確認します。
AIものさしの判断
WindsurfをWeb制作に使う価値は、コード生成量より「既存設計に沿う変更を、画面と差分で短い周期に検証できるか」で判断します。projectを読む、変更単位を決める、画面を作る、同じ条件で確かめる順を守ると、見た目と実装のずれを早く発見できます。
PreviewsやCascadeの名称・機能は更新や利用環境で変わるため、利用できると決めつけないでください。画面を開く手段は通常のブラウザーでも代替できます。簡単なLPならsection単位の確認で足りますが、状態を持つ画面では、正常系だけでなく空・エラー・送信後も見ないと、利用者の作業が完了できるか分かりません。
完成の判断は、目的に合う画面か、必要な操作を完了できるか、既存プロジェクトの制約を守るか、変更を人が説明できるかで行います。AIの生成結果やPreviewだけで完了とせず、差分・動作・品質チェックを揃えてから公開へ進めます。
UIを一括生成する前にワイヤーで合意する
ページの文章や画像素材が未確定なら、完成デザインを先に作らせるのではなく、見出しとカードの配置だけを持つ低忠実度の案を作ります。例えば「Heroの下に課題、解決手段、実績、問い合わせの順に置く。各sectionの目的を一行で説明する」と指示します。見た目の装飾を後に回すことで、ページ構成の誤解を早く直せます。構成が承認されたら、既存の色・書体・余白へ合わせます。
画像については、実在しない製品画面やロゴを生成しないようにし、仮画像は仮であると明示します。画像がなくても成立するレイアウトを先に考えると、素材差し替えで大きく崩れにくくなります。画像を追加する場合は、出所、利用条件、alt textも一緒に確認します。
実装依頼の出力を段階管理する
最初に調査結果と計画だけを受け取り、承認可能な範囲が決まった後に編集を依頼します。実装中は一回の変更で複数の未確定事項を同時に解決しないようにします。たとえばカードの情報構造と色の選択を同時に変えると、表示が改善した理由を後から説明しにくくなります。重要な判断を先に決め、細かな調整を後に残します。
作業依頼の最小チェック
依頼を送る前に、目的と対象ページ、触れる範囲、変更しない契約、確認幅、成功条件が一つずつ書けているか見ます。画像を使う場合は素材の出所とライセンス、フォームを含む場合は送信後の状態も指定します。最後に「未確定事項を勝手に補わず列挙する」と加えると、AIが不足を装飾で隠すのを防げます。