Como Criar um E-commerce Completo com IA em Minutos! (Novidades WordPress Studio)

Vídeo em Português, publicado pelo canal Fellyph Cintra.

Sobre este conteúdo: O resumo, os principais pontos e os temas abaixo são gerados automaticamente a partir da transcrição do vídeo. Eles refletem o conteúdo, opiniões, afirmações e previsões apresentadas no vídeo e não representam posicionamento, validação ou verificação de fatos pelo All The Gate.

Resumo do vídeo

O vídeo apresenta as principais novidades da versão 2.1 do WordPress Studio, uma ferramenta de criação de sites com inteligência artificial e agentes dedicados. O apresentador demonstra o passo a passo da criação de um projeto de e-commerce voltado para o setor de doces, utilizando recursos como geração de design systems, criação automática de plugins, auditoria de SEO e sincronização com ambientes de produção.

Principais pontos

• O WordPress Studio é uma ferramenta para criação de sites com inteligência artificial, disponível para Mac, Windows e Linux.
• A versão 2.1 introduz a criação prévia de um design system antes de inicializar o projeto, garantindo consistência visual.
• A ferramenta possui um assistente baseado em agentes que auxilia na escolha de layouts, criação de estruturas com WooCommerce e geração de imagens.
• É possível realizar auditorias de performance e de SEO diretamente na ferramenta utilizando comandos específicos como o de SEO.
• O sistema permite fazer o deploy (publicação) e sincronização (push e pull) de arquivos e bancos de dados diretamente com o wordpress.com.
• O usuário pode interagir com o agente por meio de comandos de anotação visual para modificar elementos específicos da interface em tempo real.

Temas

WordPress StudioInteligência ArtificialE-commerceWooCommerceDesign SystemSEODesenvolvimento WebHospedagem

Transcrição do vídeo

Texto das legendas disponíveis; pode conter erros.

Olá, meu nome é Felipe. Nesse vídeo em particular, a gente vai cobrir as novidades da versão 2.1 do WordPress Studio. Então essa versão ela está cheia de novidades e nesse vídeo a gente vai cobrir elas. Então aqui a gente está na página principal do WordPress Studio. Então a gente já mostrou diversas vezes aqui no canal. É uma ferramenta que permite você criar sites com inteligência artificial. Ela tem um harness, né, uma estrutura de agentes dedicadas para a construção de sites WordPress. Então aqui a gente no canal já criou vários tipos de website. Nesse vídeo em particular eu vou criar um site novo enquanto o meu agente trabalha nesse site novo. A gente vai vendo algumas funcionalidades desta ferramenta. Então o primeiro, onde é que você vai baixar esta ferramenta? Essa ferramenta você vai baixar em developers.wordpress.com/pt-br/studio. Esse pt-br é só a versão em português desse site e lá você vai baixar tanto para Mac ou para Windows, vai depender aí do seu sistema operacional. E essa ferramenta também está disponível para Linux. Então daí uma vez que você baixa, instala, você vai ter essa ferramentazinha aqui. E para ter o uso dos agentes você precisa conectar com a conta no wordpress.com. Então aqui eu tenho um botãozinho de mais, né, na minha sidebar no canto superior direito, que é a opção adicionar site. E daí eu tenho várias opções. Eu tenho algumas, né, blueprints, alguns formatos pré-prontos ou eu posso começar um site do zero. Então aqui a gente tem a nossa telinha. E então o nome desse site vai ser Doces de Leite de Minas. Então estava lá em BH recentemente, então esse vai ser o meu projeto aqui. Aí eu vou escolher qual versão do WordPress eu quero iniciar, então posso escolher a 7.1 ou a 7.2. E assim, essa parte do WordPress em si é, se você cria a parte gráfica, a ferramenta, a inteligência artificial vai te cuidar tudo para você. O WordPress ele vai funcionar da forma. Se você quiser adicionar a funcionalidade nova, manter a estrutura de login, mas né, a parte visual, você pode controlar toda ela com inteligência artificial. Então aqui eu vou clicar em criar site. Então beleza, a gente se criou o site em branco. Agora é o que a gente vai fazer, a gente vai criar o design para esse site. Então eu vou dizer aqui, gostaria de criar um tema para este site focado no tema doces de mel. É uma loja para todo o Brasil. Dei essa especificação, vou iniciar o processo. E assim, o que vai acontecer? Ele vai começar a ler as skills, ler as ferramentas que ele precisa para construir esse site. E aqui, né, ele tem essas skills aqui, que é a skill de construir site. Então isso é um diferencial dessa ferramenta, né? Por que eu vou usar essa ferramenta e não uma ferramenta como o ChatGPT, por exemplo? Essa ferramenta em particular, ela já vem toda pré-configurada para ajudar você a construir sites para essa plataforma, que é a plataforma WordPress. Então, e daí, né, dentro desse processo, ele vai fazer perguntas, sabe? Você quer uma loja completa, uma loja enxuta? Eu vou dizer uma loja enxuta. É, com os meus produtos, produtos demonstrativos. Ainda não tenho a foto dos meus produtos, então vou dizer demonstrativos. Então sempre que ele, né, precisar de contexto, ele vai abrir essas perguntas e vai pedir para você, né, direcionar o projeto. Então aqui ele tá fazendo a criação do meu projeto. Então as skills que eu falei, né, que que skills são essas? Se eu for na parte de configurações, [roncando] eu vou em skills, e lá em skills eu tenho, né, as skills gerais do WordPress, então são as skills que ele usa para construir site, fazer outras ações. E daí eu tenho as skills do repositório do WordPress. Então Studio CLI, é a de desenvolvimento de plugins, desenvolvimento de blogs, desenvolvimento de temas, né? São as scripts que já vêm por padrão. Se eu não quiser utilizar elas, simplesmente eu desabilito esses itens. Mas vou deixar aqui, né, como está. E, né, uma funcionalidade nova dessa versão é que antes de inicializar um projeto em si, ele vai criar um design system. Então aqui ele faz algumas sugestões. Então tem essa primeira sugestão aqui, que é aí depois tem uma mais moderna, tem essa, né, aqui azul e amarelo, e tem uma mais, né, que é uma mais colorida. Mas a gente tá falando de tema, né, de doce de leite. Então eu vou escolher a opção A. E esse design system em particular vai ficar, né, vivo no seu projeto e você pode acessar a qualquer momento. Algumas vezes, né, aqui no canal foi o que eu fiz. Eu já tinha criado o design system em outro lugar dentro do Cloud Code e depois trazia esse design system para dentro do projeto. Mas agora a gente tem essa funcionalidade, você pode fazer em outras ferramentas, né? Então ter algum pré trabalho aí e trazer essas informações ou fazer ela dentro do estúdio, OK? Então essa aí já é uma das novidades dessa versão 2.1, que isso não tinha anteriormente. O nosso agente chegou aqui é uma solução. Então agora o que é que ele tá perguntando? Ele tá perguntando algum tipo de organização que eu tenho de preferência para o meu site. Então ele tá, né, a partir de uma estrutura de de tiles, né, de de azulejos, ou então são quadrados que vão se encaixando. Daí a gente tem uma estrutura, né, com a Hero Image, como ele tá mostrando aqui, e a listagem de produtos e uma um estilo assim meio revista, né, que que seleciona aqui nessa opção C. Então, no caso, né, da eu estou entre a D e a B, nossas duas opções favoritas aqui. E outro recurso bem interessante é que dentro do WordPress Studio, ele tem essa ferramenta de geração de imagem. Então, essas imagens foram geradas. Aí depois se você quiser utilizar imagens reais, você vai lá e substitui. Formato aqui de hero image já é meu clássico. Eu vou sair um pouco dessa estrutura padrão e vou utilizar essa opção D com a sidebar. Então, vamos deixar o nosso agente trabalhando e vamos continuar aqui na nossa a nova interface. Então, um ponto bem interessante. Anteriormente, ele tinha essa ferramenta de publicar e tinha uma opção de sync, né, que você fazia o push e o pull da do seu site para produção. Eu fazia isso muito no meu blog. Então, por exemplo, tem um desenvolvimento local aqui. Quando a gente não tá com o site rodando ainda, ele fica com essa thumbnail. Cliquei, ele vai fazer a inicialização do meu projeto. E uma vez que ele rodar, ele vai abrir essa visualização paralela entre o meu agente e o meu site. E daí, né, se eu quiser publicar essa versão, eu posso vir aqui em publish e o que é que ele vai fazer? Ele vai perguntar para mim se eu quero enviar os os arquivos que eu tenho localmente para produção. Nesse ponto aqui, ele tá carregando minha conexão. Então, ele vai conectar com o meu wordpress.com e daí eu posso fazer um envio das minhas alterações diretamente da minha máquina. Então aqui, por exemplo, ó, se eu quiser resgatar algum tipo de informação, eu faço o pull, mas se eu quiser publicar, eu vou no publish. E aqui eu tenho a opção de conectar com outro site, mas não, vou deixar com o meu blog mesmo. Eu fiz algumas alterações localmente na parte visual. Então, eu vou aqui em publicar mudanças. Então, daí ele vai ter as seguintes opções, né, de enviar tudo. Então, vai ser banco de dados e arquivos, somente os arquivos ou somente a parte de conteúdo. Então, nesse ponto em particular, eu quero ver, deixa eu ver se eu consigo selecionar apenas uma pasta que é a minha pasta do tema que foi onde eu fiz a mudança. Então, por exemplo, eu fiz uma alteração no meu blog, então eu vou enviar somente os arquivos do meu blog que tá aqui na pasta local. Vou fazer um publish. Então ele vai publicar apenas esses arquivos. Quando ele finalizar esse processo, né, eu tenho o meu site em produção atualizado. E isso pode ser feito, né, para banco de dados. Então se você ah fez algumas alterações em produção e não tem essas informações localmente, aí você consegue fazer o processo reverso, né, que é a opção de pull daquelas informações. Então aqui ele, antes de fazer as alterações, ele faz um backup também. Então isso é bem legal, porque se alguma coisa ocorrer de errado, né, a gente tem um backup para restaurar. Então beleza, ele fez a publicação, recebi até a notificação aqui no meu Apple Watch, né, que ele sincronizou com sucesso e daí a gente tem as melhorias que eu fiz no código desse projeto já publicado em produção. E aqui a outra opção é essa opção de share. Essa opção de share se eu quiser criar um preview, né, criar um ambiente de staging para o meu cliente ver antes de eu publicar essas informações, simplesmente eu clico aqui em criar preview e ele vai gerar essa URL com essa versão que eu tenho aqui no meu ambiente local. E agora vamos voltar, né, para o nosso site Dolce de Midas. Então beleza, ele criou esse site em 11 minutos. Então tá aqui o site pronto, né, com os produtos, com algumas descrições. Tem a opção de adicionar no carrinho, ver o carrinho. Então tá lá já com o WooCommerce instalado. Então eu já tenho toda a estrutura de comércio pronta. Parte de login, de vendas, de usuários, tudo já implementado. E isso numa estrutura que já funciona há mais de 10 anos, que é a estrutura do comércio do WordPress. Então qual vai ser a facilidade dessa trabalhar com essa ferramenta? A facilidade de trabalhar com essa ferramenta agora, né, que a gente tem aqui uma identidade visual, eu tenho também o meu design system que eu posso fazer alterações e esse design system ele vai conter, né, os design tokens que vão ajudar ao meu site ficar consistente. Então se eu criar páginas novas ele vai seguir essa estrutura, não vai ficar uma linguiça, né, cheia de coisas diferentes, não. Ele vai seguir uma base estruturada para fazer a implementação das minhas páginas. Então isso é também muito importante. E se eu quiser voltar aqui na barra de endereço simplesmente eu clico e eu volto lá no meu localhost. Então nossa estrutura tá aqui na sidebar fixa como eu esperava, então tá lá essa primeira fase. Depois disso, né, o que eu posso fazer? Aqui ele vai dar pra gente os os próximos passos. Então posso revisar os produtos, configurar a parte de pagamento. Então se eu quiser fazer alguma melhoria na parte de pagamento eu posso fazer também. Também eu posso fazer tanto uma auditoria de performance quanto uma auditoria de SEO, simplesmente fazendo barra rank. Então nesse caso ele faz uma auditoria de SEO, eu posso aqui enviar, ele vai ler o meu site e vai apontar itens que podem melhorar o SEO do meu site. Então, né, dentro dessa estrutura a gente já tem parte de performance, de SEO, a parte de atualização de conteúdo com IA ou sem IA. Essa é a parte legal também, se você não quiser gastar créditos com inteligência artificial simplesmente você faz da maneira antiga, né, que você entra aqui no editor do site, então posso vir aqui, né WP admin, e a gente entra na parte de edição. Então se eu for, né, aqui no meu admin, então tem o commerce aqui, eu posso configurar toda a parte de vendas, tem também a parte de aparências que aqui a a já tem um tema que a gente criou, [limpando a garganta] então eu posso personalizar esse tema utilizando o editor de sites. Então, basicamente, né, eu posso clicar nesse item e editar como se fosse um item normal. Ah, então o pessoal reclama muito agora na na IA nessa essas sobrancelhas aqui que tem toda a página tem esse item de sobrancelha. Se eu não gostar desse elemento, posso selecionar ele, posso vir aqui e clicar em excluir, né? Então excluo essa informação. Se eu quiser, ah, não, realmente, né, não foi boa a alteração, a gente pode desfazer. Tem a nossa árvore de elementos aqui, então é bem organizada essa estrutura, então aqui, ó, na parte de header, se eu quiser trocar a ordem de elementos, simplesmente eu posso clicar e arrastar e trocar a ordem dos elementos. Então posso também tirar o botão de comprar dentro desse item, então deixa eu voltar aqui, colocar o botão novamente dentro da minha hero image. Se eu quiser trocar a imagem de background, eu posso simplesmente clicar e fazer um upload de uma nova imagem. Também é um processo bem simples. Então, né, essa é a parte da edição clássica, né, como todo mundo fazia aí há um bom tempo. A nossa Enquanto a gente falava do editor de sites, vamos voltar aqui para a auditoria, então a gente vai trocando para já otimizar o nosso tempo aqui. Então eu pedi para ele fazer essa auditoria de SEO e essa auditoria demorou aí 56 segundos. Então 56 segundos o que foi que ele fez? Então ele achou todos os itens que estavam já, né, corretos, mas também aí apontou uma lista de prioridades. Então tem todas as prioridades aqui. Eu tô com a fonte grande porque eu tô gravando, todo mundo reclama que a fonte do do meu da minha tela é muito pequena, mas aqui eu tenho, né, opções de definir as metas de inscrições, então definir o open graph, então eu posso resolver isso com o tema ou eu posso criar um meu próprio plugin. Então, por exemplo, aqui eu posso dizer, ó, crie um plugin para Open Graph and Tweet Cards. Então envio né, passo essa opção para ele e ele vai criar esse plugin e daí, né, eu resolvo um problema e já crio uma ferramenta que eu posso reutilizar em outros projetos, porque essa estrutura do plugin é totalmente reutilizável. Eu tô criando o meu próprio porque, né, pode ser uma opção, eu quero fazer algo leve, posso fazer algo personalizável, então posso, né, guiando a minha IA para fazer esse plugin da forma que eu queira, né, ou simplesmente só passar um prompt e aí com 1 2 minutos a gente a gente tem uma solução de SEO já pronta para gente aqui. Então, né, a outra parte legal também, né, que até o para guiar a construção do plugin, ele utiliza como referência o design system. Então, até, né, os plugins que eu crio já vão meio seguindo a linha de design dessa minha aplicação. Criou mesmo assim o plugin, então agora tem Minas Card Social. Se a gente for na parte de administração do meu site, na parte de plugins, a gente tem aqui o nosso [limpando a garganta] plugin de Open Graph. Então, eu posso dar mais opções para ela, né, continuar essa conversa e otimizar esse item em particular. Então, né, foi um problema que a gente resolveu em quanto tempo? A gente resolveu esse problema em 2 minutos. E se você quiser, por exemplo, eu mostrei o meu editor de sites, né, ah, eu não gosto dessa estrutura de edição de sites, mas eu gostaria de fazer algumas alterações na parte visual desse site. Como é que eu consigo fazer isso com inteligência artificial? Mostrando esse comando annotate, né, que eu acho muito interessante. Eu posso simplesmente selecionar o elemento e aí eu posso dizer, gostaria. Então, o que foi que eu fiz aqui, né, Eu pegue essa ferramenta, anotei, selecionei o elemento a qual eu quero enviar o prompt. Uma vez esse elemento selecionado, daí eu passo esse prompt. Então agora a gente tem um contexto, né? Do elemento selecionado e a alteração que eu quero fazer. Então basicamente, olha, a gente resolva. Eu quero reduzir a largura dessa sidebar, né? Então fica aí ao seu cargo. Tem um comando de anotação. Deixa eu só ver se ele foi. Agora sim, ele eu enviei ele. E agora o agente vai trabalhar. A gente tem o prompt que eu passei e a referência do elemento. E aí ele vai analisar esse elemento e vai ver como é que ele consegue resolver esse problema. Uma vez que ele fizer a atualização, a gente já vai ver em tempo real também. Então acho que isso é muito interessante também esse tipo de comportamento de fazer a alteração com o agente já ver aqui em tempo real essas alterações acontecendo. Alterações feitas aqui ele falou que reduziu, né, em 24% a largura. Então está um pouco menor. Estou gostando agora, né? 360 pixels. Então ele fez essa alteração e ajustou o espaçamento no meu design system. Então isso também ajuda a manter a consistência dos componentes por toda a minha aplicação. Então se eu mexer num elemento em particular que é relacionado essa alteração, ela vai se replicar em outras telas. Não preciso estar trabalhando com a IA em uma tela, depois em outra, em outra, em outra. [roncando] Não. Por ter uma estrutura que já é reutilizável, uma estrutura que já existe há anos, né? Uma essa estrutura inteligente dentro do Enterprise Components, a gente consegue fazer essa ferramenta simplesmente com um prompt alterar e replicar essas alterações em todos os lugares que esse componente é utilizado. Então [roncando][limpando a garganta] a gente pode aqui, né, sair do meu formato annotate. Então aqui, ó, nossos doces. Então notem que a sidebar está super consistente. Ele faz a navegação. E a gente tem aqui, por exemplo, a tela, né, dos dos meus clientes. Então, posso vir aqui e dizer, olha, melhore o visual da minha da tela minha conta. Mandei para ele, então pedi para ele melhorar essa tela seguindo o padrão do design system. Vamos ver se ele dá uma aparência melhor, né? Porque isso é é meio formato bem básico, né, desse componente central aqui da minha conta do commerce. Então ele não fez muitas alterações referentes a isso. Então vamos ver se ele consegue aí dar uma melhorada nesse fluxo. Então, ó, né, a parte bem interessante aqui, né, que ele vai refinar esses itens e aqui ele já reconhece, né, que esse formulário é uma função nativa do commerce. Então tem um jeito específico de trabalhar com o commerce que o nosso agente, ele já entende e já sabe como trabalhar. Então no esquema de de temas funciona de um jeito, o o esquema do commerce funciona de outro, mas esse agente é especializado nessa estrutura, então sabe trabalhar em ambas situações. Então aqui meu agente já está trabalhando, mas eu já queria ver qual era o resultado aproximado. Um refresh aqui e aqui a gente já tem a nova tela, né, de minha conta. Então bem melhor do que aquela aquela versão básica anterior. Tem alguns elementos aqui que ele ainda está trabalhando, né, então possivelmente ele vai corrigir nessa parte de espaçamento aqui e a altura desse componente, mas aqui já está, né, né, 100% melhor daquela versão básica que a gente tinha lá na versão anterior. Então esses são os itens, né, que a gente consegue fazer. Então a gente consegue trabalhar com o WordPress, com o commerce, a gente consegue fazer e-commerce, a gente consegue fazer landing page, isso tudo com o suporte dessa ferramenta. E depois se a gente quiser publicar, simplesmente eu clico em publicar, isso vai enviar, né? Então para se eu quiser fazer esse essa sincronização, é a primeira sincronização é com o wordpress.com, e o wordpress.com, ele tem uma série de planos, né, que são bem acessíveis. E voltando para o nosso projeto, né, ele finalizou, tá tudo bonitinho. Uma outra pergunta, né, que fizeram durante os workshops que eu fiz lá em BH, [roncando] foi o painel anterior. O painel anterior, ele meio que deu uma resumida aqui. Então todas as opções que a gente tinha antes de inicializar, reinicializar site, e aqui é um ponto bem interessante, né, abrir com. Então se eu quiser abrir com uma IDE, eh, por exemplo, ah, eu quero abrir o meu projeto no e trabalhar com o Studio eu consigo fazer isso. Eu quero abrir um terminal e fazer o controle, né, com o ou com o ou com o eu também consigo fazer isso. E na parte de ferramentas, a gente tem, né, o acesso ao navegador, ao admin, ao banco de dados. Então se eu não quiser hospedar na eu posso simplesmente baixar o banco de dados e enviar esse banco de dados para uma outra estrutura. E também aqui agora o também está acessível via ferramentas. E se eu quiser renomear o projeto, importar o projeto de outro lugar, isso é assunto para outro vídeo, mas nesse vídeo em particular era só para a gente cobrir essas novidades dessa nova interface do Então se você gostou de conteúdo como esse, siga o canal, deixe o seu like e nos vemos no próximo vídeo. Falou, tchau.

Assistir ao vídeo original no YouTube

Assuntos: E-commerce, Plataformas e marketplaces, Marketing e SEO, IA e tendências. Publicado no YouTube em 2026-11-06.

Seleção automática por assunto e idioma. O vídeo pertence ao canal de origem.