Windsurf Multimodal: Cole Imagens e o Cascade Gera o Código

O Windsurf suporta input multimodal — você pode colar imagens diretamente no chat do Cascade e ele vai entender o contexto visual para gerar ou corrigir código.

Casos de uso multimodal

1. Debug visual de bugs

Você tem um componente com layout quebrado. Em vez de tentar descrever o problema, cole um screenshot:

[screenshot do bug]
O componente da direita está sobrepondo o da esquerda em telas menores que 768px.
Corrija o layout para funcionar corretamente em mobile.

O Cascade vai ver o screenshot, analisar o código relacionado e propor a correção.

2. Replicar designs

Você tem um design no Figma ou uma referência visual:

[screenshot do design]
Crie um componente React que replica exatamente este design.
Use Tailwind CSS para a estilização.
Os dados devem vir por props: title, subtitle, imageUrl, tags.

3. Entender erros de console

Tire screenshot do console do browser com o erro:

[screenshot do erro]
O que está causando este erro e como corrigir?

4. Analisar arquitetura em diagramas

[diagrama de arquitetura]
Implemente esta arquitetura no projeto atual.
Crie os arquivos e estruturas necessárias.

Como colar imagens no Windsurf

1. Copie a imagem (Cmd+C ou screenshot)
2. Clique no campo de chat do Cascade
3. Cole com Cmd+V — a imagem aparece no input
4. Escreva sua mensagem e envie

Alternativamente, arraste e solte a imagem diretamente no chat.

Limites do multimodal

• Imagens muito pequenas ou de baixa resolução perdem detalhes
• Wireframes em preto e branco funcionam bem; designs muito complexos podem ter imprecisões
• Para designs de alta fidelidade, use Figma → export → cole o screenshot
• Código em screenshots não é reconhecido como texto — cole o código diretamente

Combinando multimodal com contexto de código

O poder real é combinar a imagem com referências a arquivos existentes:

[screenshot do design de card]
Crie um componente que replica este design, mas:
- Use o componente Card do @src/components/ui/card.tsx como base
- Siga as conventions de @src/components/ProductCard/index.tsx
- As cores devem seguir o tema configurado em @tailwind.config.ts

O Cascade vai analisar a imagem e os arquivos para criar algo coerente com o projeto.

Fluxo de trabalho Design → Código

1. Designer entrega o layout no Figma
2. Você exporta screenshot da seção desejada
3. Cola no Windsurf com instruções específicas
4. Cascade gera o componente
5. Você refina com prompts de texto
6. Aceita as mudanças e testa

Esse fluxo reduz drasticamente o tempo de implementação de layouts — você vai do design ao código em minutos, não horas.