A extensão Figma Chrome faz algo que eu queria desde que comecei a criar aplicativos com IA

Gradiente de roxo para azul. Negrito – ponto morto. Um cartão com desfoque suficiente para parecer caro. Um botão arredondado para o raio de todos os outros botões que a IA já me deu. Já vi essa tela tantas vezes que consegui desenhá-la de memória, o que é engraçado porque a IA sempre a desenhava para mim. meu

Se você não sabe do que estou falando, tente usar a ferramenta de codificação vibratória e peça para ela criar algo. Certifique-se de que o prompt seja claro, especialmente em termos de design. Você será saudado com uma página que corresponde perfeitamente à descrição acima, pois essas parecem ser as ferramentas padrão codificadas se você não disser exatamente o que deseja.

Isso ocorre principalmente porque eles são treinados na web, que já se parece com isso. Isso remonta a uma ligação anos atrás: o Tailwind precisava de uma cor padrão para suas demonstrações e escolheu o índigo-500, uma escolha que saturou a web, tornou-se dados de treinamento e ensinou silenciosamente a todos os modelos que “moderno” significava um botão roxo. Porém, isso significa que se você quiser fugir das pessoas, o trabalho recai sobre você. Você precisa dizer ao modelo exatamente o que deseja (cores, tipo, layout), tanto quanto possível. A extensão Figma Chrome evita que eu tenha que fazer um tutorial e finalmente faz algo que eu queria desde que comecei a criar aplicativos com IA.

A extensão Figma Chrome permite especificar em vez de descrever

Finalmente, um ponto de partida não roxo

Ao entrar nesta seção, não sou um designer e tenho instintos de design extremamente medíocres. Eu uso principalmente modelos do Canva ao criar apresentações, que é o maior motivo pelo qual sou fã dos slide decks do NotebookLM e das habilidades de frontend slides de Zara Zhang. Basicamente, adoro qualquer coisa que me dê um design pronto para não ter que inventá-lo. Devido à minha falta de habilidades em design, Figma não é onde passo muito tempo. Eu o usei de vez em quando para criar protótipos de algo bruto, mas nunca fui um usuário avançado, e é por isso que me surpreendeu que o recurso do Figma tenha sido o que finalmente resolveu meu problema de codificação de vibração.

em 11 de junho, Me deparei com uma postagem da equipe Figma sobre X convidando os usuários a imaginar um mundo onde você pudesse copiar/colar sites em camadas editáveis ​​do Figma. Esta descrição é exatamente o que a extensão faz! Você instala a extensão Figma Chrome, abre qualquer página da web, clica no ícone e uma pequena barra de ferramentas aparece na página. Existem duas opções abaixo: selecionar um único elemento (como um cartão, seção de personagem ou botão) ou capturar a página inteira, que captura tudo, incluindo partes que são roladas para fora da visualização.

Qualquer coisa que você pegar é copiada automaticamente para a área de transferência, então basta mudar para o arquivo Figma e colar usando Cmd/Ctrl+V. Agora, esta não é uma captura de tela variável que você cola em um arquivo Figma, ou alguma imagem plana que você pode ver e rastrear. Ele está disponível como camadas editáveis ​​reais, assim como você faria se você mesmo o construísse… exceto que você não o fez e simplesmente o roubou da página da web em dois cliques. O texto é texto real, os cartões são molduras reais que você pode arrastar ou excluir, e tudo é móvel, editável e você precisa retirá-lo.

Basicamente, isso significa que você não precisa mais se preocupar em fazer capturas de tela de um site que você gosta e observá-las enquanto o restaura manualmente. Se você quiser seguir o caminho da IA, não precisará mais descrever o layout do seu modelo em três parágrafos e esperar que ele adivinhe o resto. Você apenas alimenta-o com a coisa real e deixa-o funcionar com base em algo que realmente existe, não nas suas médias. Para alguém como eu, que não sabe projetar, mas consegue reconhecer um bom design quando estou em cima dele, esse é o jogo inteiro.

Ok, mas como isso me ajuda com o código vibe?

Ótimo ponto de partida, primeiro rascunho confuso

Capturar um site no Figma é conveniente por si só, mas não o instalei para admirar as camadas da tela. A razão pela qual a codificação vibratória é importante é o que você pode fazer com essa captura posteriormente: uma vez que a página é colocada no Figma como camadas reais, você pode passá-la diretamente para a IA como material a partir do qual construir. Figma tem o seu caminho com Figma Make. A questão é que o modelo para de funcionar a partir da descrição instável do site e começa a funcionar a partir da descrição real.

Para ver como funcionava, peguei a página inicial do XDA, cliquei na extensão, cliquei na página de captura e colei no Figma! Após um atraso de alguns segundos, toda a página inicial estava na minha tela. A partir daí, o caminho para o código real é um clique com o botão direito. Você seleciona o quadro que tirou, escolhe Enviar para Figma Make, e tudo isso é considerado o ponto de partida da construção. Portanto, o modelo não começa com uma página em branco e sua vaga descrição de “site de notícias de tecnologia, tema sombrio, grade de cartões”.

Começa no XDA, especialmente porque você o enviou ao XDA. A partir daí, você pode continuar iterando dentro do Figma Make ou baixar tudo como um pacote de código e abri-lo com o que você realmente estiver sentindo no código. Foi isso que eu fiz! Puxei a exportação para Claude Code para ver com o que realmente estava trabalhando.

Não é o fim do gradiente roxo, mas é a minha saída

A extensão figma não me tornou um designer e não tornou o código mais limpo. Na verdade, ainda tive que enviar Claude Code para desembaraçar 8.000 linhas de bagunça absolutamente posicionada. Mas isso acabou com a parte da codificação vibratória que eu realmente temia: olhar para um prompt em branco, tentando descrever o local bem o suficiente para que o modelo não me desse o gradiente roxo. Agora eu apenas aponto para a coisa real e deixo que ela discuta os detalhes em vez de inventá-los.