Prototipar com os artifacts

O que é um artifact?

Um artifact é um resultado interativo que a IA gera e mostra ao lado da conversa: uma página HTML/CSS completa, um componente React, um SVG — que se executa realmente num painel dedicado. Não lês código a imaginar o resultado: vês o resultado, clicas nele, testas os hovers. E quando pedes um ajuste, o artifact atualiza-se à frente dos teus olhos.

Mede a mudança em relação ao fluxo clássico: maquete Figma, exportação, integração, deployment num ambiente de pré-visualização, retorno do cliente três dias depois… Cada ciclo de feedback custava horas. Com um artifact, o ciclo dura trinta segundos. Não é apenas «mais rápido»: é uma mudança de natureza. Quando iterar não custa nada, exploras dez direções em vez de defenderes a única que tiveste tempo de produzir.

Para o Studio Mango, é a arma do dia: em vez de apresentar amanhã de manhã três pranchas estáticas ao cliente, vais mostrar-lhe uma página viva — que faz scroll, que reage ao hover, que se consulta no telemóvel dele. A diferença de perceção é enorme: um protótipo interativo desencadeia comentários concretos («este botão, ali, eu via-o mais acima»), não debates abstratos sobre intenções.

Porque é que o ciclo curto muda a tua forma de fazer design

O ciclo do artifact segue sempre o mesmo padrão: escreves um prompt, o resultado aparece, observas, formulas um feedback preciso, o resultado atualiza-se. Repete. Este ciclo ultracurto tem um efeito psicológico precioso: desdramatiza o erro. Uma má ideia custa trinta segundos, então atreves-te a testá-la. Quantas boas ideias morreram em reunião porque «não havia tempo para maquetar isso»?

flowchart LR
  P["Prompt"] --> R["Resultado no artifact"]
  R --> F["Feedback preciso"]
  F --> M["Atualização em direto"]
  M --> R

Atenção, porém, ao reverso: a facilidade de iterar pode produzir deriva sem rumo. Vinte iterações sem norte, e encontras-te mais longe do objetivo do que no início, sem conseguir dizer quando descarrilou. A parada: mantém o teu briefing de direção artística debaixo dos olhos, e antes de cada pedido de modificação, verifica que ele serve o briefing. Iterar depressa, sim — derivar, não.

Preparar o terreno: o prompt de partida

A qualidade da tua sessão de prototipagem joga-se no primeiro prompt. Três ingredientes devem lá figurar: o teu design system (o bloco :root do capítulo anterior, colado integralmente), a estrutura esperada (a lista das secções por ordem), e o briefing de ambiente com os seus interditos. Sem os tokens, a IA improvisa cores; sem estrutura, inventa secções; sem interditos, volta a cair no genérico.

Cria a landing page da Sereno (app de meditação) numa única página HTML/CSS autónoma.

DESIGN SYSTEM (a usar exclusivamente — nenhum valor fixo):
[cola aqui o teu bloco :root completo]

ESTRUTURA:
1. Header: logo em texto + link «Iniciar sessão»
2. Hero: título forte, subtítulo, CTA principal «Experimentar gratuitamente», visual abstrato tranquilizante em CSS puro (sem imagem externa)
3. Três benefícios em cartões: Dormir melhor, Gerir o stress, Concentrar-se
4. Testemunho: citação + nome próprio + profissão
5. Pricing simples: oferta gratuita vs premium
6. Footer sóbrio

AMBIENTE: depurado, generoso em espaço (secções espaçadas de var(--space-24)), animações suaves apenas no hover.
INTERDITOS: gradientes berrantes, emojis, sombras pesadas, mais de uma cor de destaque.

Iterar em pequenos toques

Primeiro resultado obtido: está correto, não extraordinário. É normal — o primeiro rascunho é uma fundação, não um produto acabado. A disciplina que se segue faz toda a diferença: uma iteração = uma intenção. «Arredonda mais os cantos dos cartões», e observa. «Mais ar entre a hero e os benefícios», e observa. «O CTA deve dominar a hero», e observa.

Porquê esta lentidão aparente? Porque se pedires cinco mudanças de uma vez e o resultado se degradar, não sabes qual é a responsável. Mudança a mudança, vês precisamente o efeito de cada decisão — e aprendes pelo caminho: descobres empiricamente o que 16 px de espaço a mais fazem a uma secção. É o mesmo princípio que a depuração em programação: isolam-se as variáveis.

Concretamente, uma sessão eficaz parece-se com isto: três ou quatro iterações de estrutura (ordem das secções, proporções da hero, densidade dos cartões), depois três ou quatro iterações de estilo (espaçamentos finos, tamanhos de títulos, intensidade das sombras), e por fim uma passagem de detalhes (transições no hover, alinhamentos, coerência dos ícones). Estrutura primeiro, estilo depois, detalhes no fim — nunca o inverso, senão aperfeiçoas secções que serão eliminadas.

O vocabulário do feedback visual

As tuas iterações serão tão boas como as tuas formulações. Eis os esquemas que funcionam: nomear a zona («na secção benefícios…»), nomear o problema em vocabulário de design («…os três cartões quase se tocam, o ritmo está abafado…»), e dar a direção («…espaça-os de var(--space-8) e reduz o padding interno um nível»). Zona, problema, direção: três tempos, dez segundos a escrever, e a IA corrige exatamente o que é preciso.

• Hierarquia: «o título e o subtítulo têm quase a mesma presença; reforça o título (tamanho +1 nível, espessura 600) e atenua o subtítulo (--color-text-muted)»
• Ritmo: «os espaçamentos entre secções variam; uniformiza para var(--space-24) em todo o lado»
• Destaque: «a cor de destaque aparece em seis sítios; reserva-a para o CTA principal e os links»
• Densidade: «a secção pricing está apertada; duplica o padding interno dos cartões e areja as listas de funcionalidades»

Artifacts, v0, Figma AI: que ferramenta para quê?

Os artifacts não são o único meio de prototipar com a IA, e é útil situar o ecossistema. Cada ferramenta tem a sua zona de excelência; a escolha depende do teu entregável e do teu ponto de partida. Para o desafio do Studio Mango — explorar, iterar em conversa e entregar uma página viva em algumas horas — os artifacts são a ferramenta natural. Se o projeto exigisse React pronto para produção numa stack Next.js, o v0 levaria vantagem; se a equipa trabalhasse já em maquetes Figma com passagem a integradores, o Figma AI impor-se-ia.

Do rascunho ao apresentável

Numa dezena de iterações disciplinadas, passas de um esqueleto correto a uma página que podes projetar em reunião com o cliente. Antes de parares, faz a passagem de verificação: testa o resultado em mobile (metade dos visitantes da Sereno virão do telemóvel — pede explicitamente «mostra-me o resultado em 375 px de largura» e verifica que a hero não se desmorona), passa o rato sobre cada elemento interativo, e relê os textos, porque a IA introduz por vezes conteúdo falso aproximativo.

Último reflexo profissional: arquiva as etapas. Copia o código das versões-chave (V1 em bruto, V2 estruturada, V3 final) para ficheiros datados. Se o cliente preferir afinal a direção da V2, recupera-la num minuto. E ao apresentares a progressão V1 → V3, mostras o raciocínio do estúdio — o que vale muitas vezes mais do que o resultado final em si.