Como o Claude Code Me Transformou em um Designer de UI

Como o Claude Code Me Transformou em um Designer de UI

Tenho uma confissão que me faria ser motivo de piada em qualquer encontro de design: sou engenheiro de software há anos e ainda não consigo fazer um botão ficar bonito do zero. Me dê um sistema distribuído complexo? Eu projeto ele dormindo. Me peça para escolher uma paleta de cores e montar uma hero section? Vou ficar encarando uma tela em branco por uma hora e produzir algo que parece ter saído de 2009.

Isso mudou há três semanas, quando eu instalei um único arquivo markdown na minha configuração do Claude Code.

O arquivo se chama "front-end design skill", e ele transforma o Claude Code de um assistente de programação em algo que eu não esperava — um designer de UI genuinamente capaz que recebe um prompt curto de texto e produz hero sections, landing pages e layouts de componentes que parecem ter sido feitos por um designer de verdade. Não no nível "bom para uma IA". Realmente bom. O tipo de resultado que, quando mostrei para uma amiga designer, ela perguntou qual shot do Dribbble eu estava usando como referência.

Descobri isso através de um desafio de 30 dias de design de UI que está rolando no designcourse.com, onde mais de 600 participantes estão usando o Claude Code para gerar designs a partir do mesmo briefing de negócio. Mesma empresa fictícia, mesmas restrições, resultados totalmente diferentes — porque o diferencial não é a IA. É como você fala com ela.

Entrei esperando produzir mockups medíocres e aprender alguns truques. O que realmente aconteceu foi uma mudança fundamental na forma como eu penso sobre a fronteira entre engenharia e design. E vou te guiar exatamente por como configurar isso, como é o resultado na prática, e por que isso importa muito mais do que mais uma manchete de "IA faz imagens bonitas".

Mas aqui está a parte que mais me surpreendeu — e a razão pela qual estou escrevendo isso em vez de apenas compartilhar um screenshot. O sistema de skills por trás disso não é mágica. É um padrão que se aplica a qualquer domínio em que você queira que o Claude Code se saia melhor. Design é apenas o que fez o conceito fazer sentido para mim.

Por Que Engenheiros Constroem Coisas Feias (E Por Que Não É Realmente Culpa Nossa)

Antes de te mostrar a configuração, quero abordar algo que me incomoda há anos. A cultura de engenharia trata habilidade de design como opcional — algo bom de ter que algumas pessoas nascem com e outras não. Você ouve isso em todo lugar: "Eu sou de backend." "Não tenho o gene do design." "Só faz funcionar, a gente contrata alguém para deixar bonito."

Essa mentalidade cria um problema real. A maioria dos projetos pessoais, ferramentas internas e MVPs morre com uma aparência terrível — não porque a engenharia é ruim, mas porque a pessoa que os construiu não conseguiu preencher a lacuna entre "funciona" e "alguém realmente usaria isso." Eu mesmo já matei três projetos pessoais, não porque o código estava quebrado, mas porque não consegui fazer a landing page parecer confiável o suficiente para alguém levar a sério.

A lacuna de habilidade em design não é sobre talento. É sobre vocabulário. Designers pensam em termos de hierarquia visual, proporções de espaço em branco, contraste de cores e ritmo tipográfico. Engenheiros pensam em termos de fluxo de dados, arquitetura de componentes e gerenciamento de estado. Estamos resolvendo problemas diferentes com modelos mentais diferentes, e a lacuna de vocabulário significa que, mesmo quando eu sei como é um bom design (eu reconheço imediatamente), eu não consigo produzir porque não tenho a linguagem intermediária certa.

É exatamente isso que a front-end design skill dá ao Claude Code. É uma camada de tradução — um conjunto de princípios de design, padrões de componentes e frameworks de tomada de decisão visual escritos como instruções que o Claude Code ingere no seu contexto. Quando você pede para ele construir uma hero section, ele não apenas escreve HTML e CSS. Ele toma decisões de design: onde colocar peso visual, como criar contraste, que animação adiciona polimento sem ser distrativa, como guiar o olhar do título até o CTA.

Estou me adiantando. Deixa eu te mostrar a configuração real, porque leva cerca de dois minutos e o retorno é imediato.

Configurando a Front-End Design Skill (2 Minutos, Sem Necessidade de Experiência em Design)

O sistema de skills no Claude Code é uma das funcionalidades mais subestimadas dele. Skills são arquivos markdown que injetam conhecimento e instruções específicas de domínio no contexto do Claude Code. Pense nelas como dar ao seu assistente de IA um curso intensivo em uma disciplina específica antes de ele começar a trabalhar.

Aqui está o processo exato de configuração:

Passo 1: Encontre o diretório de configuração do Claude Code.

O caminho depende do seu sistema operacional:

macOS: ~/.claude/
Linux: ~/.claude/
Windows: %USERPROFILE%\.claude\

Passo 2: Crie a estrutura de pastas para skills.

mkdir -p ~/.claude/skills/designer

Passo 3: Baixe e coloque o arquivo da skill.

A front-end design skill é um arquivo markdown (geralmente chamado skill.md) que contém instruções detalhadas sobre princípios de design, padrões de componentes, teoria de cores, tipografia, estratégias de layout e diretrizes de animação. Coloque-o na pasta que você acabou de criar:

~/.claude/skills/designer/skill.md

Passo 4: Reinicie o Claude Code.

Feche e reabra seu terminal. O Claude Code vai detectar automaticamente a nova skill na inicialização.

Passo 5: Use a skill.

Quando você quiser resultados com qualidade de design, prefixe seu prompt com /frontend design. Isso diz ao Claude Code para ativar o contexto da skill de design antes de processar sua solicitação.

É isso. Dois minutos. Sem pacotes npm, sem dependências, sem arquivos de configuração. Apenas um arquivo markdown na pasta certa.

Dica profissional: Você pode dar uma olhada dentro do arquivo da skill para entender o que ele realmente está ensinando ao Claude Code. É inglês legível — princípios de design, padrões de componentes, boas práticas de CSS, diretrizes de animação. Ler o arquivo me ensinou mais sobre fundamentos de design do que a maioria dos posts de blog "design para desenvolvedores" que já encontrei. O arquivo da skill em si é educativo, mesmo antes da IA usá-lo.

Agora deixa eu te mostrar o que acontece quando você realmente usa isso.

Meu Primeiro Prompt — E Por Que o Resultado Me Fez Repensar Tudo

O desafio de 30 dias atribuiu um conceito de negócio específico para o primeiro desafio: um serviço de inspeção residencial com IA que usa visão computacional para analisar imagens de espaços de rastreamento, telhados e fundações, detectando defeitos e gerando automaticamente relatórios de inspeção padronizados.

Todo mundo recebe a mesma ideia de negócio. Mesmas restrições. O teste é o quão bem você consegue comunicar sua visão de design através de um prompt.

Minha primeira tentativa foi deliberadamente mínima. Eu queria ver o que a skill conseguia fazer com quase nenhuma orientação:

/frontend design Create a hero section for an AI home inspection
business that uses computer vision to detect structural defects
in crawl spaces, roofs, and foundations, then generates automated
inspection reports.

Trinta segundos depois, eu tinha um arquivo HTML completo com CSS embutido. Abri no navegador e — não estou exagerando — minha primeira reação foi "espera, isso ficou realmente bom."

Um layout de duas colunas. Tipografia sans-serif limpa com hierarquia visual adequada. Um título em destaque que comunicava a proposta de valor sem ser prolixo. Texto de apoio que explicava o serviço de forma concisa. Um botão CTA proeminente com bom contraste. Um fundo com gradiente sutil que parecia moderno sem ser modismo. No lado direito, um elemento de UI placeholder sugerindo a interface de inspeção, com uma animação CSS suave que atraía o olhar sem ser distrativa.

Foi perfeito? Não. A paleta de cores era um pouco genérica — azuis e brancos seguros que gritavam "template de startup de tecnologia." A animação era inteligente mas não totalmente adequada para uma marca de inspeção residencial. O texto era funcional mas faltava personalidade.

O que importa é: era um ponto de partida confiável. Não um wireframe. Não um rascunho. Uma hero section totalmente renderizada e responsiva que eu poderia mostrar para alguém e ter uma conversa produtiva sobre direção de design. Como desenvolvedor, eu nunca tinha conseguido produzir esse ponto de partida sozinho. Eu gastaria horas conseguindo algo medíocre, ou pularia o design completamente e iria direto para a funcionalidade.

O segundo prompt é onde as coisas ficaram interessantes.

Iteração É a Verdadeira Habilidade — Como Fui do Bom ao Genuinamente Impressionante

O poder desse fluxo de trabalho não está no primeiro resultado. Está na velocidade de iteração. Aqui está o prompt de acompanhamento que enviei:

Adjust the design: use a warm, earthy color palette (think terracotta,
sage green, warm grays) to feel more grounded and trustworthy for
homeowners. Replace the animation with a subtle parallax effect on the
hero image. Make the headline bolder and more direct — something that
addresses the homeowner's anxiety about hidden structural problems. Add
a secondary CTA for a free demo.

Doze segundos depois, uma hero section completamente redesenhada. Mesma estrutura, mas a vibe era totalmente diferente. Os tons terrosos faziam parecer confiável — como uma empresa que você realmente deixaria entrar na sua casa. O título agora dizia algo sobre encontrar problemas antes que eles encontrem seu bolso. O efeito parallax adicionou profundidade sem ser exagerado. Dois CTAs: "Faça Sua Inspeção Gratuita" (primário) e "Veja Como Funciona" (secundário, estilo com borda).

Essa versão era dramaticamente melhor. Não porque a IA era dramaticamente mais inteligente, mas porque eu conseguia articular o que queria através de uma linguagem de design específica. E esse é o currículo oculto de todo esse exercício — usar ferramentas de design com IA te ensina a pensar sobre design em termos concretos e comunicáveis.

Terceiro prompt — o passe de polimento:

The layout is great. Refine these details: add a trust bar below the
fold with logos for "As Featured In" placeholders. Increase whitespace
between the headline and body copy by about 20%. The secondary CTA
should have a hover animation that fills with the primary color. Add a
subtle noise texture to the background for warmth.

Seis segundos. Cada uma dessas quatro solicitações foi implementada com precisão. A textura de ruído adicionou uma qualidade tátil que levou o design de "limpo" para "artesanal." A barra de confiança criou credibilidade instantânea. A animação de hover no CTA secundário era suave e satisfatória.

Três prompts. Talvez cinco minutos no total, incluindo o tempo que passei pensando no que pedir. E o resultado era algo que eu genuinamente colocaria em um site ao vivo.

Aqui está um resumo do que aprendi sobre prompting eficaz de design durante o desafio:

O ponto ideal é o prompt três ou quatro. Seu primeiro prompt estabelece a estrutura. Seu segundo prompt acerta o clima e a personalidade. Seu terceiro prompt cuida dos detalhes que separam amador de profissional. A maioria das pessoas para no prompt um e se pergunta por que design com IA "não fica tão bom."

O Que 600 Pessoas Projetando a Mesma Coisa Me Ensinaram Sobre Prompts

O aspecto mais fascinante desse desafio não são os designs individuais — é a variação. Mesma IA, mesmo arquivo de skill, mesmo conceito de negócio, quase 200 designs enviados só para o primeiro desafio. Cada um parecia diferente.

Alguns foram escuros e dramáticos — hero sections quase cinematográficas com fotografia de alto contraste e tipografia em destaque. Outros foram mínimos e limpos — muito espaço em branco, cores discretas, deixando o texto fazer o trabalho. Alguns poucos foram para o modo de ilustração total — gráficos com cara de personalizados e acentos desenhados à mão que faziam o serviço de inspeção com IA parecer acessível em vez de frio.

A variação prova algo importante: a front-end design skill não impõe um estilo. Ela dá ao Claude Code letramento em design — a capacidade de tomar decisões visuais informadas — mas a direção vem inteiramente do humano. Seu prompt é o diretor criativo. A IA é o designer de produção executando sua visão.

Naveguei por dezenas de envios e notei padrões no que separava os designs mais fortes dos mais fracos:

Designs fortes descreviam uma sensação, não apenas características. "Faça parecer o site de um empreiteiro familiar de confiança, mas moderno" produz um resultado fundamentalmente diferente de "adicione um cabeçalho com nome da empresa e botão CTA."

Designs fortes especificavam o que não queriam. "Sem cara de foto de banco de imagens. Sem estética genérica de startup de tecnologia. Sem gradientes que parecem toda landing page de SaaS." Restrições afinam as decisões da IA.

Designs fortes iteravam. Os melhores envios compartilharam abertamente que usaram de 4 a 7 prompts para chegar ao design final. Ninguém produziu seu melhor trabalho na primeira tentativa. Isso não é uma limitação da IA — é assim que design funciona, ponto.

Designs fracos tratavam a IA como uma máquina de vendas. Um prompt, aceitar o resultado, pronto. Os resultados eram competentes mas sem destaque — tecnicamente corretos mas faltando o toque humano que faz o design parecer intencional.

Isso se aplica perfeitamente a como tenho visto engenheiros interagirem com ferramentas de IA para código, aliás. Os que obtêm resultados medíocres são os que enviam um único prompt e aceitam o que vier. Os que obtêm resultados excepcionais tratam a IA como uma colaboradora — eles solicitam, revisam, redirecionam, refinam. A ferramenta amplifica seu gosto e julgamento. Ela não os substitui.

Se você tem acompanhado meus posts sobre construir um segundo cérebro com o Claude Code, isso deve soar familiar. O mesmo princípio se aplica — resultados de qualidade exigem contexto de qualidade e refinamento iterativo, não um único prompt perfeito.

Além das Hero Sections — Por Que o Padrão de Skills Importa Mais Que o Design

É aqui que quero dar um passo atrás, porque o desafio de design é legal, mas o padrão por trás é o que realmente me empolga como engenheiro.

A front-end design skill é um arquivo markdown com instruções. Só isso. Um conjunto de princípios, padrões e diretrizes que o Claude Code lê e aplica. O mesmo mecanismo funciona para literalmente qualquer domínio.

Quer que o Claude Code escreva migrations de banco de dados melhores? Crie um arquivo de skill com as convenções de migration da sua equipe, padrões de nomenclatura, estratégias de rollback e armadilhas comuns. Quer que ele gere casos de teste melhores? Escreva uma skill que descreva sua filosofia de testes, requisitos de cobertura e padrões de assertion.

Comecei a criar skills para tudo que faço repetidamente:

• Skill de design de API: convenções REST, padrões de paginação, formatos de resposta de erro, estratégia de versionamento
• Skill de code review: o que procuro durante revisões, anti-patterns comuns na nossa base de código, itens de checklist de segurança
• Skill de documentação: estrutura de documentação da nossa equipe, diretrizes de tom, templates de exemplo

Cada uma é um arquivo markdown. Cada uma leva talvez 30 minutos para escrever inicialmente. E cada uma torna o Claude Code dramaticamente melhor nesse tipo específico de trabalho.

A skill de design é apenas o exemplo mais visualmente impactante. Quando o Claude Code produz uma hero section bonita, a melhoria é imediatamente óbvia. Quando ele produz uma migration de banco de dados melhor estruturada, a melhoria é igualmente real, mas menos fotogênica.

Dica profissional: Skills se compõem muito bem. Comecei a combinar minha front-end design skill com um arquivo de contexto específico do projeto. Quando digo "construa uma hero section para nosso produto", o Claude Code agora se baseia tanto em princípios gerais de design (da skill) quanto em conhecimento específico da marca (do arquivo de contexto) — nossa paleta de cores, nossas escolhas tipográficas, nossa linguagem de design. O resultado parece ter saído da nossa equipe de design, não de uma IA genérica.

Essa composabilidade é onde o verdadeiro poder está. Skills + contexto persistente + prompting iterativo = qualidade de resultado que é genuinamente difícil de distinguir de trabalho produzido por humanos.

Mas preciso ser honesto sobre as limitações, porque existem limitações reais.

O Que Isso Ainda Não Consegue Fazer — Limitações Honestas do Design Impulsionado por IA

Estaria te fazendo um desserviço se apresentasse isso como "IA substitui designers." Não substitui. Nem de longe. Aqui está o que descobri que ela genuinamente tem dificuldade:

Sistemas de design complexos com múltiplas páginas. A skill funciona lindamente para componentes e páginas individuais. Construir um sistema de design consistente e coeso em toda uma aplicação? Isso ainda requer pensamento humano de design. A IA pode produzir componentes que são individualmente excelentes, mas nem sempre parecem pertencer ao mesmo conjunto sem prompting cuidadoso.

Casos extremos de responsividade. O HTML/CSS gerado é responsivo no sentido básico — funciona em desktop e mobile. Mas os breakpoints intermediários complicados, os layouts de tablet em paisagem, os casos de "o que acontece quando esse título tem 3 palavras vs 12 palavras" — esses ainda precisam de atenção manual.

Nuances específicas de marca. A IA entende princípios de design. Ela não entende inerentemente a alma da sua marca. Pode gerar algo que parece profissional, mas fazê-lo parecer autenticamente de uma marca específica requer prompting muito detalhado ou (melhor ainda) um arquivo de contexto específico do projeto que descreva a personalidade da marca.

Fluxos de experiência do usuário. Uma hero section é uma tela. Um fluxo de onboarding, um funil de checkout, um formulário de múltiplas etapas — esses requerem entender psicologia do usuário, não apenas design visual. A skill ajuda na execução visual, mas o pensamento estratégico sobre o que projetar e por que ainda é território inteiramente humano.

Refinamento pixel-perfect. O resultado te leva 85-90% do caminho. Aqueles últimos 10-15% — o ajuste de kerning, o tweak de 2px no padding, o timing de micro-animação — isso ainda é mais rápido de fazer na mão em CSS do que descrever em um prompt.

Quero ser claro sobre meu posicionamento aqui: essa ferramenta torna engenheiros perigosos em design, não especialistas. Agora consigo produzir uma landing page confiável em 15 minutos. Não conseguiria produzir o que um designer sênior cria depois de uma semana de pesquisa, iteração e testes com usuários. Ferramentas diferentes para diferentes níveis de necessidade.

Para projetos pessoais, ferramentas internas, MVPs, hackathons e protótipos rápidos? Isso é mais que suficiente. Para aplicações de produção com requisitos reais de marca e complexidade de UX? Você ainda precisa de um designer — mas agora pode ter conversas muito mais produtivas com ele porque você entende o vocabulário.

De Exportação do Figma para Código ao Vivo — O Fluxo de Trabalho Completo

Um detalhe do desafio que merece sua própria seção: o pipeline Claude Code para Figma. Vários participantes mencionaram usar um plugin que exporta o HTML/CSS gerado pelo Claude Code diretamente para o Figma como componentes editáveis.

Testei isso e o fluxo de trabalho é genuinamente suave:

1. Gerar o design no Claude Code
2. Exportar para o Figma usando o plugin
3. Refinar no Figma (ajustar espaçamento, trocar fontes, adicionar imagens reais)
4. Compartilhar com stakeholders ou sua equipe de design para feedback
5. Iterar no Claude Code (para mudanças estruturais) ou no Figma (para refinamento visual)

Esse fluxo de trabalho preenche a lacuna entre "engenheiro brincando com IA" e "processo profissional de revisão de design." A exportação para o Figma significa que seus designs gerados por IA entram no mesmo fluxo de trabalho que sua equipe já usa. Sem ferramentas especiais, sem compartilhamento desajeitado de screenshots, sem "confia em mim, fica bom na minha máquina."

Para equipes onde engenheiros e designers colaboram de perto, isso cria uma dinâmica interessante. Engenheiros agora podem produzir propostas de design — rudimentares mas confiáveis — que designers podem refinar em vez de construir do zero. A conversa de design muda de "você pode projetar isso do nada?" para "aqui está meu ponto de partida, como você melhoraria?"

Mostrei minhas exportações do Figma para a designer do meu projeto atual. A reação dela: "A estrutura está sólida e as escolhas de cores são inteligentes. Deixa eu corrigir a escala tipográfica e apertar o espaçamento." Ela passou 20 minutos refinando o que teria levado 2 horas para construir do zero. Nós dois saímos ganhando.

O Que Mudou na Forma Como Eu Construo Coisas

Aqui está o impacto honesto depois de três semanas usando a skill de design regularmente:

Taxa de conclusão de projetos pessoais: Subiu dramaticamente. Tenho dois projetos que estavam 90% funcionais mas 0% projetados. Ambos agora têm landing pages das quais não tenho vergonha de compartilhar. Um já teve seus primeiros usuários reais — algo que não teria acontecido com minha abordagem anterior de "vou fazer o design depois", porque o "depois" nunca chegava.

Qualidade de ferramentas internas: Construí um painel administrativo para um projeto de cliente na semana passada. Normalmente, eu usaria um template de admin genérico e pronto. Em vez disso, passei 20 minutos com o Claude Code projetando componentes personalizados que combinavam com a marca do cliente. O cliente percebeu. Ele especificamente comentou como as ferramentas internas pareciam "polidas." Isso importa para retenção.

Conversas sobre design: Sou um colaborador melhor com designers agora. Não porque a IA me ensinou design, mas porque o processo de prompting iterativo me forçou a articular preferências de design em termos precisos. "Deixa mais acolhedor" se tornou "use um acento terracota contra cinzas quentes com espaçamento em branco aumentado." Essa precisão se traduz diretamente em briefings de design melhores, feedbacks melhores e menos frustração dos dois lados.

Velocidade para prototipar: Da ideia ao protótipo visual compartilhável caiu de "faço isso no fim de semana" (o que significava nunca) para cerca de 30 minutos. Essa velocidade muda o cálculo sobre prototipar uma ideia ou não.

A maior mudança é psicológica. Eu não vejo mais o design como um bloqueio. Costumava ser a coisa entre meu código pronto e um produto entregável. Agora é uma etapa de 30 minutos no processo, não uma dependência de semanas da disponibilidade de outra pessoa.

Sua Vez — O Desafio de 10 Minutos

Aqui está o que quero que você faça hoje. Não essa semana. Hoje.

Instale a front-end design skill. Dois minutos, os passos estão acima. Depois abra o Claude Code e digite isso:

/frontend design Create a hero section for [your side project or
current work project]. Modern, clean, [one adjective that describes
the vibe you want]. Include a headline, supporting copy, and a
primary CTA.

Preencha os colchetes. Envie. Abra o arquivo HTML gerado no seu navegador.

Aposto que você vai fazer o que eu fiz — ficar sentado por alguns segundos pensando "espera, eu realmente poderia colocar isso no ar." E aí você vai enviar um segundo prompt. E um terceiro. E antes que perceba, você vai ter uma landing page para aquele projeto que vem querendo lançar há seis meses.

O desafio de 30 dias ainda está rolando no designcourse.com se você quiser feedback da comunidade e a motivação de ver as abordagens de outras pessoas. Mas honestamente, o desafio é apenas o catalisador. O valor real é ter uma IA capaz de design no seu terminal, disponível toda vez que você precisar fazer algo parecer bom em vez de apenas fazê-lo funcionar.

Por anos eu disse a mim mesmo que não era designer. Acontece que eu só não tinha as ferramentas certas. Agora tenho — e a distância entre "funcional" e "bonito" nunca foi tão pequena.

O que você vai construir primeiro?

Vamos Trabalhar Juntos

Procurando construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.

• Fiverr (builds e integrações personalizadas): fiverr.com/s/EgxYmWD
• Portfólio: mejba.me
• Ramlit Limited (soluções empresariais): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (serviços de segurança): xcybersecurity.io