Usando o Grok Bot: Fotomosaicos no Figma

Você já deve ter visto alguns mosaicos de três painéis no seu feed. Aqui está como criá-los com @bot no @figma.

https://x.com/kazarov_d/status/2094470313862136145

Qualquer designer sabe como faria um, mas é um baita trabalho chato.

https://x.com/studiobakers/status/2095077637639262295

Então, deveríamos estar perguntando: "como posso usar IA para tornar isso 90% menos chato, para focar nas partes legais e criativas do design?"

O Grok Bot pode fazer exatamente isso.

Se você não se importa com o "como" e só quer um modelo do @bot, pode encontrar um aqui: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

Caso contrário, aqui está como construí o meu:

Construindo o fotomosaico

Minha abordagem geral com o Grok Bot é: divida em etapas como você criaria o ativo manualmente e, em seguida, peça ao @Bot para fazer exatamente o mesmo.

Neste caso, o fluxo de trabalho era um design no Figma.

https://x.com/justinsunyt/status/2096635033603756354

Isso é apenas uma tela com um ativo principal, componentizado e dividido em três painéis. Podemos fazer engenharia reversa das proporções observando posts existentes no X.

Pedi ao Bot para fazer exatamente isso — aqui está meu primeiro prompt otimizado.

Substitua Cursor Gothic, [link para imagem] e [inserir arquivo] pelos seus ativos.

1Faça engenharia reversa deste formato de postagem — é um fotomosaico de três imagens que se unem em uma única captura de tela larga sobre um fundo compartilhado.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Pegue cada painel em resolução máxima e obtenha as proporções.
7
8- Recorte três painéis de exportação (esquerda / centro / direita)
9
10- Transforme em um novo design no arquivo anexado [inserir arquivo] — mantenha tudo em uma seção
11
12- Novo fundo em todos os três painéis [link para imagem] — use este ativo, não o BG do post de referência
13
14- Herói: captura de tela do cursor.com em um display 4K simulado (2× DPR). Aplique zoom na página para que a interface e o texto sejam legíveis à distância. Confirme que a captura é realmente a página inicial (nav + título)
15
16- Sombra projetada centralizada + cantos arredondados reais na janela. Os cantos superiores da página web precisam de uma camada recortada/mascarada, senão ficarão quadrados
17
18- Chrome estilo Arc: shell Cursor ink escuro, botões de tráfego coloridos, URL centralizada em Cursor Gothic. A barra de título + texto da URL devem ocupar a altura. Inserção igual à esquerda/direita/embaixo ao redor da página
19
20- Organize no Figma com componentes para que uma colagem atualize todos os painéis — Fundo, Herói (Arc), Mestre, mais três clipes de exportação do Mestre
21
22Seu trabalho está concluído quando editar o BG ou o herói uma vez atualizar o mestre e todas as três exportações.

Após enviar o prompt, verifique seu bot a cada poucos minutos — se as coisas estiverem saindo do controle, pergunte por quê.

Talvez o bot não esteja usando o autolayout corretamente. Talvez o espaçamento esteja errado. Talvez um raio de borda precise de um ajuste.

Faça a alteração, anote por que foi necessária e integre essas coisas no seu próximo prompt.

Observando meu bot trabalhar

Alguns pontos importantes:

• Estou usando linguagem precisa. Note como chamei de "fotomosaico" e não "uma figura dentro de outra figura como três coisinhas numa coisinha"
• Eu não sabia o que era um fotomosaico, mas perguntei ao Grok "como se chama quando uma colagem de três imagens é montada para formar uma imagem maior"
• Todo prompt deve começar com a mentalidade de iniciante — como aprendo tudo o que preciso para fazer isso bem?
• Minha primeira tentativa não foi perfeita. Cheguei ao prompt acima perguntando ao Grok Bot "me diga o que você precisava de antemão para acertar de primeira"
• Esteja sempre perguntando: "como posso duplicar este fluxo de trabalho ou garantir que a IA possa fazer tudo da próxima vez?" Isso é algo que o @poteto realmente enfatiza.
• Não usei um bot especializado para isso — apenas um bot geral conectado ao Figma. Para algo pontual, isso é suficiente, mas para tarefas repetitivas, eu provavelmente criaria um especialista.

O Grok Bot é mais do que usar IA de forma eficaz — é sobre como usar um computador de forma eficaz.

Isso significa pensar a partir dos princípios fundamentais, comunicar-se de forma eficaz e ter paciência. Usar o Grok Bot é, acima de tudo, sobre resolver problemas.

O ativo finalizado

Além disso, agora tenho um ativo durável que posso reutilizar — como fiz neste post:

Reaproveitando meu ativo para um post de anúncio do iPad

Sem entender este formato, não teria conseguido fazer o anúncio do iPad em tempo hábil.

O papel do criativo é evocar emoção.

O Grok Bot me permite focar na seleção de ativos e imagens, enquanto ele cuida de todo o resto.

A pergunta mais comum que recebo é "como posso usar o Grok Bot" — aqui está uma maneira de usá-lo para design.