Skip to content

07-vision.md

Latest commit

 

History

History
90 lines (58 loc) · 3.08 KB

07-vision.md

File metadata and controls

90 lines (58 loc) · 3.08 KB

Parte 7: Copilot Vision (Opcional)

📚 Guia do Laboratório • ← MCP Server

Objetivo: Usar o Copilot Vision para gerar código a partir de designs de UI e capturas de tela.

Nota: O Copilot Vision pode exigir flags de funcionalidade específicas ou acesso preview. Verifique se está disponível na sua instalação do Copilot para Xcode.

O que é Copilot Vision?

O Copilot Vision permite que a IA "veja" e entenda conteúdo visual como mockups de UI, capturas de tela e arquivos de design. Você pode fazer upload de imagens diretamente no chat, e o Copilot gerará código que corresponde ao design.

Cenário

Criar um novo componente de card de landmark personalizado a partir de um mockup de design.

Passos

  1. Prepare seu design: Tire uma captura de tela ou encontre um mockup de design de uma UI de card que deseja implementar (por exemplo, um card moderno com imagem, título, subtítulo e botões de ação)

  2. Crie um novo arquivo Swift:

    • No Xcode, clique com o botão direito na pasta Landmarks/Views
    • Selecione New File → SwiftUI View
    • Nomeie como LandmarkCard.swift

  3. Abra o Copilot Chat no modo Agent

  4. Clique no botão Attach Image (ícone 📎) e faça upload do seu mockup de design

  5. Digite um prompt como:

Create a new SwiftUI view called LandmarkCard based on this design mockup.
The card should:
- Display a landmark image at the top
- Show the landmark name and location
- Include a favorite button
- Use the app's existing color scheme and follow iOS design guidelines
- Be reusable with any Landmark model
Make it responsive for different screen sizes.

  1. O Copilot analisará a imagem e gerará código SwiftUI no novo arquivo

  2. Revise o código gerado e teste-o:

    • Adicionando um preview na parte inferior do arquivo
    • Usando-o em LandmarkList para substituir as views de linha existentes

Exemplos de Prompts com Vision

  • Create this card component in SwiftUI with proper spacing, shadows, and rounded corners
  • Build a settings panel based on this screenshot, matching the iOS native style

💡 Dicas para Melhores Resultados

  • Use imagens ou capturas de tela claras e de alta resolução
  • Forneça requisitos específicos (cores, fontes, espaçamento)
  • Mencione o modelo de dados a ser usado (por exemplo, "use the Landmark model")
  • Especifique requisitos de plataforma (versão do iOS, tamanhos de dispositivo)
  • Solicite funcionalidades específicas do SwiftUI se necessário (LazyVGrid, GeometryReader, etc.)

Experimente Mais

  • Crie um cabeçalho de detalhe personalizado a partir de um mockup de design
  • Implemente uma view de dashboard de estatísticas a partir de uma imagem
  • Construa uma UI personalizada de menu de filtro/ordenação a partir de uma captura de tela

✅ Parte 7 Concluída!

Você aprendeu a:

  • Fazer upload de mockups de design no Copilot Chat
  • Gerar código SwiftUI a partir de designs visuais
  • Iterar no código gerado pelo Vision para obter melhores resultados