Tres semanas atras, um amigo me pediu para avaliar a nova landing page dele. Ele tinha passado um fim de semana inteiro construindo com o Claude Code. E vou ser direto — parecia com qualquer outro site gerado por IA que eu ja tinha visto. A mesma secao hero com gradiente. O mesmo layout de cards padronizado. A mesma energia de "feito por IA" que faz os visitantes sairem antes mesmo de rolar a pagina.
Eu nao disse isso, claro. Eu disse "e um bom comeco" — porque eu nao sou um monstro.
Mas eis o que eu estava pensando: esse cara usou uma das ferramentas de codificacao com IA mais poderosas do planeta e ainda assim acabou com algo que grita "template." Nao porque o Claude Code nao consegue fazer melhor. Mas porque ninguem ensinou a ele os cinco truques de configuracao que separam uma construcao generica de IA de algo pelo qual um cliente realmente pagaria.
Eu sei disso porque cometi exatamente os mesmos erros quando comecei. Meu primeiro site com Claude Code? Vergonhoso. O vigesimo? Um cliente pagou $3.000 por ele. A diferenca nao foi habilidade — foi fluxo de trabalho. Cinco truques especificos de fluxo de trabalho que mudaram tudo sobre como o Claude Code gera codigo front-end.
E a parte mais louca? Nenhum desses truques exige que voce seja um bom designer. Voce nao precisa conhecer CSS grid de cabo a rabo ou ter opinioes sobre combinacoes de fontes. Voce so precisa configurar seu ambiente da maneira certa, e o Claude Code faz o trabalho pesado.
Vou te guiar por cada um deles — os mesmos truques que uso em absolutamente todos os projetos de clientes agora. Mas primeiro, voce precisa entender por que seu fluxo de trabalho atual com o Claude Code provavelmente esta trabalhando contra voce.
Por Que a Maioria dos Sites Feitos com Claude Code Parecem Iguais
O problema nao e o Claude Code. O problema e contexto — ou melhor, a completa falta dele.
Quando voce abre o VS Code, ativa a extensao do Claude Code e digita "construa uma landing page para meu produto SaaS," voce esta essencialmente pedindo a uma IA incrivelmente poderosa para trabalhar vendada. Ela nao conhece as cores da sua marca. Ela nao conhece suas preferencias de design. Ela nao sabe se voce quer algo minimalista e limpo ou ousado e animado. Entao ela recorre ao seguro. E seguro, em termos de IA, significa generico.
Ja auditei dezenas de sites gerados pelo Claude Code ate agora, e todos compartilham o mesmo DNA. Fundos com gradientes azul-roxo. Fontes Inter ou Poppins. Secoes de funcionalidades em tres colunas com cards de icones. Um carrossel de depoimentos que ninguem pediu. Parece familiar?
A questao e que o Claude Code e capaz de gerar sites que parecem que um designer humano passou semanas neles. Ja vi ele produzir interfaces que rivalizam com o que sai das melhores agencias de design. A diferenca entre "aparencia de IA" e "design profissional" nao esta na capacidade da ferramenta — esta no que voce fornece a ela antes de comecar a fazer prompts.
E exatamente isso que esses cinco truques abordam. Cada um adiciona uma camada de contexto que transforma o Claude Code de um gerador generico de sites em algo que parece ter um desenvolvedor front-end senior e um designer de UI trabalhando juntos no seu projeto.
Eis o que a maioria das pessoas nao percebe: a ordem importa. O truque zero e a base sobre a qual todo o resto se constroi. Pule-o, e os outros quatro nao vao ter nem de longe o mesmo impacto. Entao vamos comecar por ai.
Truque Zero: O Arquivo CLAUDE.md Que Muda Tudo
Todo desenvolvedor com quem converso que esta obtendo resultados incriveis com o Claude Code tem uma coisa em comum — eles sao obcecados com o arquivo CLAUDE.md.
Se voce nao esta familiarizado, o CLAUDE.md e um arquivo markdown que fica na raiz do seu projeto. O Claude Code le ele automaticamente antes de cada interacao. Pense nele como um prompt de sistema que persiste durante todo o seu projeto. E a maioria das pessoas ou nao usa nenhum, ou escreve algo tao vago que mal faz diferenca.
Aqui esta como o meu fica para um projeto tipico de website. Nao o arquivo inteiro — isso tomaria metade deste artigo — mas a estrutura que faz a diferenca:
# Project: [Client Name] Website
## Tech Stack
- Framework: Next.js 14 with App Router
- Styling: Tailwind CSS v3.4
- Animations: Framer Motion
- Deployment: Vercel
## Design Rules
- Primary color: #1A1A2E
- Accent color: #E94560
- Font stack: "Space Grotesk" for headings, "Inter" for body
- Border radius: 12px on cards, 8px on buttons
- NO gradients unless specifically requested
- Minimum padding: 24px on all containers
- Mobile-first — design for 375px width first
## Code Standards
- Use TypeScript strict mode
- Components go in /components with PascalCase names
- Every component must be responsive without horizontal scroll
- Prefer CSS Grid over Flexbox for page layouts
- All images use next/image with proper alt text
## What NOT To Do
- Never use placeholder images from unsplash
- Never add a hamburger menu — use a different mobile nav pattern
- Never use Lorem Ipsum — generate realistic copy
- Never create more than 3 font sizes per page
Percebe a diferenca? Eu nao estou apenas dizendo ao Claude Code o que construir. Estou dizendo a ele como pensar sobre o projeto. A secao "What NOT To Do" sozinha ja me economizou horas de revisao. Antes de adicionar essa secao, eu recebia menus hamburger em todo layout mobile, imagens placeholder por todo lado, e Lorem Ipsum espalhado pelos componentes como confete.
O arquivo CLAUDE.md e a constituicao do seu projeto. O Claude Code le ele antes de cada resposta, o que significa que ele aplica essas regras tanto quando voce esta construindo a secao hero as 9 da manha quanto quando esta debugando um problema responsivo a meia-noite. Contexto consistente resulta em saida consistente.
Dica profissional: Mantenha seu CLAUDE.md com menos de 200 linhas. Ja vi pessoas escreverem prompts de sistema de 500 linhas e se perguntarem por que o Claude Code fica confuso. Seja especifico, mas conciso. Se uma regra precisa de mais de duas frases para ser explicada, provavelmente e complexa demais — divida-a em varias regras mais simples.
Uma coisa sobre a qual quero ser honesto, porem — o arquivo CLAUDE.md sozinho nao vai fazer seus sites parecerem profissionais. Ele define os limites, mas a magica acontece quando voce combina com o proximo truque. E aqui que as coisas comecam a ficar genuinamente impressionantes.
Truque Um: A Skill de Design Front-End Que Transforma a Qualidade da Saida
Eis algo que mudou todo o meu fluxo de trabalho: o Claude Code suporta skills personalizadas. E existe uma skill especifica — a skill de design front-end — que leva a qualidade da saida de "template inicial decente" para "espera, uma IA fez isso?"
Descobri isso cerca de tres meses atras. Eu estava ficando frustrado com a geracao de codigo padrao. Funcional? Sim. Bonito? Raramente. Os layouts estavam corretos, mas sem vida. Sem animacao. Sem personalidade. Sem hierarquia visual que realmente guiasse o olhar.
Entao instalei a skill de design front-end, e lembro de ficar olhando para a primeira saida pensando "ok, isso e diferente."
A skill de design front-end funciona injetando inteligencia de design no processo de geracao do Claude Code. Em vez de apenas escrever HTML, CSS e JavaScript que correspondem ao seu prompt, ela aplica principios como hierarquia visual, micro-interacoes, ritmo responsivo e padroes de design modernos. O codigo que ela produz inclui animacoes sutis, espacamentos pensados e o tipo de polimento que normalmente leva varias iteracoes de um designer humano para alcancar.
Instala-la e muito simples. Dentro do Claude Code, voce executa um unico comando para instalar a skill globalmente, e a partir desse ponto, ela esta ativa em todos os projetos. Nenhuma configuracao necessaria alem do que ja esta no seu arquivo CLAUDE.md.
Deixa eu te dar um exemplo concreto. Antes da skill de design front-end, quando eu pedia ao Claude Code para construir um app de player de musica, eu recebia um player funcional com botoes de play/pause, uma lista de faixas e estilizacao basica. Depois de instalar a skill? Recebi um player com visualizacoes de forma de onda animadas, efeitos de transicao suaves entre faixas, um design glass-morphism com backdrop blur, e um layout responsivo que se adaptava lindamente do mobile ao desktop. Mesmo prompt. Saida dramaticamente diferente.
A skill e especialmente poderosa para elementos de UI dinamicos. Texto marquee com rolagem suave. Estados de hover que parecem tateis. Animacoes de carregamento que nao parecem um improviso. Esses sao os detalhes que separam um site no qual os visitantes confiam de um do qual eles saem.
Eis o que a maioria dos tutoriais nao te conta — a skill de design front-end funciona melhor quando seu CLAUDE.md esta solido. Eles sao multiplicativos, nao aditivos. Um otimo CLAUDE.md com a skill de design produz uma saida provavelmente 5x melhor do que qualquer um dos dois sozinho. Um CLAUDE.md vago com a skill de design? Talvez 2x melhor. Ainda uma melhoria, mas voce esta deixando qualidade na mesa.
Mais uma coisa antes de seguirmos. Testei essa skill em cerca de quarenta tipos diferentes de projetos — landing pages, dashboards, layouts de e-commerce, sites portfolio, paginas de marketing SaaS. A melhoria foi consistente em todos, mas foi mais dramatica em landing pages e sites portfolio. Layouts de dashboard tambem melhoraram, mas os ganhos foram mais sutis ja que dashboards priorizam funcao sobre estetica.
Dito isso, mesmo com um otimo CLAUDE.md e a skill de design ativada, eu continuava encontrando um problema frustrante. O Claude Code gerava codigo bonito, mas nao conseguia ver o que construiu. Estava trabalhando no escuro, tomando decisoes baseadas na estrutura do codigo em vez da saida visual. O que nos leva ao truque que resolveu isso completamente.
Truque Dois: O Loop de Screenshots — Ensinando o Claude Code a Ver
Esse e o truque que me fez sentir como se estivesse trapaceando.
O loop de screenshots usa o Puppeteer — uma ferramenta de automacao de navegador headless — para tirar capturas de tela reais do seu site durante o desenvolvimento. O Claude Code entao analisa essas capturas para avaliar seu proprio trabalho e fazer correcoes. E como dar a IA um espelho.
Antes do loop de screenshots, meu fluxo de trabalho era assim: o Claude Code gera uma secao. Eu visualizo no navegador. Noto algo errado — talvez o espacamento esta errado, ou um botao parece estranho no mobile. Descrevo o problema em texto. O Claude Code tenta corrigir com base na minha descricao. As vezes acerta. As vezes nao. Repita ate ficar frustrado.
Com o loop de screenshots, o fluxo de trabalho se torna: o Claude Code gera uma secao. O Claude Code tira uma captura de tela. O Claude Code analisa a captura. O Claude Code corrige problemas que identifica. Tudo sem eu dizer uma palavra.
Configurar isso e simples. Voce configura o Puppeteer nas configuracoes do seu projeto e adiciona instrucoes no seu CLAUDE.md dizendo ao Claude Code para tirar capturas de tela em checkpoints especificos durante a construcao. Normalmente configuro o meu para capturar depois de cada secao principal — hero, funcionalidades, sobre, depoimentos, rodape — e depois fazer uma captura de pagina inteira no final.
Aqui esta a parte que me impressionou demais da primeira vez que vi funcionar. Pedi ao Claude Code para construir uma secao hero com um layout especifico — titulo grande a esquerda, captura de tela do produto a direita, fundo animado sutil. A primeira geracao estava talvez 70% la. O titulo estava certo, mas a imagem do produto estava sobrepondo o texto em larguras de tablet, e o fundo animado estava muito carregado.
Sem o loop de screenshots, eu teria gasto dez minutos descrevendo esses problemas em texto. Com o loop de screenshots, o Claude Code tirou uma captura, identificou os tres problemas sozinho e corrigiu tudo em uma passada. A versao corrigida estava essencialmente pronta para producao.
O loop de screenshots e especialmente poderoso quando combinado com o proximo truque — usar sites de referencia — porque ele pode comparar sua saida com um design alvo. Mas mesmo sozinho, a melhoria de qualidade e substancial.
Uma ressalva importante. O loop de screenshots adiciona tempo a cada ciclo de geracao. Em vez de receber codigo instantaneamente, cada secao principal leva 15-30 segundos extras para o ciclo de captura-analise-correcao. Para mim, essa troca e obvia — prefiro esperar 30 segundos por codigo bom do que gastar 10 minutos descrevendo correcoes manualmente. Mas se voce esta construindo algo rapido e sem frescura onde o polimento visual nao importa, pode pular essa etapa.
Tambem existe um problema com componentes animados. Se sua secao tem animacoes CSS complexas ou fundos em video, a captura de tela captura um unico frame, que pode nao representar bem o componente. Aprendi a desativar o loop de screenshots para secoes muito animadas e contar com revisao manual para essas. Mais sobre isso quando chegarmos ao Truque Quatro.
Certo. Voce tem sua base CLAUDE.md, a skill de design para melhor geracao de codigo e o loop de screenshots para autocorrecao visual. Nesse ponto, a saida do seu Claude Code ja esta muito a frente de onde estava. Mas e se voce pudesse mostrar ao Claude Code exatamente o que quer? Nao descrever — mostrar?
Truque Tres: Usando Sites Reais Como Seu Blueprint de Design
Esse truque e quase injusto. E digo isso como alguem que usa em literalmente todo projeto de cliente.
A ideia e simples: encontre um site que voce ama, capture uma captura de tela da pagina inteira e seus estilos CSS, e forneca ambos ao Claude Code como material de referencia. O Claude Code entao constroi seu site para combinar com aquela linguagem visual — mesma filosofia de espacamento, mesmas relacoes de cores, mesmos padroes de componentes — mas com seu conteudo e sua marca.
Quero ser claro sobre algo antes de explicar o processo. Nao estou falando sobre roubar o design de alguem. Estou falando sobre usar sites existentes como inspiracao — a mesma coisa que todo designer humano faz desde o inicio da profissao. Voce esta extraindo o sistema de design (cores, espacamento, proporcoes de tipografia, padroes de layout) e aplicando a conteudo completamente original.
Aqui esta meu fluxo de trabalho para isso. Digamos que um cliente quer uma landing page e me aponta o site de um concorrente que ele admira:
Passo 1: Tiro uma captura de tela da pagina inteira do site de referencia. A maioria dos navegadores permite fazer isso com ferramentas de desenvolvimento — no Chrome, abra o DevTools, pressione Cmd+Shift+P, digite "screenshot" e selecione "Capture full size screenshot."
Passo 2: Pego o CSS computado das secoes principais. Nao estou copiando a folha de estilos literalmente. Estou anotando os tokens de design — tamanhos de fonte, alturas de linha, escala de espacamento, valores de border radius, paleta de cores.
Passo 3: Coloco tanto a captura de tela quanto os tokens de design na pasta de referencia do meu projeto (normalmente chamo de brand_assets/inspiration/).
Passo 4: Faco um prompt no Claude Code algo como: "Construa a secao hero para nosso site. Combine o estilo visual e a filosofia de espacamento da captura de referencia em brand_assets/inspiration/reference-hero.png. Use as cores da nossa marca do CLAUDE.md em vez das cores deles."
Passo 5: O Claude Code gera a secao, tira uma captura de tela (lembre-se, temos o loop de screenshots rodando), compara com a referencia e itera ate ficar proximo.
Os resultados? Honestamente chocantes. No mes passado, recriei uma landing page inspirada no site portfolio de um estudio de design renomado. Levou ao Claude Code cerca de 20 minutos de tempo de geracao. A saida nao era um clone pixel-perfect — era algo que parecia ter sido feito pelo mesmo designer, mas para uma marca completamente diferente. O espacamento estava certo. O ritmo visual estava certo. As relacoes entre componentes estavam certas.
Entao troquei pelo logo do meu cliente, cores da marca, textos e imagens do produto. Vinte minutos de geracao de IA mais trinta minutos do meu trabalho de branding, e o cliente achou que eu tinha passado uma semana nisso.
Quero te dar uma avaliacao honesta de onde esse truque tem dificuldades. Componentes interativos complexos — pense em carrosseis animados com easing personalizado, ou secoes com parallax acionadas por scroll — nao traduzem bem a partir de uma captura de tela estatica. O Claude Code consegue combinar layout e estilizacao estaticos quase perfeitamente, mas o comportamento de animacao requer prompts separados. Lido com esses como tarefas independentes depois que o layout principal esta construido.
Alem disso, quanto mais secoes voce tenta referenciar de uma vez, menos preciso cada uma fica. Descobri que o ponto ideal e referenciar uma secao de cada vez. Construa o hero a partir de uma referencia de hero. Construa a secao de funcionalidades a partir de uma referencia de funcionalidades. Elas nem precisam vir do mesmo site. Algumas das minhas melhores paginas de clientes usam inspiracao de espacamento de um site, relacoes de tipografia de outro e padroes de componentes de um terceiro.
Essa abordagem de mistura e combinacao me leva ao ultimo truque — aquele que adiciona a camada final de singularidade que faz um site do Claude Code parecer verdadeiramente personalizado.
Truque Quatro: Integracao de Componentes Individuais de Bibliotecas de Design
Eis o problema com o Truque Tres sozinho: se voce clona a linguagem de design de um site inteiro, seu resultado — embora polido — ainda pode parecer derivativo. E profissional, mas e profissionalmente de outra pessoa.
O Truque Quatro resolve isso permitindo que voce selecione componentes de UI individuais de bibliotecas de design curadas e os integre ao seu projeto. Estou falando de botoes especificos, efeitos de fundo, estados de hover em cards, padroes de navegacao e elementos interativos que adicionam personalidade sem exigir que voce projete do zero.
Meu recurso preferido para isso e o 21st.dev. E uma biblioteca de componentes de UI modernos e prontos para producao que vao do simples ao espetacular. Botoes glass-morphism com efeitos de refracao. Fundos animados baseados em shader. Layouts de cards interativos com fisica de mola. O tipo de componente que faz os visitantes pensarem "ah, isso e legal" — aquele sinal de qualidade visceral e sem palavras que constroi confianca.
O fluxo de trabalho e direto:
Passo 1: Navegue pelo 21st.dev (ou uma biblioteca de componentes similar) e encontre um componente que voce quer — digamos, um fundo de gradiente animado para sua secao hero.
Passo 2: Copie o codigo do componente ou a URL de referencia.
Passo 3: Faca um prompt no Claude Code: "Substitua o fundo da secao hero por este componente de gradiente animado do 21st.dev. Adapte-o para usar as cores da nossa marca e certifique-se de que nao afete a legibilidade do texto."
Passo 4: Revise a saida manualmente (mais sobre o motivo em um segundo).
E aqui que o Truque Quatro requer uma abordagem diferente dos outros. Mencionei anteriormente que o loop de screenshots tem um problema com componentes animados — e e aqui que isso importa mais.
Quando voce integra um componente animado, o loop de screenshots captura um unico frame. Se esse frame parecer estranho (talvez o gradiente esta no meio de uma transicao e o contraste esta temporariamente baixo), o Claude Code pode "corrigir" algo que nao esta quebrado. Isso cria um loop de correcao infinito onde ele continua ajustando a animacao e continua insatisfeito com a captura de tela.
Aprendi isso da maneira dificil. Integrei uma linda animacao de particulas como fundo, habilitei o loop de screenshots, e o Claude Code passou vinte minutos tentando "corrigir" as particulas porque cada captura parecia diferente. A solucao? Desative o loop de screenshots para integracao de componentes animados. Revise manualmente.
Eis a sacada estrategica que a maioria das pessoas nao percebe: voce nao precisa de muitos componentes personalizados para fazer um site parecer unico. Tres ou quatro elementos de destaque — um fundo de hero distinto, um estilo de botao personalizado, um efeito de hover interessante nos cards e uma transicao de pagina unica — sao suficientes para mover um site de "template profissional" para "design personalizado."
Normalmente integro componentes individuais depois que o layout principal esta construido com os Truques 2 e 3. O layout fornece a base estrutural. Os componentes individuais fornecem a personalidade. E como construir uma casa com arquitetura solida (layout) e depois escolher acabamentos e detalhes distintos (componentes) que fazem parecer um lar em vez de um apartamento modelo.
Dica profissional: Ao integrar componentes, sempre diga ao Claude Code sobre quaisquer preocupacoes de acessibilidade. Alguns fundos animados reduzem o contraste do texto. Alguns efeitos de hover nao funcionam em dispositivos touch. Algumas animacoes de particulas derrubam o desempenho em celulares mais antigos. Um rapido "garanta que este componente mantenha as proporcoes de contraste WCAG 2.1 AA e degrade graciosamente no mobile" no seu prompt te salva de publicar algo que fica otimo no seu MacBook mas quebra para metade do seu publico.
Se voce chegou ate aqui, agora tem o sistema completo de cinco truques. Mas conhecer os truques nao e suficiente — voce precisa fazer deploy do que construiu. E o fluxo de trabalho de deploy que eu uso une tudo isso.
O Pipeline de Deploy Que Te Mantem Seguro
Ja vi desenvolvedores demais empurrarem codigo gerado por IA direto para producao sem revisao. Isso e receita para desastre. Nao porque o Claude Code escreve codigo ruim — normalmente nao escreve — mas porque voce precisa de um checkpoint humano entre "a IA gerou isso" e "o mundo pode ver isso."
Meu fluxo de trabalho de deploy tem tres estagios: desenvolvimento local, controle de versao no GitHub e hospedagem no Vercel. Cada estagio serve a um proposito especifico.
Desenvolvimento local e onde toda a magia do Claude Code acontece. Voce esta rodando seu site em localhost, iterando com o loop de screenshots, integrando componentes e refinando ate ficar satisfeito. Nada sai da sua maquina ate voce decidir que esta pronto.
GitHub e sua rede de seguranca. Quando uma secao ou pagina esta completa, faco commit em um repositorio Git. O Claude Code pode lidar com os comandos git para voce — git add, git commit, git push — mas eu sempre reviso o diff antes de fazer push. Isso me da um historico de versoes para o qual posso voltar se algo quebrar, e garante que eu nunca estou a mais de um git revert de distancia de um estado funcionando.
Vercel cuida do deploy. Conecto o repositorio do GitHub ao Vercel, e cada push para a branch main aciona um deploy automatico. O site ao vivo atualiza em cerca de 60 segundos apos um push. O Vercel tambem fornece deploys de preview para branches, o que significa que posso fazer push de mudancas experimentais para uma branch, visualiza-las em uma URL real e so fazer merge para main quando estiver confiante.
Aqui esta o fluxo de trabalho na pratica:
- Construir e refinar localmente com o Claude Code
- Visualizar no navegador, fazer ajustes finais manuais
- Fazer commit em uma feature branch no GitHub
- Revisar o deploy de preview do Vercel
- Fazer merge para main quando satisfeito
- Site ao vivo atualiza automaticamente
Esse fluxo de trabalho ja me salvou varias vezes. Uma vez, o Claude Code reestruturou um diretorio de componentes durante uma passada de refatoracao e quebrou varios caminhos de importacao. Como eu nao tinha feito push para main ainda, o site ao vivo nao foi afetado. Peguei o problema no deploy de preview, corrigi os imports localmente e fiz push da versao corrigida.
O principio chave: seu site ao vivo nunca deve ser um experimento. Teste localmente, faca commit em uma branch, visualize o deploy e depois va ao vivo. Essa disciplina importa ainda mais quando a IA esta gerando seu codigo, porque a IA pode cometer erros que parecem confiantes.
Uma nota sobre permissoes: O Claude Code vai pedir permissao para executar varios comandos do sistema — operacoes de arquivo, comandos git, instalacoes npm. Existe um modo de bypass que aprova tudo automaticamente, e vou ser honesto, eu uso as vezes quando estou em fluxo profundo e nao quero clicar "aprovar" cinquenta vezes. Mas nao recomendo isso para iniciantes. Ate voce ter uma boa nocao do que o Claude Code normalmente faz durante um ciclo de construcao, mantenha os prompts de permissao ativos. Revise o que ele esta fazendo. Aprenda os padroes. Depois decida quanta autonomia voce se sente confortavel em conceder.
Assets de Marca: O Ingrediente Secreto Que Ninguem Comenta
Quero adicionar algo que tecnicamente nao e um dos cinco truques, mas amplifica cada um deles. E o motivo pelo qual meus sites feitos com Claude Code parecem ter marca propria em vez de parecerem templates, e leva cerca de dez minutos para configurar.
Crie uma pasta brand_assets na raiz do seu projeto. Dentro dela, coloque:
- Seu logo (formato SVG de preferencia, PNG como backup)
- Um documento de diretrizes de marca de uma pagina (pode ser um simples arquivo markdown)
- Quaisquer imagens, icones ou assets visuais especificos que o site precisa
- Codigos de cores hex, nomes de fontes e quaisquer tokens de design
Depois referencie essa pasta no seu CLAUDE.md:
## Brand Assets
All brand assets are in /brand_assets/
- Logo: /brand_assets/logo.svg
- Guidelines: /brand_assets/brand-guide.md
- Use these assets consistently across all pages
O que acontece quando voce faz isso? O Claude Code le seu guia de marca. Ele usa seu logo real em vez de um placeholder. Ele aplica suas cores exatas sem voce especifica-las em cada prompt. O resultado parece intencional — como uma marca que investiu em sua identidade visual.
Eu tambem marco assets especificos nos meus prompts. Em vez de "adicione um logo na navbar," escrevo "adicione o logo de /brand_assets/logo.svg na navbar, com 40px de altura, com 16px de padding a esquerda." Referencias explicitas eliminam ambiguidade, e ambiguidade e o inimigo de uma boa saida de IA.
Esse pequeno passo de configuracao se acumula ao longo de todo o projeto. Cada secao que o Claude Code gera usa as cores certas, o logo certo, a linguagem visual certa. Sem isso, voce estaria corrigindo inconsistencias de marca em cada prompt.
O Que Eu Errei (E O Que Faria Diferente)
Prometi opinioes honestas, entao aqui esta minha avaliacao honesta desse fluxo de trabalho depois de usa-lo em cerca de quinze projetos de clientes.
O que eu subestimei: O impacto do arquivo CLAUDE.md. No inicio, achei que era um "bom ter." Agora gasto mais tempo no meu CLAUDE.md do que em qualquer prompt individual. Um prompt de sistema bem elaborado faz 80% do trabalho. Eu estava errado em trata-lo como algo secundario, e se voce tirar uma coisa deste artigo, que seja isso: invista no seu CLAUDE.md.
O que eu superestimei: A confiabilidade do loop de screenshots com animacoes complexas. Mencionei o problema do loop de correcao infinito antes, mas levei tres projetos para descobrir o padrao. Se algo e animado, pule o loop de screenshots para aquele componente. Revise manualmente. Poupe-se da depuracao.
O que me surpreendeu: O quao rapido esse fluxo de trabalho fica uma vez que voce tem um template de CLAUDE.md para diferentes tipos de projeto. Meu segundo projeto levou metade do tempo do primeiro. O quinto levou um quarto. Pelo decimo projeto, eu conseguia ir de diretorio vazio a landing page deployada em menos de duas horas. Nao porque eu estava cortando caminhos, mas porque o sistema lida com as partes tediosas.
A limitacao honesta: Esse fluxo de trabalho produz excelentes landing pages, sites de marketing e sites portfolio. Para aplicacoes web complexas com gerenciamento de estado intrincado, dados em tempo real e fluxos de usuario com varias etapas, voce ainda precisa de engenharia manual significativa. O Claude Code e um assistente incrivelmente poderoso para desenvolvimento de aplicacoes, mas os cinco truques que descrevi sao especificamente ajustados para qualidade de design front-end. Arquitetura de aplicacoes e um jogo diferente.
Minha previsao para onde isso esta indo: Dentro de seis meses, o loop de screenshots estara integrado ao Claude Code por padrao. A ideia de uma ferramenta de codificacao com IA que nao consegue ver sua propria saida vai parecer tao arcaica quanto escrever codigo sem syntax highlighting. Loops de feedback visual sao a proxima evolucao obvia, e uma vez que toda ferramenta de codificacao com IA os tenha, a vantagem competitiva vai mudar inteiramente para engenharia de prompts e qualidade do CLAUDE.md.
Os Numeros: Como Isso Realmente Se Parece na Pratica
Deixa eu compartilhar algumas metricas reais dos meus proprios projetos.
Antes de adotar esse fluxo de trabalho de cinco truques, uma landing page tipica de cliente me levava de 8 a 12 horas para construir com o Claude Code, incluindo todos os prompts de revisao de ida e volta para corrigir problemas de design. A saida era funcional, mas precisava de ajustes manuais significativos de CSS — normalmente mais 2-3 horas.
Depois de adotar o fluxo de trabalho: 2-3 horas no total. E a qualidade da saida e maior. Menos revisoes, menos overrides de CSS, menos momentos de "isso nao parece certo."
O feedback dos clientes mudou tambem. Antes, eu ouvia "ficou bom, mas voce pode ajustar o espacamento aqui?" e "as fontes nao parecem certas" e "voce pode fazer parecer mais premium?" Agora eu ouco "uau, isso e exatamente o que eu queria" e "como voce construiu isso tao rapido?"
A economia de tempo por si so justifica o investimento de configuracao. Meu template de CLAUDE.md levou cerca de duas horas para desenvolver — e eu reutilizei (com modificacoes) em todos os projetos desde entao. A instalacao da skill de design front-end levou cinco minutos. Aprender o fluxo de trabalho do loop de screenshots levou talvez uma hora de experimentacao. A integracao de componentes individuais varia, mas normalmente gasto de 20 a 30 minutos por projeto escolhendo e integrando 3-4 componentes de destaque.
Investimento total de configuracao: talvez 4-5 horas. Tempo economizado por projeto: 6-8 horas. A matematica fala por si so a partir do segundo projeto.
A Primeira Coisa Que Eu Construiria
Se voce esta lendo isso e se sentindo um pouco sobrecarregado — cinco truques, pipelines de deploy, pastas de assets de marca, configuracoes de screenshots — eu entendo. Eis o que eu faria se estivesse comecando do zero hoje.
Abra o VS Code. Instale a extensao do Claude Code. Crie uma nova pasta de projeto. Escreva um arquivo CLAUDE.md. Apenas o CLAUDE.md. Gaste 30 minutos tornando-o especifico e opinativo. Defina seu tech stack, suas regras de design, sua lista de "nao faca isso."
Entao construa uma pagina. Uma landing page simples para um produto ficticio. Veja o quanto melhor a saida fica comparada a usar prompts no Claude Code sem um arquivo CLAUDE.md. So isso ja vai te convencer.
Depois disso, adicione a skill de design front-end. Reconstrua a mesma pagina. Compare.
Entao adicione o loop de screenshots. Reconstrua novamente. Compare.
Cada camada se acumula. Voce vai sentir a diferenca em cada etapa.
O objetivo nao e usar todos os cinco truques no primeiro dia. O objetivo e entender o que cada um contribui para que voce possa aplica-los estrategicamente com base no projeto. Um prototipo rapido para um hackathon? O CLAUDE.md e a skill de design sao suficientes. Um projeto de cliente que precisa impressionar? Traga os cinco.
Eis a pergunta que te deixo: qual e o proximo site que voce precisa construir, e qual desses cinco truques faria a maior diferenca para esse projeto especifico? Comece por ai. Comece com um truque aplicado a um projeto real. O efeito composto vai te puxar para o resto.
Vamos Trabalhar Juntos
Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnologica? Adoraria ajudar.
- Fiverr (builds e integracoes personalizadas): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (solucoes empresariais): ramlit.com
- ColorPark (design e branding): colorpark.io
- xCyberSecurity (servicos de seguranca): xcybersecurity.io
