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.
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