Divi 5 스킬
Divi 5 페이지 레이아웃을 유효한 빌더 마크업으로 빌드합니다. 이 스킬은 모듈식입니다. 이 파일은 관련 참조 파일로 라우팅합니다. 작업에 필요한 파일만 읽으십시오.
🚦 페이지 빌드 시 필수 워크플로우 (건너뛰지 마세요)
페이지 빌드는 단계별로 제한된 다단계 프로세스입니다. 마크업 생성이나 divi_create_page / POST /pages 호출로 바로 건너뛰지 마십시오.
▸대기란: 메시지를 끝내고 사용자의 실제 답변을 기다리는 것을 의미합니다. 질문을 한 다음 스스로 답변하지 말고, 같은 턴에 다음 단계로 진행하지 마십시오. 질문 → 멈춤 → 사용자가 응답할 때까지 기다림 → 그다음 계속 진행하십시오. 모델이 여기서 가장 많이 실수하는 부분입니다. 진정으로 일시 중지해야 합니다.
- ▸대기 — 연결 모드. 질문: 라이브 사이트(Divi Connect) 또는 JSON 전용? 라이브 사이트인 경우 사이트 URL + API 키를 받아
/design-system을 호출하여 실제 토큰을 로드하십시오. (컨텍스트에서 명확하다면 생략 가능.) - ▸대기 — 발견 (거의 항상 필요). 집중된 일괄 질문 세트를 하십시오. 목표/제안, 대상, 핵심 섹션, 브랜드/어조, 필수 콘텐츠, 기본 CTA(약 4~6개, 각각 합리적인 기본값 포함)를 질문한 후 멈추고 기다리십시오. 짧거나 일반적인 브리핑만으로는 이 단계를 건너뛰기에 충분하지 않습니다. 예를 들어 *"비즈니스 멘토를 위한 페이지를 만들어 줘"*라는 요청은 제안, 대상, 섹션, CTA에 대해 아무것도 알려주지 않으므로, 추측하지 말고 반드시 먼저 질문해야 합니다. 발견을 건너뛰는 경우는 사용자가 진정으로 상세한 요구사항을 제공했거나 명시적으로 "그냥 진행해/그냥 만들어 줘"라고 말한 경우뿐입니다.
- ▸대기 — 페이지 계획 + 승인. 간결한 페이지 계획(의도 → 내러티브 → 섹션 청사진 → 어떤 디자인 시스템 토큰이 무엇에 매핑되는지)과 한 줄짜리 자체 비평을 제시한 후, 사용자에게 승인 또는 변경을 명시적으로 요청하고 멈추십시오. 사용자가 승인할 때까지 마크업을 생성하거나 페이지를 만들지 마십시오. 피드백이 있으면 수정하고 다시 제시한 후 다시 질문하십시오. 승인될 때까지 반복하십시오.
- 빌드. 승인 후에만: 실제 토큰을 사용하여 마크업을 생성한 다음 (라이브 모드에서) 페이지를 만들고 URL을 반환하십시오. 생성 후에도 사용자가 변경을 요청할 수 있습니다. 변경 사항을 적용(수정/재생성)하고 재확인하십시오.
이것이 이 스킬의 핵심 가치입니다. 계획이 사고이고 마크업은 단지 기록일 뿐입니다. 전체 방법:
DIVI5-DESIGN-PROCESS.md(읽으십시오). 유일한 우회 경로: 사용자가 명시적으로 "그냥 만들어 줘/그냥 진행해"라고 말하는 경우입니다. 이때는 명시된 가정으로 진행하되, 먼저 두 줄짜리 계획을 보여주십시오.
빌드 중 참조 파일
- 항상:
DIVI5-BASE.md(규칙/유효성 검사) +DIVI5-DESIGN-PROCESS.md(위 워크플로우). - 라이브 게시:
DIVI5-CONNECT.md(디자인 시스템 토큰, 페이지 생성). - 모듈/스타일링: 아래 표의 기능 파일들.
- 실제 디자인 토큰으로 마크업 생성; 생성 전에 BASE에 대해 유효성 검사.
⚠️ 중요 블록-마크업 규칙 (이 규칙을 어기면 조용히 빈 페이지가 생성됩니다)
다른 것을 읽지 않더라도 이것들은 읽으십시오. Divi Connect 서버 측 유효성 검사기는 규칙 1-3을 위반하는 페이지를 거부하므로, 이를 올바르게 처리하면 실패 호출을 피할 수 있습니다.
-
절대로 모듈 속성을
attrs로 감싸지 마십시오. 블록 이름 뒤의 JSON이 속성 객체 자체입니다.title/content/module/builderVersion을 최상위 레벨에 두십시오. ❌<!-- wp:divi/heading {"attrs":{"title":{...}}} /-->→ 빈 페이지 렌더링 ✅<!-- wp:divi/heading {"title":{...},"builderVersion": "5.11.1"} /-->(attrs는 프리셋 정의에서만 키입니다. 모듈 블록에서는 절대 사용하지 마십시오.) -
divi/text콘텐츠 키는 정확히content입니다.body나text를 사용하지 마십시오. ❌"body":{...}또는"text":{...}→ 빈 페이지 렌더링 ✅"content":{"innerContent":{"desktop":{"value":"<p>Hello.</p>"}}}(body는bodyFont스타일링 그룹으로만 존재합니다.) -
value안의 HTML은 RAW로 전달됩니다 (<p>,<strong>). 절대 사전 이스케이프하지 마십시오. ❌"value":"<p>Hello.</p>"✅"value":"<p>Hello.</p>"또한 비ASCII 타이포그래피는 숫자 HTML 엔티티(em-dash—, 둥근 따옴표’/“/”)로 작성하거나, 일반 ASCII(-, 직선 따옴표)를 사용하십시오. claude.ai 커넥터는 원시 멀티바이트 문자를 손상시키고, JSON\uXXXX이스케이프는 전송 중에 그대로 유지되어 방문자가 문자 그대로 읽게 됩니다. -
모든 모듈에는
"builderVersion": "5.11.1"이 필요합니다. 자체 폐쇄 모듈은/-->로 끝납니다. 전체 페이지를<!-- wp:divi/placeholder --> ... <!-- /wp:divi/placeholder -->로 감싸십시오.
전체 상세 내용 및 기타 모든 함정: DIVI5-BASE.md를 읽으십시오.
⚠️ 라이브 사이트(Divi Connect / MCP)에 연결된 경우
divi_get_design_system을 호출한 후에는 해당 토큰으로 빌드해야 합니다:
- 모든 색상 및 크기(색상뿐만 아니라 글꼴 크기, 간격, 패딩/마진, 여백, 반경)에 정확한
token문자열(전체$variable(...)$)을 사용하십시오. 일치하는 토큰이 있을 때 값을 하드코딩하지 마십시오(제목이 가장 많이 위반합니다. 절대 제목 크기를 하드코딩하지 마십시오). - 절대
gvid-/gcid-ID를 임의로 생성하지 마십시오./design-system이 반환한 ID만 사용하십시오(정확히 해당 ID가 반환되지 않는 한gcid-primary,gcid-heading,gvid-h1등은 사용하지 마십시오). 임의로 생성된 ID는 아무것도 렌더링하지 않습니다. label로 매칭하십시오(예:H1 Desktop,Section Gap). 토큰이 없는 경우에만 하드코딩하십시오. 자세한 내용:DIVI5-CONNECT.md§3.
참조 파일
| 파일 | 읽어야 할 때 |
|---|---|
DIVI5-BASE.md | 항상 — 핵심 규칙, 중첩, 유효성 검사, 일반적인 실수 |
DIVI5-DESIGN-PROCESS.md | 항상 — JSON 전 발견 질문 + 페이지 계획 |
DIVI5-CONNECT.md | Divi Connect 플러그인을 통한 실시간 게시(디자인 시스템 읽기, 페이지 생성, 토큰 관리) |
DIVI5-WORDPRESS.md | REST API / WP-CLI를 통한 프로그래매틱 페이지 생성 |
DIVI5-LAYOUT.md | 페이지 구조(섹션/행/열/그룹), 그리드 레이아웃, 글로벌 레이아웃 |
DIVI5-STYLING.md | 배경, 그라디언트 + 그라디언트 변수, 간격, 테두리, 타이포그래피, 텍스트 효과, 종횡비, 프레이밍, 변수, 의사 클래스 |
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 — 저장 형식, attrs 키 경로, REST 엔드포인트, 도우미 |
DIVI5-PATTERNS.md | 실제 레이아웃 패턴 + Python 생성 도우미 |
DIVI5-COVERAGE.md | 확인된 것, 소스 검증된 것, 테스트되지 않은 것 |
일반적인 조합
항상 BASE + DESIGN-PROCESS로 시작하십시오.
- 랜딩 페이지 (JSON 전용): BASE + DESIGN-PROCESS + LAYOUT + STYLING + MODULES-CONTENT + PATTERNS
- 빌드 후 실시간 게시 (Divi Connect): + CONNECT
- REST API / WP-CLI를 통한 가져오기: + WORDPRESS
- 인터랙티브 섹션: + MODULES-INTERACTIVE
- 미디어/비디오: + MODULES-MEDIA
- 가격표/카운터: + MODULES-DATA
- 블로그/포트폴리오/테마 빌더: + MODULES-DYNAMIC
- WooCommerce 스토어: + MODULES-WOOCOMMERCE
버전
V0.6.9 — 빌더 버전 5.11.1 (Divi 5.11.x 라인을 추적). 생성된 마크업의 builderVersion 스탬프는 사이트의 Divi 버전과 일치해야 합니다(현재 설치에서는 "5.11.1", 이전 값은 하위 호환성을 통해 가져오기 가능).
🆕 v0.6.9는 디자인의 글꼴 크기를 추측이 아닌 질문으로 만듭니다 — Figma에서 내보낸 벡터 PDF 또는 사용자가 캔버스 너비를 명시한 스크린샷은 정확한 유형 크기를 전달하므로, 참조 사다리에 네 번째 단계와 글꼴 크기 게이트가 추가됩니다. 한 번 질문한 다음 size_policy exact | snap | presets를 divi_build_page에 전달하고 어떤 것이 사용되었는지 알려주십시오. DIVI5-CONNECT §"Match a reference" 참조.
🆕 v0.6.8은 Divi 5.11의 네 가지 새 모듈 — divi/charts, divi/gravity-forms, divi/imagely-gallery, divi/payment-button — 과 기본 backdrop-filter 제어를 다룹니다. 이는 이 스킬의 이전 버전에서 가르쳤던 Custom CSS 우회를 대체합니다. DIVI5-BASE §0 참조.
🚨 v0.6.7은 모바일 스타일링이 조용히 아무것도 하지 않게 만드는 중단점 오류를 수정했습니다: phoneWide는 기본적으로 비활성화되어 CSS를 생성하지 않습니다 — phone을 사용하십시오. DIVI5-BASE §6 참조.
v0.6.6은 정확성 릴리스입니다(동일한 5.9.0 스키마). 0.6.5 이하에서 다운로드된 모든 복사본에서 잘못되었던 두 가지 규칙을 수정합니다. 두 규칙 모두 조용히 실패합니다. text-transform은 capitalization에서만 옵니다(레거시 style:["uppercase"]는 깔끔하게 저장되지만 아무것도 생성하지 않음), htmlAttributes는 중단점을 가장 바깥쪽에 둡니다 — htmlAttributes.desktop.value.{id, class}, htmlAttributes.id.desktop.value가 아니며, 이는 id를 전혀 렌더링하지 않아 페이지 내 #anchor 링크가 작동하지 않습니다. 또한 리치 텍스트 이스케이프를 한 곳에서 처리(원시 HTML, 절대 사전 이스케이프 금지)하고, 기본 크기 조정 → 정렬 제어를 문서화했습니다(module.decoration.sizing.{bp}.value.alignSelf). 이는 이전 sizing.alignment 프리셋 경로를 대체합니다. DESIGN-PROCESS §11b(빌드 후 폴리시 패스), §8c(랜딩 페이지 휴리스틱), CONNECT §5(참조 일치), PRESETS §1b(4단계 프리셋 모델), Adobe Typekit / 비-Divi 글꼴 섹션(STYLING)이 추가되었습니다.
v0.6.5는 Divi Connect 플러그인 번들 내부에서만 제공되었습니다(리포지토리 릴리스나 다운로드로는 제공되지 않음). 해당 노트는 여기에 통합되었습니다: 리치 텍스트 콘텐츠는 원시 HTML로 문서화됩니다. JSON \uXXXX 이스케이프가 MCP 전송에서 그대로 유지되기 때문입니다(이전 지침은 페이지에 리터럴 \u003cp\u003e를 넣었습니다). 같은 이유로 비ASCII 타이포그래피는 숫자 HTML 엔티티(—)를 사용합니다.
v0.6.4는 문서화/패턴 릴리스입니다(동일한 5.9.0 스키마): Divi Connect 섹션 패턴 라이브러리 — 28개의 기성, 대부분 네이티브 섹션 패턴(히어로, 가격표, 사용후기, FAQ, 타임라인, 갤러리, 비교 등)과 divi_list_patterns 발견 도구, divi_build_page 충실도 프리미티브(배경 이미지 오버레이, 배지, 기울이기, 가변 글꼴)를 문서화합니다. v0.6.3은 Divi 5.9.0 그리드 편집기(gridOffsetRules; LAYOUT §5b)와 "AI 디자인 클리셰 피하기" 섹션을 추가했습니다. v0.6.0은 툴팁 모듈 + 고급 텍스트 스타일링 배치를 추가했습니다. 실제 렌더링 테스트 vs 소스 검증에 대한 내용은 DIVI5-COVERAGE.md를 참조하십시오.