5 Formas de Criar Sites Bonitos Usando Claude Code

O vídeo introduz o tema das ferramentas de design com IA que estão evoluindo rapidamente no mercado. O apresentador explica que testou extensivamente diferentes ferramentas para identificar quais realmente cumprem suas promessas versus aquelas que são apenas ruído de marketing. As ferramentas apresentadas cobrem diversas áreas incluindo planejamento, geração de recursos, animação e conversão de design. O objetivo é compartilhar ferramentas que tiveram impacto real no processo de design, com opções gratuitas e pagas disponíveis.

Design OS é uma ferramenta de código aberto desenvolvida pela Builder Methods que transforma ideias confusas em projetos técnicos estruturados. A ferramenta imita o fluxo de trabalho de desenvolvimento de software, onde o usuário atua como stakeholder enquanto o Design OS cuida do planejamento do produto, sistema de design e especificações de requisitos. É compatível com todas as ferramentas de IA populares como Claude Code, Cursor e Copilot, e a instalação é simples via comando git clone. O processo envolve uma série de perguntas detalhadas para refinar o plano, fornecendo esboços e pedindo aprovação, documentando tudo de forma otimizada para modelos de IA. A exportação final inclui instruções de uso, modelos de dados, dados de amostra, tipos TypeScript, tokens CSS e todos os arquivos de design necessários.

VSCOM é apresentado como uma ferramenta poderosa para gerar visuais de produtos profissionais usando prompts, esboços e modelagem 3D. A ferramenta pode criar imagens visuais deslumbrantes, renderizações a partir de esboços e até fornecer animações, permitindo editar elementos individuais e baixar resultados em qualidade 4K. Embora seja uma ferramenta paga, oferece um nível gratuito generoso para começar. Como alternativa gratuita, o apresentador menciona o Mixed Board do Google, um projeto experimental que permite criar mood boards usando as capacidades do Nano Banana para gerar imagens. O Mixed Board permite modificar imagens via prompts, carregar imagens de amostra para gerar visuais correspondentes e até construir apresentações completas, tudo gratuitamente enquanto está em fase experimental.

Esta seção apresenta uma técnica sofisticada para analisar sites concorrentes antes de criar seu próprio design. O processo utiliza a extensão GoFullPage para capturar screenshots de página completa de qualquer website para referência. Essas capturas de tela são então fornecidas ao Claude junto com um prompt especializado projetado para extrair elementos de UI, instruindo-o a identificar todas as restrições, posicionamentos de objetos e detalhes de tema de UI. Após o Claude extrair de forma abrangente todos os detalhes de estilo de UI, essas diretrizes são fornecidas ao Claude Code na pasta do projeto contendo os recursos baixados. O resultado é que o Claude gera o website inteiro aplicando todos os estilos e diretrizes de design extraídas da análise da concorrência.

O vídeo enfatiza que movimento é fundamental para a retenção de usuários e apresenta soluções para adicionar animações aos designs. Magic Animator é descrito como um website poderoso que usa IA para animar desde logos até posts de mídias sociais e interfaces completas, criando microinterações que mantêm o interesse do usuário. Disponível como plugin do Figma, detecta automaticamente camadas na UI e gera quatro opções de animação, permitindo exportação como arquivo Lottie (formato JSON especializado). Como alternativa ao Magic Animator pago, é apresentado o Lottie Files, também disponível como plugin do Figma, que permite implementar animações e exportar em múltiplos formatos JSON Lottie. O Claude Code pode receber esses arquivos de animação e aplicá-los automaticamente à UI.

HTML to Design é apresentado como um plugin do Figma que converte qualquer website em HTML em um design Figma totalmente editável. Oferece planos gratuitos e pagos, com o plano gratuito permitindo até 10 importações a cada 30 dias. A funcionalidade mais interessante é a capacidade de usar a ferramenta como um MCP (Model Context Protocol), permitindo acessar capacidades de design do agente de IA diretamente dentro do Figma. Para isso, conecta-se a ferramentas de IA como Claude ou Cursor seguindo o guia de configuração MCP. Ao solicitar ao agente de IA usando palavras-chave como 'enviar para o Figma' ou 'enviar para HTML para design', a ferramenta gera um JSON contendo o design e o envia para o Figma após aprovação, permitindo colaboração em tempo real com a ferramenta de IA.

O vídeo conclui com uma apresentação da Automata, empresa do apresentador que implementa os fluxos de trabalho ensinados em vídeos para ajudar clientes a dar vida às suas ideias. A Automata se posiciona como copiloto técnico, aplicando os mesmos fluxos de trabalho demonstrados diretamente aos projetos dos clientes, transformando conceitos em soluções funcionais sem necessidade de contratar ou gerenciar equipe de desenvolvimento. O contato é fornecido como hello@automata.dev para interessados em acelerar suas ideias. O vídeo termina convidando os espectadores a apoiar o canal usando o botão Super Obrigado e agradecendo pela audiência.