Tutorial de Windsurf AI: crea tu primera web con Cascade
Un recorrido paso a paso con capturas para empezar con el editor Windsurf AI: instálalo, abre el agente Cascade, genera un portafolio con un solo prompt y itera hasta lograr un sitio oscuro bien pulido, sin escribir código.
Lo esencial de este tutorial de Windsurf AI
- Windsurf se instala desde windsurf.com como cualquier editor y arranca con una lista Getting started: quienes vienen de VS Code conservan su tema y sus extensiones.
- Ctrl+L abre Cascade, el panel del agente de IA. Déjalo en modo Code para que escriba los archivos directamente; el modo Chat solo sugiere código sin aplicarlo.
- Un prompt inicial bien concreto generó un portafolio completo de cuatro archivos —index.html, styles.css, script.js y un README— servido en localhost:8000.
- A partir de ahí todo es un bucle: prompt corto de seguimiento, revisar el diff rojo y verde, Accept all y refrescar el navegador. Toda la construcción se hizo con seis prompts.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
Canal:Web Tech Knowledge7:24
Las capturas proceden del vídeo original y acompañan instrucciones paso a paso escritas específicamente para esta página. Cada paso enlaza con el momento exacto del vídeo.
Todos los vídeos © Web Tech Knowledge. La terminología de Windsurf (Cascade, modos Code/Chat, Accept all) se contrastó con "Windsurf Tutorial for Beginners (AI Code Editor)" de Tech With Tim y "How To Use Windsurf Editor For Beginners" de corbin.
De la descarga al portafolio terminado en 14 pasos
- 1
Descarga Windsurf desde la web oficial
Entra en windsurf.com y pulsa Download for Windows (las versiones para macOS y Linux están justo al lado). Ejecuta el instalador e inicia sesión. Si el editor ofrece importar tu configuración de VS Code, acepta: Windsurf es un fork de VS Code y conservarás tu tema y tus extensiones.
La portada de windsurf.com con el botón Download for Windows en el centro.Ver en 0:10 - 2
Crea una carpeta de proyecto vacía
En la pantalla de bienvenida elige Code with Cascade y pulsa Open Folder. Crea una carpeta nueva —en el vídeo se llama My_cool_portfolio— y pulsa Select Folder. Con una carpeta vacía basta: Cascade creará todos los archivos por su cuenta.
Poniendo nombre a una carpeta nueva en el diálogo Open Folder antes de pulsar Select Folder.Ver en 0:33 - 3
Aprende la interfaz en un minuto
Aparecerá una lista llamada Getting started with Windsurf. En la barra lateral Explorer, a la izquierda, están los archivos del proyecto, y la lista destaca los dos únicos atajos que necesitas: Ctrl+L abre Cascade y Ctrl+I edita código en línea. Con eso basta para seguir este tutorial.
La lista Getting started con la carpeta del proyecto ya abierta en el Explorer.Ver en 0:45 - 4
Abre el panel Cascade con Ctrl+L
Pulsa Ctrl+L (Cmd+L en macOS) y Cascade se abrirá a la derecha con un campo Ask anything. Debajo, deja seleccionado el modo Code: es lo que permite a Cascade escribir directamente en los archivos. El modo Chat solo sugiere código sin tocar tu proyecto. Después elige un modelo en el desplegable; en esta guía se usa Claude Sonnet 4.5.
La vista de bienvenida de Cascade: campo Ask anything, interruptor Code y selector de modelo.Ver en 1:03 - 5
Envía el prompt de construcción
Escribe: Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. Nombrar el stack y listar las secciones importa: cuanto más concreto el prompt, mejor el resultado. Pulsa enviar y Cascade convertirá el encargo en una lista de tareas antes de escribir una sola línea.
El prompt del portafolio listo para enviarse, con Claude Sonnet 4.5 en modo Code.Ver en 1:35 - 6
Mira cómo Cascade construye los archivos
Cascade avanza por su lista de tareas: primero index.html (231 líneas), luego styles.css, script.js y un README que documenta el proyecto. Cada archivo nuevo aparece en el panel con un contador de líneas verde, y al terminar el seguimiento marca 3 files, +1132.
La lista de tareas de Cascade en plena construcción, con index.html, styles.css y script.js creados.Ver en 2:10 - 7
Abre la vista previa en el navegador
El informe final avisa de que el sitio corre en http://localhost:8000: pulsa el enlace de vista previa y se abrirá un portafolio de una página completo: navbar fija, hero con círculo de perfil, about, projects y formulario de contacto. Fíjate en el titular: imprime una etiqueta <span> en bruto. Los primeros borradores traen pequeños fallos, y este se arregla en el paso 13.
El sitio generado en localhost:8000, completo salvo una etiqueta span sin renderizar en el titular.Ver en 2:35 - 8
Pide modo oscuro y botones con neón
De vuelta en Windsurf, pulsa Accept all para guardar los archivos generados y envía: Make it dark mode and give the buttons a neon glow. Ese es el ritmo de trabajo con Cascade: un seguimiento pequeño y con un solo objetivo cada vez, comprobando el resultado antes de continuar.
El informe final con sus Next Steps y el prompt del modo oscuro ya escrito.Ver en 3:05 - 9
Revisa el diff y pulsa Accept all
Cascade reescribe styles.css y muestra cada cambio como un diff: las líneas rojas son CSS eliminado y las verdes, añadidos. Aquí la paleta clara da paso a tokens oscuros y a variables de brillo en cian y magenta neón, repartidas en once entradas. Revísalas y pulsa Accept all (Alt+A).
El diff de styles.css: en rojo las variables claras eliminadas, en verde los tokens neón nuevos.Ver en 3:32 - 10
Refresca el navegador y comprueba
Cambia a la pestaña del navegador y refresca. El mismo portafolio es ahora negro con acentos luminosos: View My Work luce un degradado de cian a magenta, Get In Touch lleva contorno de neón y el titular About Me brilla bajo una línea divisoria. Comprobar tras cada prompt evita que las sorpresas se acumulen.
La versión oscura tras refrescar: botones de neón y la sección About Me bajo la navbar.Ver en 4:12 - 11
Añade animaciones de scroll y fundidos
Envía: Add smooth scroll animation and fade effects. Cascade añade scroll-behavior: smooth y clases .fade-in, un Intersection Observer que revela las secciones al entrar en pantalla, un paralaje sutil en el círculo del hero y etiquetas de habilidades escalonadas. Accept all, refresca y haz scroll: las secciones aparecerán con fundido.
El CSS de Scroll Animations junto al resumen de Cascade: observer, paralaje y apariciones escalonadas.Ver en 4:32 - 12
Sustituye los marcadores por imágenes de ejemplo
El círculo de perfil y las tarjetas de proyectos siguen siendo iconos de relleno, así que envía: Add some demo images. Cascade conecta fotos del CDN de Unsplash al círculo del hero y a las tres tarjetas —dimensionadas con parámetros de URL optimizados— y les añade zoom y brillo al pasar el ratón. Accept all, refresca y la web por fin parece terminada.
El resumen de la pasada de imágenes: fotos de Unsplash, círculo de perfil con neón y zooms al hover.Ver en 4:58 - 13
Caza los fallos y sube tu propia imagen
Pide a Cascade que escriba Hi! I am Your AI Developer en el hero y ponga un logo de IA en el círculo. Al refrescar aparecen dos fallos: el titular imprime la marca literal <span class="highlight"> y el logo generado no convence. Pulsa el icono más sobre el campo, elige Upload image, adjunta tu propia imagen y escribe el prompt: remove the span completely and add this image on the right circle.
El hero sigue imprimiendo una etiqueta span en bruto junto a un logo provisional: la corrección con Upload image.Ver en 6:05 - 14
Comprobación final del sitio terminado
Un último refresco y el portafolio está listo: el titular limpio Hi! I am Your AI Developer, tu propia imagen brillando en el círculo del hero, botones de neón, secciones animadas y tarjetas de proyectos con fotos. Un prompt inicial y cinco seguimientos cortos: describir, aceptar, comprobar y repetir es todo el flujo de trabajo de Windsurf.
El portafolio terminado: titular limpio, avatar robot subido, botones de neón.Ver en 7:12