Artigo

Claude Design: Landing Page no Ar em 10 Minutos (Sem Código)

Atrópica lançou uma ferramenta chamado clown design e ela faz uma coisa que nem o Canva, nem o Wix, nenhum profissional de design consegue fazer. Você pede o que quer, ela monta copy, um design profissional e um código, tudo no mesmo lugar. Eu testei subindo ar com meu próprio domínio.

Principais pontos

• B para que você possa entender porque que eu tô fazendo dessa forma aqui, é porque simplesmente eu gosto de usar a inteligência artificial para fazer todas as coisas mais chatas e mais burocráticas.
• Como criar uma cópia profissional para SLP, como fazer um design que não fique com cara de IA, que é muito importante, e como colocar tudo isso com seu domínio na internet de forma profissional.
• Se fosse um projeto aqui mais profissional, ia decidir aqui eu mesmo, mas eu vou deixar aqui para ele decidir, até porque simplesmente para deixar mais rápido aqui o vídeo para você entender.
• De nada adianta você criar uma LP, uma um design super bonito, elegante, tudo funcional ali, sem que você não tenha uma cópia que converta, que faça com que as pessoas comprem seu produto.
• Então eu posso utilizar o antigravity aqui, eu posso utilizar a própria inteligência que é o Gemini aqui, mas eu vou utilizar o Cloud clicando aqui, ó, que ele já tá instalado aqui.

E nesse vídeo eu vou te entregar três coisas que ainda ninguém falou aqui no YouTube. Como criar uma cópia profissional para SLP, como fazer um design que não fique com cara de IA, que é muito importante, e como colocar tudo isso com seu domínio na internet de forma profissional.

Então, bora pro vídeo. Vamos lá. Agora tô aqui com a meu cloud design e a primeira coisa que você vai fazer para acessar é simplesmente digitar cloud./design e o link também vai est na descrição desse vídeo para você estar acessando, tá?

Contexto atual

Então vamos lá. Primeira coisa aqui que a gente pode est se familiarizando, ele muda um pouco, mas fica bem familiar também, como se fosse chatp. Você vai entender de maneira bem simples.

Desse lado aqui fica os projetos, tá? E aqui do lado você simplesmente pode selecionar se é um protótipo novo para você renomear e tudo mais.

"se você quer uma apresentação em slides, que isso aqui é bem interessante também, ou simplesmente você quer criar um pro..."

Analise detalhada

Eu vou colocar o nome dele aqui, por exemplo, aqui, como eu quero criar um banco digital, só para exemplificar como é que funciona aqui, eu simplesmente vou colocar aqui, ó, o nome desse projeto vai ser paymone e vou criar o projeto aqui, ó. Pronto, projeto criado.

Que que a gente precisa fazer? Bom, uma das primeiras coisas mais importantes não é criar um design, sair aqui falando de qualquer forma com ele, é você simplesmente ter uma cópia profissional.

E como a gente tem uma cópia profissional e por que ela é importante? De nada adianta você criar uma LP, uma um design super bonito, elegante, tudo funcional ali, sem que você não tenha uma cópia que converta, que faça com que as pessoas comprem seu produto. Então, antes da gente criar qualquer coisa, pedir qualquer coisa, vamos primeiro criar a nossa cópia.

Oportunidades

Eu vou te mostrar como fazer isso de forma profissional com uma cópia realmente que converte, tá? Eu vou dar isso aqui de presente para você. Agora, como eu vou simplesmente criar uma cópia profissional, sendo que eu não sou um copy white e provavelmente você não é, você uma skill, que simplesmente é um instruções de como a inteligência artificial vai agir e ela simplesmente vai seguir parâmetros, comandos, instruções reais de tudo como ela deve agir para te entregar algo.

"E essa skill eu vou estar compartilhando com você, vou estar aqui na descrição desse vídeo. Você simplesmente pode clica..."

E essa skill, ela vai criar a nossa cópia de forma profissional, baseado em tudo que já deu certo no mercado com relação a autoconversão, entendeu? Então é super legal e super intuitivo fazer isso. Então o que que a gente vai fazer?

Desafios

Olha só, vamos aqui entrar no cloud code normal, pode ser no chat ou no cowork, não tem problema. Então vamos lá.

O que que a gente vai fazer aqui? Vamos clicar aqui, ó, em personalizar habilidades, criar. Aqui é novo, aqui mais criar uma habilidade e fazer o pilo da habilidade.

Eu vou simplesmente pegar o arquivo que eu tô disponibilizando para você baixar aqui na descrição. Vou clicar aqui, ó.

Solucoes praticas

"Vou selecionar aqui a skill, ó. E vou abrir. Olha só que interessante aqui, ó, dentro da nossa skill que a gente acabou ..."

Você não precisa ser um copyw agora, basta usar essa skill aqui que vai ficar tudo simplesmente muito profissional, as suas cópias a partir de agora, entendeu? Então veja só que interessante.

Antigamente você precisava contratar um copyw para criar todo o texto da sua LP, da sua landage ou de qualquer outra coisa. Hoje com a inteligência artificial você consegue fazer isso através do seu cloud coach, entendeu?

Com essas instruções aqui. Muit das vezes muito melhor do que um profissional dessa área, entendeu? Porque ela vai pegar todas as referências dos melhores copyartes, das copy ararts que mais deram certo no mercado, que mais convertem, entendeu?

E olha só o que que a gente vai fazer aqui. Mas antes disso, já se inscreve nesse canal e curte esse vídeo, porque eu tô te dando um presente muito rico aqui, tá? Simplesmente uma skill profissional para você criar suas cópias a partir de agora.

"Então já se inscreve nesse canal porque eu vou trazer muito mais conteúdos muito mais ricos do que esse aqui. Então deix..."

Então vamos lá. Que que a gente vai fazer aqui agora? A gente vai clicar aqui, ó, simplesmente em uma nova conversa, tá?

Deixa eu clicar aqui e vamos colocar aqui, ó, barra e vamos colocar aqui, ó, cop. E aqui a gente já vai simplesmente usar a skill que a gente tem aqui, entendeu?

E agora a única coisa que a gente precisa é descrever do que se trata o nosso produto. E pronto, que eu vou colocar aqui simplesmente eu vou criar um banco digital, só isso. Colocar só aqui um banco digital e o nome do banco é payoney, só isso.

E vou dar o enter aqui. Perfeito.

"E agora o que que aconteceu? Depois que eu mandei aqui o comando, uma coisa muito legal que ele faz é te perguntar algum..."

Então você vai responder essas perguntas aqui, é, do seu produto, no caso, da sua cópia, na sua land page e depois disso ele vai criar entregar sua LP, porque não vai criar algo sem saber, ele precisa saber exatamente do que se trata o seu produto, entendeu? E olha só, depois que eu respondi aqui todas as perguntas, ele já, olha só, já adiantei aqui e respondi todas as perguntas e depois ele já girou todo LP para mim. Então, basta eu simplesmente copiar tudo aqui, ó.

Olha só, vou selecionar aqui tudo, copiar. Copiei tudo aqui. E agora a gente vai clicar aqui no nosso no nosso projeto aqui do cloud design.

e vou colar aqui, ó. Vou simplesmente colar aqui.

Após eu colar aqui, o nosso projeto ficou com 211 linhas. Mas isso depende muito de cada projeto, tá? Pode ser menos ou pode ser mais o seu.

"Aí, que que eu vou fazer diferente aqui? Eu vou fazer aqui uma coisa bem diferente para seguir uma base de design que eu..."

E tem um site que eu gosto bastante que é o dribl dois três bass. Na verdade, você acessando aqui, você tem diversos design que você simplesmente pode estar se inspirando. Eu quero usar esse daqui como referência.

Então eu simplesmente vou selecionar aqui a imagem. Olha só, vou copiar ela aqui e vou colar aqui dentro. Olha só, vou colar aqui dentro para ele seguir como base essa imagem.

Então simplesmente ele vai seguir esse projeto como base. Então criei uma, não vou dizer mais nada, com certeza ele vai seguir como base. Eu vou só deixar aqui e vou simplesmente enviar.

Perfeito. O que que ele fez aqui? Ele me fez várias perguntas de como eu quero seguir o design da minha LP.

"Qual é a variação de título que deve ser a principal? Então, vou colocar aqui, ó, recomendado...."

A direção de cores, eu quero esse verde aqui com esse laranja, tá? Que legal. Tom visual, colocar aqui tecida por mim todos.

Se fosse um projeto aqui mais profissional, ia decidir aqui eu mesmo, mas eu vou deixar aqui para ele decidir, até porque simplesmente para deixar mais rápido aqui o vídeo para você entender. Abordagem da imagem de heróis.

Decida por mim. Colocar aqui também.

Decida por mim. elementos interativos. Colocar aqui qual opção de urgência decida por mim.

"Colocar aqui tudo decida por mim. Eu vou colocar aqui em português mesmo...."

O que deve ser ajustável? Modo escuro.

Quais designs? Quantos designs diretos? Colocar isso aqui.

Vou clicar em continuar. Bom, ele acabou de finalizar aqui, gente.

E é incrível. É algo muito profissional. Olha só.

Olha só o nível dessa página. Isso que ficou incrível.

Nunca tinha visto algo surreal. E aqui você simplesmente pode fazer coisas ainda mais profissionais, customizar aqui conversando com ele aqui novamente ou você simplesmente pode aqui, ó, editar por aqui, tá? Onde simplesmente você pode estar mudando aqui as coisas, ó.

Clicando em cima, você, por exemplo, pode mudar a fonte aqui. Olha só, pode mudar aqui, é a cor por aqui também, entendeu? Olha só aqui, ó.

Fonte, o tamanho, você pode deixar melhor aqui, ó. Então aqui você pode simplesmente alterar do jeito que você quiser. Você pode, por exemplo, usar esse recurso aqui, ó, onde você pode riscar o que você não quer.

Clicando em cima, por exemplo, você pode editar dessa forma aqui também, ó, em pat, no caso aqui nessa opção aqui, você risca, por exemplo, ó, quero remover esse aqui. Clica em cima ou digita remova isso. E dá um enter.

"Clica aqui em enviar. Basicamente ele vai remover o que eu pedi, no caso, né?..."

Veja só, ele já removeu aqui, ó, que eu risquei, tá? O usuário deseja que o logotipo do ícones SVG ao lado do Paymone seja removido.

Ele removeu, então você pode editar dessa forma aqui. Bem legal, né? Bem interativo.

Bom, e tem outro site que eu gostaria de recomendar para você para deixar o seu site muito mais profissional, caso você queira utilizar. Então, mais um presente aqui para você, que é esse daqui, ó, que é o 21 deve.

No caso, o que que você vai fazer aqui? Tem vários elementos que você pode estar utilizando lá dentro do seu site. Então, vamos, olha só, componentes aqui, ó.

"Se a gente clicar aqui, por exemplo, em background, deixa eu pesquisar aqui por background. Background, se eu pesquisar ..."

Aqui tem vários elementos já prontos, ó, que tem movimentos, entendeu? Você pode pegar qualquer um desses aqui para aplicar lá. Então, tem um aqui que eu achei, cara, esse aqui tá bem legal, olha só.

Gostei desse, mas esse daqui também eu achei um show. Então, vou clicar. Deixa eu ver aqui um efeito que combina.

Acho que esse aqui combina, né? Deixa eu ver um efeito aqui.

Interessante. Acho que esse efeito aqui combina com o meu site, ó, que é tipo um grid, sei lá.

"Deixa eu ver se ele ele não tem movimento no caso, né? Esse aqui é interessante...."

Eu vou clicar nesse daqui e vou aplicar esse aqui, ó. Achei esse aqui bem legal.

Acho que vai combinar com o meu projeto aqui. Então, vou colar aqui e vou pedir para ele aplicar. E olha só, ele acabou de aplicar aqui o efeito e olha como ficou muito legal.

Olha só, muito profissional. Tá perfeito.

Então você já sabe agora como aplicar efeitos, como criar uma página profissional, como criar uma cópia bem profissional e deixar tudo pronto. Olha só, tá tudo pronto aqui, ó.

"Perfeito. Agora, como é que você vai subir isso pro seu servidor, né, para você colocar de forma online, utilizar um dom..."

Basta você dizer, disse aqui para ela, gerem um arquivo HTML. E com esse arquivo aqui a gente vai conseguir baixar toda a nossa LP e a gente vai conseguir subir esse projeto para qualquer servidor que você deseje, tá?

Qualquer hospedagem no caso. Perfeito, ele já girou aqui pra gente o HTML. Eu vou só clicar aqui em baixar.

Olha só, eu vou selecionar aqui o lugar que eu quero baixar. Vou salvar aqui. E você pode subir essa página em qualquer lugar que você deseja.

Você pode escolher, por exemplo, HostGate, qualquer lugar. Bom, e para subir aqui, eu vou fazer uma coisa totalmente diferente, tá? Eu vou utilizar o antigravity com o Versel para subir esse projeto.

"Então, vou clicar aqui em documento, vou lá aqui na pasta, vou procurar aqui a pasta que a gente salvou, tá? Pra gente a..."

B para que você possa entender porque que eu tô fazendo dessa forma aqui, é porque simplesmente eu gosto de usar a inteligência artificial para fazer todas as coisas mais chatas e mais burocráticas. Então, simplesmente aqui abriu o arquivo que eu baixei, que foi o HTML que a gente criou aquela LP.

E aqui eu vou pedir para ela subir na VCEL. Simplesmente isso, tá?

utilizando a própria inteligência artificial aqui. Então eu posso utilizar o antigravity aqui, eu posso utilizar a própria inteligência que é o Gemini aqui, mas eu vou utilizar o Cloud clicando aqui, ó, que ele já tá instalado aqui. Simplesmente clicar aqui porque ele é mais inteligente para isso, vou voltar aqui, ó, e vou pedir para ele quero subir este projeto na Versel.

Então aqui eu vou conversando com ele, ele vai provavelmente me pedir várias coisas e simplesmente vou subir ele aqui, tá? Aqui ele me pediu algumas coisas para eu fazer, alguma recomendação no caso, né, para mim renomear o projeto para index.html e depois ele me pediu aqui para escolher duas opções, a que é para subir pela VS direto, pela CLI, que é mais rápido, pelo GitHub, que também é bem legal, ou pelo drag mais [música] drop. Então eu vou simplesmente renomear aqui, ó, para index esse arquivo aqui, ó, index hml, nosso arquivo que a gente baixou, tá?

Então vou fazer isso aqui agora. Vou renomear aqui, ó.

Feito. Agora vou escolher a opção A.

Quero a opção A. Aqui ele vai me pedir algumas permissões. Eu vou simplesmente dar OK.

Provavelmente ele tá instalando aqui algumas coisas. Já fez aqui a parte de login.

Tá dizendo que já fez aqui o deploy. Bom, ele acabou de falar aqui que ele já finalizou. Vou clicar aqui, ó, pra gente ver se tá funcionando.

"E a nossa página já está no A, ó. Olha só. clicar aí, você vai conseguir acessar a página já no A...."

Perfeito. Só que agora o que que a gente vai fazer? Tá faltando meu domínio aqui.

Tá utilizando o domínio da Vcel no caso, né? Então, simplesmente agora o próximo passo é fazer isso.

Deixa eu ver se eu consigo agora com a própria inteligência artificial pedir para ela na VCEL tem um domínio registrado Pay Money que eu simplesmente fiz a configuração lá. Eu quero utilizar esse domínio nessa página de vendas.

Beleza? Vamos ver se ele consegue fazer isso.

"Hoje praticamente você não precisa mais fazer nada, essas coisas técnicas, tá? Tudo joga para ela fazer e vai mais rápid..."

Ele encontrou o domínio. Olha só.

Ou ele tá me pedindo permissões aqui, ó. Viu como você não precisa fazer muita coisa manual? Praticamente quem faz tudo é a inteligência artificial, entendeu?

Então ele tá só me pedindo aqui autorização, ó. Mais autorizações.

Deixa aqui nos comentários se você simplesmente continua fazendo as coisas manuais ainda, porque realmente a gente fica meio que viciado em fazer tudo, querer fazer tudo manual, mas com a inteligência artificial não precisa mais. Então deixa aqui nos comentários que eu quero saber como é que tá sendo sua experiência com inteligência artificial, se você tá deixando para tudo ela fazer ou se você ainda tá fazendo muita coisa manual. Bom, o Cláudio acabou de me dar o OK.

"Eu simplesmente pesquisei aqui, ó, paymone.com.br e já tá no ar. Olha só, funcionando tudo online com meu domínio, enten..."

Então observe que é muito simples, fácil e já tá no ar, não tem segredo. Aí você pode estar perguntando, Clebs, mas você fez uma coisa diferente, você utilizou o antigravity e o cloud code dentro dele.

Você poderia ter utilizado o próprio cloud aqui, a ferramenta cowork dele, tá? Para fazer isso. Eu gosto de utilizar o antigravity porque ele é bem simples e fácil para você ver, por exemplo, arquivos é muito mais fácil, eu já tô mais acostumado com ele.

E para instalar é bem simples, mas tem um vídeo aqui onde eu mostro como usar o Cloud Code dentro do antigravity, entendeu? sem precisar utilizar terminal para fazer isso, mas é simples, basta você clicar aqui em extensão, instalar, pesquisar aqui o antigravity, clicar aqui em extensões, pesquisar cloud code, aqui vai tá a opção de instalar, aqui tá já a opção de desinstalar, só instalar e vai aparecer esse iconezinho aqui, ó. Você clica nele e vai aparecer o chatzinho para você conversar normalmente com o Cloud Code.

É bem simples e fácil. Mas basicamente era esse vídeo. Olha só o nosso trabalho, como ficou aqui profissional da nossa LP.

"Cara, ficou, eu fiquei encantado com esse projeto. Essa página, eu passei bem sincero com vocês, eu fiquei surpreso com ..."

Isso aqui pode ser muito melhorado. Olha só aqui, ó, correções de algumas coisas aqui.

Então, basicamente, você pode melhorar tudo aqui nessa página LP, tá? Fazendo coisas ainda mais profissionais.

Mas só esse resultado aqui para mim já me surpreendeu demais. Eu fiquei encantado. Olha só esses efeitos, coisa de página de alto nível, né?

Então deixa aqui nos comentários o que você achou dessa nova funcionalidade do Cloud Code. É muito importante saber também a sua opinião, tá bom?

"Bom, é isso aí, fique com Deus, um forte abraço. Não esqueça de deixar seu like, se inscreva nesse canal para eu trazer ..."

Valeu,

Fonte: Assistir vídeo original no YouTube
Conteúdo gerado com base na transcrição original