AI용 HTML 프롬프트

깔끔하게 변환되는 HTML을 AI가 작성하게 하세요

HTML이 AI 생성이라면 먼저 이 프롬프트 중 하나를 붙여넣으세요. 결과가 Elementor 제목·텍스트·이미지·버튼·컨테이너로 더 깔끔하게 변환됩니다.

범용 프롬프트

일반 페이지·상세 페이지·소개용. 전체 블록을 복사한 뒤 정보를 추가하세요.

Please generate a complete HTML page that I will import into Elementor, following these rules:

1. Output only a single complete HTML file starting from <!doctype html>, no extra explanation.
2. Put all styles inside one <style> tag in <head>, or as inline style. Do not link external CSS files.
3. Split the page into clear sections (hero, benefits, content, call to action), each wrapped in <section> or <div>.
4. Use <h1>–<h3> for headings, <p> for body text, and <a> or <button> for buttons.
5. Use <img> with clear, descriptive alt text. Do not embed images as Base64 data URLs — use a real hosted URL, or a simple placeholder src to fill in later.
6. Prefer flex or grid for layout; do not rely on absolute positioning.
7. For icons use Font Awesome classes, e.g. <i class="fas fa-shield-alt"></i> — not inline SVG and not emoji. They import as editable Elementor icon-library icons.
8. Do not include JavaScript, form submissions, carousels or popups.
9. Keep the DOM shallow: one wrapper <section> or <div> per block, no redundant nested divs.

Here is the page information:
(add your product/page topic, key selling points, and copy notes here)

제품 페이지 프롬프트

제품·상세 페이지용. 제품 구조를 강조합니다.

Generate a complete product detail HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), and include these sections:

1. Hero: product name <h1>, one-line selling point <p>, two buttons (Get a Quote / View Details), and a main product image placeholder.
2. Key benefits: 3–6 benefit cards, each with a title, description and a Font Awesome icon (e.g. <i class="fas fa-check"></i>), not inline SVG.
3. Specifications: a <table> listing key parameters.
4. Use cases: 2–3 image-and-text use cases.
5. Call to action: a heading and a button.

Product info:
(add product name, benefits, specs, target customer here)

랜딩 페이지 프롬프트

캠페인·단일 제품 페이지용. 전환 구조를 강조합니다.

Generate a complete marketing landing HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), with this structure:

1. Hero: big heading <h1> + subheading <p> + primary button + a visual placeholder.
2. Advantages: 3–4 advantage cards with Font Awesome icons (<i class="fas fa-..."></i>), not inline SVG.
3. Trust: testimonials or stats (as text, not inside images).
4. FAQ: 3–5 items as headings and paragraphs.
5. Closing CTA: one line + a button.

Campaign info:
(add the campaign topic, audience, selling points and goal here)

이미지 우선 프롬프트

이미지를 먼저(예: AI로) 만들고 그 이미지를 중심으로 HTML을 구성할 때 사용하세요.

Build a complete product detail HTML page for me to import into Elementor. I already have the images — use exactly the image URLs I provide below, one <img> per image, each with descriptive alt text. Do not invent extra images and do not use Base64 data URLs.

Rules:
1. Output only a single complete HTML file from <!doctype html>, no explanation.
2. All CSS inline or in one <style> tag; no external CSS.
3. Semantic tags: <h1>–<h3>, <p>, <button> or <a>.
4. Keep the DOM shallow: one wrapper per block, no redundant nested divs.
5. Flex or grid layout, no absolute positioning; Font Awesome classes for icons (<i class="fas fa-..."></i>), no inline SVG, no emoji; no JavaScript.

Sections: hero (product name + one-line pitch + button + hero image); 3–6 benefit cards (icon + title + text); a specs <table>; 2–3 image-and-text use cases; closing call to action.

My images (URL → what it shows):
- https://your-site.com/wp-content/uploads/hero.jpg → main product on white background
- https://your-site.com/wp-content/uploads/use-1.jpg → product in use, outdoors
- (add the rest)

Product info:
(add product name, selling points, specs, target customer here)

호스팅된 URL이 아직 없나요? URL 목록을 지우고 설명적인 alt를 남긴 뒤 「이미지」를 「빈 이미지 자리표시자」로 설정해 변환하고, Elementor에서 각 자리에 이미지를 채우세요.

AI 생성 이미지 처리

AI는 실제 이미지 파일을 HTML 텍스트에 넣을 수 없으므로, 이미지를 어떻게 참조하느냐가 Elementor 도달 여부를 좌우합니다.

최선 — 실제 URL: 먼저 이미지를 미디어 라이브러리에 업로드하고 그 URL을 AI에 줘서 HTML이 절대 https:// 주소를 가리키게 하세요. 절대 URL은 유지되어 수동 작업 없이 Elementor에 들어옵니다.
가장 간단 — 자리표시자: HTML에서 설명적인 alt가 있는 <img>를 아무거나 쓰고 「이미지: 빈 이미지 자리표시자」로 변환하세요. 각 자리가 alt를 캡션으로 유지하므로 Elementor에서 어떤 이미지를 넣을지 알 수 있습니다.
피하세요: Base64 내장 이미지와 상대·로컬 파일 경로 — 변환기는 기본적으로 이를 빈 자리표시자로 만듭니다.

이 규칙의 이유

AI 출력이 편집 가능한 Elementor 구성요소로 더 쉽게 변환되도록 합니다.

규칙	이점
인라인 스타일, 외부 CSS 없음	도구가 실제 스타일을 읽으므로 가져온 뒤 여백과 색상이 일치합니다.
명확한 섹션, 시맨틱 태그	제목/텍스트/이미지/버튼/컨테이너 구성요소로 나누기가 더 쉽습니다.
Font Awesome 아이콘 사용(인라인 SVG·이모지 금지)	편집 가능한 Elementor 아이콘 라이브러리 아이콘으로 가져옵니다. 사용자 지정 인라인 SVG는 HTML 블록으로만 남습니다. 참고: Font Awesome 아이콘은 도구 미리보기에 안 보여도 Elementor에서는 표시됩니다.
명확한 이미지 교체 안내	실제 이미지가 없어도 이미지 자리가 가져와지며 나중에 교체할 수 있습니다.
복잡한 스크립트 없음	가져오기가 더 안전하고 Elementor 오류가 줄어듭니다.
명확한 블록으로 나뉜 콘텐츠	가져온 뒤 구조가 좋아 이동·삭제·편집이 쉽습니다.

AI에 이런 것은 요청하지 마세요

변환이 불가능하진 않지만, 가져온 뒤 수동 수정이 필요할 가능성이 큽니다.

스크립트로 구동되는 캐러셀·팝업·토글.
이미지에 새겨 넣은 중요한 텍스트 — 텍스트는 페이지에 남겨 두세요.
아이콘으로 쓰인 이모지.
이상하게 깊은 중첩 — 섹션을 명확히 유지하세요.
로컬 디스크 경로를 가리키는 이미지 URL.
외부 파일에 의존하는 페이지 — 붙여넣을 때 스타일이나 콘텐츠가 사라집니다.