Herramientas de Captura
Dale al AI contexto visual preciso. Capturas de pantalla, selección de elementos e imágenes.
Cuanto más preciso sea el contexto visual que le des al AI, mejores serán sus ediciones. Proyecta incluye varias herramientas de captura.
Seleccionar un elemento (Visual Editor)
Sección titulada «Seleccionar un elemento (Visual Editor)»En el modo Visual Editor, cada elemento de la vista previa se vuelve interactivo. Pasa el cursor para resaltarlo y haz clic para seleccionarlo. El elemento seleccionado se marca con una capa superpuesta y sus propiedades editables (texto, colores, espaciado, fuentes, bordes, efectos) aparecen en el panel lateral.
Una vez que seleccionas un elemento, puedes:
- Editarlo directamente — cambia las propiedades en línea sin escribir ningún prompt
- Preguntarle al AI sobre él — la selección se pasa como contexto para que puedas decir
"make this button bigger"o"move this section above the hero"y el AI sepa exactamente a qué te refieres
Los elementos dinámicos (classNames calculados, renderizado condicional, expresiones) se envían automáticamente al chat del AI con un prompt estructurado.
Consulta Visual Edit para ver la lista completa de propiedades editables.
Pegar o arrastrar capturas de pantalla al chat
Sección titulada «Pegar o arrastrar capturas de pantalla al chat»El campo de chat acepta imágenes directamente:
- Pegar — copia una captura de pantalla con el atajo de tu sistema operativo (Cmd+Shift+4 en Mac, Win+Shift+S en Windows) y pégala en el chat
- Arrastrar — suelta cualquier archivo de imagen sobre el campo de chat
Formatos compatibles: PNG, JPEG, WebP, GIF, AVIF. Tamaño máximo: 10 MB por imagen.
Capturas de pantalla de la vista previa
Sección titulada «Capturas de pantalla de la vista previa»El AI puede tomar sus propias capturas de pantalla de tu vista previa en cualquier momento mediante una herramienta integrada llamada preview_screenshot. Los resultados de las capturas aparecerán directamente en el chat. El AI la invoca automáticamente cuando necesita verificar sus cambios o entender el estado actual de tu app.
La herramienta de captura puede apuntar a rutas específicas (por ejemplo, /dashboard, /settings) y registra las dimensiones, lo que ayuda al AI a razonar sobre el diseño y el espaciado.
Preguntas frecuentes
Sección titulada «Preguntas frecuentes»¿Cómo le indico al AI un botón o texto específico?
Usa el modo Visual Editor y haz clic en el elemento. Esto le pasa al AI una referencia precisa y estructurada — mucho mejor que describir el elemento con palabras.
Próximamente
Sección titulada «Próximamente»Las siguientes herramientas de captura están implementadas internamente pero aún no están disponibles en la interfaz:
- Annotate — captura la vista previa actual y dibuja flechas, rectángulos, círculos, trazos a mano alzada y etiquetas de texto antes de enviarlo al AI.
- Screen Record — graba una interacción de varios pasos (clics, navegación, animaciones) y adjunta los fotogramas capturados a tu mensaje de chat. Ideal para errores sensibles al tiempo que una sola captura de pantalla no puede mostrar.