Windsurf AI Tutorial: Deine erste Website mit Cascade
Ein bebildertes Einsteiger-Tutorial zum Windsurf AI Editor: installieren, den Cascade-Agenten öffnen, mit einem einzigen Prompt ein Portfolio generieren und Schritt für Schritt zu einer gepflegten Dark-Website ausbauen — ganz ohne Programmieren.
Das Wichtigste zu diesem Windsurf-AI-Tutorial
- Windsurf wird wie ein normaler Editor von windsurf.com installiert und startet mit einer Getting-started-Checkliste — VS-Code-Nutzer nehmen Theme und Extensions einfach mit.
- Mit Ctrl+L öffnest du Cascade, das KI-Agenten-Panel. Lass es im Code-Modus, dann schreibt Cascade direkt Dateien; der Chat-Modus schlägt nur Code vor, ohne ihn anzuwenden.
- Ein konkreter Start-Prompt hat ein komplettes Portfolio aus vier Dateien erzeugt — index.html, styles.css, script.js und ein README — läuft auf localhost:8000.
- Danach gilt immer derselbe Kreislauf: kurzer Folge-Prompt, Rot-Grün-Diff prüfen, Accept all, Browser aktualisieren. Sechs Prompts reichten für den ganzen Build.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
Kanal:Web Tech Knowledge7:24
Alle Screenshots stammen aus dem Video und illustrieren die eigens für diese Seite geschriebenen Schritt-für-Schritt-Anleitungen. Jeder Schritt verlinkt per Zeitstempel direkt zur passenden Stelle im Video.
Alle Videomaterialien © Web Tech Knowledge. Die Windsurf-Begriffe (Cascade, Code-/Chat-Modus, Accept all) wurden anhand von Tech With Tims "Windsurf Tutorial for Beginners (AI Code Editor)" und corbins "How To Use Windsurf Editor For Beginners" gegencheckt.
Update 2026: Cognition hat dieses Produkt am 2. Juni 2026 in Devin Desktop umbenannt, und der Cascade-Agent wurde am 1. Juli 2026 eingestellt – dieses Tutorial bleibt als Dokumentation der Cascade-Ära erhalten. Lesenswert: Was ist mit Windsurf passiert
Vom Download zum fertigen Portfolio in 14 Schritten
- 1
Windsurf von der offiziellen Website herunterladen
Öffne windsurf.com und klicke auf Download for Windows (macOS- und Linux-Versionen stehen direkt daneben). Starte den Installer und melde dich an. Bietet der Editor an, deine VS-Code-Einstellungen zu importieren, nimm das an — Windsurf ist ein VS-Code-Fork, Theme und Extensions bleiben erhalten.
Die windsurf.com-Startseite mit dem Download-for-Windows-Button ganz mittig.Video ab 0:10 - 2
Einen leeren Projektordner anlegen
Wähle auf dem Willkommensbildschirm Code with Cascade und klicke dann auf Open Folder. Lege einen neuen Ordner an — im Video heißt er My_cool_portfolio — und klicke auf Select Folder. Ein leerer Ordner genügt; jede Datei erstellt Cascade von selbst.
Einen frischen Ordner im Open-Folder-Dialog benennen, dann Select Folder klicken.Video ab 0:33 - 3
Das Editor-Layout in einer Minute verstehen
Du landest auf der Getting-started-with-Windsurf-Checkliste. In der Explorer-Seitenleiste links liegen deine Projektdateien, und die Liste nennt die einzigen zwei Shortcuts, die du brauchst: Ctrl+L öffnet Cascade, Ctrl+I bearbeitet Code direkt in der Zeile. Mehr Einarbeitung braucht dieses Tutorial nicht.
Die Getting-started-Checkliste, im Explorer ist der Projektordner schon geöffnet.Video ab 0:45 - 4
Das Cascade-Panel mit Ctrl+L öffnen
Drücke Ctrl+L (Cmd+L auf dem Mac), und Cascade öffnet sich rechts mit einem Ask-anything-Eingabefeld. Lass darunter den Code-Modus ausgewählt — nur so darf Cascade direkt Dateien schreiben. Der Chat-Modus schlägt lediglich Code vor, ohne dein Projekt anzufassen. Wähle danach im Dropdown ein Modell; diese Anleitung nutzt Claude Sonnet 4.5.
Cascades Startansicht mit Ask-anything-Feld, Code-Modus-Schalter und Modellauswahl.Video ab 1:03 - 5
Den Build-Prompt abschicken
Tippe: Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. Den Stack zu nennen und die Sektionen aufzulisten zählt — je konkreter der Prompt, desto besser das Ergebnis. Nach dem Senden zerlegt Cascade den Auftrag in eine Todo-Liste, bevor es eine Zeile schreibt.
Der fertige Portfolio-Prompt: Code-Modus aktiv, Claude Sonnet 4.5 gewählt, Senden klicken.Video ab 1:35 - 6
Zusehen, wie Cascade die Dateien baut
Cascade arbeitet ihre Todo-Liste ab: zuerst index.html (231 Zeilen), dann styles.css, script.js und ein README, das das Projekt dokumentiert. Jede neue Datei taucht im Panel mit grünem Zeilenzähler auf, am Ende zeigt der Tracker 3 files, +1132.
Cascades Todo-Liste im Bau: index.html, styles.css und script.js stehen schon.Video ab 2:10 - 7
Die Browser-Vorschau öffnen
Im Abschlussbericht heißt es, die Website läuft auf http://localhost:8000 — klicke den Vorschau-Link an, und ein komplettes One-Page-Portfolio öffnet sich: fixe Navbar, Hero mit Profil-Kreis, About, Projects und ein Kontaktformular. Schau genau aufs Headline: Dort steht ein roher <span>-Tag als Text. Erste Entwürfe haben kleine Bugs — den fixen wir in Schritt 13.
Die generierte Website auf localhost:8000 — komplett, bis auf den rohen Span-Tag in der Headline.Video ab 2:35 - 8
Dark Mode und Neon-Buttons prompten
Zurück in Windsurf klickst du zuerst Accept all, damit die erzeugten Dateien gespeichert sind, und schickst dann: Make it dark mode and give the buttons a neon glow. Das ist der Rhythmus mit Cascade — immer ein kleiner Folge-Prompt mit einem klaren Ziel, Ergebnis prüfen, dann weiter.
Cascades Abschlussbericht mit Next Steps und dem getippten Dark-Mode-Prompt.Video ab 3:05 - 9
Diff prüfen, dann Accept all
Cascade schreibt styles.css um und zeigt jede Änderung als Diff: rote Zeilen sind gelöschtes CSS, grüne sind Ergänzungen. Hier weicht die helle Palette dunklen Tokens plus Neon-Cyan- und Neon-Magenta-Glow-Variablen — verteilt auf elf Änderungseinträge. Geh sie durch und klicke Accept all (Alt+A).
Das styles.css-Diff — gelöschte Hell-Theme-Variablen rot, neue Neon-Tokens grün.Video ab 3:32 - 10
Browser aktualisieren und prüfen
Wechsle in den Browser-Tab und lade neu. Dasselbe Portfolio ist jetzt schwarz mit leuchtenden Akzenten: View My Work trägt einen Cyan-Magenta-Verlauf, Get In Touch hat eine Neon-Kontur, und über der About-Me-Überschrift liegt ein glühender Trennstrich. Nach jedem Prompt prüfen — so stapeln sich kleine Überraschungen nicht.
Der Dark-Refresh: Neon-Buttons und die About-Me-Sektion unter der Portfolio-Navbar.Video ab 4:12 - 11
Scroll-Animationen und Fade-Effekte ergänzen
Schicke: Add smooth scroll animation and fade effects. Cascade ergänzt scroll-behavior: smooth und .fade-in-Klassen, einen Intersection Observer, der Sektionen beim Erscheinen im Viewport einblendet, einen dezenter Parallax-Effekt am Hero-Kreis und gestaffelte Skill-Tags. Accept all, neu laden, scrollen — die Sektionen blenden jetzt nacheinander ein.
Der Scroll-Animations-CSS neben Cascades Zusammenfassung von Observer, Parallax und Staffelung.Video ab 4:32 - 12
Platzhalter durch Demo-Bilder ersetzen
Profil-Kreis und Projektkarten sind noch Icon-Platzhalter, also schicke: Add some demo images. Cascade zieht Fotos aus Unsplashs CDN in den Hero-Kreis und die drei Projektkarten — mit optimierten URL-Parametern dimensioniert — und gibt den Karten einen Zoom-und-Glow-Hover. Accept all, neu laden, und die Website sieht endlich fertig aus.
Cascades Bild-Zusammenfassung: Unsplash-Fotos, neonroter Profil-Kreis, Hover-Zooms.Video ab 4:58 - 13
Bugs finden und das eigene Bild einsetzen
Bitte Cascade, im Hero Hi! I am Your AI Developer zu schreiben und ein KI-Logo in den Kreis zu setzen. Nach dem Neuladen zeigen sich zwei Schwächen: Im Headline steht das wörtliche <span class="highlight">-Markup, und das generierte Logo gefällt nicht. Klicke auf das Plus-Symbol über dem Eingabefeld, wähle Upload image, hänge dein eigenes Bild an und prompte: remove the span completely and add this image on the right circle.
Der Hero zeigt weiterhin den rohen Span-Tag neben einem Platzhalter-KI-Logo — plus Upload-image-Fix.Video ab 6:05 - 14
Letzter Check der fertigen Website
Ein letztes Neuladen, und das Portfolio ist fertig: die saubere Headline Hi! I am Your AI Developer, dein eigenes Bild im leuchtenden Hero-Kreis, Neon-Buttons, animierte Sektionen und Projektkarten mit Fotos. Ein Start-Prompt, fünf kurze Folge-Prompts — beschreiben, annehmen, prüfen, wiederholen: das ist der komplette Windsurf-Workflow.
Das fertige Portfolio: saubere Headline, hochgeladener Roboter-Avatar, Neon-Buttons.Video ab 7:12