Criando uma LP com Claude Design e Claude Code: Lições sobre Execução vs. Julgamento

Criei uma landing page sem abrir o Figma uma única vez. As ferramentas que usei foram principalmente o Claude Design e o Claude Code. O período de produção foi de uma semana, com um total de mais de 300 interações de ida e volta com a IA.

O que aprendi com essas 300 interações é que, embora o ato de criar tenha se tornado significativamente mais fácil graças à IA, o limite superior da qualidade final ainda é determinado pelo julgamento humano. A IA cuida de tudo até fornecer as opções. A partir daí, elevá-la ao tom desejado era o trabalho da pessoa que avaliava a qualidade e a enviava de volta para revisões.

Criei o site de documentação do Design Harness, um framework que lida com o design em quatro camadas: restrições, contexto, verificação e avaliação. Como é um site sobre design, também tive um subtema de ver até onde eu poderia ir com os detalhes e interações superficiais.

https://x.com/kgsi/status/2072829167285207077

Vou revisitar as etapas que segui e onde gastei essas 300 interações, incluindo capturas de tela reais.

Como Usei o Claude Design e o Claude Code de Forma Diferente

Construí esta LP dividindo as funções entre duas ferramentas principais. O Claude Design é uma ferramenta de geração de design conversacional onde você dá instruções via chat e um protótipo HTML ao vivo aparece na hora. O Claude Code é um agente de codificação que roda no terminal e implementa diretamente a base de código.

A divisão de trabalho era clara: o Claude Design é ótimo para moldar protótipos no início. Desta vez, forneci um documento resumindo a política de design e wireframes, respondi a algumas perguntas, e a primeira LP foi gerada. Este método é eficaz na fase de testar direções e quebrar paradigmas.

Por outro lado, para o trabalho de elevar à qualidade de produção — como suporte responsivo e detalhes de acessibilidade — você precisa refinar com o Claude Code.

Decida o design com o Design, e finalize com o Code. Usei-os nesta ordem.

Verbalizando Tudo Antes de Criar

Quando decidi fazer este site, a direção já estava definida. O que eu tinha em mente era "o que acontece se você adicionar tipografias e efeitos modernos a um tom clássico de estilo internacional." O conceito em si é extraído da documentação do Design Harness.

Observe que, como o Claude não consegue gerar imagens por conta própria, deixei isso para o ChatGPT Images 2.0. Derivei ideias alternativas de imagens de sites de exemplo, construí um mood board para o site que queria criar e gerei imagens de fundo. Coloquei tudo em palavras e imagens antecipadamente para definir a direção 'boa'. Todas as interações subsequentes foram essencialmente uma verificação cruzada contra isso.

Explorando tons visuais com o Codex (ChatGPT Image 2.0), pesquisando várias imagens e mood boards.

Refinar Exige Centenas de Interações (Pelo Menos)

Após a preparação, começou a troca de ideias com o Claude Design. Olhando para as capturas de tela, houve mais de 200 interações no total (cerca de uma semana em termos de tempo total de produção). Aqui está a divisão das sessões:

• "Requisitos de geração do site LP": aproximadamente 80 turnos
• "Animação do Design Harness": aproximadamente 80 turnos
• "Animação de exibição do fundo do texto KV": aproximadamente 50 turnos
• "Melhorando a explicação do Design Harness": aproximadamente 10 turnos

A animação de carregamento inicial e os efeitos do Key Visual (KV) exigiram particularmente muitas interações. Os efeitos não foram feitos de uma só vez; eu adicionei instruções em camadas para refiná-los (por exemplo, um efeito vindo de baixo, efeitos de sobreposição de desfoque, etc.).

Capturas do Claude Design. Como a precisão diminui à medida que o contexto aumenta, criei novas sessões para cada tarefa importante a ser explorada.

Separadamente, eu estava refinando o suporte responsivo e a acessibilidade com o Claude Code, então totaliza cerca de 300 interações. Em termos de sensação, acho que a seção Hero foi a que mais consumiu tempo.

Ao passar do Claude Design para o Claude Code, usei a função Compartilhar, mas recomendo passar o arquivo zip inteiro via "Exportar." Embora "Enviar para" seja mais fácil, tem limites de transmissão de imagem e a precisão da reprodução não é tão alta.

Olhando para os números, pode parecer uma tarefa árdua, mas dar instruções em si se tornou mais fácil. Você não precisa mais entender completamente HTML e CSS. O Claude Design tem um recurso de anotação onde você pode adicionar comentários diretamente aos elementos na tela. Se você apontar para a parte que deseja corrigir, quase qualquer instrução detalhada será compreendida. Portanto, as instruções que dei se enquadraram principalmente em três categorias:

Apontar para elementos com anotações para corrigir detalhes. Transmitir movimentos em palavras, como a exibição do fundo do texto KV. Realinhar o tom para "estilo clássico internacional"... A única habilidade necessária restante é a capacidade de verbalizar movimento e tom.

Vamos pegar a navegação como exemplo da troca de ideias.

Inicialmente, era um efeito onde uma linha sublinhada deslizava ao passar o mouse. Era difícil de entender, então forneci uma URL de implementação de referência e mudei para um efeito de embaralhamento de caracteres. Então, a largura do caractere mudava durante o embaralhamento, fazendo com que as posições do menu mudassem. Quando mandei fixar a largura, o espaçamento ficou irregular. Mesmo depois de enviar de volta dizendo "ainda não está uniforme", não foi corrigido. Finalmente, parei de tentar ajustar a largura e resolvi mudando o tipo de letra da navegação para uma monoespaçada de largura fixa. Se a largura do caractere é constante, nada se move mesmo ao embaralhar. Isso levou 5 interações.

As 300 interações foram, em sua maioria, uma repetição desse ciclo. Fornecer URLs de sites ou implementações que eu queria referenciar para mostrar a direção. Verbalizar brevemente o desconforto com o que saiu, como "o espaçamento não está mais uniforme", e enviar de volta. Se a mesma correção falhasse duas vezes, eu parava de ajustar e mudava a premissa. No final, nunca escrevi um documento de especificação longo.

A propósito, embora quase não tenha usado desta vez, existe um documento chamado Animation Vocabulary and Skills, que deve tornar as instruções mais eficientes se usado. https://animations.dev/vocabulary

O Ato de Criar e o Ato de Julgar

Olhando para o conteúdo das interações, foi um processo de julgar a qualidade do que saía e enviar repetidamente de volta. O ato de criar em si agora pode ser quase inteiramente tratado pela IA. Se você der instruções, as opções aparecem imediatamente. Mas o timing da animação está certo? Há espaço em branco suficiente? O que é bom e o que é ruim? A IA não consegue julgar isso. Ainda é impossível fazer a IA gerar o tom desejado de uma só vez. Se você quer elevar a qualidade, não tem escolha a não ser julgar e enviar de volta.

Esta é provavelmente a razão pela qual saídas simples não atingem esse nível de qualidade. Um estudo da UC Berkeley School of Information, que observou 13 sessões de designers usando ferramentas de IA generativa, chama o fenômeno onde a saída gravita em direção a um estilo que parece "de alta qualidade", mas familiar, de "Armadilha da Convergência."

https://x.com/kgsi/status/2074250174986362999

Sem o julgamento para enviar as coisas de volta, a saída se estabelece em uma arrumação genérica que não pertence a ninguém. A maioria das 300 interações foi usada para puxá-la de volta para o tom desejado a partir daí.

O Que Acontece com Pessoas Que Sabem Julgar?

Há uma visão de que a IA eventualmente será capaz de lidar totalmente com esses julgamentos estéticos e de qualidade. Acho que isso acontecerá em algumas áreas.

No entanto, em cada uma das mais de 300 interações, fui eu quem percebeu o desconforto e o enviou de volta, e não houve sinal de que isso fosse automatizado naquele processo. Claro, isso é apenas n=1 da construção de uma LP. Ainda não sei se o mesmo pode ser dito para outros trabalhos de design.

Tendo terminado este processo, minha previsão é que os "assentos" para pessoas que criam coisas diminuirão. Um trabalho que leva uma semana para projetar uma LP será substituído por um trabalho que envolve meio dia de troca de ideias com uma IA. Nesse momento, as pessoas que permanecerem em seus assentos serão aquelas com o conhecimento e os critérios de julgamento para dizer em segundos: "Vá com a proposta certa, mas refaça o movimento," diante das opções alinhadas. Acho que a demanda por pessoas que sabem julgar enquanto dominam a IA vai realmente aumentar.

O que os designers devem polir mudará de suas mãos para seus olhos. Os julgamentos que fiz naquelas 300 interações, em última análise, dependiam da minha experiência de criar coisas com minhas próprias mãos. Se for esse o caso, em um mundo onde o número de vezes que criamos coisas diminui, existe uma maneira de desenvolver apenas os olhos?

Como nota lateral, o site de curadoria "Parascope", onde você pode adquirir habilidades de "design", está atualmente operando com sucesso 👉 http://parascope.design/