Windsurf AI チュートリアル：Cascade で初めてのサイトを作る
AI エディタ Windsurf の入門を、スクリーンショット付きで段階的に解説します。インストールから Cascade の起動、プロンプト 1 つでポートフォリオサイトを生成し、仕上げのダークサイトへ仕上げるまで。コーディングは一切不要です。
この Windsurf AI チュートリアルの要点
- Windsurf は windsurf.com から普通のエディタと同じ要領でインストールでき、起動すると Getting started チェックリストが表示されます。VS Code ユーザーはテーマや拡張機能をそのまま引き継げます。
- Ctrl+L で AI エージェントパネルの Cascade が開きます。Code モードのままにすればファイルを直接編集し、Chat モードはコードの提案のみを行います。
- 技術スタックとセクションを明記したプロンプト 1 つで、index.html・styles.css・script.js・README の 4 ファイルからなる完全なポートフォリオが生成され、localhost:8000 で表示されました。
- そのあとは「小さなフォローアッププロンプト → 赤・緑の差分を確認 → Accept all → ブラウザを更新」のループです。全体でプロンプトは 6 だけ。
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
チャンネル：Web Tech Knowledge7:24
掲載している画面はすべて元動画のスクリーンショットで、このページのために書き起こしたオリジナルの手順解説に添えています。各ステップから動画の該当シーンへタイムスタンプで直接ジャンプできます。
動画はすべて Web Tech Knowledge の著作物です。Windsurf の用語（Cascade、Code/Chat モード、Accept all）は、Tech With Tim の「Windsurf Tutorial for Beginners (AI Code Editor)」および corbin の「How To Use Windsurf Editor For Beginners」で確認しています。
2026 年アップデート:本製品は 2026 年 6 月 2 日に Cognition により Devin Desktop へと改名され、Cascade エージェントは 2026 年 7 月 1 日に提供終了となりました。本チュートリアルは Cascade 時代の操作記録として残しています。 関連記事:Windsurf に何が起きたか
ダウンロードから完成までの 14 ステップ
- 1
公式サイトから Windsurf をダウンロード
windsurf.com を開き、Download for Windows をクリックします（macOS 版と Linux 版も並んでいます）。インストーラを実行してサインインしましょう。VS Code の設定を取り込むか尋ねられたら「はい」を選びます。Windsurf は VS Code のフォークなので、テーマや拡張機能をそのまま引き継げます。
windsurf.com のトップページ。Download for Windows ボタンが中央にあります。動画の 0:10 から見る - 2
空のプロジェクトフォルダを作る
ウェルカム画面で Code with Cascade を選び、Open Folder をクリックします。新しいフォルダを作成します（動画では My_cool_portfolio）。Select Folder を押すだけで準備完了です。空のフォルダがあれば十分で、ファイルはすべて Cascade が作成します。
Open Folder ダイアログで新規フォルダに名前を付け、Select Folder を押すところ。動画の 0:33 から見る - 3
エディタのレイアウトを 1 分で把握
起動直後には Getting started with Windsurf のチェックリストが表示されます。左側の Explorer サイドバーにプロジェクトファイルが並び、必要なショートカットは 2 つだけとリストに示されています。Ctrl+L で Cascade を開き、Ctrl+I でコードをインライン編集します。このチュートリアルに必要な予備知識はこれだけです。
Getting started チェックリストと、Explorer に開かれたプロジェクトフォルダ。動画の 0:45 から見る - 4
Ctrl+L で Cascade パネルを開く
Ctrl+L（macOS は Cmd+L）を押すと、右側に Cascade が開き Ask anything という入力欄が現れます。入力欄の下は Code モードのままにしてください。これが Cascade がファイルを直接書き換えるための設定で、Chat モードではコードの提案のみでファイルには触れません。続いてモデルをドロップダウンから選びます。このチュートリアルでは Claude Sonnet 4.5 を使用します。
Cascade の初期画面。Ask anything 入力欄、Code モード切替、モデルピッカーが並びます。動画の 1:03 から見る - 5
生成用のプロンプトを送る
次のように入力します。Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. 技術スタックを明示し、必要なセクションを列挙するのがポイントです。プロンプトが具体的なほど結果は良くなります。送信を押すと、Cascade は 1 行も書く前にタスクを todo リストへ分解します。
Code モードで Claude Sonnet 4.5 を選び、ポートフォリオのプロンプトを送信するところ。動画の 1:35 から見る - 6
Cascade がファイルを生成する
Cascade は todo リストに沿って進みます。まず index.html（231 行）、続いて styles.css、script.js、最後にプロジェクトを説明する README を作成。新しいファイルが緑の行数カウンタ付きでパネルに現れ、コードが完成した時点でトラッカーは 3 files、+1132 を示します。
生成中の Cascade の todo リスト。index.html・styles.css・script.js が完成済みです。動画の 2:10 から見る - 7
ブラウザプレビューを開く
完了レポートにはサイトが http://localhost:8000 で動いていると表示されます。プレビューリンクをクリックすると、固定ナビ・プロフィール円形枠付きヒーロー・about・projects・お問い合わせフォームを備えた 1 ページのポートフォリオが開きます。見出しに注目してください。生の <span> タグがそのまま表示されています。初稿に小さなバグはつきもので、ステップ 13 で修正します。
localhost:8000 に生成されたサイト。見出しの span タグ以外はほぼ完成しています。動画の 2:35 から見る - 8
ダークモードとネオンボタンを依頼する
Windsurf に戻り、まず Accept all を押してファイルを保存します。そのうえで Make it dark mode and give the buttons a neon glow と送りましょう。Cascade との付き合い方はこれで基本です。目標を 1 つに絞った小さなフォローアップを都度送り、結果を確認してから次へ進みます。
Next Steps 付きの完了レポートと、入力欄に打ち込まれたダークモードのプロンプト。動画の 3:05 から見る - 9
差分を確認して Accept all
Cascade は styles.css を書き直し、全編集を差分で示します。赤い行が削除された CSS、緑の行が追加です。ここではライトの配色がダークのトークンと、ネオンシアン・ネオンマゼンタのグロー変数に置き換わり、変更エントリは計 11 件。目を通してから Accept all（Alt+A）を押します。
styles.css の差分。赤が削除されたライトテーマ変数、緑が新規のネオントークンです。動画の 3:32 から見る - 10
ブラウザを更新して確認する
ブラウザのタブに切り替えて更新します。同じポートフォリオが黒基調のグロー仕様に変わっています。View My Work はシアンからマゼンタへのグラデーション、Get In Touch はネオンのアウトライン、About Me の見出しの下には光る区切り線が。プロンプトのたびに確認すれば、小さな驚きが積み重なりません。
更新後のダークサイト。ネオンボタンと Portfolio ナビ下の About Me セクション。動画の 4:12 から見る - 11
スクロールアニメーションとフェードを追加
Add smooth scroll animation and fade effects と送ります。Cascade は scroll-behavior: smooth と .fade-in クラスを加え、セクションが視界に入った瞬間に表示する Intersection Observer、ヒーロー円形枠の控えめなパララックス、スキルタグの時間差アニメーションを実装します。Accept all して更新し、スクロールすれば各セクションがフェードインします。
Scroll Animations の CSS と、オブザーバ・パララックス・時間差表示をまとめた Cascade の要約。動画の 4:32 から見る - 12
プレースホルダをサンプル画像に置き換える
プロフィール円形枠とプロジェクトカードはまだアイコンのままなので、Add some demo images と送ります。Cascade は Unsplash の CDN から画像を取り込み、ヒーロー円形枠と 3 枚のカードへ配置します。URL パラメータで最適化されたサイズで、カードにはホバー時のズームとグロー効果が付きます。Accept all して更新すれば、ついに完成品の見た目になります。
画像パスの要約。Unsplash 写真、ネオンの円形プロフィール枠、ホバーズーム。動画の 4:58 から見る - 13
バグを直して自分の画像に入れ替える
ヒーローに Hi! I am Your AI Developer と表示し、円形枠に AI ロゴを入れるよう Cascade に依頼します。更新すると 2 つの問題が浮き彫りに。見出しに <span class="highlight"> という文字列がそのまま印刷され、生成されたロゴも期待外れです。入力欄上のプラスアイコンをクリックして Upload image を選び、自分の画像を添えて、remove the span completely and add this image on the right circle とプロンプトします。
生の span タグとプレースホルダの AI ロゴが残るヒーローと、Upload image による修正。動画の 6:05 から見る - 14
完成サイトの最終チェック
最後の更新でポートフォリオの完成です。すっきりした Hi! I am Your AI Developer の見出し、ヒーロー円形枠で光る自分の画像、ネオンボタン、アニメーションするセクション、写真入りのプロジェクトカード。開始のプロンプト 1 つと短いフォローアップ 5 つ。「伝える・受け入れる・確認する・繰り返す」、それが Windsurf のワークフローです。
完成したポートフォリオ。すっきりした見出し、アップロードしたロボット画像、ネオンボタン。動画の 7:12 から見る