Voltar

Prompt teardown: a seção que se parece com o seu app sem que ninguém peça

na 

O mesmo prompt, colado tal e qual em dois apps de design oposto: uma confeitaria toda em creme e rosa, uma rádio em preto e âmbar. Nenhuma instrução de aparência: nem uma cor, nem uma fonte, nem um arredondado. As duas seções saíram vestidas como da casa. Eis o que a geração leu sem que ninguém escrevesse.

Prompt teardown, episódio 4. A série em que desmontamos prompts do AI Extension Builder para ler o que eles realmente acionam: o que cada frase obtém, as escolhas que a geração faz sem que ninguém dite, o que a seção sabe fazer uma vez no lugar. Hoje: um único prompt, colado duas vezes em dois apps demo fictícios — e uma pergunta que ninguém fez a ele: com o que a seção deve se parecer?

Um prompt mudo sobre o estilo

A seção pedida se chama «Today & tomorrow»: a programação dos próximos dois dias, lida da agenda do app, com uma aba para alternar entre eles; o visitante fixa com um pin o que não quer perder, e o app lembra essa seleção de uma visita para a outra. O prompt — está no fim do artigo — descreve esse uso, e nada mais. Releia: não contém uma palavra sobre a aparência.

Nós o colamos em dois apps construídos para se virarem as costas. «Pastries' House», confeitaria fictícia: fundo creme, tipografia toda em curvas, rosa e chocolate. «Radio Alba», rádio local fictícia: tela noturna, títulos brancos, âmbar e vermelho. Se a geração tivesse apenas o prompt para trabalhar, as duas seções deveriam sair idênticas.

Na confeitaria

No «Pastries' House», a seção chega em creme: cartões brancos sobre o fundo do app, horários dourados, pins e abas em rosa — duas pílulas arredondadas, «Today» e «Tomorrow», que retomam a gramática da barra de navegação. Os eventos exibidos são os de verdade: as fornadas e as oficinas cadastradas na agenda do app, com suas miniaturas. A seleção fixada se instala embaixo, numa bandeja «Pinned for later» — e como pertence só ao visitante, vive no telefone dele, reencontrada a cada visita, sem conta nem perguntas.

A seção gerada no app da confeitaria: alternância entre os dois dias, um evento fixado, a lista se enchendo

Na rádio

No «Radio Alba», mesmo prompt, outro temperamento. A seção sai em escuro: cartões antracite, datas e horários em âmbar, a aba ativa em vermelho — os acentos da rádio, não os da confeitaria. E não é a mesma seção repintada: a diagramação também muda. O horário se alinha à direita do cartão, as duas abas se acomodam num seletor compacto, o cartão inteiro responde ao toque para fixar. Até o subtítulo, escrito pela geração e diferente de um app para o outro: «What's happening now and next» aqui, «See what's on, and keep a short list…» lá.

Dois apps, duas roupas, duas interpretações — e continua sem haver uma única instrução de estilo no prompt.

O que a geração leu

O prompt que você escreve não é o único texto que a geração recebe. A cada pedido, a plataforma anexa a ficha de identidade visual do seu app: a paleta, papel por papel — o fundo, as superfícies, a cor das ações, a dos títulos, os separadores — com uma instrução simples: a seção deve parecer nascida neste app. É por isso que o rosa vai parar nos pins da confeitaria e o vermelho na aba ativa da rádio: cada uma leu a própria ficha.

No artigo que apresentava o AI Extension Builder, Jerome dizia numa frase: o estilo global do app — cores, espaçamentos, contrastes — segue automaticamente. A parte invisível do prompt é exatamente isso. E ela não para no estilo: quando a sua descrição cita uma seção do app pelo nome — aqui, «Events» —, a geração recebe também com que lê-la. É por isso que a programação exibida é a verdadeira, miniaturas incluídas.

E se você tivesse que manter o código por conta própria? Esse trabalho tem nome: um manual de marca para transcrever em variáveis, cada componente para revisar, e tudo para revisar de novo na primeira mudança de identidade. Aqui, ele é refeito a cada geração — sem ocupar uma linha do seu prompt. Cole amanhã o mesmo prompt num terceiro app: é a ficha desse app que a geração vai ler.

O que não se move

Nem tudo segue o design do app, e é de propósito. A tipografia-assinatura da confeitaria — aqueles títulos gulosos, todos em curvas — fica nas telas nativas; as seções geradas escrevem na fonte do sistema, o registro nativo de cada telefone, legível em toda parte. O mesmo vale para a base: áreas de toque confortáveis, contrastes suficientes, estados de carregamento e telas vazias previstos de fábrica. Essa parte não se negocia no prompt — ela protege a seção, e os seus usuários, seja qual for o app.

O mais eloquente é colocar lado a lado duas telas do mesmo app: a agenda nativa da confeitaria — banners rosa, tipografia da casa — e a seção gerada. Mesmos conteúdos, mesmas miniaturas, dois registros tipográficos — e uma só casa.

O prompt completo

Ei-lo, tal como foi colado, duas vezes, sem uma linha a mais:

Create a "Today & tomorrow" section for this app. It shows what's happening today and tomorrow, using the events from the app's "Events" section. Visitors switch between the two days, tap an event to pin it to their personal shortlist, and see their shortlist at a glance. Remember the shortlist between visits.

Entre os dois resultados, nem um caractere do prompt mudou. Só o app mudou — e foi o app que fez todo o estilo.

Sua vez

Pegue este prompt, troque «Events» pelo nome de uma seção do seu app e cole: a seção sairá em casa, nas suas cores. Depois faça o exercício inverso: peça um desvio deliberado — um botão de fixar impossível de ignorar, um bloco que destoe do resto — e observe o que se move, e o que se mantém. É a melhor forma de sentir onde termina o seu prompt e onde começa o que a plataforma lê sozinha.

O primeiro episódio da série desmontava uma seção que lembra onde você estacionou e vai buscar o GPS e o Maps do telefone: Prompt teardown: GPS, memória e Maps a partir de uma única frase. E o quiz de verão da série vizinha já mostrava o mesmo reflexo: gerado dentro de um app, vestido por ele.

O AI Extension Builder está em beta, aberto a todos: crie um app com a GoodBarber e descreva sua primeira seção.

FAQ

É preciso descrever o design do app no prompt?

Não. A paleta do app é lida a cada geração, sem que você precise lembrá-la: descreva o uso, o estilo vem junto. Se quiser orientar a aparência — um clima, um detalhe que importa para você —, diga como o resto: sua descrição continua sendo a especificação.

O que acontece com a seção se eu mudar o design do app depois?

A roupa de uma seção é definida no momento em que ela é gerada. Depois de um redesign, peça simplesmente uma iteração — «harmonize a seção com o novo design» — e a geração relê a ficha do app, já atualizada.

Posso querer uma seção que destoe do resto do app?

Sim. O desvio desejado se descreve como qualquer outra exigência: um bloco promocional que precisa contrastar, um botão que precisa dominar a tela. A geração parte sempre da identidade do app — é a sua frase que define o desvio, e a base de legibilidade permanece.

Por que a seção não usa a fonte dos meus títulos?

As seções geradas escrevem na fonte do sistema do telefone: o registro das interfaces nativas, legível e coerente no iOS e no Android. Sua tipografia-assinatura continua sendo a das telas nativas — as duas convivem no mesmo app, cada uma no seu lugar.