Туториал по Windsurf AI: первый сайт с Cascade
Пошаговый разбор для новичков с скриншотами: устанавливаем редактор Windsurf, открываем агента Cascade, генерируем портфолио одним промптом и доводим его до аккуратного тёмного сайта — без единой строчки кода.
Коротко об этом туториале по Windsurf AI
- Windsurf ставится с windsurf.com как обычный редактор, а при первом запуске показывает чек-лист Getting started — пользователи VS Code переносят тему и расширения без потерь.
- Ctrl+L открывает Cascade — панель ИИ-агента. Держите режим Code: тогда она сама пишет файлы. Режим Chat только предлагает код, не трогая проект.
- Один конкретный стартовый промпт собрал портфолио из четырёх файлов — index.html, styles.css, script.js и README — и запустил его на localhost:8000.
- Дальше всё идёт по кругу: короткий уточняющий промпт → проверка диффа красное-зелёное → Accept all → обновление браузера. На всю сборку ушло шесть промптов.
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".
От установки до готового портфолио за 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
Освойте редактор за одну минуту
Перед вами чек-лист Getting started with Windsurf. Слева в сайдбаре Explorer лежат файлы проекта, а в списке отмечены единственные нужные нам сочетания: Ctrl+L открывает Cascade, Ctrl+I правит код прямо в строке. Это вся подготовка, которая требуется для урока.
Чек-лист Getting started и папка проекта, уже открытая в Explorer.Смотреть с 0:45 - 4
Откройте панель Cascade по Ctrl+L
Нажмите Ctrl+L (Cmd+L на macOS) — справа откроется 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 сначала разобьёт задачу на todo-список и только потом начнёт писать код.
Готовый промпт портфолио: выбраны Code-режим и Claude Sonnet 4.5, нажимаем Send.Смотреть с 1:35 - 6
Смотрите, как Cascade создаёт файлы
Cascade идёт по своему todo-списку: сначала index.html (231 строка), затем styles.css, script.js и README с описанием проекта. Каждый новый файл появляется в панели со зелёным счётчиком строк, а к финалу трекер показывает 3 files, +1132.
Todo-список Cascade на ходу: index.html, styles.css и script.js уже готовы.Смотреть с 2:10 - 7
Откройте предпросмотр в браузере
В финальном отчёте сказано, что сайт работает на http://localhost:8000 — кликните ссылку предпросмотра, и откроется полноценный одностраничник: липкое меню, hero с круглым аватаром, about, projects и контактная форма. Присмотритесь к заголовку: на странице напечатан сырой тег <span>. Черновики с мелкими багами — норма, мы починим это на шаге 13.
Сгенерированный сайт на localhost:8000 — готов, если не считать сырого span-тега в заголовке.Смотреть с 2:35 - 8
Промпт: тёмная тема и неоновые кнопки
Вернитесь в Windsurf, нажмите Accept all, чтобы сохранить созданные файлы, и отправьте: Make it dark mode and give the buttons a neon glow. В этом ритм работы с Cascade — по одному маленькому промпту за раз, с проверкой результата на каждом шаге.
Итоговый отчёт с Next Steps и уже набранным промптом про тёмную тему.Смотреть с 3:05 - 9
Проверьте дифф и нажмите Accept all
Cascade переписывает styles.css и показывает каждую правку в виде диффа: красные строки — удалённый CSS, зелёные — добавленный. Здесь светлая палитра меняется на тёмные токены плюс неоново-циановые и пурпурные переменные свечения — всего одиннадцать изменений. Пройдитесь по ним и нажмите Accept all (Alt+A).
Дифф styles.css: красным удалённые светлые переменные, зелёным новые неоновые токены.Смотреть с 3:32 - 10
Обновите браузер и проверьте
Переключитесь на вкладку браузера и обновите страницу. То же портфолио теперь чёрное со свечением: у View My Work градиент от циана к пурпуру, Get In Touch обведён неоном, а заголовок About Me подсвечен разделителем. Проверка после каждого промпта не даёт мелким сюрпризам накапливаться.
Тёмная версия после обновления: неоновые кнопки и блок About Me под меню Portfolio.Смотреть с 4:12 - 11
Добавьте анимации прокрутки и появления
Отправьте: Add smooth scroll animation and fade effects. Cascade добавит scroll-behavior: smooth и классы .fade-in, Intersection Observer, который проявляет секции при попадании в кадр, лёгкий параллакс круга в hero и каскадное появление тегов навыков. Accept all, обновление — и секции поплывут плавным фейдом при прокрутке.
CSS Scroll Animations рядом с итогами Cascade: обсерверы, параллакс, каскадные появления.Смотреть с 4:32 - 12
Замените заглушки демо-картинками
Круг аватара и карточки проектов всё ещё с иконками-заглушками, поэтому отправьте: Add some demo images. Cascade подключит фото из CDN Unsplash в круг hero и три карточки — с оптимизированными параметрами URL — и добавит карточкам зум при наведении со свечением. Accept all, обновление — и сайт наконец выглядит готовым.
Итоги шага с картинками: фото Unsplash, неоновый круглый профиль, зум при наведении.Смотреть с 4:58 - 13
Поймайте баги и поставьте свою картинку
Попросите Cascade написать в hero Hi! I am Your AI Developer и поместить в круг ИИ-логотип. После обновления всплывут две проблемы: в заголовке печатается буквальный тег <span class="highlight">, а сгенерированный логотип не нравится. Нажмите плюс над полем ввода, выберите Upload image, приложите свою картинку и промптните: remove the span completely and add this image on the right circle.
Hero всё ещё печатает сырой span-тег рядом с логотипом-заглушкой — и фикс через Upload image.Смотреть с 6:05 - 14
Финальная проверка готового сайта
Последнее обновление — и портфолио готово: чистый заголовок Hi! I am Your AI Developer, ваша картинка в светящемся круге, неоновые кнопки, анимированные секции и карточки проектов с фото. Один стартовый промпт и пять коротких уточнений — опиши, прими, проверь, повтори: вот и весь рабочий процесс Windsurf.
Готовое портфолио: чистый заголовок, загруженный аватар-робот, неоновые кнопки.Смотреть с 7:12