As técnicas para escrever prompts eficazes para a versão 0 também devem ser aplicáveis a outras ferramentas de programação de IA, como o Lovable. Estrutura Central: Três Entradas Principais Após extensos testes, a equipe da versão 0 descobriu que as melhores palavras de sugestão continham três partes: 1. Superfície do produto O que exatamente precisa ser feito? 2. Caso de uso (Contexto de uso) Quem o utiliza, quando e que problema resolve? 3. Restrições e Gosto Como fazer isso e quais são as limitações? O modelo tem a seguinte aparência: Crie um [componente, dado ou função específico]. Para quem? Em [qual cenário], Para atingir qual objetivo? restrição: - Plataforma/Dispositivo - Estilo visual - Requisitos de layout Parte 1: Superfície do Produto Não diga simplesmente "crie um painel de controle", explique claramente o que há dentro do painel. por exemplo: Painel de controle: - Nomes e desempenho dos 5 melhores vendedores - Desempenho da equipe versus barra de progresso da meta - Funil de Vendas (Lead → Qualificado → Demonstração → Fechamento) Quanto mais específico for o seu gráfico de tendências de desempenho dos últimos 6 meses, menor a probabilidade de a versão 0 fazer suposições precipitadas ou criar um monte de recursos que você não usará. Parte Dois: Casos de Uso Esta é a parte que é mais facilmente negligenciada, mas que tem o maior impacto. Considere estas questões: - Quem está usando isso? - Quando usar? - Que decisão deve ser tomada? - Quanto tempo você tem disponível? Vamos retomar o exemplo do painel de controle: O gerente de vendas (que não entende de tecnologia) usou isso durante a reunião matinal. Visualizado no monitor grande do escritório. Identifique rapidamente aqueles que estão com desempenho abaixo do esperado e, já que está fazendo isso, elogie-os pelo bom desempenho. Você consegue ver a diferença? O mesmo painel de controle pode ter designs completamente diferentes para a reunião matinal de um gerente de vendas e para a análise aprofundada de um analista de dados. O primeiro exige que você veja os pontos principais rapidamente, enquanto o segundo requer filtragem detalhada e funções de exploração aprofundada. A equipe da Vercel realizou um teste comparativo: Versões sem casos de uso especificados: - A função de busca é falsa (é apenas uma caixa). - Não é possível clicar no carrinho de compras. - Fica uma bagunça quando visualizado em um celular. Uma versão com casos de uso descritos: - Estão disponíveis tanto a pesquisa quanto o carrinho de compras. - Perfeitamente compatível com celulares - Também adicionou automaticamente pré-visualização rápida e filtragem por categoria. Embora tenha levado 26 segundos a mais para gerar, isso economizou de uma a duas rodadas de modificações subsequentes. No final, acabou sendo mais rápido. Parte Três: Restrições incluem: - Preferência de estilo - Pressupostos de Equipamento - Expectativas de layout - Esquema de cores - Requisitos responsivos por exemplo: Um ambiente profissional, porém acolhedor. O layout em formato de cartão proporciona uma hierarquia clara. Esquema de cores: verde indica normal, amarelo indica aviso e vermelho indica emergência. É usado principalmente em telas grandes. Deveria parecer um produto SaaS de verdade. As configurações padrão para a versão 0 já são boas, mas restrições específicas podem torná-la ainda melhor e o código mais conciso. Comparação de testes reais A equipe da Vercel realizou três conjuntos de testes comparativos, alterando apenas uma variável em cada conjunto. Teste 1: Impacto dos cenários de uso Versão desfocada: "Para criar um site de comércio eletrônico, você precisa ter listas de produtos, filtros e funções de compra." Versão clara: "Os sites de comércio eletrônico de moda são voltados para jovens de 25 a 35 anos, que geralmente os acessam por meio de seus celulares durante os deslocamentos. Eles comparam rapidamente vários produtos antes de fazer um pedido." Crie uma página de produto que inclua: imagens com rolagem, nome do produto, preço, descrição, seleção de tamanho e cor e um botão "adicionar ao carrinho". A parte superior possui apenas um botão de voltar e um ícone de carrinho de compras. Transmite uma sensação de simplicidade e sofisticação. Resultado: A versão nítida foi feita corretamente na primeira tentativa. A versão desfocada precisa de mais 1 ou 2 rodadas de revisões. Teste 2: Impacto na superfície do produto Uma versão mais ambígua: "Criar uma página de perfil de usuário." Versão clara: "Crie uma página de perfil de usuário que exiba: avatar, apelido, nome de usuário, e-mail, biografia, data e hora de cadastro, estatísticas de atividade (número de publicações, número de comentários, número de seguidores), lista de atividades recentes (com registros de data e hora) e botões de edição e configurações." Teste 3: O impacto das restrições Versão básica: "Crie um painel de controle para tickets de atendimento ao cliente. Exiba: tickets pendentes, tempo de resposta, desempenho do atendimento ao cliente e atividades recentes." Versão detalhada: Crie um painel de controle para tickets de atendimento ao cliente. Exiba: tickets pendentes, tempo de resposta, desempenho do atendimento ao cliente e atividades recentes. Prioridade para dispositivos móveis (os gestores usam seus celulares para visualizar o conteúdo enquanto estão no local). Tema de cores claras com alto contraste. Esquema de cores: Vermelho indica emergência (mais de 24 horas), amarelo indica situação moderada e verde indica situação normal. Layout com no máximo 3 colunas. Deve incluir um indicador de carregamento. Principal diferença: a versão básica só pode ser visualizada em celulares (o layout para desktop é menor), enquanto a versão detalhada é verdadeiramente otimizada para dispositivos móveis. Iterações subsequentes Após a geração, você tem duas maneiras de aprimorá-la: 1. Continue escrevendo palavras-chave. Adequado para modificações funcionais, como adicionar recursos ou alterar a estrutura. 2. Modo de Design: Clique em Modo de Design e selecione diretamente o elemento que deseja ajustar. Ideal para alterar rapidamente detalhes visuais como cor, espaçamento e fonte. Lembre-se: use palavras-chave para lógica e estrutura, e padrões de design para ajustes visuais. Finalmente, aqui está um exemplo completo: Crie um painel de controle de atendimento ao cliente que exiba: - Número de ordens de serviço pendentes - Tempo médio de resposta - Ordens de serviço categorizadas por prioridade (alta/média/baixa) - Lista de desempenho do atendimento ao cliente (mostrando a carga de trabalho atual) Fluxo de atividades recentes de tickets Para supervisores de atendimento ao cliente (responsáveis por equipes de 5 a 10 atendentes), recomenda-se o uso de celulares para monitorar a situação durante as rondas, a fim de evitar sobrecarga no atendimento e garantir o cumprimento dos tempos de resposta estabelecidos. Verifique a cada 30 minutos para identificar funcionários do atendimento ao cliente sobrecarregados e realocá-los para outras tarefas. restrição: - Tema de cores claras, priorização de dispositivos móveis, alto contraste - Esquema de cores por prioridade: Vermelho para emergência, Amarelo para média, Verde para normal. - Exibe indicadores de status do atendimento ao cliente (ocupado/disponível). - Máximo de 2 colunas em dispositivos móveis Para concluir Boas instruções = melhores resultados + maior velocidade. Na próxima vez que usar a versão 0, tente escrever mais. Deixe claro para quem é, por que precisam dela e como usá-la. -- O artigo original pode ser encontrado na seção de comentários.
Artvercel.com/blog/how-to-pr….co/vMMq7nLaJK