AI HTML 提示词

让 AI 写出能干净转换的 HTML

如果你的 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 列表，保留描述性 alt 文字，转换时把「图片」选为「空图片占位」——然后在 Elementor 里逐个填图。

处理 AI 生成的图片

AI 无法把真实图片文件嵌进 HTML 文本，所以图片以什么方式引用，决定了它们能不能进 Elementor。

最佳——真实链接：先把图片传到媒体库，把这些 URL 给 AI，让 HTML 指向绝对 https:// 图片地址。绝对地址会被保留，图片无需手动操作就进 Elementor。
最省事——占位：让 HTML 用任意带描述性 alt 的 <img>，转换时选「图片：空图片占位」。每个空槽会把 alt 存成说明文字，你就知道在 Elementor 里该往哪填哪张图。
避免：Base64 内嵌图片、相对或本地文件路径——默认情况下转换器会把它们变成空占位。

为什么这样约定

它们能让 AI 输出更容易转换成可编辑的 Elementor 组件。

约定	好处
内联样式,不用外部 CSS	工具会读取真实样式,导入后间距和颜色都能对上。
分区清晰,语义化标签	更容易拆分为独立的标题/文本/图片/按钮/容器组件。
用 Font Awesome 图标，不用内联 SVG 或 emoji	它们会作为可编辑的 Elementor 图标库图标导入；自定义内联 SVG 只能保留为 HTML 块。注意：Font Awesome 图标在 Elementor 里能正常显示，即使工具预览里看不到。
清晰的图片替换说明	即使没有真实图片,图片位也能导入,之后再替换。
不用复杂脚本	导入更安全,Elementor 报错更少。
内容拆成清晰的区块	导入后结构更好,更易移动、删除与编辑。

尽量别让 AI 生成这些

并非不能转换,但导入后更可能需要手动修正。

脚本驱动的轮播、弹窗或开关。
把重要文字烤进图片里——请把文字保留在页面上。
用 emoji 当图标。
奇怪的深层嵌套——请保持分区清晰。
指向本地磁盘路径的图片 URL。
依赖外部文件的页面,粘贴后会丢失样式或内容。