Tutoriel Windsurf AI : créez votre premier site avec Cascade
Un pas-à-pas illustré pour débutants sur l'éditeur Windsurf AI : installez-le, ouvrez l'agent Cascade, générez un portfolio à partir d'un seul prompt, puis itérez jusqu'à un site sombre soigné — sans écrire une ligne de code.
Ce tutoriel Windsurf AI en bref
- Windsurf s'installe depuis windsurf.com comme un éditeur classique et démarre avec une checklist Getting started — les utilisateurs de VS Code retrouvent leur thème et leurs extensions.
- Ctrl+L ouvre Cascade, le panneau de l'agent IA. Restez en mode Code pour qu'il écrive directement dans les fichiers ; le mode Chat se contente de suggérer du code sans l'appliquer.
- Un prompt de départ bien rédigé a produit un portfolio complet de quatre fichiers — index.html, styles.css, script.js et un README — servi sur localhost:8000.
- Ensuite, tout est une boucle : petit prompt de suivi, revue du diff rouge et vert, Accept all, rafraîchissement du navigateur. Six prompts ont suffi pour tout le projet.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
Chaîne :Web Tech Knowledge7:24
Les captures d'écran proviennent de la vidéo et illustrent des instructions originales rédigées pour cette page. Chaque étape renvoie par lien profond au moment exact de la vidéo.
Vidéos © Web Tech Knowledge. La terminologie Windsurf (Cascade, modes Code/Chat, Accept all) a été recoupée avec « Windsurf Tutorial for Beginners (AI Code Editor) » de Tech With Tim et « How To Use Windsurf Editor For Beginners » de corbin.
Du téléchargement au portfolio fini en 14 étapes
- 1
Téléchargez Windsurf depuis le site officiel
Rendez-vous sur windsurf.com et cliquez sur Download for Windows (les versions macOS et Linux sont juste à côté). Lancez l'installeur puis connectez-vous. Si l'éditeur propose d'importer vos réglages VS Code, acceptez : Windsurf est un fork de VS Code, votre thème et vos extensions sont conservés.
La page d'accueil de windsurf.com avec le bouton Download for Windows bien en évidence.Voir à 0:10 - 2
Créez un dossier de projet vide
Sur l'écran d'accueil, choisissez Code with Cascade, puis cliquez sur Open Folder. Créez un nouveau dossier — la vidéo utilise My_cool_portfolio — et cliquez sur Select Folder. Un dossier vide suffit : Cascade créera elle-même chaque fichier.
Nommer un dossier tout neuf dans la boîte de dialogue Open Folder avant Select Folder.Voir à 0:33 - 3
Apprenez l'interface en une minute
Vous arrivez sur une checklist Getting started with Windsurf. La barre latérale Explorer à gauche contient les fichiers du projet, et la checklist met en évidence les deux seuls raccourcis dont vous avez besoin : Ctrl+L ouvre Cascade, Ctrl+I modifie le code en place. C'est tout ce qu'il faut savoir pour ce tutoriel.
La checklist Getting started avec le dossier du projet déjà ouvert dans l'Explorer.Voir à 0:45 - 4
Ouvrez le panneau Cascade avec Ctrl+L
Appuyez sur Ctrl+L (Cmd+L sur macOS) : Cascade s'ouvre à droite avec un champ Ask anything. Sous le champ, laissez le mode Code sélectionné — c'est ce qui permet à Cascade d'écrire directement dans les fichiers. Le mode Chat ne fait que suggérer du code sans toucher au projet. Choisissez ensuite un modèle dans le menu déroulant ; ce pas-à-pas utilise Claude Sonnet 4.5.
L'écran d'accueil de Cascade : champ Ask anything, bascule Code et sélecteur de modèle.Voir à 1:03 - 5
Envoyez le prompt de création
Tapez : Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. Nommer la stack et lister les sections compte — plus le prompt est précis, meilleur est le résultat. Appuyez sur Envoyer : Cascade transforme le cahier des charges en todo list avant d'écrire la moindre ligne.
Le prompt du portfolio prêt à partir, avec Claude Sonnet 4.5 sélectionné en mode Code.Voir à 1:35 - 6
Regardez Cascade construire les fichiers
Cascade déroule sa todo list : index.html d'abord (231 lignes), puis styles.css, script.js et un README qui documente le projet. Chaque nouveau fichier apparaît dans le panneau avec un compteur de lignes vert, et le suivi affiche 3 files, +1132 une fois le code terminé.
La todo list de Cascade en plein chantier : index.html, styles.css et script.js créés.Voir à 2:10 - 7
Ouvrez l'aperçu dans le navigateur
Le rapport final indique que le site tourne sur http://localhost:8000 — cliquez sur le lien d'aperçu et un portfolio one-page complet s'ouvre : navbar fixe, hero avec cercle de profil, à propos, projets et formulaire de contact. Regardez bien le titre : une balise <span> brute s'affiche telle quelle. Les premières versions ont toujours de petits bugs, et celui-ci se corrige à l'étape 13.
Le site généré sur localhost:8000 — complet, sauf une balise span brute dans le titre.Voir à 2:35 - 8
Demandez le mode sombre et des boutons néon
De retour dans Windsurf, cliquez sur Accept all pour enregistrer les fichiers générés, puis envoyez : Make it dark mode and give the buttons a neon glow. C'est le rythme du travail avec Cascade — un petit suivi à objectif unique à la fois, résultat vérifié avant de continuer.
Le rapport final avec ses Next Steps, et le prompt sombre déjà tapé dans le champ.Voir à 3:05 - 9
Relisez le diff, puis Accept all
Cascade réécrit styles.css et liste chaque modification en diff : les lignes rouges sont du CSS supprimé, les vertes des ajouts. Ici, la palette claire laisse place à des tokens sombres et à des variables de lueur cyan et magenta, réparties sur onze entrées. Parcourez-les, puis cliquez sur Accept all (Alt+A).
Le diff de styles.css — variables claires supprimées en rouge, tokens néon ajoutés en vert.Voir à 3:32 - 10
Rafraîchissez le navigateur et vérifiez
Passez à l'onglet du navigateur et rafraîchissez. Le même portfolio est désormais noir aux accents lumineux : View My Work porte un dégradé cyan vers magenta, Get In Touch un contour néon, et le titre About Me est souligné d'un séparateur lumineux. Vérifier après chaque prompt évite que les petites surprises s'accumulent.
La version sombre après rafraîchissement : boutons néon et section About Me sous la navbar.Voir à 4:12 - 11
Ajoutez des animations au défilement
Envoyez : Add smooth scroll animation and fade effects. Cascade ajoute scroll-behavior: smooth et des classes .fade-in, un Intersection Observer qui révèle les sections à leur entrée dans le viewport, un léger parallaxe sur le cercle du hero et des tags de compétences en cascade. Accept all, rafraîchissez, faites défiler — les sections apparaissent en fondu.
Le CSS Scroll Animations à côté du résumé de Cascade : observer, parallaxe, apparitions en cascade.Voir à 4:32 - 12
Remplacez les espaces réservés par des images de démo
Le cercle de profil et les cartes projets sont encore des icônes provisoires, alors envoyez : Add some demo images. Cascade branche des photos du CDN Unsplash dans le cercle du hero et les trois cartes — dimensionnées via des paramètres d'URL optimisés — et ajoute un effet de zoom lumineux au survol. Accept all, rafraîchissez : le site a enfin une allure de produit fini.
Le résumé de la passe image : photos Unsplash, cercle de profil néon, zooms au survol.Voir à 4:58 - 13
Corrigez les bugs et importez votre image
Demandez à Cascade d'écrire Hi! I am Your AI Developer dans le hero et de placer un logo IA dans le cercle. Le rafraîchissement révèle deux défauts : le balisage <span class="highlight"> s'imprime tel quel dans le titre, et le logo généré ne convient pas. Cliquez sur l'icône plus au-dessus du champ, choisissez Upload image, joignez votre visuel, puis promptez : remove the span completely and add this image on the right circle.
Le hero affiche encore une balise span brute à côté d'un logo IA provisoire — et la correction via Upload image.Voir à 6:05 - 14
Dernière vérification du site fini
Un dernier rafraîchissement et le portfolio est terminé : le titre propre Hi! I am Your AI Developer, votre image dans le cercle lumineux du hero, des boutons néon, des sections animées et des cartes projets illustrées. Un prompt de départ, cinq suivis courts — décrire, accepter, vérifier, répéter : voilà tout le workflow Windsurf.
Le portfolio terminé : titre propre, avatar robot importé, boutons néon.Voir à 7:12