divilovewp/divi5-skill

Divi 5 Skill

Construye diseños de página Divi 5 como marcado válido del builder. La habilidad es modular: este archivo redirige a archivos de referencia específicos — lee solo los que necesite cada tarea.

🚦 Flujo de trabajo OBLIGATORIO para construir una página (NO saltar)

Construir una página es un proceso restringido y de múltiples pasos. No saltes directamente al marcado ni llames a divi_create_page / POST /pages.

▸ESPERAR significa: termina tu mensaje y espera la respuesta real del usuario. NO hagas preguntas y luego te las respondas tú mismo, ni continúes al siguiente paso en el mismo turno. Pregunta → detente → deja que el usuario responda → luego continúa. Esto es lo que más fallan los modelos aquí — debes pausar genuinamente.

1. ▸ESPERAR — Modo de conexión. Pregunta: ¿sitio en vivo (Divi Connect) o solo JSON? Si es en vivo, obtén la URL del sitio + la clave API y llama a /design-system para cargar los tokens reales. (Sáltalo si es obvio por el contexto.)
2. ▸ESPERAR — Descubrimiento (casi siempre requerido). Haz un conjunto enfocado y agrupado de preguntas — objetivo/oferta, audiencia, secciones clave, marca/tono, contenido indispensable, CTA principal (~4–6, cada una con un valor predeterminado sensato), luego DETENTE y espera. Un brief corto o genérico no es suficiente para saltarse esto — p. ej., "crea una página para un mentor de negocios" no te dice nada sobre la oferta, audiencia, secciones o CTA, así que DEBES preguntar primero, no adivinar. Solo omite el descubrimiento si el usuario ha dado requisitos genuinamente detallados O ha dicho explícitamente "solo hazlo / constrúyelo".
3. ▸ESPERAR — Plan de página + aprobación. Presenta un Plan de Página conciso y por escrito (intención → narrativa → plano de secciones → qué tokens del sistema de diseño se asignan a qué) y una autocrítica de una línea. Luego pide explícitamente al usuario que lo apruebe o lo cambie, y DETENTE. No generes marcado ni crees la página hasta que él lo apruebe. Si da retroalimentación, revisa, vuelve a presentar y pregunta de nuevo — itera hasta que esté aprobado.
4. Construir. Solo tras la aprobación: genera el marcado (usando tokens reales), luego crea la página (modo en vivo) y devuelve la URL. Después de crear, el usuario aún puede pedir cambios — aplícalos (editar/recrear) y vuelve a confirmar.

Este es el valor central de la habilidad: el plan es el pensamiento; el marcado es solo transcripción. Método completo: DIVI5-DESIGN-PROCESS.md (léelo). La ÚNICA excepción: el usuario dice explícitamente "solo constrúyelo / solo hazlo" — entonces procede con suposiciones declaradas, mostrando primero un plan de dos líneas.

Archivos de referencia que leer al construir

• Siempre: DIVI5-BASE.md (reglas/validación) + DIVI5-DESIGN-PROCESS.md (el flujo de trabajo anterior).
• Publicación en vivo: DIVI5-CONNECT.md (tokens del sistema de diseño, crear página).
• Módulos/estilos: los archivos de características en la tabla siguiente.
• Genera marcado con tokens de diseño reales; valida contra BASE antes de crear.

⚠️ Reglas CRÍTICAS de marcado en bloque (estas causan páginas en BLANCO silenciosamente)

Léelas incluso si no lees nada más. El validador del lado del servidor de Divi Connect rechaza páginas que rompen las reglas 1-3, así que acertarlas evita una llamada fallida.

1. NUNCA envuelvas atributos de módulo en attrs. El JSON después de un nombre de bloque es el objeto de atributos: coloca title/content/module/builderVersion en el nivel superior. ❌ <!-- wp:divi/heading {"attrs":{"title":{...}}} /--> → renderiza VACÍO ✅ <!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /--> (attrs solo es una clave en definiciones de preajustes — nunca en bloques de módulo.)

2. La clave de contenido de divi/text es exactamente content — nunca body ni text. ❌ "body":{...} o "text":{...} → renderiza VACÍO ✅ "content":{"innerContent":{"desktop":{"value":"<p>Hola.</p>"}}} (body solo existe como el grupo de estilo bodyFont.)

3. El HTML en un value se pasa CRUDO (<p>, <strong>) — nunca lo pre-escapas. ❌ "value":"<p>Hola.</p>" ✅ "value":"<p>Hola.</p>" Además, escribe la tipografía no ASCII como entidades HTML numéricas (raya —, comillas curvas ’/“/”), O usa ASCII simple (-, comillas rectas). El conector de claude.ai corrompe los caracteres multibyte crudos, y un escape \uXXXX de JSON sobrevive al transporte textualmente, por lo que el visitante lo lee literalmente.

4. Cada módulo necesita "builderVersion": "5.11.1". Los módulos autocerrados terminan con /-->. Envuelve toda la página en <!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->.

Detalle completo + todos los demás errores: lee DIVI5-BASE.md.

⚠️ Cuando esté conectado a un sitio en vivo (Divi Connect / MCP)

Después de llamar a divi_get_design_system, DEBES construir con sus tokens:

• Usa la cadena exacta del token (todo $variable(...)$) para cada color Y tamaño — tamaños de fuente, espaciado, padding/margin, espacios, radio — no solo colores. No codifiques un valor cuando exista un token coincidente (los encabezados son el #1 infractor — nunca codifiques tamaños de encabezado).
• Nunca inventes un ID gvid-/gcid-. Solo usa IDs devueltos por /design-system (no gcid-primary, gcid-heading, gvid-h1, etc. a menos que ese ID exacto haya sido devuelto). Los IDs inventados no renderizan nada.
• Empareja por label (p. ej., H1 Desktop, Section Gap). Codifica solo cuando no exista ningún token. Detalle: DIVI5-CONNECT.md §3.

Archivos de referencia

Archivo	Cuándo leer
DIVI5-BASE.md	Siempre — reglas principales, anidamiento, validación, errores comunes
DIVI5-DESIGN-PROCESS.md	Siempre — preguntas de descubrimiento + planificación de página antes del JSON
DIVI5-CONNECT.md	Publicación en vivo mediante el plugin Divi Connect (leer sistema de diseño, crear páginas, gestionar tokens)
DIVI5-WORDPRESS.md	Crear páginas programáticamente mediante API REST / WP-CLI
DIVI5-LAYOUT.md	Estructura de página (sección/fila/columna/grupo), diseño de cuadrícula, diseño global
DIVI5-STYLING.md	Fondos, degradados + variables de degradado, espaciado, borde, tipografía, efectos de texto, relación de aspecto, encuadre, variables, pseudoclases
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	Preajustes globales — formato de almacenamiento, rutas de clave attrs, endpoint REST, ayudantes
DIVI5-PATTERNS.md	Patrones de diseño del mundo real + ayudantes de generación Python
DIVI5-COVERAGE.md	Qué está confirmado, verificado por fuente y no probado

Combinaciones típicas

Siempre empieza con BASE + DESIGN-PROCESS.

• Página de destino (solo JSON): BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
• Construir y publicar en vivo (Divi Connect): + CONNECT
• Importar mediante API REST / WP-CLI: + WORDPRESS
• Secciones interactivas: + MODULES-INTERACTIVE
• Multimedia/video: + MODULES-MEDIA
• Precios / contadores: + MODULES-DATA
• Blog / portafolio / Theme Builder: + MODULES-DYNAMIC
• Tienda WooCommerce: + MODULES-WOOCOMMERCE

Versión

V0.6.9 — Versión del Builder 5.11.1 (sigue la línea Divi 5.11.x). La marca builderVersion en el marcado generado debe coincidir con la versión de Divi de tu sitio ("5.11.1" en instalaciones actuales; valores anteriores aún se importan mediante compatibilidad hacia atrás). 🆕 v0.6.9 convierte los tamaños de fuente de un diseño en una pregunta, no una suposición — un PDF vectorial exportado desde Figma, o una captura de pantalla cuyo ancho de lienzo el usuario indique, SÍ lleva tamaños de tipo exactos, por lo que la escalera de referencia gana un cuarto peldaño y una puerta de tamaño de fuente: pregunta una vez, luego pasa size_policy exact | snap | presets a divi_build_page e informa cuál se usó. Consulta DIVI5-CONNECT §"Coincidir con una referencia". 🆕 v0.6.8 cubre los cuatro nuevos módulos de Divi 5.11 — divi/charts, divi/gravity-forms, divi/imagely-gallery, divi/payment-button — y su control nativo de backdrop-filter, que reemplaza la solución con CSS personalizado que enseñaban versiones anteriores de esta Habilidad. Consulta DIVI5-BASE §0. 🚨 v0.6.7 corrigió un error de punto de interrupción que hacía que los estilos móviles no hicieran nada silenciosamente: phoneWide está deshabilitado por defecto y no emite CSS — usa phone. Consulta DIVI5-BASE §6. v0.6.6 es una versión de corrección (mismo esquema 5.9.0). Corrige dos reglas que eran incorrectas en todas las copias descargadas en 0.6.5 o anteriores, ambas fallan silenciosamente: text-transform solo proviene de capitalization (el legado style:["uppercase"] se almacena limpiamente y no emite nada), y htmlAttributes toma el punto de interrupción más externo — htmlAttributes.desktop.value.{id, class}, no htmlAttributes.id.desktop.value, que no renderiza ningún id por lo que los enlaces #anchor dentro de la página no llevan a ninguna parte. También resuelve el escape de texto enriquecido en un solo lugar (HTML crudo, nunca pre-escapado) y documenta el control nativo de Tamaño → Alineación (module.decoration.sizing.{bp}.value.alignSelf), que reemplaza la antigua ruta de preajuste sizing.alignment. Añade DESIGN-PROCESS §11b (pulido posterior a la construcción) y §8c (heurísticas de página de destino), CONNECT §5 (coincidir con una referencia), PRESETS §1b (el modelo de preajustes de cuatro niveles), y una sección Adobe Typekit / fuentes no Divi (STYLING). v0.6.5 se distribuyó solo dentro del paquete del plugin Divi Connect — nunca como lanzamiento de repositorio o descarga — por lo que sus notas están incluidas aquí: el contenido de texto enriquecido se documenta como HTML crudo porque un escape \uXXXX de JSON sobrevive al transporte de MCP textualmente (la guía antigua ponía \u003cp\u003e literal en la página), y la tipografía no ASCII usa entidades HTML numéricas (—) por la misma razón. v0.6.4 es una versión de documentación/patrones (mismo esquema 5.9.0): documenta la biblioteca de patrones de sección de Divi Connect — 28 patrones de sección listos para usar, mayoritariamente nativos (héroe, precios, testimonios, FAQ, línea de tiempo, galería, comparación y más) más la herramienta de descubrimiento divi_list_patterns y las primitivas de fidelidad de divi_build_page (superposiciones de imagen de fondo, insignias, inclinación, fuentes variables). v0.6.3 añadió el Editor de Cuadrícula de Divi 5.9.0 (gridOffsetRules; LAYOUT §5b) y una sección "evitar clichés de diseño de IA". v0.6.0 añadió el módulo Tooltip + el lote de Estilos de Texto Avanzados. Consulta DIVI5-COVERAGE.md para saber qué está probado con renderizado real frente a verificado por fuente.