Escribir peticiones

Describe la pantalla

Escribe para qué sirve la pantalla y qué contiene, como si se lo explicaras a un diseñador. Vibr añade contenido de ejemplo realista, así que no necesitas escribir los textos.

• Bien: «Un panel de analítica con tarjetas de KPI y una tabla de pedidos recientes»
• Mejor: «Un panel de analítica para un tostador de café: cuatro tarjetas de KPI de ingresos, pedidos, pedido medio y clientes recurrentes, un gráfico de ingresos semanales y una tabla de pedidos recientes con etiquetas de estado»

Pulsa Intro para enviar y Mayús+Intro para una nueva línea. En pantallas táctiles, Intro añade una nueva línea y el botón Enviar envía.

Si una petición es demasiado imprecisa para planificarla, Vibr te hace una pregunta en lugar de adivinar. Respóndela en el cuadro y la ejecución continúa desde ahí.

Vibr solo diseña interfaces. Una solicitud sin nada que construir, como una pregunta de cultura general o una redacción, recibe una respuesta de una línea con una idea de interfaz que podrías crear en su lugar, y no se ejecuta nada después de Planificar. Todo lo que pueda convertirse en una página, una app o una pantalla, sobre cualquier tema, se sigue construyendo. Cuando ya hay un borrador en el espacio de trabajo, también puedes preguntar sobre él («¿Por qué esta fuente?», «¿Este contraste es accesible?») y Vibr responde en el chat sin cambiar el borrador.

Parte de una imagen

¿Tienes un boceto, una captura o un mockup? Añádelo a tu petición y Vibr construye a partir de lo que muestra. Selecciona + bajo el cuadro y luego Añadir un archivo, o pega o suelta una imagen en él. Puedes añadir hasta tres por petición, en PNG, JPEG, WebP, GIF, AVIF o SVG.

• "Convierte este boceto en una página de registro"
• "Sigue la maquetación de esta captura, con contenido para una tienda de bicicletas"
• Una imagen sin texto construye lo que muestra la imagen.

El borrador usa los componentes y la tipografía de tu sistema de diseño, así que sigue la maquetación y la jerarquía de la imagen en lugar de copiar sus píxeles. El texto de la imagen se trata como contenido, nunca como instrucciones.

Cada imagen se reduce y se vuelve a dibujar antes de enviarse, lo que elimina sus metadatos, y se revisa en tu dispositivo como cualquier imagen que añades a la biblioteca. Va a tu proveedor de IA solo con esa petición. No se guarda en tu biblioteca ni se conserva con la conversación, así que las peticiones siguientes no la vuelven a enviar.

Adjunta documentos

Un brief, notas de investigación, un reto de diseño, las cifras del último trimestre: adjunta el documento y Vibr diseña a partir de él. Selecciona + bajo el cuadro y luego Añadir un archivo, o pégalo o suéltalo en el cuadro. Puedes añadir hasta tres documentos por petición:

• PDF
• Word, PowerPoint y Excel (.docx, .pptx, .xlsx)
• CSV, TSV, Markdown y texto plano

Desde Documentos, Presentaciones u Hojas de cálculo de Google, descarga antes el archivo (Archivo y luego Descargar) en uno de estos formatos.

Vibr lee cada documento en tu navegador. El modelo recibe su texto, con las notas del orador de una presentación y las filas de una hoja como tabla, además de algunas de sus imágenes: las primeras páginas de un PDF o las primeras imágenes de un Word o una presentación. Con cada petición van hasta 30.000 caracteres de texto; si hay más, se recorta y el chip lo indica. Selecciona el chip de un documento para ver exactamente lo que se envía y para guardar sus imágenes en tu biblioteca. Para volver a usar un documento en peticiones posteriores, selecciona Guardar en la biblioteca en su vista previa y menciónalo con @doc.

Cada documento se revisa antes de leerlo. Se rechazan los archivos que pueden ejecutar macros (.docm, .pptm, .xlsm o un documento con un proyecto de macros oculto), los archivos comprimidos que se descomprimirían muy por encima de su tamaño y los PDF protegidos con contraseña. Nada de un documento se ejecuta: se ignoran scripts, enlaces, campos de formulario, fórmulas y objetos incrustados, y las celdas de una hoja llegan con sus valores guardados. El texto pasa la misma limpieza y las mismas comprobaciones que lo que escribes, las imágenes las mismas que las imágenes de referencia, y el modelo trata el documento como material para diseñar, nunca como instrucciones.

Un documento va solo con esa petición. No se guarda en tu biblioteca ni se conserva con la conversación.

Revisa lo que tienes

Cuando ya existe un borrador, el cuadro dice «Describe mejoras o secciones nuevas…». Cada petición revisa el borrador del lienzo y se convierte en una versión nueva, así que siempre puedes volver atrás. Algunos ejemplos:

• «Haz que destaque el plan Pro y añade unas preguntas frecuentes»
• «Usa un diseño de dos columnas en escritorio»
• «Cambia la tabla por tarjetas en móviles»

El borrador actual se queda en el lienzo mientras se escribe la versión nueva, y el lienzo cambia a ella en cuanto hay suficiente para dibujarla.

Cambia solo una parte

Para cambiar un elemento sin tocar el resto:

1. Selecciona Seleccionar un elemento (el icono del puntero encima del lienzo).
2. Haz clic en la parte que quieres cambiar. Una etiqueta encima del cuadro muestra qué elemento es y dónde está en el código.
3. Describe el cambio. Palabras como «esto», «aquí» y «lo» se refieren a ese elemento.

Pulsa Esc para dejar de seleccionar o selecciona la X de la etiqueta para borrarla.

Si el elemento se repite en la página, como una tarjeta de una lista o un título en cada plan de precios, aparece una opción bajo la etiqueta: Solo esta cambia solo la copia en la que hiciste clic y Las N cambia todas. Solo esta es la opción predeterminada. El lienzo marca las copias que van a cambiar.

Cambiar varias partes a la vez

Mantén pulsada Mayús y haz clic en más elementos para cambiarlos en una sola solicitud, hasta 8. Cada uno recibe un número en el espacio de trabajo y el chip los enumera. Después describe cómo se relacionan, por ejemplo «haz que coincidan» o «dales el mismo espaciado». Mayús+clic de nuevo en un elemento seleccionado lo quita.

En una pantalla táctil, selecciona Añadir más en el chip y toca los elementos. Con el teclado, pulsa Mayús+Intro sobre un elemento con el foco. Cada elemento que añades cuenta solo como la copia que elegiste. Un elemento dentro de otro ya seleccionado ya forma parte de él, así que no se añade dos veces.

Menciona recursos con @

Escribe @ en el cuadro, o selecciona el botón @, para incluir algo de tu biblioteca en una petición. Aparece una lista mientras escribes. Usa ↑ y ↓ para elegir, y Intro o Tab para añadirlo.

Mención	Qué incluye
@image/name	Una imagen que has importado o guardado desde Unsplash.
@video/name	Un vídeo que has importado o guardado desde Pixabay.
@theme/name	Un tema de color, con sus modos claro y oscuro.
@type/ramp/style	Un estilo tipográfico de una de tus escalas tipográficas, como @type/georgia/h1.
@icon/name	Un icono de Lucide incluido o uno de una fuente de iconos que hayas importado (@icon/set/name).
@screen/name	Un prototipo guardado al que enlazar. Consulta Flujos.
@chart/kind	Un tipo de gráfico, como @chart/donut, construido con tu biblioteca de gráficos. Consulta Gráficos y tablas.
@table/feature	Una función de tabla, como @table/sortable, construida con tu biblioteca de tablas.

Las menciones de tu petición aparecen como etiquetas debajo del cuadro. Una etiqueta se vuelve roja si el nombre no está en tu biblioteca, y Vibr omite esa mención. Aprende a añadir recursos en Imágenes, vídeos, documentos, temas, tipografía e iconos.

Consejos para obtener mejores resultados

• Una pantalla por petición. Construye una página y luego amplíala. Las peticiones muy grandes pueden alcanzar el límite de salida del modelo; si ocurre, pide una sección por mensaje.
• Nombra las partes. «Las tarjetas de planes» o «el encabezado» es más fácil de entender que «lo de arriba».
• Usa la herramienta adecuada. Para un elemento, selecciónalo. Para notas que quieras conservar, fija una anotación.