Tutorial de Windsurf AI: crie seu primeiro site com o Cascade
Um passo a passo ilustrado para iniciantes no editor Windsurf AI: instale, abra o agente Cascade, gere um portfólio com um único prompt e vá refinando até um site dark bem acabado — sem escrever código.
Este tutorial de Windsurf AI em resumo
- O Windsurf se instala pelo windsurf.com como um editor comum e abre com um checklist Getting started — quem usa VS Code mantém o tema e as extensões.
- Ctrl+L abre o Cascade, o painel do agente de IA. Mantenha o modo Code para ele gravar os arquivos direto; o modo Chat só sugere código, sem aplicar.
- Um prompt inicial bem específico gerou um portfólio completo de quatro arquivos — index.html, styles.css, script.js e um README — rodando no localhost:8000.
- Depois disso, tudo vira um ciclo: prompt curto de acompanhamento, revisar o diff vermelho e verde, Accept all e atualizar o navegador. A construção inteira levou seis prompts.
How I Built a Complete Website with Windsurf AI — Step-by-Step Tutorial
Canal:Web Tech Knowledge7:24
As capturas de tela vêm da gravação original e ilustram instruções passo a passo escritas especialmente para esta página. Cada passo tem link direto para o momento exato do vídeo.
Todos os vídeos © Web Tech Knowledge. A terminologia do Windsurf (Cascade, modos Code/Chat, Accept all) foi conferida com "Windsurf Tutorial for Beginners (AI Code Editor)", do Tech With Tim, e "How To Use Windsurf Editor For Beginners", do corbin.
Do download ao portfólio pronto em 14 passos
- 1
Baixe o Windsurf no site oficial
Acesse windsurf.com e clique em Download for Windows (as versões para macOS e Linux ficam logo ao lado). Execute o instalador e faça login. Se o editor oferecer importar suas configurações do VS Code, aceite: o Windsurf é um fork do VS Code, então tema e extensões vêm juntos.
A página inicial do windsurf.com com o botão Download for Windows em destaque.Ver aos 0:10 - 2
Crie uma pasta de projeto vazia
Na tela de boas-vindas, escolha Code with Cascade e clique em Open Folder. Crie uma pasta nova — no vídeo ela se chama My_cool_portfolio — e clique em Select Folder. Uma pasta vazia basta: o Cascade cria todos os arquivos sozinho.
Nomeando uma pasta novinha no diálogo Open Folder antes de clicar em Select Folder.Ver aos 0:33 - 3
Conheça o layout do editor em um minuto
Você vai cair no checklist Getting started with Windsurf. A barra lateral Explorer, à esquerda, guarda os arquivos do projeto, e a lista destaca os dois únicos atalhos de que você precisa: Ctrl+L abre o Cascade e Ctrl+I edita código inline. É toda a familiarização de que este tutorial precisa.
O checklist Getting started com a pasta do projeto já aberta no Explorer.Ver aos 0:45 - 4
Abra o painel Cascade com Ctrl+L
Pressione Ctrl+L (Cmd+L no macOS) e o Cascade abre à direita com um campo Ask anything. Logo abaixo, mantenha o modo Code selecionado — é o que permite ao Cascade gravar arquivos diretamente. O modo Chat só sugere código sem mexer no projeto. Depois escolha um modelo no seletor; neste passo a passo, usamos o Claude Sonnet 4.5.
A tela inicial do Cascade: campo Ask anything, alternador Code e seletor de modelo.Ver aos 1:03 - 5
Envie o prompt de construção
Digite: Create a responsive portfolio website using HTML, CSS, and JavaScript. Include a hero section, about, projects, and contact form. Citar a stack e listar as seções faz diferença — quanto mais específico o prompt, melhor o resultado. Dê send e o Cascade transforma o pedido em uma todo list antes de escrever qualquer linha.
O prompt completo do portfólio pronto para enviar, com Claude Sonnet 4.5 no modo Code.Ver aos 1:35 - 6
Veja o Cascade construir os arquivos
O Cascade percorre a todo list: primeiro o index.html (231 linhas), depois styles.css, script.js e um README que documenta o projeto. Cada arquivo novo aparece no painel com um contador de linhas verde, e o acompanhamento marca 3 files, +1132 quando o código termina.
A todo list do Cascade em pleno trabalho, com index.html, styles.css e script.js já criados.Ver aos 2:10 - 7
Abra a pré-visualização no navegador
O relatório final avisa que o site está rodando em http://localhost:8000 — clique no link de preview e um portfólio de página única se abre: navbar fixa, hero com círculo de perfil, about, projects e formulário de contato. Olhe o título de perto: uma tag <span> pura aparece escrita na tela. Rascunhos vêm com pequenos bugs, e você vai corrigir este no passo 13.
O site gerado no localhost:8000 — completo, menos uma tag span solta no título.Ver aos 2:35 - 8
Peça dark mode e botões com neon
De volta ao Windsurf, clique em Accept all para salvar os arquivos gerados e envie: Make it dark mode and give the buttons a neon glow. Esse é o ritmo de trabalho com o Cascade — um acompanhamento pequeno e com um único objetivo por vez, conferindo o resultado antes de seguir.
O relatório final com os Next Steps e o prompt do dark mode digitado no campo.Ver aos 3:05 - 9
Revise o diff e clique em Accept all
O Cascade reescreve o styles.css e lista cada edição como diff: linhas vermelhas são CSS removido, verdes são adições. Aqui, a paleta clara dá lugar a tokens dark e a variáveis de brilho em ciano e magenta neon, espalhadas por onze entradas. Percorra tudo e clique em Accept all (Alt+A).
O diff do styles.css: variáveis claras removidas em vermelho, novos tokens neon em verde.Ver aos 3:32 - 10
Atualize o navegador e confira
Volte à aba do navegador e atualize. O mesmo portfólio agora é preto com detalhes brilhantes: o View My Work traz um gradiente de ciano a magenta, o Get In Touch ganha contorno neon e o título About Me fica sob um divisor iluminado. Conferir depois de cada prompt evita que surpresas pequenas se acumulem.
A versão dark após atualizar: botões neon e a seção About Me sob a navbar do Portfolio.Ver aos 4:12 - 11
Adicione animações de scroll e fade
Envie: Add smooth scroll animation and fade effects. O Cascade adiciona scroll-behavior: smooth e classes .fade-in, um Intersection Observer que revela as seções quando entram na tela, um paralaxe sutil no círculo do hero e tags de habilidades em sequência. Accept all, atualize e role a página: as seções agora surgem com fade.
O CSS de Scroll Animations ao lado do resumo do Cascade: observer, paralaxe e revelações em sequência.Ver aos 4:32 - 12
Troque os placeholders por imagens de exemplo
O círculo de perfil e os cartões de projeto ainda são ícones de exemplo, então envie: Add some demo images. O Cascade liga fotos do CDN do Unsplash ao círculo do hero e aos três cartões — dimensionadas com parâmetros de URL otimizados — e dá aos cartões zoom e brilho no hover. Accept all, atualize, e o site finalmente fica com cara de pronto.
O resumo da rodada de imagens: fotos do Unsplash, círculo de perfil neon e zooms no hover.Ver aos 4:58 - 13
Pegue os bugs e coloque sua própria imagem
Peça ao Cascade para escrever Hi! I am Your AI Developer no hero e colocar um logo de IA no círculo. Ao atualizar, aparecem dois problemas: o título imprime a marcação literal <span class="highlight"> e o logo gerado não agrada. Clique no ícone de mais acima do campo, escolha Upload image, anexe sua própria imagem e faça o prompt: remove the span completely and add this image on the right circle.
O hero ainda imprime uma tag span solta ao lado de um logo provisório de IA — e a correção via Upload image.Ver aos 6:05 - 14
Checagem final do site pronto
Uma última atualização e o portfólio está pronto: o título limpo Hi! I am Your AI Developer, sua própria imagem brilhando no círculo do hero, botões neon, seções animadas e cartões de projeto com fotos. Um prompt inicial e cinco acompanhamentos curtos — descrever, aceitar, conferir e repetir é todo o fluxo de trabalho do Windsurf.
O portfólio finalizado: título limpo, avatar de robô enviado, botões neon.Ver aos 7:12