Skill Divi 5
Crie layouts de página Divi 5 como marcação válida do builder. A skill é modular: este arquivo redireciona para arquivos de referência focados — leia apenas os que a tarefa necessita.
🚦 Fluxo de trabalho OBRIGATÓRIO para construir uma página (NÃO pule)
Construir uma página é um processo com portões e várias etapas. Não vá direto para a marcação nem chame divi_create_page / POST /pages.
▸ESPERAR significa: termine sua mensagem e aguarde a resposta real do usuário. NÃO faça perguntas e as responda você mesmo, e NÃO prossiga para a próxima etapa no mesmo turno. Pergunte → pare → deixe o usuário responder → depois continue. Este é o erro #1 que os modelos cometem aqui — você precisa genuinamente pausar.
- ▸ESPERAR — Modo de conexão. Pergunte: site ao vivo (Divi Connect) ou apenas JSON? Se for ao vivo, obtenha a URL do site + a chave da API e chame
/design-systempara carregar tokens reais. (Pule se for óbvio pelo contexto.) - ▸ESPERAR — Descoberta (quase sempre obrigatória). Faça um conjunto focado e em lote de perguntas — objetivo/oferta, público, seções principais, marca/tom, conteúdo obrigatório, CTA principal (~4–6, cada uma com um valor padrão sensato), então PARE e aguarde. Um briefing curto ou genérico não é suficiente para pular esta etapa — por exemplo, "crie uma página para um mentor de negócios" não lhe diz nada sobre a oferta, público, seções ou CTA, então você DEVE perguntar primeiro, não adivinhar. Só pule a descoberta se o usuário deu requisitos genuinamente detalhados OU disse explicitamente "vai em frente / apenas construa".
- ▸ESPERAR — Plano da Página + aprovação. Apresente um Plano da Página conciso por escrito (intenção → narrativa → blueprint das seções → quais tokens do sistema de design mapeiam para quê) e uma autocrítica de uma linha. Então peça explicitamente ao usuário para aprovar ou alterá-lo, e PARE. Não gere marcação nem crie a página até que eles aprovem. Se eles derem feedback, revise, reapresente e pergunte novamente — itere até a aprovação.
- Construir. Somente após a aprovação: gere a marcação (usando tokens reais), então crie a página (modo ao vivo) e retorne a URL. Após criar, o usuário ainda pode pedir alterações — aplique-as (edite/recrie) e reconfirme.
Este é o valor central da skill — o plano é o pensamento; a marcação é apenas transcrição. Método completo:
DIVI5-DESIGN-PROCESS.md(leia-o). A ÚNICA exceção: o usuário diz explicitamente "apenas construa / vai em frente" — então prossiga com suposições declaradas, ainda mostrando um plano de duas linhas primeiro.
Arquivos de referência para ler ao construir
- Sempre:
DIVI5-BASE.md(regras/validação) +DIVI5-DESIGN-PROCESS.md(o fluxo de trabalho acima). - Publicação ao vivo:
DIVI5-CONNECT.md(tokens do sistema de design, criar página). - Módulos/estilização: os arquivos de funcionalidade na tabela abaixo.
- Gere marcação com tokens de design reais; valide contra BASE antes de criar.
⚠️ Regras CRÍTICAS de marcação de bloco (estas causam páginas EM BRANCO silenciosamente)
Leia estas mesmo se não ler mais nada. O validador do lado do servidor do Divi Connect rejeita páginas que quebram as regras 1-3, então acertá-las evita uma chamada falha.
-
NUNCA envolva atributos de módulo em
attrs. O JSON após um nome de bloco é o objeto de atributos — coloquetitle/content/module/builderVersionno nível superior. ❌<!-- wp:divi/heading {"attrs":{"title":{...}}} /-->→ renderiza VAZIO ✅<!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /-->(attrsé apenas uma chave em definições de predefinição — nunca em blocos de módulo.) -
A chave de conteúdo de
divi/texté exatamentecontent— nuncabodyoutext. ❌"body":{...}ou"text":{...}→ renderiza VAZIO ✅"content":{"innerContent":{"desktop":{"value":"<p>Hello.</p>"}}}(bodyexiste apenas como o grupo de estilizaçãobodyFont.) -
HTML em um
valueé passado CRU (<p>,<strong>) -- nunca o pré-escapade. ❌"value":"<p>Hello.</p>"✅"value":"<p>Hello.</p>"Também escreva tipografia não-ASCII como entidades HTML numéricas (travessão—, aspas curvas’/“/”), OU use ASCII simples (-, aspas retas). O conector claude.ai corrompe caracteres multibyte brutos, e um escape JSON\uXXXXsobrevive ao transporte literalmente, então o visitante o lê textualmente. -
Todo módulo precisa de
"builderVersion": "5.11.1". Módulos de fechamento automático terminam com/-->. Envolva a página inteira em<!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->.
Detalhes completos + todas as outras armadilhas: leia DIVI5-BASE.md.
⚠️ Quando conectado a um site ao vivo (Divi Connect / MCP)
Após chamar divi_get_design_system, você DEVE construir com seus tokens:
- Use a string
tokenexata (toda a$variable(...)$) para cada cor E tamanho — tamanhos de fonte, espaçamento, padding/margin, gaps, raio — não apenas cores. Não codifique um valor quando existir um token correspondente (cabeçalhos são o #1 infrator — nunca codifique tamanhos de cabeçalho). - Nunca invente um ID
gvid-/gcid-. Use apenas IDs retornados por/design-system(semgcid-primary,gcid-heading,gvid-h1, etc. a menos que esse ID exato tenha sido retornado). IDs inventados renderizam como nada. - Combine por
label(ex.:H1 Desktop,Section Gap). Codifique apenas quando nenhum token existir. Detalhe:DIVI5-CONNECT.md§3.
Arquivos de referência
| Arquivo | Quando ler |
|---|---|
DIVI5-BASE.md | Sempre — regras principais, aninhamento, validação, erros comuns |
DIVI5-DESIGN-PROCESS.md | Sempre — perguntas de descoberta + planejamento de página antes do JSON |
DIVI5-CONNECT.md | Publicação ao vivo via plugin Divi Connect (ler sistema de design, criar páginas, gerenciar tokens) |
DIVI5-WORDPRESS.md | Criar páginas programaticamente via API REST / WP-CLI |
DIVI5-LAYOUT.md | Estrutura de página (seção/linha/coluna/grupo), layout Grid, layout global |
DIVI5-STYLING.md | Fundos, gradientes + variáveis de gradiente, espaçamento, borda, tipografia, efeitos de texto, proporção de aspecto, enquadramento, variáveis, pseudo-classes |
DIVI5-MODULES-CONTENT.md | heading, text, button, image, blurb, CTA, testimonial, team, icon, divider, code, fullwidth-header, svg, timeline, breadcrumbs |
DIVI5-MODULES-INTERACTIVE.md | accordion, toggle, tabs, contact-form, signup, dropdown, contact-form-7, interactions |
DIVI5-MODULES-MEDIA.md | video, gallery, slider, video-slider, lottie, audio, before-after-image |
DIVI5-MODULES-DATA.md | counters, pricing tables, social, table-of-contents, instagram-feed |
DIVI5-MODULES-DYNAMIC.md | blog, portfolio, post modules, menu, search, login, sidebar, comments, map, Loop Builder |
DIVI5-MODULES-WOOCOMMERCE.md | shop, single-product, cart & checkout modules |
DIVI5-PRESETS.md | Global Presets — formato de armazenamento, caminhos de chave attrs, endpoint REST, ajudantes |
DIVI5-PATTERNS.md | Padrões de layout do mundo real + geradores Python auxiliares |
DIVI5-COVERAGE.md | O que é confirmado, verificado por fonte e não testado |
Combinações típicas
Sempre comece com BASE + DESIGN-PROCESS.
- Landing page (apenas JSON): BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
- Construir e publicar ao vivo (Divi Connect): + CONNECT
- Importar via API REST / WP-CLI: + WORDPRESS
- Seções interativas: + MODULES-INTERACTIVE
- Mídia/vídeo: + MODULES-MEDIA
- Preços / contadores: + MODULES-DATA
- Blog / portfólio / Theme Builder: + MODULES-DYNAMIC
- Loja WooCommerce: + MODULES-WOOCOMMERCE
Versão
V0.6.9 — Builder Version 5.11.1 (rastreia a linha Divi 5.11.x). O carimbo builderVersion na marcação gerada deve corresponder à versão Divi do seu site ("5.11.1" nas instalações atuais; valores mais antigos ainda importam via retrocompatibilidade).
🆕 v0.6.9 torna os tamanhos de fonte de um design uma pergunta, não um palpite — um PDF vetorial exportado do Figma, ou uma captura de tela cuja largura do canvas o usuário informa, CARREGA tamanhos de tipo exatos, então a escada de referência ganha um quarto degrau e uma porta de tamanho de fonte: pergunte uma vez, depois passe size_policy exact | snap | presets para divi_build_page e informe qual foi usado. Veja DIVI5-CONNECT §"Match a reference".
🆕 v0.6.8 cobre os quatro novos módulos do Divi 5.11 — divi/charts, divi/gravity-forms, divi/imagely-gallery, divi/payment-button — e seu controle nativo de backdrop-filter, que substitui a solução alternativa de CSS personalizado que versões anteriores desta Skill ensinavam. Veja DIVI5-BASE §0.
🚨 v0.6.7 corrigiu um erro de breakpoint que fazia a estilização móvel silenciosamente não fazer nada: phoneWide está desabilitado por padrão e não emite CSS — use phone. Veja DIVI5-BASE §6.
v0.6.6 é uma versão de correção (mesmo esquema 5.9.0). Ela corrige duas regras que estavam erradas em todas as cópias baixadas na v0.6.5 ou anterior, ambas falham silenciosamente: text-transform vem apenas de capitalization (o legado style:["uppercase"] armazena de forma limpa e não emite nada), e htmlAttributes toma o breakpoint mais externo — htmlAttributes.desktop.value.{id, class}, não htmlAttributes.id.desktop.value, que não renderiza id algum, então os links de âncora #anchor na página não vão a lugar nenhum. Ela também fixa o escape de rich text em um lugar (HTML bruto, nunca pré-escapado) e documenta o controle nativo de Sizing → Alignment (module.decoration.sizing.{bp}.value.alignSelf), que substitui o caminho de predefinição sizing.alignment antigo. Adiciona DESIGN-PROCESS §11b (passada de polimento pós-construção) e §8c (heurísticas de landing page), CONNECT §5 (match a reference), PRESETS §1b (o modelo de predefinição de quatro níveis), e uma seção Adobe Typekit / fontes não-Divi (STYLING).
v0.6.5 foi enviada apenas dentro do pacote do plugin Divi Connect — nunca como release de repositório ou download — então suas notas estão incorporadas aqui: conteúdo rich text é documentado como HTML bruto porque um escape JSON \uXXXX sobrevive ao transporte MCP literalmente (a orientação antiga colocava \u003cp\u003e literal na página), e tipografia não-ASCII usa entidades HTML numéricas (—) pelo mesmo motivo.
v0.6.4 é uma versão de documentação/patrões (mesmo esquema 5.9.0): documenta a biblioteca de padrões de seção do Divi Connect — 28 padrões de seção prontos, em grande parte nativos (hero, pricing, testimonials, FAQ, timeline, gallery, comparison, e mais) além da ferramenta de descoberta divi_list_patterns e dos primitivos de fidelidade divi_build_page (sobreposições de imagem de fundo, badges, tilt, fontes variáveis). v0.6.3 adicionou o Grid Editor do Divi 5.9.0 (gridOffsetRules; LAYOUT §5b) e uma seção "evite clichês de design de IA". v0.6.0 adicionou o módulo Tooltip + o lote Advanced Text Styling. Veja DIVI5-COVERAGE.md para o que é testado com renderização real vs. verificado por fonte.