--- title: LolaCore para Bricks canonical_url: https://lolacore.com/pt-br/lolacore-for-bricks/ last_updated: 2026-08-22T11:21:52+00:00 plugin_version: 1.2.3 --- # LolaCore para Bricks LolaCore para Bricks · Addon gratuito · Requer LolaCore A Lola lê o seu sistema Bricks, e escreve dentro dele. ====================================================== A Lola lê e escreve o seu sistema de design, páginas, modelos e componentes: 65 habilidades, 69 quando o WooCommerce está ativo. Ela usa as classes globais e as variáveis que o seu site já tem, nomeia cada página que a mudança vai tocar e espera a sua confirmação antes de salvar qualquer coisa. [Baixe de graça →](/install-lolacore-for-bricks) [Veja o que a Lola faz →](#bricks-demo) ● 65 habilidades, 69 com WooCommerce● A Lola escreve com as suas classes e variáveis atuais● Funciona a partir do Claude, do wp-admin e do seu editor 01 · O problema A frase já está pronta. O que toma a tarde é ficar clicando. ------------------------------------------------------------ Você já sabe o que o site precisa antes de abrir qualquer coisa. Um padrão de nomes. Uma escala de espaçamento. Um hero de serviços que se repete em vinte páginas, com copy diferente em cada uma. Essa parte você resolve na cabeça, no caminho de casa. O que sobra é o transporte. Criar as variáveis uma a uma. Nomear a classe. Estilizar a primeira seção. Depois reconstruir a mesma estrutura mais dezenove vezes, trocando o título e o parágrafo de intro em cada passagem, e conferindo cada página depois de salvar. Um site herdado pesa de outro jeito. Classes que ninguém aplica mais. Pares quase iguais que saíram de uma tarde apressada. Variáveis definidas e nunca referenciadas. Estilos de tema cujas condições se sobrepõem. Componentes sem uma instância no site. Nada disso aparece no canvas, e nada disso se resolve arrastando. As duas situações têm a mesma raiz. Qualquer coisa que escreva num site Bricks sem ler o sistema antes deixa resíduo: um valor solto em pixels onde já existia uma classe global, um hex novo onde uma variável estava à espera. É isso que a Lola faz diferente. Ela mapeia as classes, as variáveis, os estilos de tema, os componentes e os modelos primeiro, e depois escreve com o que encontrou. Mesmo Bricks. Mesmas classes. Você parou de pular de painel em painel e começou a perguntar. 02 · Demo Como fica uma tarde de Bricks em conversa ----------------------------------------- - A classe btn-blue é usada no site inteiro. Renomeie para btn-primary sem quebrar o CSS. - btn-blue está em 34 elementos em 12 páginas, mais o modelo do header e o componente card-cta. A cobertura do índice está completa. Vou renomear a classe, atualizar cada referência e regenerar o CSS dessas 12 páginas. Prévia pronta. Confirma? - Vai. - Pronto. btn-blue agora é btn-primary. 12 páginas, modelo do header, um componente. CSS regenerado. O front vai bater no refresh. - Site novo. Cores da marca: #241828, #6E2E5C, #5BB87E. Títulos Fraunces, corpo Source Sans 3. Nomes: papel mais variante, como btn-primary. Monte um header para o site inteiro com logo, cinco links e um botão de Contato. - Vou gravar essa convenção de nomes, criar as variáveis de cor de uma vez, definir a tipografia no estilo de tema base e criar um modelo de header para o site inteiro. Primeiro quatro perguntas: logo da biblioteca de mídia? Os rótulos dos cinco links? URL de Contato? Header em todas as páginas, ou excluo o checkout? - O logo já está na biblioteca. Links: Início, Trabalho, Sobre, Diário, Contato. Contato vai para /contact. Site inteiro. - Prévia: 3 variáveis de cor, tipografia do estilo de tema, modelo de header cobrindo o site inteiro. Confirma o lote? - Clone o hero de Serviços de /services/branding nestas 20 páginas de serviços. Mesmo layout. Troque o título e o parágrafo de intro em cada uma. A lista vai na próxima mensagem. - Vou copiar essa seção com IDs de elemento novos e aplicar o copy de cada página. A prévia nomeia as 20 páginas. Vou rodar em lotes de 5. Confirma o primeiro lote? - Sim. - Lote 1 de 4 escrito: branding, web, identity, naming, packaging. Faltam 15. Continuo? 03 · Posicionamento A Lola escreve no vocabulário que o seu site já usa. ---------------------------------------------------- Se os seus botões rodam em `btn-primary`, essa é a classe que ela aplica. Se o espaçamento roda em variáveis, esses são os valores que ela busca. Se o site está nomeado em BEM ou em utilitários no estilo Tailwind, ela detecta o padrão e trabalha dentro dele, em vez de inventar um paralelo. Isso acontece porque ela trabalha a partir de três camadas ao mesmo tempo. 01 · O que você já construiu A Lola mapeia cada classe global, variável, estilo de tema, componente e modelo do site, e onde cada um é usado de fato. Antes de estilizar qualquer coisa, ela sabe se o que você está descrevendo já existe com outro nome. 02 · O que o modelo de IA já sabe O provedor de IA por trás da Lola traz um entendimento de layout, hierarquia, contraste e de como as pessoas leem uma interface. Pergunte qual dos dois tratamentos se segura na largura mobile e ela te dá uma resposta fundamentada, não um dar de ombros. 03 · Você A paleta, o tom e a tipografia vêm de você. A Lola vai dizer quando um laranja solto ficaria melhor servido pelo `btn-primary` que você já definiu. Se você quiser o laranja solto mesmo assim, ela aplica e lembra que foi você quem decidiu. A divisão com o builder aparece sozinha. Montar vinte cards de serviços com a mesma estrutura é longo de fazer à mão e curto de pedir, então a Lola assume. Ajustar o padding de um hero até ficar certo é rápido no Bricks e lento de descrever, então o builder fica aberto para isso. 04 · Habilidades Com este addon ativo, a Lola consegue fazer 65 coisas no seu site Bricks. ------------------------------------------------------------------------- O que vem a seguir é o que a Lola faz enquanto o addon está rodando. Ela faz as chamadas, mostra a prévia e espera. Você descreve o resultado. ### Ler o sistema · 13 habilidades A Lola diz qual versão do Bricks está rodando, como o CSS carrega e quantas classes, variáveis, componentes e modelos o site tem. Ela lista as suas classes globais com as categorias e o que está na lixeira. Rastreia onde uma classe é aplicada e nomeia as páginas, os modelos e os componentes que a carregam. Lê as suas variáveis e diz quais elementos referenciam cada uma. Lê os seus estilos de tema com as condições ligadas, e lista os seus componentes com a contagem de instâncias e onde cada instância mora. Resolve qual modelo vence numa página e explica por quê. Antes de tocar num tipo de elemento que ainda não tratou, ela lê o contrato de controles primeiro. ### Governar a biblioteca · 5 habilidades A Lola encontra as classes que nenhum elemento aplica mais. Encontra os pares que fazem o mesmo trabalho com dois nomes diferentes. Encontra variáveis que você definiu e nunca referenciou, e componentes deixados sem uma única instância. Encontra estilos de tema cujas condições se sobrepõem e brigam entre si. Ela te entrega o achado, depois o impacto com nomes de página, e espera você confirmar antes de escrever. ### Escrever o sistema de design · 11 habilidades A Lola cria uma classe e avisa quando já existe uma quase idêntica. Edita os ajustes de classe com a gramática completa de breakpoints e estados. Renomeia uma classe em todas as páginas, modelos e componentes numa passagem só, e depois regenera o CSS. Mescla duas classes e mostra quantos elementos e páginas se movem. Envia classes para a lixeira do Bricks e as tira de lá quando você muda de ideia. Cria e atualiza variáveis em lote, para uma paleta de marca cair numa confirmação só, e diz onde uma variável era referenciada antes de removê-la. Atualiza a paleta de cores do Bricks. Atualiza um estilo de tema, condições incluídas. E grava a sua convenção de nomes, depois informa que parte das suas classes atuais já a segue. ### Construir e reestilizar páginas · 17 habilidades A Lola lê a árvore de elementos de uma página, de um header ou de um footer. Insere qualquer elemento do Bricks, move, duplica um ramo com IDs novos ou remove um e os filhos. Aplica os 84 controles de estilo universais em qualquer breakpoint ou estado, então “mais padding no tablet” e “muda o hover” são uma frase cada. Anexa e desanexa classes globais num elemento só ou em vários de uma vez. Atualiza ajustes específicos de elemento com validação ao vivo: uma chave desconhecida para a escrita e volta com as válidas, a mais próxima primeiro. E guarda atalhos para os elementos que você pede todo dia, então “adicione um título e um botão abaixo do hero” chega como section, container, div, heading, text, image ou button com as classes do seu site já aplicadas. Quando você pede uma imagem, ela pega da sua biblioteca de mídia. ### Modelos · 5 habilidades A Lola cria headers, footers, modelos de conteúdo e arquivos, com as condições ligadas desde o começo. Escreve a árvore de elementos de uma área de modelo. Define onde um modelo se aplica e sempre pré-visualiza quantas páginas ele vai cobrir, listadas por nome, antes de salvar. Duplica um modelo com IDs de elemento novos, e envia um para a lixeira do WordPress quando você pede. ### Componentes · 6 habilidades A Lola transforma um ramo em componente e deixa uma instância no lugar. Define e edita propriedades, dizendo quantas instâncias vão mudar antes de confirmar. Edita a estrutura e o estilo do componente com essa mesma prévia. Insere uma instância, atualiza props e overrides, ou desanexa de volta para elementos comuns. Aninha componentes até dez de profundidade. ### Comportamento de página · 5 habilidades A Lola atualiza SEO de página, layout e CSS da página. Define as condições que decidem quando um elemento aparece, e as limpa quando você quer o elemento de volta para todo mundo. Liga as interações nativas do Bricks: click, hover, entrar no viewport, toggles off-canvas, scroll to, animações, eventos do WooCommerce. Lista as suas tags de dynamic data agrupadas por provedor, ACF incluído quando o ACF está ativo, e atribui uma a um ajuste de elemento a partir das tags que ela de fato encontrou no seu site. ### A mesma mudança em muitas páginas · 3 habilidades A Lola copia um ramo para vinte páginas com IDs de elemento novos e copy diferente em cada destino. Muda textos, imagens e links em cada elemento que bate por classe, por nome ou por posição. Adiciona ou remove classes globais nessas mesmas correspondências. Trabalha cinco páginas por vez, nomeia cada página de destino antes de começar e diz exatamente onde retomar se uma falhar. ### Layouts da loja, quando o WooCommerce está ativo · 4 habilidades a mais A Lola diz quais modelos a loja já tem e quais ainda faltam. Cria modelos de produto, arquivo, carrinho, checkout e conta com as condições. Insere elementos de produto pelo nome: título, preço, galeria, adicionar ao carrinho. E percorre com você um catálogo de 47 elementos WooCommerce inseríveis, agrupados por superfície, para você apontar um em vez de caçar. **Sobre a contagem.** O Bricks traz 86 elementos core e 48 de WooCommerce, e a Lola estiliza e configura qualquer um deles. O número fecha em 65 porque os controles de estilo do Bricks são universais: `_padding` é `_padding` em todo elemento, então ela trabalha essa gramática compartilhada em vez de precisar de uma habilidade por widget. Os atalhos existem para o punhado de elementos que aparecem em toda conversa. 05 · Onde você fala com ela Claude, wp-admin ou o seu editor. A mesma Lola, o mesmo site. ------------------------------------------------------------- Cada habilidade desta página chega à Lola pelos três caminhos, com a mesma prévia e o mesmo passo de confirmação. ### A partir do Claude Instale o LolaCore, clique no botão «Conectar com o Claude» no onboarding e autorize uma vez. A partir daí você abre o Claude e pede para ela renomear `btn-blue` para `btn-primary`, e ela faz isso dentro do seu Bricks, com as suas classes, depois que você confirma. Funciona com a conta Claude que você já tem, em qualquer plano, e a conexão é sua para revogar nos ajustes do Claude. [Como funciona a conexão com o Claude →](/pt-br/claude/) - Renomeie btn-blue para btn-primary neste site Bricks. Sem quebrar o CSS. - btn-blue está em 34 elementos em 12 páginas, mais o modelo do header e o componente card-cta. A cobertura do índice está completa. Vou renomear a classe, atualizar cada referência e regenerar o CSS dessas 12 páginas. Prévia pronta. Confirma? - Vai. - Pronto. btn-blue agora é btn-primary. 12 páginas, modelo do header, um componente. CSS regenerado. ### A partir do wp-admin O chat da Lola dentro do WordPress, com o provedor de IA que você configurou em Ajustes → Conectores. É aqui que o designer da sua equipe trabalha, no painel que já está aberto. ### A partir do seu editor Claude Code, Cursor ou qualquer cliente MCP. Ela inspeciona o uso da classe, pré-visualiza uma troca de nome com `dry_run` e escreve depois que você confirma, sem sair do editor. - Chegando ao site Bricks. - renomeie btn-blue para btn-primary. dry\_run primeiro - lolacore-bricks/get-class-usage - lolacore-bricks/rename-global-class - Aguardando confirmação… Isso importa mais no Bricks do que na maior parte dos domínios, porque quem constrói com Bricks muitas vezes é a mesma pessoa que vive no terminal. Um designer pode trabalhar com a Lola no painel do WordPress enquanto um desenvolvedor a conduz a partir de um IDE, no mesmo site de cliente, com a mesma memória por baixo. Uma nota sobre escala, já que este addon entrega a ela 65 habilidades a mais. O Claude lê um índice compacto do que a Lola sabe fazer, e não o catálogo técnico completo, então um site com uma dúzia de addons conecta e continua usável. 06 · Memória A próxima sessão não começa do zero. ------------------------------------ A Lola guarda um retrato vivo do site e o atualiza todo dia: quantas classes globais existem e quantas ficam sem uso, quais variáveis estão definidas, a convenção de nomes que vocês combinaram, o framework que ela detectou, as contagens de componentes e modelos, o modo de carregamento do CSS e até onde ela mapeou o site. Abra um site de cliente que você não toca há seis semanas e ela já carrega o contexto, então você descreve a mudança em vez de reaprender o site primeiro. Essa memória mora dentro da sua própria instalação WordPress, e decai com o tempo para o contexto velho apagar sozinho. Ela também chega com um skill e dois playbooks que se registram sozinhos. O skill, `lolacore-bricks-system-architect`, leva uma pergunta de Bricks à habilidade certa e a segura no vocabulário do próprio site quando ela escreve. Um playbook guia um site em branco: convenção, depois tokens, depois header e footer, depois modelos, depois as primeiras páginas, e ela faz no máximo quatro perguntas antes de propor a primeira escrita. O outro a orienta num site que outra pessoa construiu. 07 · Segurança Cada escrita mostra uma prévia, com os nomes das páginas. --------------------------------------------------------- A Lola roda as leituras na hora. Listar as suas classes, rastrear onde uma variável é referenciada, resolver qual modelo vence numa página: nada disso muda coisa alguma, então nada disso espera. Nas ações de escrita ela sempre para para a sua confirmação, e o que mostra é específico. Quando renomeia uma classe, nomeia as páginas, os modelos e os componentes afetados. Quando mescla duas classes, diz quantos elementos vão se mover. Quando define condições de modelo, lista as páginas que esse modelo vai cobrir. Numa operação em lote, nomeia cada página de destino antes de escrever a primeira. Quando uma mudança toca o sistema de design, ela regenera o CSS do site ao salvar, para o front bater com o que ela relatou. Mais duas coisas que valem saber. A Lola declara quanto do site ela mapeou: se o mapa está só 40% completo, ela diz isso antes de responder a uma pergunta que depende dele, porque achar classes “sem uso” contra um mapa parcial marcaria classes que estão bem em uso. E quando você entrega CSS personalizado para uma classe ou um estilo de tema, ela checa construções inseguras e recusa antes que qualquer coisa chegue ao seu banco de dados. 08 · Entre domínios Um modelo de produto quase nunca para no modelo. ------------------------------------------------ O campo que você quer mostrar numa página de produto precisa existir antes de poder aparecer. O pedido atrás desse produto mora noutra tela do admin. A Lola declara afinidade com os outros addons do LolaCore, então quando uma pergunta de Bricks cruza para outro domínio ela segue na mesma conversa. Com o [LolaCore para ACF](/pt-br/lolacore-for-acf/) ativo, ela cria o campo personalizado e o coloca no modelo Bricks sem você trocar de contexto. Com o [LolaCore WooCommerce Pro](/pt-br/woocommerce-pro/) ativo, monta o layout de produto aqui e conversa com você sobre os pedidos que isso gera ali. Com o [LolaCore para Polylang](/pt-br/lolacore-for-polylang/) ativo, traduz páginas Bricks para rascunhos de idioma ligados, com o layout intacto. Instale os domínios que o seu site realmente usa. A Lola roteia entre os que estão ativos. 09 · Requisitos O que você precisa ------------------ LolaCore2.7.0 ou superior, gratuito, ativo no mesmo site Bricks2.0 ou superior, licenciado à parte com a Bricks Builder WordPress7.0 ou superior, testado até 7.1 PHP8.1 ou superior WooCommerceOpcional. Ativo significa que a Lola ganha 4 habilidades a mais Este addon não tem página de ajustes nem uma chave de API própria. Ative o LolaCore, o Bricks e este addon, e a Lola descobre sozinha as habilidades de Bricks. Depois escolha como quer falar com ela. Clique em «Conectar com o Claude» no onboarding do LolaCore e autorize, e ela trabalha a partir da conta Claude que você já tem, em qualquer plano. Ou abra Ajustes → Conectores no WordPress, escolha o provedor e o modelo que preferir, e fale com ela no chat do wp-admin. O segundo botão do onboarding leva você até lá. Nos dois casos, a Lola no site aplica as mudanças, mostra a prévia e lembra. 10 · Para desenvolvedores Se você já trabalha via MCP --------------------------- A maior parte desta página fala com o designer que vive o Bricks como painéis. Três coisas importam se você o vive como uma API. Primeiro, cada habilidade roda contra as APIs públicas do Bricks. As classes, variáveis, estilos de tema, modelos e componentes que a Lola escreve são os mesmos registros que a UI do Bricks escreve, guardados do mesmo jeito, e o Bricks lê de volta sem um passo de tradução. Segundo, as 65 habilidades ficam expostas pelo servidor MCP empacotado do LolaCore em `lolacore-bricks/*`, prévia com `dry_run` incluída. Conecte Claude Code, Cursor ou qualquer cliente MCP a um site LolaCore e as ferramentas de Bricks aparecem junto com o resto da superfície do LolaCore. O addon precisa do LolaCore ativo, porque é o LolaCore que publica o servidor MCP. Terceiro, a Lola monta o mapa do site em lotes na instalação, com o progresso visível no chat, e o mantém depois. Qualquer resposta que descanse nesse mapa declara a cobertura, e você pode empurrar uma reconstrução em lotes até terminar. 11 · Perguntas frequentes Perguntas --------- Preciso do LolaCore para usar isto? Sim. Este addon dá à Lola o domínio Bricks. Instale e ative o LolaCore primeiro. Preciso do Bricks? Sim, o tema Bricks na versão 2.0 ou superior. O Bricks é um produto comercial e você licencia direto com a Bricks Builder. Onde o Bricks fica quando a Lola está instalada? O Bricks constrói e renderiza o site, exatamente como hoje. A Lola lê e escreve esses mesmos registros por conversa. O builder está a um clique quando você quiser trabalhar à mão. Quanto custa? Nada. Está no WordPress.org, sem chave de licença e sem assinatura para este addon. E se eu não uso WooCommerce? A Lola fica com as 65 habilidades de sistema de design, página, modelo e componente. As 4 habilidades de loja se registram quando o WooCommerce está ativo. Posso usar isto a partir do Claude? Sim, e é o caminho mais curto. Instale o LolaCore, clique em «Conectar com o Claude» no onboarding, autorize uma vez e peça ao Claude para trabalhar no seu site Bricks. Roda na conta Claude que você já tem, plano gratuito incluído. Funciona a partir do Cursor ou do Claude Code? Sim. A Lola leva as mesmas 65 habilidades a qualquer cliente MCP, com prévia `dry_run` antes de qualquer escrita. Preciso de uma chave de provedor de IA no WordPress? Só se você quiser o chat do wp-admin. Configure o provedor que preferir em Ajustes → Conectores e a Lola usa ali. Se conectar pelo Claude, o raciocínio roda na sua conta Claude e a Lola no site aplica as mudanças, mostra a prévia e lembra. O que acontece se a Lola ainda não terminou de mapear o site? Ela declara o percentual de cobertura junto com a resposta, e pode empurrar o mapeamento em lotes até completar. Em perguntas que precisam do retrato inteiro, como achar classes sem uso, ela diz isso primeiro. A Lola consegue rodar PHP ou JavaScript num elemento Code? Ela salva CSS personalizado em classes e estilos de tema, checando construções inseguras antes de chegar ao seu banco de dados. Código executável fica fora do alcance dela de propósito, por uma decisão de segurança. E se eu desativar o Bricks? A Lola mostra um aviso de admin e as habilidades de Bricks deixam de se registrar. O seu site continua no tema que estiver ativo. Tem alguma coisa para configurar? Ative os três plugins. A Lola usa o provedor de IA que você configurou no WordPress (Ajustes → Conectores), e este addon não adiciona chaves nem cotas próprias. Isto é afiliado à equipe do Bricks? Não. LolaCore para Bricks é um addon independente feito pelo LolaCore. Não é afiliado, endossado nem patrocinado pela Bricks Builder. A Lola lê o seu sistema Bricks, e escreve dentro dele. ------------------------------------------------------ Instale o addon e a Lola descobre sozinha as 65 habilidades de Bricks. Não há página de ajustes para configurar. Clique em «Conectar com o Claude» no onboarding e ela chega ao seu Bricks a partir da conta Claude que você já tem. [Baixe de graça →](/install-lolacore-for-bricks) Ainda não tem o LolaCore? O LolaCore é o plugin gratuito de IA que mora dentro do seu WordPress. Ele lê o seu site, age com a sua aprovação e lembra tudo entre sessões. [Baixe o LolaCore de graça →](https://wordpress.org/plugins/lolacore) O Bricks é desenvolvido pela Bricks Builder. LolaCore para Bricks é um addon independente feito pelo LolaCore. Não é afiliado, endossado nem patrocinado pela Bricks Builder. Você instala e licencia o Bricks por conta própria.