"Análise do Claude Design: O fluxo de trabalho web com IA que realmente publiquei"

"## Análise do Claude Design: O fluxo de trabalho web com IA que realmente publiquei\n\nO primeiro prompt que enviei ao Claude Design foi uma mentira. Disse que era iniciante. Não sou. Venho desenhando pixels e manipulando vetores desde meados dos anos 2000 — mais de quinze anos de trabalho para clientes, sistemas de identidade visual, landing pages que precisavam converter ou eu não pagava as contas naquele mês. Mas eu queria saber como essa ferramenta realmente se comportava para alguém chegando do zero.\n\nEntão abri o Claude, cliquei na nova aba Design e digitei uma única frase: "Design a landing page for a cyberpunk open-world game called City Punks."\n\nSeis minutos depois, eu estava olhando para três variações de wireframe e uma UI de alta fidelidade funcional. Não um arquivo Figma. Não um PNG estático. Uma página HTML viva, respirável, inspecionável — com efeitos de glitch no título do hero, navegação funcionando e uma paleta de cores que eu teria cobrado três horas de um cliente para construir.\n\nE minha primeira reação não foi "o Figma morreu." Foi: "Ah, isso cobre talvez 80% do que faço. Os outros 20% são o que ninguém está discutindo."\n\nEste artigo trata exatamente desses 20%. É também o fluxo de trabalho completo que usei para publicar um site de jogo cyberpunk de aparência real — Claude Design ao Midjourney ao Claude Code ao Cloudflare — e os pontos exatos onde a IA bateu em uma parede e um humano (eu) precisou intervir.\n\n## O que é o Claude Design, de fato\n\nA Anthropic lançou o Claude Design em 17 de abril de 2026, como uma prévia de pesquisa dentro dos aplicativos Claude. Disponível para assinantes Pro, Max, Team e Enterprise. Roda no Claude Opus 4.7.\n\nCinco opções na aba Design:\n- Prototypes — fluxos interativos clicáveis\n- Wireframes — exploração de layout em baixa fidelidade\n- Hi-fi UIs — landing pages e interfaces de produto completas em HTML/CSS\n- Slide decks — apresentações construídas como HTML\n- Import — importação de arquivos Figma ou upload de capturas de tela\n\nO que o diferencia de v0, Lovable e Figma Make é a entrega: o Claude Design empacota todo o design (componentes, tokens, assets, marcação) em um bundle que você passa ao Claude Code com um único comando.\n\n## Os requisitos\n\nVocê precisa de: uma assinatura Claude e uma ideia aproximada. Rodei a primeira versão no plano Pro de $20/mês.\n\nO detalhe que ninguém está falando: o Claude Design consome cota de uso rapidamente. Metade da minha janela diária havia acabado após a segunda rodada de edições de alta fidelidade. Planeje-se de acordo.\n\nStack completa:\n- Midjourney — plano Standard de $30/mês\n- Topaz Astra — opcional, plano Personal de $39/mês para upscaling de vídeo com IA\n- Claude Code — incluído na assinatura Claude\n- GitHub + Cloudflare — ambos gratuitos\n\n## O sistema de design é o verdadeiro diferencial\n\nNo seu primeiro projeto, o Claude Design pergunta: "Você tem assets de marca existentes, ou devo construir um sistema de design do zero?"\n\nInsira um logotipo, arquivo Figma ou repositório GitHub — ele os lê, extrai cores da marca, escala tipográfica, convenções de gradiente/traço e padrões de componentes. Salva como um sistema de design persistente vinculado ao seu workspace. Todo novo projeto o herda automaticamente.\n\nÉ o que o Lovable e o v0 não fazem nativamente. O Claude Design consegue inferir um sistema consistente a partir de um repositório GitHub.\n\nPara City Punks, construí do zero:\n- Vibe: Neo-Tóquio 2077, mercado noturno, névoa neon\n- Cores primárias: ciano elétrico, magenta quente, cinza cromado\n- Tipografia: display com cortes geométricos afiados; sans limpo para o corpo\n- Estilo de traço: fino, preciso — bordas de 1px, sem contornos pesados\n- Uso de gradiente: intenso — atmosfera, não decoração\n\n40 segundos depois: grade de cores, cinco amostras tipográficas, três opções de gradiente, folha de componentes. Aprovado, ajustado, bloqueado.\n\n## O fluxo de wireframe\n\nPrompt: "Landing page for City Punks, an open-world cyberpunk game launching late 2026. Big video hero with character footage, two feature sections explaining gameplay pillars, a news/blog teaser section, a full-width CTA before footer. Bold, atmospheric, not busy."\n\nTrês variações de wireframe em menos de um minuto:\n1. Hero alinhado à esquerda — editorial demais\n2. Hero centralizado — funciona, mas genérico\n3. Hero dividido — cria conflito visual\n\nEscolhi o centralizado e complementei: "Stretch the video to full-bleed. Push the title down and give it a glitch effect. Minimize the nav — simple logo-plus-burger-menu, nothing else."\n\nOito segundos. Feito.\n\n## Gerando a UI de alta fidelidade\n\n"Hi-fi this with full visuals." Noventa segundos:\n- Página HTML completa com sistema de design bloqueado\n- Título "CITY PUNKS" com animação CSS de glitch (divisão RGB, jitter horizontal, três keyframes)\n- Vídeo placeholder no hero\n- Duas seções de funcionalidades com títulos simulados, sub-texto e placeholders de ícones\n- Teaser de notícias com três slots de cards\n- CTA de largura total com botão de borda neon\n- Rodapé com links sociais, informações legais e seletor de idioma\n\nTudo editável inline. O recurso matador do Claude Design: edição de estilo inline sem perder o vínculo com o sistema de design. Altere a cor de destaque primária — todos os elementos que usam aquele token são atualizados em toda a página.\n\nTrês edições que fiz:\n1. Substituí a fonte do título por algo mais angular\n2. Reduzi a animação de glitch de "agressiva" para "sutil"\n3. Adicionei uma sobreposição de scanline ao hero — duas frases no chat, seis segundos\n\n## A entrega para o Midjourney\n\nNenhuma ferramenta de design com IA gera imagens de qualidade de produção. Três prompts no Midjourney:\n1. Hero: personagem feminina cyberpunk, ruas iluminadas por neon, teal e magenta, 16:9\n2. Seção de funcionalidades: terraço Neo-Tóquio à noite, superfícies molhadas pela chuva, letreiros neon\n3. Cards do blog: três variações de cenas de veículos cyberpunk\n\n~40 imagens rápidas, 20 minutos de iteração. No Claude Design: arrastei a imagem do hero para dentro, aceitei a sobreposição de gradiente, adicionei uma sobreposição de grade fina com 15% de opacidade.\n\n## O problema da responsividade\n\nTestei em desktop (1440px), laptop (1280px), tablet (768px) e mobile (375px).\n\nDesktop: perfeito. Laptop: perfeito. Tablet: bom. Mobile: quebrado.\n\nCinco problemas: overflow na navegação, título do hero grande demais, seções de funcionalidades não empilhando, botão CTA transbordando.\n\nDigitei: "Audit the mobile layout and fix the breakpoints. Navigation should collapse to a burger menu below 768px. Hero headline should scale down to fit in two lines on mobile. Feature sections should stack vertically on tablet and below. CTA button should go full-width on mobile."\n\nDois minutos. Todos os cinco problemas resolvidos.\n\nMas eu precisei saber o que perguntar. Um iniciante não detectaria os problemas de mobile.\n\n## A entrega para o Claude Code\n\nNa quarta rodada de edições, atingi o limite de uso. Cliquei em Export to Claude Code — empacota tudo em um bundle. No terminal: "Continue working on this project locally."\n\nUsei o Claude Code para:\n- Substituir a imagem do hero por um vídeo de fundo comprimido\n- Ajustar os efeitos de parallax scroll nas seções de funcionalidades\n- Adicionar estados de hover nos cards do blog\n- Ajustar o espaçamento do rodapé\n- Adicionar meta tags e cards Open Graph\n\nAs variáveis do sistema de design foram transferidas sem problemas.\n\n## O truque da animação em vídeo\n\nLoop animado do Midjourney + Topaz Astra (~160 segundos por mês no modo criativo 4K) = loop de 4 segundos no hero em 4K. Comprimido de volta para 1080p de alta taxa de bits com ffmpeg.\n\nDisse ao Claude Code: "Replace the hero image with this video as a looping background. Keep the overlay gradient and grid. Autoplay muted with playsinline attribute."\n\nOnze segundos. Feito.\n\n## Onde o toque do designer ainda importou\n\nPosicionamento do logotipo. Padrão de 40px no canto superior esquerdo → maior, deslocado para a direita, com tagline em pixel art.\n\nNavegação. Link de texto "Sign up" → botão pill neon, fixo ao rolar, brilho no hover.\n\nCalibração de cores. O ciano gerado automaticamente estava saturado demais para texto no corpo. Reduzi três tons.\n\nTemporização do parallax. Multiplicador padrão de 0.5 → 0.2 para uma sensação cinematográfica.\n\nEstados de hover. Elevação padrão de 2px + sombra → brilho de borda, elevação de 1px, mudança de cor no título.\n\nContinuidade entre páginas. A página interna do post do blog foi gerada com um layout diferente, sem correspondência com a página inicial.\n\n## Deploy: GitHub + Cloudflare\n\nO Claude Code inicializou o repositório Git e enviou para o GitHub. Conectei ao Cloudflare Pages — cinco cliques conforme a documentação do Cloudflare. Cada push para main faz o deploy automaticamente. Tempo total de deploy: ~12 minutos. Hospedagem gratuita, SSL e CDN.\n\n## O veredicto honesto\n\nO Claude Design é a melhor ferramenta de prompt-para-protótipo que já usei. Supera o Lovable na fidelidade ao sistema de design. Supera o v0 na versatilidade. Supera o Figma Make na velocidade.\n\nMas não é um substituto do Figma. É uma ferramenta de 80%.\n\nExcelente para: iniciantes, trabalho rápido de conceito, validação de startups, presença web de pequenas empresas, prototipagem rápida.\n\nNão é sua única ferramenta se você precisa de: fidelidade pixel-perfect, produtos complexos com múltiplas páginas, colaboração em equipe, trabalho vetorial preciso, padrões elevados de mobile.\n\n## O fluxo de trabalho que vou usar daqui para frente\n\n1. Claude Design — sistema de marca, wireframes, UI de alta fidelidade\n2. Midjourney — imagens\n3. Topaz Astra — vídeo para o hero (opcional)\n4. Claude Code — ao atingir o limite de cota ou para ajustes locais\n5. Polimento manual no Claude Code — logotipo, navegação, estados de hover, parallax, auditoria mobile\n6. GitHub → Cloudflare Pages — deploy automático\n\nTempo total para um site pequeno e competente: 3 a 5 horas em vez de 2 a 3 dias.\n\n## Perguntas frequentes\n\n### Preciso do Claude Pro?\nSim — Pro, Max, Team ou Enterprise. O plano Pro de $20/mês já o inclui.\n\n### O Claude Design pode substituir o Figma?\nNão. O Figma vence em colaboração, histórico de versões, ecossistema de plugins e trabalho vetorial.\n\n### O resultado é responsivo para mobile?\nEm sua maior parte. O mobile precisa de uma passagem de correções. Pedir uma auditoria de breakpoints resolve a maioria dos problemas em menos de cinco minutos.\n\n### Como é a entrega para o Claude Code?\nUm bundle completo: HTML, CSS, JavaScript, assets e tokens de design. As variáveis do sistema de design são transferidas integralmente.\n\n## Vamos trabalhar juntos\n\n* Fiverr: fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited: ramlit.com\n* ColorPark: colorpark.io\n* xCyberSecurity: xcybersecurity.io"