Como escrever prompts

Descreva a tela

Escreva para que serve a tela e o que há nela, como você faria em um briefing para um designer. O Vibr preenche com conteúdo de exemplo realista, então você não precisa escrever os textos.

• Bom: "Um painel de análise com cards de KPI e uma tabela de pedidos recentes"
• Melhor: "Um painel de análise para uma torrefação de café: quatro cards de KPI para receita, pedidos, ticket médio e clientes recorrentes, um gráfico de receita semanal e uma tabela de pedidos recentes com chips de status"

Pressione Enter para enviar e Shift+Enter para uma nova linha. Em telas sensíveis ao toque, Return adiciona uma nova linha, e o botão Enviar envia.

Se uma solicitação for vaga demais para planejar, o Vibr faz uma pergunta em vez de adivinhar. Responda na caixa de texto, e a execução continua de onde parou.

O Vibr só projeta interfaces. Um pedido sem nada para construir, como uma pergunta de conhecimentos gerais ou uma redação, recebe uma resposta de uma linha com uma ideia de interface que você poderia criar no lugar, e nada é executado depois de Planejar. Tudo o que pode virar uma página, um app ou uma tela, sobre qualquer assunto, continua sendo construído. Quando já há um rascunho na área de trabalho, você também pode perguntar sobre ele (“Por que esta fonte?”, “Este contraste é acessível?”), e o Vibr responde no chat sem alterar o rascunho.

Comece por uma imagem

Tem um esboço, uma captura de tela ou um mockup? Adicione à sua solicitação e o Vibr constrói a partir do que ele mostra. Selecione + abaixo da caixa e depois Adicionar um arquivo, ou cole ou solte uma imagem nela. Você pode adicionar até três por solicitação, em PNG, JPEG, WebP, GIF, AVIF ou SVG.

• "Transforme este esboço em uma página de cadastro"
• "Siga o layout desta captura de tela, com conteúdo para uma loja de bicicletas"
• Uma imagem sem texto constrói o que a imagem mostra.

O rascunho usa os componentes e a tipografia do seu design system, então segue o layout e a hierarquia da imagem em vez de copiar os pixels. O texto na imagem é tratado como conteúdo, nunca como instrução.

Cada imagem é reduzida e redesenhada antes do envio, o que remove os metadados, e é verificada no seu dispositivo como qualquer imagem que você adiciona à biblioteca. Ela vai para o seu provedor de IA só com essa solicitação. Não é salva na sua biblioteca nem guardada com a conversa, então as próximas solicitações não a enviam de novo.

Anexe documentos

Um briefing, notas de pesquisa, um desafio de design, os números do último trimestre: anexe o documento e o Vibr projeta a partir dele. Selecione + abaixo da caixa e depois Adicionar um arquivo, ou cole ou solte o arquivo na caixa. Você pode anexar até três documentos por solicitação:

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

Do Google Docs, Apresentações ou Planilhas, baixe o arquivo antes (Arquivo e depois Fazer download) em um desses formatos.

O Vibr lê cada documento no seu navegador. O modelo recebe o texto, com as anotações do apresentador de um deck e as linhas de uma planilha como tabela, além de algumas imagens: as primeiras páginas de um PDF ou as primeiras imagens de um arquivo Word ou de um deck. Vão até 30.000 caracteres de texto com uma solicitação; acima disso, o texto é cortado e o chip avisa. Selecione o chip de um documento para ver exatamente o que é enviado e para salvar as imagens dele na sua biblioteca. Para usar um documento de novo nas próximas solicitações, selecione Salvar na biblioteca na visualização e depois mencione-o com @doc.

Cada documento é verificado antes de ser lido. Arquivos que podem executar macros (.docm, .pptm, .xlsm ou um documento com um projeto de macro escondido), arquivos compactados que se expandiriam muito além do tamanho e PDFs protegidos por senha são recusados. Nada em um documento é executado: scripts, links, campos de formulário, fórmulas e objetos incorporados são ignorados, e as células de uma planilha chegam com os valores salvos. O texto passa pela mesma limpeza e pelas mesmas verificações de tudo o que você digita, as imagens pelas mesmas das imagens de referência, e o modelo trata o documento como material para projetar, nunca como instruções.

Um documento vai só com aquela solicitação. Ele não é salvo na sua biblioteca nem guardado com a conversa.

Revise o que você já tem

Quando já existe um rascunho, a caixa de texto diz "Descreva ajustes ou novas seções…". Cada solicitação revisa o rascunho do canvas e vira uma nova versão, então você sempre pode voltar. Alguns exemplos:

• "Destaque o plano Pro e adicione perguntas frequentes"
• "Use um layout de duas colunas no desktop"
• "Troque a tabela por cards no celular"

O rascunho atual continua no canvas enquanto a nova versão é escrita, e o canvas muda para ela quando já há o suficiente para desenhar.

Altere só uma parte

Para alterar um elemento sem mexer no resto:

1. Selecione Selecionar um elemento (o ícone de ponteiro acima do canvas).
2. Clique na parte que você quer alterar. Um chip acima da caixa de texto mostra qual é o elemento e onde ele está no código.
3. Descreva a alteração. Palavras como "isto", "aqui" e "ele" se referem a esse elemento.

Pressione Esc para parar de selecionar ou selecione o X no chip para limpá-lo.

Se o elemento se repete na página, como um card em uma lista ou um título em cada plano de preço, aparece uma escolha abaixo da etiqueta: Só esta altera apenas a cópia em que você clicou, e Todas as N altera todas. Só esta é o padrão. A tela destaca as cópias que vão mudar.

Alterar várias partes juntas

Segure Shift e clique em mais elementos para alterá-los em um só pedido, até 8. Cada um recebe um número na área de trabalho, e o chip lista todos. Depois descreva como eles se relacionam, como “deixe-os iguais” ou “dê a eles o mesmo espaçamento”. Shift+clique de novo em um elemento selecionado para tirá-lo.

Em uma tela sensível ao toque, selecione Adicionar mais no chip e toque nos elementos. Com o teclado, pressione Shift+Enter em um elemento com foco. Cada elemento adicionado conta só como a cópia escolhida. Um elemento dentro de outro já selecionado já faz parte dele, então não é adicionado duas vezes.

Mencione recursos com @

Digite @ na caixa de texto ou selecione o botão @ para trazer algo da sua biblioteca para uma solicitação. Uma lista aparece enquanto você digita. Use ↑ e ↓ para escolher e Enter ou Tab para adicionar.

Menção	O que ela traz
@image/name	Uma imagem que você importou ou salvou do Unsplash.
@video/name	Um vídeo que você importou ou salvou do Pixabay.
@theme/name	Um tema de cores, com os modos claro e escuro.
@type/ramp/style	Um estilo de texto de uma das suas escalas tipográficas, como @type/georgia/h1.
@icon/name	Um ícone Lucide incluído ou um ícone de uma fonte de ícones que você importou (@icon/set/name).
@screen/name	Um protótipo salvo para o qual criar um link. Consulte Fluxos.
@chart/kind	Um tipo de gráfico, como @chart/donut, criado com a sua biblioteca de gráficos. Consulte Gráficos e tabelas.
@table/feature	Um recurso de tabela, como @table/sortable, criado com a sua biblioteca de tabelas.

As menções da sua solicitação aparecem como chips abaixo da caixa de texto. Um chip fica vermelho se o nome não estiver na sua biblioteca, e o Vibr deixa essa menção de fora. Saiba como adicionar recursos em Imagens, vídeos, documentos, temas, tipografia e ícones.

Dicas para resultados melhores

• Uma tela por solicitação. Crie uma página e depois acrescente coisas a ela. Solicitações muito grandes podem atingir o limite de saída do modelo; se isso acontecer, peça uma seção por mensagem.
• Dê nome às partes. "Os cards dos planos" ou "o cabeçalho" é mais fácil de entender do que "a parte de cima".
• Use a ferramenta certa. Para um elemento, selecione-o. Para notas que você quer guardar, fixe uma anotação.