DESIGN
DE GUERRILHA
DE GUERRILHA
Como fazer apps bonitos num mundo comandado pela IA.
15 ANOS ATRÁS EU RECORTAVA
AROS DE BICICLETA NO PHOTOSHOP
POR HORAS
AROS DE BICICLETA NO PHOTOSHOP
POR HORAS
O TRABALHO DO ESTAGIÁRIO
MEU TRABALHO ERA
PREPARAR AS
BICICLETAS.
PREPARAR AS
BICICLETAS.
O Diretor de Arte fazia a manipulação a arte, o anúncio, a capa.
Eu entregava o recorte. Só isso. E era o gargalo de tudo.
[ print: Photoshop antigo,
aro de bicicleta em recorte ]
aro de bicicleta em recorte ]
↑ O VÃO ENTRE OS RAIOS
A CONTA DA ÉPOCA
HORAS
para recortar o vão entre os raios de UM aro.
Pen Tool. Ponto por ponto. Nó por nó.
Errar um ponto = refazer o aro inteiro.
Errar um ponto = refazer o aro inteiro.
HOJE: 1 CLIQUE
EU NÃO ESTAVA
RECORTANDO IMAGENS.
RECORTANDO IMAGENS.
EU ESTAVA SENDO PAGO PARA OLHAR
IMAGENS BOAS POR MILHARES DE HORAS.
IMAGENS BOAS POR MILHARES DE HORAS.
Era acúmulo de repertório disfarçado de trabalho manual.
A FERRAMENTA
EVOLUIU
EVOLUIU
A Varinha Mágica melhorou.
E o meu trabalho de dois anos virou um botão.
E o meu trabalho de dois anos virou um botão.
O QUE ACONTECEU COM O MEU TRABALHO
ANTES
HORAS
Pen Tool, ponto por ponto, nó por nó.
DEPOIS
1 CLIQUE
Refine Edge · Select Subject · Remove BG.
A PARTE DIFÍCIL NÃO FICOU MAIS FÁCIL.
ELA DEIXOU DE SER TRABALHO.
ELA DEIXOU DE SER TRABALHO.
A PRIMEIRA EXTINÇÃO
A ferramenta nunca substituiu o profissional.
Ela substituiu a parte mecânica dele — e expôs quem só tinha a parte mecânica.
Ela substituiu a parte mecânica dele — e expôs quem só tinha a parte mecânica.
Quem só sabia RECORTAR
→
DESAPARECEU
Quem sabia POR QUE recortar
→
VIROU DIRETOR DE ARTE
A RÉGUA QUE VALE PARA TODA FERRAMENTA
O VALOR SOBE
DE CAMADA.
DE CAMADA.
FERRAMENTAO VALOR SAIU DEE FOI PARA
Pen Tool → Varinharecortar→COMPOR
Photoshop → Figmacompor→DIRIGIR ARTE
Figma → Claude, Codexdesenhar a tela→DECIDIR O QUE ELA DIZ
A IA
A melhor ferramenta de recorte já construída.
E a pior tomadora de decisão que você já contratou.
E a pior tomadora de decisão que você já contratou.
2026
"Crie o design pra mim
usando a skill de front-end."
usando a skill de front-end."
8 SEGUNDOS. E FUNCIONA.
É aqui que mora a armadilha e ela não é a que vocês estão pensando.
O problema não é a IA errar. O problema é ela acertar a média.
O problema não é a IA errar. O problema é ela acertar a média.
O QUE A IA É, DE VERDADE
A MAIOR RASPAGEM
DA HISTÓRIA DA
HUMANIDADE.
DA HISTÓRIA DA
HUMANIDADE.
Ela é a média estatística de tudo que já foi feito.
Treinada em vícios visuais, devolve vícios visuais com uma confiança impressionante.
Treinada em vícios visuais, devolve vícios visuais com uma confiança impressionante.
A CONSEQUÊNCIA ESTRUTURAL
EXCELENTE EM
"PARECIDO
COM"
COM"
Ela viu um milhão de dashboards. Faz o dashboard médio muito bem e muito rápido.
INCAPAZ DE UM
"NUNCA
ANTES VISTO"
ANTES VISTO"
Não é limitação de versão. É limitação de natureza: média não produz exceção.
ELA NÃO TEM GOSTO. ELA TEM MÉDIA.
QUANTOS AQUI JÁ DIGITARAM
"CRIE O DESIGN PRA MIM"?
"CRIE O DESIGN PRA MIM"?
NO SEU PRODUTO
TODO MUNDO QUE DIGITA O MESMO PROMPT
RECEBE O MESMO APP.
RECEBE O MESMO APP.
O ROXO
gradiente violeta → azul, sempre
O GLASSMORPHISM
blur atrás de tudo, sem motivo
O BADGE
pílula arredondada em cima do H1
A GRID DE 3 CARDS
ícone genérico + 2 linhas de texto
não é coincidência. é o treino aparecendo.
POR QUE ISSO É UM PROBLEMA DE NEGÓCIO
2015
APP BONITO
ERA CARO
ERA CARO
e por isso era vantagem competitiva
2026
APP BONITO
É GRÁTIS
É GRÁTIS
e por isso deixou de ser vantagem
Se está a 1 prompt de distância pra você, está a 1 prompt do seu concorrente.
A NOVA VANTAGEM NÃO É PARECER BOM.
É PARECER COM VOCÊ.
É PARECER COM VOCÊ.
O DETALHE QUE NINGUÉM TE CONTA
PROMPT VAGO NÃO RECEBE
"NÃO ENTENDI".
RECEBE CLICHÊ.
"NÃO ENTENDI".
RECEBE CLICHÊ.
É o único assistente do mundo que não sabe pedir briefing.
O resultado não parece errado. Parece pronto. É pior.
O resultado não parece errado. Parece pronto. É pior.
A INVERSÃO QUE NINGUÉM ESPERAVA
A ERA DAS IAS NOS FAZ TER
SAUDADE DOS SOBRINHOS.
SAUDADE DOS SOBRINHOS.
O SOBRINHO · 2008
Feio. Desalinhado. Fonte errada. Três cores demais.
Mas você entendia o que era, quanto custava e onde clicar.
A IA · 2026
Impecável. Alinhado. Espaçamento perfeito. Fonte da moda.
E você não sabe o que o produto faz.
TROCAMOS CLAREZA POR ACABAMENTO —
E CHAMAMOS ISSO DE EVOLUÇÃO.
E CHAMAMOS ISSO DE EVOLUÇÃO.
ANTES QUE ISSO PAREÇA SERMÃO
A CULPA NÃO É
DE VOCÊS.
DE VOCÊS.
O mercado obrigou todo mundo a entregar melhor, mais rápido e mais barato. A única forma foi pulando etapas justamente as cruciais.
Eu passo por isso todo dia.
Eu passo por isso todo dia.
Este workshop não é sobre trabalhar mais.
É sobre desacelerar 10 minutos no lugar certo.
É sobre desacelerar 10 minutos no lugar certo.
ENTÃO PRA QUE
SERVE O DESIGN?
SERVE O DESIGN?
(a resposta não tem nada a ver com bonito)
A DEFINIÇÃO QUE VALE PARA DEV
Design não é deixar bonito. Design serve para duas coisas:
INFORMAR. DIRECIONAR.
O mecanismo das duas é o mesmo: hierarquia de informação — o que a pessoa vê primeiro, segundo, terceiro, e o que ela nunca precisa ver.
1Bonito é consequência — de uma mensagem bem ordenada. Não é ponto de partida.
2Se tudo grita, ninguém ouve — ênfase só existe onde há contraste.
3App feio que comunica — vende mais que app bonito que confunde.
FAÇA AGORA · 60 SEGUNDOS
O TESTE DO SQUINT
Abra o seu app. Aperte os olhos até a tela desfocar.
O QUE AINDA DÁ PRA LER
É A SUA HIERARQUIA.
É A SUA HIERARQUIA.
Sobrou 1 ou 2 coisas legíveis → você tem hierarquia.
Tudo virou um borrão de peso igual → você não tem design. Você tem decoração.
Tudo virou um borrão de peso igual → você não tem design. Você tem decoração.
A PERGUNTA QUE IMPORTA
COMO CRIAR ALGO DIFERENTE
QUANDO TUDO É IGUAL?
QUANDO TUDO É IGUAL?
um arquivo .md
uma API
um MCP
um prompt salvo
um design system
nenhum deles carrega isto:
A CRIATIVIDADE.
Repertório não é dependência que você instala. É a única coisa no seu stack que não dá para versionar, copiar ou fazer fork.
O MÉTODO
DESIGN
DE GUERRILHA
DE GUERRILHA
Pouco recurso. Muito resultado. Repertório roubado de todo lado.
MOV. 01
TENHA MÉTODO
20 referências antes de 1 prompt.
Não pegue referência de apps concorrentes. Se você se inspira na média, produz a média da média.
PEGUE DE FORA DO SOFTWAREembalagem, cartaz de cinema, editorial, sinalização de aeroporto, capa de disco
TENHA UM ATALHO DE REPERTÓRIOcomponent.gallery para nomear o componente · Behance para sair da bolha de SaaS
MOODBOARD NÃO É ENFEITEé o briefing que você vai colar no prompt depois
SALVE O QUE TE INCOMODAsaber o que você odeia é metade da direção de arte
A CAIXA DE FERRAMENTAS DO MOV. 01
ONDE SE INSPIRAR
01 · REFERÊNCIA VISUAL
awwwards.como teto do que dá pra fazer na web
thefwa.cominteração e movimento fora do óbvio
dribbble.comdetalhe de componente · use com filtro
behance.neteditorial e marca — a saída da bolha de SaaS
landing.loveestrutura de página que converte
02 · ÍCONES
Não desenhe ícone, não use emoji: biblioteca pronta = mesma grade, mesmo peso, mesmo traço.
hugeicons.combiblioteca ampla · vários estilos
shadcn.io/iconso set que a IA já conhece — cole o nome, ela acerta
03 · PLANEJAMENTO · O CRUCIAL
component.gallery
Antes do prompt: descubra o nome certo do componente e os 15 jeitos que o mercado já resolveu ele.
MOV. 02
UMA DECISÃO DE CADA VEZ
Restrição é o que faz parecer intencional.
Amador acha que design é adicionar. Design é subtrair até sobrar só o necessário.
1 FONTE · 1 COR DE DESTAQUE1 raio de borda · 1 escala de espaço (4 / 8 / 16 / 32)
SISTEMA > TELAdefina o sistema uma vez e a IA replica com perfeição
PEÇA TELA POR TELAe você recebe 12 apps diferentes no mesmo repositório
MOV. 03
RABISQUE ANTES
10 min de wireframe feio economizam 2h de re-prompt.
E o ponto que dói: você não está desenhando. Você está decidindo.
COMECE NO BLOCO DE NOTASdepois o wireframe. Caixa cinza com texto dentro já é design.
O POLIMENTO É A ÚLTIMA ETAPAnem sempre a versão polida precisa ser a primeira
PULAR O RABISCO NÃO ECONOMIZAterceiriza a decisão pra um modelo que não conhece seu usuário
PROTOTIPAR É BARATOrefazer é caro. Decidir errado rápido é o mais caro de todos.
MOV. 04
PROMPT COMO BRIEFING
Não como pedido.
A IA é uma executora excelente de briefing bom e uma adivinha péssima.
PEDIDO"faça um dashboard bonito" → você recebe a média
BRIEFINGreferências + hierarquia da tela + tokens + a mensagem + o que NÃO pode aparecer
VOCÊ NÃO VIROU DESIGNERvocê virou cliente. E cliente bom faz trabalho bom aparecer.
MOV. 05
DIREÇÃO DE ARTE É DIZER NÃO
O valor está no descarte.
Gerar é grátis agora. O valor não está no que você gera — está no que você mata.
GERE 5, MATE 4se você aceita a primeira, você não dirigiu nada — você assistiu
SEM CRITÉRIO NÃO HÁ ESCOLHAo moodboard do movimento 01 é o seu critério
A IA NUNCA VAI DIZER "TÁ RUIM"esse cargo é seu, e é o único que não tem botão
O EXERCÍCIO · UMA TELA SÓ
ESCOLHA A TELA MAIS IMPORTANTE
DO SEU PRODUTO.
DO SEU PRODUTO.
A que decide se a pessoa fica ou vai embora. Uma. Não o app.
3 MINESCREVA A MENSAGEMo que essa tela precisa fazer a pessoa entender em 3 segundos? Se você não escreve, a IA não adivinha.
4 MINJUNTE 5 REFERÊNCIASnenhuma de app concorrente. Fora do software. Anote em 3 palavras o que roubou de cada.
2 MINRABISQUE EM CAIXAS CINZASpapel ou Figma. Só retângulos e texto. Ordem de leitura: 1º, 2º, 3º. Nada de cor.
3 MINAÍ SIM: O BRIEFINGcole mensagem + referências + hierarquia + tokens + o que NÃO pode aparecer. Só então aperte enter.
depois: 2 voluntários mostram o antes (prompt seco) e o depois (briefing). O contraste é o argumento.
VOLTANDO PARA A BICICLETA
Eu passei horas recortando o vão entre os raios de um aro. Hoje isso é um clique.
Eu não perdi nada. Porque o recorte nunca foi o trabalho.
Eu não perdi nada. Porque o recorte nunca foi o trabalho.
O TRABALHO ERA DECIDIR
O QUE FAZER BICICLETA.
O QUE FAZER BICICLETA.
Isso ainda não tem botão.
A IA é a melhor Varinha Mágica que já construíram.
Varinha Mágica não decide nada.
VOCÊ
DECIDE.
DECIDE.
DESIGN
DE GUERRILHA
DE GUERRILHA
Vamos continuar essa conversa? Siga @soucapi no X
