Claude Design e Claude Code: como criar interfaces que não parecem feitas por IA

Fala, comunidade tech!

Na quinta, 24/09, eu fiz a Imersão em Inteligência Artificial com Claude Design e Claude Code. Construímos ao vivo a interface do Geek Hub, um aplicativo para organizar os jogos, os filmes e as séries que você está consumindo, com fila, notas e um perfil para compartilhar com os amigos.

O foco foi a interface, sem back-end. A ideia era mostrar um processo para sair daquele visual genérico que a gente reconhece de longe como "coisa feita por IA".

Comece por uma imagem conceitual

Quando você pede uma tela sem contexto, a IA devolve quase sempre a mesma coisa: fundo escuro, tons de roxo e azul e componentes previsíveis. Tem gente entregando trabalho excelente com IA e tem gente entregando projeto feito nas coxas, e a diferença está em como cada um usa a ferramenta.

Antes de gerar qualquer código, eu peço uma imagem conceitual da aplicação. Ela gasta muito menos tokens do que um HTML e permite corrigir o rumo antes de implementar. Fiz no ChatGPT, mas funciona em qualquer IA com um bom modelo.

Referências visuais na pasta .inspo

O passo seguinte é dar referências para a IA, numa pasta chamada .inspo. Mostrei os sites que eu mais uso: Dribbble, Behance, Awwwards, que funciona como um Oscar de sites, e o Game UI Database. Gosto de interfaces de jogos porque elas precisam ser intuitivas com pouco texto.

Como não sou designer, monto uma colagem: a paleta vem de uma referência e o formato dos componentes vem de outra. Só com isso, o Geek Hub já ganhou cara de aplicação de mercado.

Essa versão ainda trouxe um menu de conquistas e uma lista de amigos que eu não tinha pedido. Toda lacuna que você deixa, a IA preenche por conta própria, e quanto mais ela infere, menos controle você tem sobre o que está sendo construído.

Design system, a biblioteca visual que a IA consulta

Um design system reúne os padrões visuais do produto: cores, tipografia, espaçamentos, botões e ícones. Com ele, a IA passa a seguir as suas regras em qualquer tela nova.

Criei o do Geek Hub no Claude Design, a partir da pasta .inspo. Em vez de inferir, a ferramenta me fez perguntas, como qual imagem usar de referência de cores e que família de fontes seguir. O resultado veio com paleta, tipografia, família de ícones, padrões de botão e um tom de voz para a marca. Para design, use um modelo forte, do Opus para cima, com esforço pelo menos em alto.

Comportamentos num arquivo de spec

Design cuida da aparência. A usabilidade fica nos comportamentos, os behaviors. Recomendei o livro "Não me faça pensar", que faz ainda mais sentido agora.

Criei uma pasta specs com um arquivo behavior.md. Nele, o menu lateral passa a ser recolhível, mostrando só os ícones quando fechado, e o feed de atividades dos amigos também pode ser recolhido. Uma dica que economiza muito token: passe o identificador do elemento, que você encontra no DevTools com F12. Assim o Claude Code vai direto ao ponto, sem varrer o projeto inteiro atrás do menu.

Claude Code em modo de planejamento

Chamei o Claude Code pelo terminal e apertei Shift+Tab para deixá-lo no modo de planejamento. Ele leu a spec, montou um plano e só depois aplicou as mudanças. Em seguida, abriu um Chrome sozinho para testar os comportamentos, como faria alguém de QA.

Depois rodei o /init, que cria o CLAUDE.md, a memória fixa do projeto. Conforme a conversa cresce, a qualidade das respostas cai, e o CLAUDE.md guarda as decisões. Se você usa outra IA, basta renomear o arquivo para AGENTS.md.

No fim, guardei o design system numa pasta .design e pedi um verde neon mais vivo. A mudança foi para a aplicação inteira, porque toda tela nova agora parte de três bases: os comportamentos, o design system e o CLAUDE.md.

Também indiquei a skill de front-end design da Anthropic e o Open Design, uma alternativa open source ao Claude Design com várias skills da comunidade.

Processo pesa mais do que prompt

Mostrei ainda o editor de vídeo que criei com o Claude Code, sem escrever uma linha de código, depois que o CapCut passou a cobrar por recursos que eu usava. A IA acelera muito, mas acelera na direção que você der para ela. Quem só escreve prompt solto fica dependendo da sorte a cada resposta.

Onde continuar

Se você está começando, a formação de Fundamentos de Inteligência Artificial é o melhor ponto de partida. Para quem quer criar produtos, recomendo a trilha de Lovable, com o conteúdo de como criar um negócio do zero com IA, da ideia ao MVP.

A gravação da imersão fica na aba de Mentorias, para quem é DIO PRO, com os materiais de apoio e certificado.

Na terça e na quarta, 29 e 30/09, às 19h, tem a Imersão em Automação com IA, GPT e Claude Cowork. O acesso vai ser enviado no grupo: https://c.dio.me/imersoes-tech-ia

Se você quer acesso a tudo isso, a bolsa de estudo do DIO PRO Vitalício, patrocinada por grandes empresas parceiras da DIO, inclui:

✅ Acesso para sempre a matrículas ilimitadas em todos os bootcamps da DIO

✅ Acesso para sempre a +2.150 cursos, projetos e formações em agentes de IA, back-end, front-end, cloud, data, games, mobile e DevOps

✅ Acesso a 5.000 créditos para utilizar o AI Job Hunter e conquistar sua próxima vaga 3x mais rápido

✅ +65 formações incluindo: Excel com IA, GPT for Devs, AI Builder com Lovable, AI Automation com N8N e Formação Github Copilot

✅ Garantia total de 7 dias

Garanta sua bolsa de estudo do DIO PRO Vitalício

E você, já usa um design system nos seus projetos com IA? Me conta nos comentários o que você está construindo.