case / processo
este portfólio,
feito com IA
o case é o site que você está lendo. desenhei, escrevi e publiquei o thais.coffee com o claude como parceiro de produção. a IA acelerou o fazer. direção, sistema e conteúdo continuaram comigo.
feito por thais + claude
- direção de arte
- design system
- conteúdo
- uso de IA
- front-end
- design
- conteúdo
- desenvolvimento web
qualidade
big numbers
o site, em números contados_
contexto
a IA que faz tudo sozinha não servia_
o que não funcionava
comecei no criador de sites com IA da hostinger. ele entregava uma página pronta, mas cada mudança virava copiar e colar código, e a minha fonte de título nem carregava na caixa de código. eu não estava desenhando: estava administrando um gerador.
o que eu queria
um portfólio um pouco disruptivo, brutalista, com códigos gráficos techno retrô e o processo em primeiro plano. e um lugar onde eu pudesse dirigir a IA tela por tela, em vez de aceitar o que ela decidisse.
“fui eu que fiz, com a ajuda de alguma IA.”
do meu texto IA não faz bons designers. este case é a prática dele.
origem
antes do prompt, o rabisco_
a arquitetura do site nasceu à mão, no tablet. o rabisco vira o briefing: a IA lê o desenho, e eu confiro se a tela respeitou a intenção, não só o traço.
meu papel
quem faz o quê_
a divisão é simples: a IA produz, eu decido. na prática, ela fica assim.
| etapa | eu | a IA |
|---|---|---|
| direção | escolho a estética brutalista, as referências, a paleta e as fontes. | propõe composições e variações dentro dessa direção. |
| sistema | defino as regras: grid de 8, raio só em janela, texto de botão curto. | documenta os tokens, aponta onde a tela fugiu da regra e me faz as perguntas em aberto. |
| conteúdo | trago os fatos: meus documentos, análises, telas e o linkedin. corto o que não consigo provar e reviso a versão em inglês. | rascunha a partir dessas fontes, organiza a estrutura de cada case e faz a versão em inglês. |
| código | reviso na tela, no desktop e no celular. | escreve o HTML e o CSS e publica no canvas. |
processo
um ciclo curto, direto na tela_
- 01
briefing com fonte
cada pedido vem com material de verdade: o rabisco da página, o documento do case, as análises, os prints das telas. sem isso, a IA escreve sobre um designer genérico.
- 02
primeira versão no canvas
a página nasce como um artboard, ao lado das outras, para eu ver o site inteiro de uma vez.
- 03
feedback no lugar exato
comento em cima do elemento, como faria com um dev. curto e direto.
- 04
a correção vira regra
quando um ajuste se repete, ele sobe para o design system. e quando uma regra deixa de servir, ela sai de lá com registro.
- 05
publica
o código vai para o github, que publica na hostinger. o umami mostra o que as pessoas abrem e leem.
- $ briefing --fontes docs,telas,linkedincontexto antes de tela
- $ desenha --canvas “in prod”uma página por artboard
- $ comenta “volta como era”feedback em cima do elemento
- $ regra >> design-systemo ajuste que se repete vira regra
- $ publica --github --hostingere o ciclo recomeça
decisões
onde eu disse não para a IA_
sair do gerador
o que a IA oferecia
um site inteiro gerado de uma vez, que eu só podia ajustar copiando código.
o que eu escolhi
um canvas onde cada página é um artboard, com o código num repositório no github e deploy na hostinger. mais trabalho no começo, controle total depois.
canto arredondado só em janela
o que a IA oferecia
raio em botão, tag, card e janela, cada um com um valor.
o que eu escolhi
pela heurística de consistência de nielsen: 16 px só em janelas e telas, círculo só a 50%, todo o resto reto. o raio passou a significar “isto é uma janela”.
tag não é botão
o problema
destaques que não levam a lugar nenhum estavam com o mesmo azul dos botões.
o que eu escolhi
azul é só para o que age. tag e destaque não clicável ganharam outro tratamento, e texto de botão ficou com no máximo três palavras.
número sem prova sai
o risco
IA escreve resultado de forma convincente, com ou sem lastro. um portfólio não pode ter frase que eu não sustento numa entrevista.
o que eu escolhi
tirei números que não conseguia comprovar, como um ganho de retenção do chatbot. no case de transparência, a prova virou externa: o ranking.
sem home, menu de terminal
o padrão
uma home com hero genérico e o resto escondido atrás de cliques.
o que eu escolhi
o sobre é a entrada. o menu fica no topo, como uma linha de comando que mostra onde você está: portfolio/este-portfolio.case.
conceito não vence usabilidade
o que a IA oferecia
no celular, o menu abria num quadrado amarelo escrito “ls”, o comando de terminal que lista pastas. combinava com o conceito, mas só quem programa entende.
o que eu escolhi
anotei “menu ⊕ identificável” no rabisco e pedi para trocar pelo ícone de três linhas. o conceito fica no prompt; o botão precisa ser reconhecido por qualquer pessoa.
do claro para o escuro
o que eu tinha
o design system nasceu só com tema claro. o escuro ficaria para depois.
o que eu escolhi
levei o site inteiro para o fundo escuro, com usabilidade acima da estética: contraste conferido cor por cor e fitas de divisão só em branco, para a cor não pesar.
a cor do dado mudou três vezes
o que eu tinha
as bolinhas de nível e as barras de gráfico começaram azuis, iguais aos botões. depois passaram para o vermelho das fichas técnicas.
o que eu escolhi
o vermelho saiu do sistema e o dado ficou com o menta, uma cor que não compete com botão, link nem destaque. cada troca foi uma regra reescrita, não um ajuste solto.
o quiz fica fora do sistema
o padrão
aplicar o design system em todas as páginas, sem exceção.
o que eu escolhi
o quiz de match para recrutadores tem paleta e fonte pixel próprias. é um jogo, não um case, e pode ter cara de jogo. saber onde o sistema não entra também é decisão.
busca que entende a ideia
o padrão
filtro por nome do case e por perfil de quem procura.
o que eu escolhi
uma barra só. a busca procura a ideia dentro do conteúdo dos cases e responde se ela está ou não. o filtro por perfil saiu.
a tipografia
três fontes, cada uma no seu lugar_
o site usa três famílias e nenhuma troca de papel com a outra. todas seguem a mesma escala: 12, 14, 16, 20, 32 e 80.
gokschil
hero
a fonte de personalidade. aparece só no título de abertura de cada página, nunca em seção de conteúdo. se não carregar, o título cai para a roboto mono.
roboto mono
títulos e interface
subtítulos, rótulos, botões, números e o menu de terminal. é a voz de sistema do site, monoespaçada como um caminho de arquivo.
work sans
corpo
todo texto corrido. é a fonte que mais trabalha, então é a mais quieta: legível em parágrafo longo, sem disputar com os títulos.
fora do sistema: o quiz de match para recrutadores usa uma fonte pixel própria.
o sistema
cada cor com um trabalho_
o design system mora num artefato à parte, com tokens, componentes e uma lista de dúvidas que a IA levantava e eu respondia. a paleta é curta de propósito: seis famílias. numa revisão, dois brancos e quatro cinzas quase iguais viraram um papel e dois cinzas.
neutros
variaçãotinta é o chão de toda página; breu desce um degrau e marca cards, janelas e menu. cinza e névoa são o texto de apoio, papel é o texto principal. eram oito tons; ficaram cinco.
azul
variaçãoum tom só. no hover, o botão vira amarelo, como todo hover do site.
menta
variaçãoum tom só, sempre preenchimento com borda papel. a série de comparação dos gráficos fica no cinza.
amarelo
variaçãoum tom só. o texto sobre ele é sempre tinta ou roxo.
laranja
variaçãoum tom só, no sublinhado de 2 px ou na barra de 8 px. o texto do link continua papel.
roxo
variaçãoa mesma função em duas luzes. o roxo some no fundo escuro (1,7:1), então ali ele vira lilás (8,7:1). sobre o amarelo, volta a ser roxo.
- 8 px
todo espaçamento em múltiplos de 8. na dúvida, o maior
- 16 px
raio só em janelas e telas. círculo, 50%. o resto, reto
- 12·14·16
20·32·80a escala de fonte inteira. nada fora dela
- 3
palavras, no máximo, em texto de botão
- aa
tudo em minúsculas, até nomes. siglas e Pix ficam como são. gokschil só no hero
- :)
o smiley em pixel aparece em todas as páginas
ferramentas
escolher a ferramenta também é design_
skills são pacotes de instrução que mudam como a IA trabalha. instalei só as que serviam ao site e deixei de fora o que traria complexidade sem ganho.
- com a frontend-design e a canvas-design, fiz uma versão revisada do sobre. ela virou a página que está no ar.
- a canvas-design partiu de uma filosofia visual escrita antes de qualquer pixel: desenho técnico, cor chapada, sombra sólida e uma assinatura sorrindo.
- deixei de fora a skill de react com biblioteca de componentes. o site é HTML e CSS, e não precisa de mais que isso.
- explorações e produção ficam em páginas separadas do canvas, então dá para testar sem quebrar o que está no ar.
no processo deste site
- frontend-design
- canvas-design
- web-design-guidelines
ficou de fora
- web-artifacts-builder
aprendizados
o que eu levo daqui_
- a IA acelera o fazer, não o decidir. o que mais rendeu foi transformar cada feedback em regra do sistema.
- regra escrita também se desfaz. o vermelho e o “só tema claro” saíram do sistema, e o design system registra o que mudou, não só o que entrou.
- contexto é o insumo. com os meus documentos, ela escreve sobre o meu trabalho. sem eles, sobre qualquer designer.
- revisar é o trabalho. toda frase com número passou por mim, e o que eu não conseguia provar saiu.
- dirigir IA é parecido com dirigir um time: briefing claro, feedback específico e critério na hora de aprovar.