第36篇：附录——常用AI提示词模板集

好的提示词是高效使用 AI 的钥匙——收藏这份模板集，让 AI 成为你写 HTML 的得力助手。

学习目标

  • 掌握针对 HTML 开发场景的 AI 提示词编写方法
  • 获得 7 个可直接复用的提示词模板
  • 理解提示词中变量和约束条件的作用
  • 学会根据实际需求调整模板以获取更精准的 AI 输出
  • 建立个人提示词库的管理习惯

核心知识点

一、提示词编写的基本原则

在介绍具体模板之前，先理解编写高质量 HTML 提示词的四个核心原则。

1. 角色设定（Role）

明确告诉 AI 它应该扮演什么角色，这会影响输出的专业程度。

不推荐：

帮我写一个网页

推荐：

你是一位经验丰富的前端开发工程师，精通 HTML5 语义化和可访问性最佳实践。
2. 上下文提供（Context）

给出足够的背景信息，让 AI 理解你的需求场景。

不推荐：

写一个表单

推荐：

我正在开发一个用户注册页面，目标用户是中文互联网用户，需要收集用户名、邮箱、密码和同意条款。
3. 约束条件（Constraints）

明确限制输出的范围和要求，避免 AI 发散。

常用约束：

  • 使用 HTML5 语义化标签
  • 包含完整的文档结构（DOCTYPE、html、head、body）
  • 所有图片必须包含 alt 属性
  • 表单控件必须有 label 关联
  • 不使用任何内联样式
  • 不使用已废弃的标签
4. 输出格式（Format）

指定你希望 AI 以什么形式返回结果。

示例：

请输出完整的 HTML 代码，使用代码块包裹。代码中需要包含必要的注释说明每个部分的作用。

二、提示词模板集

以下模板均遵循"角色 + 任务 + 约束 + 输出格式"的结构，你可以直接复制使用，只需替换 {{变量}} 部分。

模板一：基础页面结构

适用场景： 快速生成一个符合标准的 HTML5 页面骨架。

模板文本：

你是一位前端开发专家。请为我创建一个完整的 HTML5 页面，满足以下要求：

页面主题：{{页面主题}}
页面语言：{{语言，如 zh-CN}}
页面标题：{{浏览器标签页标题}}

要求：
- 包含完整的文档结构（DOCTYPE、html、head、body）
- head 中包含 charset、viewport 和 description
- body 中使用语义化标签（header、main、footer）
- 在 main 中添加一段关于主题的简介文字
- 所有内容使用 {{语言}} 书写
- 不使用任何 CSS 框架
- 代码中包含必要的注释

请直接输出完整的 HTML 代码。

变量说明：

变量 示例值 说明
{{页面主题}} “个人博客首页” 页面的核心内容主题
{{语言}} “zh-CN” HTML 文档语言
{{浏览器标签页标题}} “我的博客 - 记录学习与生活” title 标签内容

示例输出（变量填充后）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="个人博客首页，记录学习与生活点滴">
  <title>我的博客 - 记录学习与生活</title>
</head>
<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/posts">文章</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- 页面主要内容区域 -->
    <section>
      <h2>欢迎来到我的博客</h2>
      <p>这里记录我在前端开发学习过程中的心得体会、技术笔记和生活感悟。
         希望我的分享能够帮助到同样在学习路上的你。</p>
    </section>
  </main>

  <footer>
    <p>© 2024 我的博客. 保留所有权利。</p>
  </footer>
</body>
</html>

模板二：语义化博客文章页

适用场景： 生成一篇结构完整的博客文章页面，注重语义化和 SEO。

模板文本：

你是一位精通 HTML5 语义化和 SEO 的前端工程师。
请为我创建一个博客文章详情页，文章信息如下：

文章标题：{{文章标题}}
发布时间：{{发布时间}}
作者：{{作者名}}
文章分类：{{分类}}
文章标签：{{标签列表，如 "HTML, CSS, 入门"}}

文章内容（Markdown 格式）：
{{文章内容}}

要求：
- 使用 article 标签包裹文章主体
- 使用 time 标签标注发布时间（datetime 属性）
- 使用 header 包裹文章标题和元信息
- 使用 section 组织文章的不同章节
- 使用 aside 放置相关文章推荐
- 图片必须包含描述性 alt 文本
- 代码块使用 pre + code 标签
- 包含面包屑导航（nav + ol）
- 输出完整 HTML 文档

变量说明：

变量 示例值
{{文章标题}} “深入理解 HTML5 语义化标签”
{{发布时间}} “2024-06-01”
{{作者名}} “张三”
{{分类}} “前端基础”
{{标签列表}} “HTML5, 语义化, SEO”
{{文章内容}} （Markdown 格式的正文）

使用示例：

文章标题：深入理解 HTML5 语义化标签
发布时间：2024-06-01
作者：张三
文章分类：前端基础
文章标签：HTML5, 语义化, SEO

文章内容：
## 什么是语义化
语义化是指使用恰当的 HTML 标签...

## 常用语义化标签
- header
- nav
- main
- article

模板三：复杂表单

适用场景： 生成包含多种控件、分组和验证的复杂表单。

模板文本：

你是一位注重可访问性的前端开发专家。
请为我创建一个完整的 {{表单用途}} 表单。

需要收集的信息：
{{字段列表}}

要求：
- 每个输入字段必须有对应的 label，通过 for 属性关联
- 使用 fieldset + legend 对相关字段进行分组
- 使用正确的 input type（email、tel、date 等）
- 添加适当的 required、pattern、minlength 等验证属性
- 错误提示区域使用 role="alert"
- 表单有明确的 action 和 method 属性
- 使用 button type="submit" 作为提交按钮
- 包含表单说明文字
- 输出完整 HTML 文档

变量说明：

变量 示例值
{{表单用途}} “用户注册”
{{字段列表}} 见下方示例

字段列表示例：

1. 用户名（必填，3-20位字母数字）
2. 邮箱（必填，邮箱格式验证）
3. 手机号（必填，中国大陆手机号格式）
4. 密码（必填，至少8位，包含大小写字母和数字）
5. 确认密码（必填，需与密码一致）
6. 性别（单选：男/女/保密）
7. 兴趣爱好（多选：编程/设计/音乐/运动/阅读）
8. 个人简介（多行文本，选填，最多200字）
9. 同意用户协议（必填勾选）

示例输出片段：

<form action="/register" method="POST" novalidate>
  <!-- 基本信息分组 -->
  <fieldset>
    <legend>基本信息</legend>

    <div class="form-field">
      <label for="reg-username">用户名 *</label>
      <input
        type="text"
        id="reg-username"
        name="username"
        required
        minlength="3"
        maxlength="20"
        pattern="[a-zA-Z0-9]+"
        aria-describedby="username-help"
      >
      <small id="username-help">3-20位字母数字</small>
    </div>

    <div class="form-field">
      <label for="reg-email">邮箱 *</label>
      <input
        type="email"
        id="reg-email"
        name="email"
        required
        placeholder="example@mail.com"
      >
    </div>
  </fieldset>

  <!-- 其他分组... -->

  <div class="form-actions">
    <button type="submit">提交注册</button>
  </div>
</form>

模板四：数据表格

适用场景： 生成结构良好的数据展示表格，支持表头、分页和摘要。

模板文本：

你是一位前端开发专家。请为我创建一个数据展示表格。

表格用途：{{用途}}
表格数据：
{{表头}} | {{数据行}}

要求：
- 使用 table、thead、tbody、tfoot 结构
- 表头使用 th 并添加 scope="col"
- 如果表格有标题，使用 caption 标签
- 对关键列添加 data-label 属性（便于移动端响应式）
- 使用 colgroup 定义列分组
- 金额/数字列右对齐，文本列左对齐
- 输出完整 HTML 文档

变量说明：

变量 示例值
{{用途}} “商品库存管理”
{{表头}} “商品名称, 分类, 库存数量, 单价, 状态”
{{数据行}} （具体数据，可选）

示例输出：

<table>
  <caption>商品库存清单</caption>
  <colgroup>
    <col span="1" style="width: 30%;">
    <col span="1" style="width: 20%;">
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 20%;">
    <col span="1" style="width: 15%;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">商品名称</th>
      <th scope="col">分类</th>
      <th scope="col">库存数量</th>
      <th scope="col">单价</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="商品名称">无线鼠标</td>
      <td data-label="分类">电脑配件</td>
      <td data-label="库存数量">156</td>
      <td data-label="单价">￥89.00</td>
      <td data-label="状态"><span class="status-in">在售</span></td>
    </tr>
    <!-- 更多数据行... -->
  </tbody>
</table>

模板五：图片画廊

适用场景： 生成一个包含多张图片的画廊页面，注重性能和可访问性。

模板文本：

你是一位注重性能和可访问性的前端开发专家。
请为我创建一个图片画廊页面。

画廊主题：{{主题}}
图片数量：{{数量}} 张
图片信息：
{{图片列表（文件名 + 描述）}}

要求：
- 使用 figure + figcaption 包裹每张图片
- 所有图片包含描述性 alt 文本
- 图片使用 width 和 height 属性防止布局偏移
- 非首屏图片使用 loading="lazy"
- 使用 picture 元素提供响应式图片（可选）
- 画廊使用 ul > li 列表结构
- 输出完整 HTML 文档

变量说明：

变量 示例值
{{主题}} “2024年春季旅行”
{{数量}} “6”
{{图片列表}} 见下方

图片列表示例：

1. photo1.jpg - 杭州西湖断桥残雪
2. photo2.jpg - 苏州园林假山
3. photo3.jpg - 乌镇水乡夜景
4. photo4.jpg - 黄山日出云海
5. photo5.jpg - 宏村徽派建筑
6. photo6.jpg - 千岛湖全景

示例输出：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2024年春季旅行 - 图片画廊</title>
</head>
<body>
  <header>
    <h1>2024年春季旅行</h1>
    <p>记录江南之行的美好瞬间</p>
  </header>

  <main>
    <ul class="gallery">
      <li>
        <figure>
          <img
            src="images/photo1.jpg"
            alt="杭州西湖断桥上覆盖着薄薄的积雪，湖面平静如镜"
            width="800"
            height="600"
            loading="eager"
          >
          <figcaption>杭州西湖 · 断桥残雪</figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img
            src="images/photo2.jpg"
            alt="苏州园林中精心布置的太湖石假山，周围环绕着翠竹"
            width="800"
            height="600"
            loading="lazy"
          >
          <figcaption>苏州园林 · 假山翠竹</figcaption>
        </figure>
      </li>
      <!-- 更多图片... -->
    </ul>
  </main>
</body>
</html>

模板六：落地页（Landing Page）

适用场景： 生成一个营销或产品介绍的单页落地页。

模板文本：

你是一位前端开发专家和营销页面设计师。
请为我创建一个产品落地页。

产品名称：{{产品名}}
产品卖点：{{卖点列表}}
目标用户：{{用户群体}}
行动号召（CTA）：{{CTA 文案}}

页面需要包含的模块：
1. 顶部导航栏（Logo + 导航链接 + CTA 按钮）
2. 英雄区（大标题 + 副标题 + CTA + 产品图）
3. 特性介绍区（3-4个核心卖点卡片）
4. 用户评价区（2-3条用户证言）
5. 价格/方案区（如有）
6. 页脚（链接 + 版权信息）

要求：
- 使用完整的语义化 HTML5 结构
- 每个 section 有清晰的标题层级
- 按钮使用 button 标签并指定 type
- 图片包含 alt 描述
- 链接文本有意义，避免"点击这里"
- 输出完整 HTML 文档

变量说明：

变量 示例值
{{产品名}} “TaskFlow 任务管理”
{{卖点列表}} “1. 智能任务分配 2. 团队协作 3. 数据可视化 4. 跨平台同步”
{{用户群体}} “中小型团队、自由职业者”
{{CTA 文案}} “免费开始使用”

模板七：非语义化代码修复

适用场景： 将一段旧的、全是 div 的代码改造为语义化 HTML。

模板文本：

你是一位 HTML5 语义化和可访问性专家。
请将以下非语义化代码重构为符合现代标准的 HTML。

原始代码：
```html
{{原始代码}}

重构要求：

  • 将所有无语义的 div 替换为恰当的 HTML5 语义化标签
  • 确保标题层级连续（h1-h6）
  • 为所有图片添加 alt 属性
  • 为所有表单控件添加 label
  • 修复任何嵌套错误
  • 移除所有内联样式，改用 class（CSS 类名可保留）
  • 添加必要的 ARIA 属性
  • 输出重构后的完整 HTML 代码
  • 在代码后列出你做的主要改动
**变量说明：**

| 变量 | 说明 |
|------|------|
| `{{原始代码}}` | 需要重构的旧代码 |

**使用示例：**

原始代码：

<div class="wrapper">
  <div class="top-bar">
    <div class="logo">MySite</div>
    <div class="menu">
      <div class="item"><a href="/">Home</a></div>
    </div>
  </div>
  <div class="content">
    <div class="heading">Welcome</div>
    <div class="text">This is my website.</div>
  </div>
</div>

**示例输出：**

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MySite</title>
</head>
<body>
  <header class="top-bar">
    <div class="logo">MySite</div>
    <nav class="menu">
      <ul>
        <li class="item"><a href="/">Home</a></li>
      </ul>
    </nav>
  </header>

  <main class="content">
    <h1>Welcome</h1>
    <p>This is my website.</p>
  </main>
</body>
</html>

主要改动说明：

  1. <div class="wrapper"> → 移除，使用 body 作为顶层容器
  2. <div class="top-bar"> → <header>
  3. <div class="menu"> → <nav> + <ul> + <li>
  4. <div class="content"> → <main>
  5. <div class="heading"> → <h1>
  6. <div class="text"> → <p>
  7. 补全完整的文档结构（DOCTYPE、html、head）

三、提示词优化技巧

技巧 1：分步输出

对于复杂页面，可以让 AI 分步骤输出，便于审核。

请分两步输出：
第一步：先输出 HTML 结构（只写标签，不写具体内容）
第二步：填充具体内容
这样我可以先审核结构是否正确。
技巧 2：要求解释

让 AI 解释它为什么这么写，帮助你学习。

请在代码的关键部分添加注释，解释为什么选择这个标签而不是其他标签。
技巧 3：迭代优化

不要期望一次提示就得到完美结果，学会迭代。

整体结构不错，但请做以下修改：
1. 将 hero 区域的 div 改为 section
2. 为所有按钮添加 aria-label
3. 将价格表格的表头固定
技巧 4：指定参考标准

引用权威标准，让 AI 输出更规范。

请确保代码符合以下标准：
- W3C HTML5 规范
- WCAG 2.1 AA 级可访问性标准
- 语义化 HTML 最佳实践（参考 HTML5 Doctor）

动手练习

练习 1：填充模板变量

使用"模板三：复杂表单"，为以下场景填充变量并生成提示词。

场景： 一个在线活动报名表单，需要收集：姓名、手机号、邮箱、参加日期（从三个日期中选一个）、饮食偏好（素食/荤食/清真/无特殊要求）、是否需要停车位（是/否）、备注（多行文本）。

参考答案 
你是一位注重可访问性的前端开发专家。
请为我创建一个完整的在线活动报名 表单。

需要收集的信息：
1. 姓名（必填）
2. 手机号（必填，中国大陆手机号格式）
3. 邮箱（必填）
4. 参加日期（单选：2024-07-15 / 2024-07-16 / 2024-07-17）
5. 饮食偏好（单选：素食/荤食/清真/无特殊要求）
6. 是否需要停车位（单选：是/否）
7. 备注（多行文本，选填，最多200字）

要求：
- 每个输入字段必须有对应的 label，通过 for 属性关联
- 使用 fieldset + legend 对相关字段进行分组
- 使用正确的 input type（email、tel、date 等）
- 添加适当的 required、pattern 等验证属性
- 错误提示区域使用 role="alert"
- 表单有明确的 action 和 method 属性
- 使用 button type="submit" 作为提交按钮
- 包含表单说明文字
- 输出完整 HTML 文档

练习 2：组合模板

假设你要创建一个"个人作品集网站"，需要包含：首页介绍、项目展示（画廊形式）、联系表单。请描述你会如何组合使用本附录中的哪些模板，以及每个模板需要填充的变量。

参考答案

组合方案：

  1. 基础页面结构（模板一）

    • 页面主题：“个人作品集”
    • 语言：zh-CN
    • 页面标题：“张三的作品集 - 前端开发工程师”

  2. 图片画廊（模板五）

    • 画廊主题：“精选项目展示”
    • 图片数量：4 张
    • 图片列表：项目截图 + 项目描述

  3. 复杂表单（模板三）

    • 表单用途：“联系与合作”
    • 字段：姓名、邮箱、合作类型（单选）、项目描述（多行文本）

  4. 非语义化修复（模板七）

    • 用于将 AI 生成的初稿中可能存在的 div 汤问题修复

执行顺序：

  1. 先用模板一生成整体骨架
  2. 用模板五生成项目展示部分，嵌入 main 中
  3. 用模板三生成联系表单，作为最后一个 section
  4. 整体用模板七的思路审核一遍语义化

练习 3：优化提示词

以下是一个效果不佳的提示词，请根据本章所学原则进行优化。

原始提示词：

帮我写个网页，要有一个表格，放一些产品信息，还有几张图片，
最好好看一点，谢谢。
参考答案

优化后提示词：

你是一位前端开发专家，精通 HTML5 语义化和可访问性最佳实践。

请为我创建一个产品展示页面，包含以下内容：

产品信息表格：
- 表头：产品名称、分类、价格、库存状态
- 示例数据：
  1. 无线鼠标, 电脑配件, ￥89, 有货
  2. 机械键盘, 电脑配件, ￥299, 有货
  3. 显示器支架, 办公用品, ￥159, 缺货

产品图片：
- 3 张产品图片（使用占位图路径）
- 每张图片需要描述性 alt 文本

要求：
- 输出完整的 HTML5 文档结构
- 使用语义化标签（header、main、section、footer）
- 表格使用 thead、tbody、caption 结构
- 图片使用 figure + figcaption
- 所有图片包含 width 和 height 属性
- 不使用任何内联样式
- 代码中包含必要的注释

请直接输出完整的 HTML 代码。

优化要点：

  1. 添加了角色设定（前端开发专家）
  2. 提供了具体的上下文和数据
  3. 明确了约束条件（语义化、可访问性、完整文档）
  4. 指定了输出格式（完整 HTML 代码）
  5. 给出了具体的字段和数据示例

常见误区 ⚠️

误区 正确理解
“提示词越长越好” 提示词应精准而非冗长，关键信息要突出
“一个提示词解决所有问题” 复杂需求应拆分多个提示词，逐步迭代
“AI 知道我想要什么” AI 不会读心，必须把需求明确写出来
“模板一成不变” 模板是起点，应根据实际项目调整约束条件
“复制模板就能出完美代码” 模板只是框架，变量填充和后续审核同样重要
“提示词不需要指定输出格式” 明确格式要求（如完整文档 vs 代码片段）可避免返工
“英文提示词一定比中文好” 对于中文内容，中文提示词通常效果更好

速查卡片 📋

七大模板速查

# 模板名称 适用场景 核心标签
1 基础页面结构 快速生成页面骨架 html, head, header, main, footer
2 语义化博客文章页 文章详情页 article, header, time, aside
3 复杂表单 多字段数据收集 form, fieldset, label, input
4 数据表格 结构化数据展示 table, thead, tbody, colgroup
5 图片画廊 多图片展示 figure, figcaption, ul, li
6 落地页 营销/产品介绍页 section, nav, button
7 非语义化代码修复 重构旧代码 语义化标签替换

提示词四要素

角色（Role）    → "你是一位...专家"
任务（Task）    → "请为我创建..."
约束（Constraints）→ "要求：1... 2... 3..."
格式（Format）  → "请输出完整的..."

常用约束条件清单

  • 使用 HTML5 语义化标签
  • 包含完整文档结构
  • 所有图片有 alt 属性
  • 表单控件有 label 关联
  • 不使用内联样式
  • 不使用过时标签
  • 标题层级连续
  • 包含必要注释

迭代优化话术

场景 提示语
结构审核 “先输出 HTML 结构骨架，确认后再填充内容”
添加可访问性 “请为所有交互元素添加适当的 ARIA 属性”
修复嵌套 “检查并修复所有标签嵌套错误”
语义化改造 “将所有 div 替换为恰当的语义化标签”
添加注释 “在关键位置添加注释说明选择该标签的原因”

扩展阅读

全部37篇教程到此结束。恭喜你已经完成了 HTML 从 0 到 1 的系统学习！

# 人工智能 # 前端 # html
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

DevOps 生态介绍（十三）：Uptime Kuma 监控小工具推荐

avatar AtomGit开源社区

第13讲：异步任务队列与长任务处理——Celery + Redis实战

欢迎来到《Python + AI Agent 实战开发完全指南》专栏！在前面的课程中，我们使用 FastAPI 将多智能体系统封装为了 RESTful API。但在真实的生产环境中，AI 推理和多智能体协作往往需要几秒甚至几分钟的时间。如果用户在发起请求后一直等待 HTTP 响应，不仅体验极差，还容易导致网关超时（Timeout）或服务器线程阻塞。在这一讲中，我们将引入工业界标准的解决方案：异步任

avatar AtomGit开源社区

浏览器中使用AI开发好的插件实现自动报销

每月报销，程序员的"至暗时刻"不知道有多少人和我一样，每个月最痛苦的事不是写代码，而是——报销。出差一趟回来，攒了一堆PDF票据：高铁票、打车行程单、酒店发票、餐饮发票……然后打开蓝凌OA，开始手动填表。一张高铁票要填出发地、到达地、日期、舱位、金额，一个行程对应多笔费用，一行一行地敲，一个下拉框一个下拉框地选。遇到那种搜索式下拉框，还得先输入关键字、等加载、再点选——手指头都快敲出茧子了。最崩溃

avatar AtomGit开源社区