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)

📚 Guía del Laboratorio • ← MCP Server

Objetivo: Usar Copilot Vision para generar código a partir de diseños de UI y capturas de pantalla.

Nota: Copilot Vision puede requerir feature flags específicos o acceso preview. Verifica si está disponible en tu instalación de Copilot para Xcode.

¿Qué es Copilot Vision?

Copilot Vision permite que la IA "vea" y comprenda contenido visual como maquetas de UI, capturas de pantalla y archivos de diseño. Puedes subir imágenes directamente en el chat, y Copilot generará código que coincida con el diseño.

Escenario

Crear un nuevo componente de tarjeta de landmark personalizado a partir de una maqueta de diseño.

Pasos

  1. Prepara tu diseño: Toma una captura de pantalla o busca una maqueta de diseño de una tarjeta de UI que desees implementar (por ejemplo, una tarjeta moderna con imagen, título, subtítulo y botones de acción)

  2. Crea un nuevo archivo Swift:

    • En Xcode, haz clic derecho en la carpeta Landmarks/Views
    • Selecciona New File → SwiftUI View
    • Nómbralo LandmarkCard.swift

  3. Abre Copilot Chat en modo Agent

  4. Haz clic en el botón Attach Image (icono 📎) y sube tu maqueta de diseño

  5. Ingresa un 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. Copilot analizará la imagen y generará código SwiftUI en el nuevo archivo

  2. Revisa el código generado y pruébalo:

    • Agrega un preview al final del archivo
    • Úsalo en LandmarkList para reemplazar las vistas de fila existentes

Prompts de Ejemplo con 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

💡 Consejos para Mejores Resultados

  • Usa imágenes o capturas de pantalla claras y de alta resolución
  • Proporciona requisitos específicos (colores, fuentes, espaciado)
  • Menciona el modelo de datos a usar (por ejemplo, "use the Landmark model")
  • Especifica requisitos de plataforma (versión de iOS, tamaños de dispositivo)
  • Solicita funcionalidades específicas de SwiftUI si es necesario (LazyVGrid, GeometryReader, etc.)

Prueba Más

  • Crea un encabezado de detalle personalizado basado en una maqueta de diseño
  • Implementa una vista de panel de estadísticas a partir de una imagen
  • Construye una UI personalizada de menú de filtro/ordenamiento a partir de una captura de pantalla

✅ ¡Parte 7 Completada!

Has aprendido a:

  • Subir maquetas de diseño a Copilot Chat
  • Generar código SwiftUI a partir de diseños visuales
  • Iterar sobre código generado por Vision para obtener mejores resultados