第32篇：用AI生成HTML结构的提示词工程

同样的 AI，不同的提示词，输出的代码质量可能天差地别。提示词工程就是教会你如何"说人话"让 AI"写神码"。

学习目标

  • 理解提示词工程的核心原则，掌握结构化提示词的编写方法
  • 学会使用角色设定、需求模板和上下文注入来提升 AI 输出质量
  • 能够识别"坏提示词"的问题，并将其改写为"好提示词"
  • 掌握让 AI 生成语义化、可访问 HTML 的专项技巧

核心知识点

一、为什么提示词如此重要

大语言模型本质上是"概率预测机器"——它根据你的输入，预测最可能的下一个词。这意味着：你输入的质量直接决定了输出的质量。

同样的 AI 模型，面对不同的提示词，输出可能截然不同：

提示词质量 输出结果
模糊、简短 通用、可能过时的代码，大量使用 div
清晰、结构化 语义化、符合标准的代码，注释完整

对于 HTML 初学者来说，好的提示词能帮你：

  • 少踩坑：AI 直接给出符合现代标准的代码
  • 学得深：从高质量的输出中学习最佳实践
  • 省时间：减少反复修改和调试的次数

二、结构化提示词的四大支柱

一个高效的提示词通常包含四个部分，可以用 RTFC 框架记忆：

支柱 英文 作用 示例
角色 Role 设定 AI 的身份和专业领域 “你是一位注重可访问性的前端专家”
任务 Task 明确要 AI 做什么 “生成一个博客文章页面的 HTML 结构”
格式 Format 指定输出的形式和结构 “使用 HTML5 语义化标签，添加注释”
约束 Constraints 列出限制条件和排除项 “不要包含 CSS，图片必须有 alt 属性”
2.1 角色设定（Role）

角色设定能激活 AI 的"专家模式"，让它从特定领域的角度思考问题。

对比实验：

无角色设定：

帮我写一个产品展示页面。

有角色设定：

你是一位有 10 年经验、专注于语义化和可访问性的前端开发专家。
请帮我写一个产品展示页面。

角色设定模板：

你是一位[年限]经验的[领域]专家，
特别擅长[具体技能 1]、[具体技能 2]和[具体技能 3]。
你的代码风格以[特点 1]和[特点 2]著称。
2.2 任务描述（Task）

任务描述要具体、可执行，避免模糊词汇。

模糊描述 具体描述
“写一个网页” “生成一个包含导航、产品列表和页脚的企业官网首页 HTML”
“做个表单” “创建一个用户注册表单，包含用户名、邮箱、密码和确认密码四个字段”
“加些图片” “在团队介绍区域添加 4 个成员头像，每个头像包含姓名和职位说明”
2.3 格式指定（Format）

明确告诉 AI 你希望输出什么样的代码风格。

常用格式指令：

- 使用 HTML5 语义化标签（header、nav、main、section、article、footer）
- 每个 section 添加注释说明用途
- 使用 2 个空格缩进
- 属性值使用双引号
- 自闭合标签保留斜杠（如 <img />）
2.4 约束条件（Constraints）

约束条件告诉 AI “不要做什么”，能有效避免常见问题。

常用约束：

- 不要包含 CSS 样式（内联 style 或 class）
- 不要包含 JavaScript
- 不要使用已废弃的标签（如 font、center、marquee）
- 所有图片必须包含描述性的 alt 属性
- 表单元素必须正确关联 label
- 链接文本必须描述目标内容（禁止"点击这里"）

三、坏提示词 vs 好提示词：对比分析

案例一：生成个人博客页面

坏提示词 ❌

帮我写个博客页面。

问题分析：

  • 没有角色设定，AI 不知道以什么标准输出
  • "博客页面"太模糊，不知道要哪些模块
  • 没有格式要求，可能全是 div 堆砌
  • 没有约束，可能包含 CSS 或过时标签

好提示词 ✅

你是一位专注于语义化和可访问性的前端开发专家。

请为我生成一个个人博客文章详情页的 HTML5 结构。

页面模块：
1. 顶部导航栏：包含博客名称和导航链接（首页、文章列表、关于我）
2. 文章头部：文章标题、作者信息、发布日期、阅读时间
3. 文章正文：包含多个段落、一个二级标题、一个代码块区域、一张插图
4. 文章标签：3-5 个相关标签
5. 评论区入口：显示评论数量和"查看评论"链接
6. 页脚：版权信息和返回顶部链接

格式要求：
- 使用 HTML5 语义化标签（header、nav、main、article、section、footer、aside 等）
- 每个主要区域前添加 HTML 注释说明
- 使用 2 个空格缩进

约束条件：
- 不要包含任何 CSS（包括 style 属性和 class 属性）
- 不要包含 JavaScript
- 图片必须使用 figure 和 figcaption，alt 属性描述图片内容
- 时间使用 time 标签和 datetime 属性
- 导航链接使用 ul + li 结构
- 代码块使用 pre + code 标签

输出差异对比：

维度 坏提示词输出 好提示词输出
语义化 大量使用 div，无结构可言 header、nav、main、article、aside、footer 齐全
可访问性 图片无 alt，时间无 time 标签 alt 描述详细，time 标签带 datetime
注释 无 每个 section 有注释
代码规范 缩进混乱 统一的 2 空格缩进
额外内容 可能包含 style 或 class 纯净 HTML，无样式干扰
案例二：生成联系表单

坏提示词 ❌

写个联系我们的表单。

好提示词 ✅

你是一位注重表单可访问性和用户体验的前端专家。

请生成一个"联系我们"页面的 HTML 表单结构。

表单字段：
1. 姓名（必填，文本输入）
2. 邮箱（必填，邮箱格式验证）
3. 主题（下拉选择：产品咨询、技术支持、合作洽谈、其他）
4. 留言内容（必填，多行文本，最少 10 个字符）
5. 隐私协议同意（必填，复选框）

格式要求：
- 每个表单字段使用 div 或 p 包裹，内部包含 label 和 input/textarea/select
- label 必须使用 for 属性与对应 input 的 id 关联
- 必填字段在 label 中标注"（必填）"
- 使用 fieldset 和 legend 分组（如适用）
- 表单底部放置提交按钮

约束条件：
- 不要包含 CSS 和 JavaScript
- 使用 HTML5 原生验证属性（required、type="email"、minlength 等）
- 复选框的 label 要描述清楚同意的具体内容
- 添加注释说明每个字段的用途

四、上下文注入：让 AI 理解你的项目

当 AI 了解你的项目背景时，输出会更加精准。上下文注入有三种方式：

4.1 项目背景描述
这是一个面向初学者的 HTML 教程项目。
目标读者是完全不懂编程的高中生。
请确保生成的代码简单易懂，注释详细。
4.2 已有代码片段
以下是我项目中已有的导航栏结构，
请保持相同的风格，生成一个页脚组件：

[粘贴已有代码]
4.3 设计稿或需求文档
根据以下需求描述生成 HTML：

【需求】
- 页面类型：电商商品详情页
- 目标设备：桌面端优先，但结构要支持响应式
- 关键模块：商品图片画廊、价格信息、规格选择、加入购物车按钮、用户评价摘要

【品牌要求】
- 色调：蓝色系
- 风格：简洁现代
- 注意：图片区域需要支持多张图片切换（先只写 HTML 结构）

五、进阶技巧：让输出更可预测

5.1 示例驱动（Few-shot）

给 AI 一个你满意的代码示例，让它按同样的风格输出。

你是一位前端专家。请按照以下示例的风格，生成一个"团队成员卡片"组件的 HTML。

示例风格（注意语义化标签的使用方式）：

```html
<!-- 产品特性卡片 -->
<article class="feature-card">
  <figure>
    <img src="icon-speed.svg" alt="" width="48" height="48">
  </figure>
  <h3>极速加载</h3>
  <p>优化后的代码让页面加载时间缩短 60%。</p>
</article>

现在请生成"团队成员卡片"，包含：头像、姓名、职位、一句话简介、社交链接。
要求与示例风格一致。


#### 5.2 分步指令

复杂任务拆分成步骤，让 AI 逐步完成。

请分两步为我生成一个完整的博客页面：

第一步：先只生成 HTML 骨架结构（不包含任何内容），
让我确认结构是否合理。

第二步：在我确认后，再填充具体的内容和文本。

现在开始第一步。


#### 5.3 输出格式控制

明确指定 AI 的回复格式，方便你提取代码。

请在回复中按以下格式输出：

代码说明

[简要说明这段代码的设计思路]

HTML 代码

[完整的 HTML 代码]

使用建议

[告诉我如何根据实际需求修改这段代码]


### 六、语义化 HTML 的专项提示词技巧

#### 6.1 强制语义化检查清单

在提示词中加入这段，能显著提升 AI 使用语义化标签的概率：

【语义化检查清单】生成代码前，请确认：

  • 页面顶层结构使用 header、main、footer
  • 导航使用 nav + ul + li
  • 独立内容块使用 article 或 section
  • 侧边栏内容使用 aside
  • 图表使用 figure + figcaption
  • 时间使用 time 标签
  • 地址信息使用 address 标签
  • 避免使用无意义的 div 和 span

#### 6.2 可访问性检查清单

【可访问性检查清单】生成代码前，请确认：

  • 所有 img 标签有描述性 alt 属性（装饰性图片 alt=“”）
  • 所有表单字段有关联的 label（for 属性匹配 id）
  • 链接文本描述目标内容（禁止"点击这里"）
  • 页面有 lang 属性声明语言
  • 标题层级连续（h1 → h2 → h3，不跳级）

#### 6.3 让 AI 解释它的选择

生成代码后，请额外说明：

  1. 为什么选择这些语义化标签？
  2. 每个 section 的语义角色是什么？
  3. 如果要在屏幕阅读器中浏览这个页面，体验会如何？

---

## 动手练习

### 练习一：改写坏提示词

**坏提示词：**

帮我写个电商网站。


**任务**：根据 RTFC 框架，将上述提示词改写为高质量提示词。要求包含角色、任务、格式、约束四个部分，并具体说明页面模块。

<details>
<summary>参考答案</summary>

改写后的提示词：

你是一位有 8 年经验、专注于电商前端开发的技术专家，
特别擅长语义化 HTML、可访问性和 SEO 优化。

请为我生成一个电商网站首页的 HTML5 结构。

页面模块（从上到下）：

  1. 顶部通知栏：显示促销信息"全场满 199 减 50"
  2. 主导航：Logo、搜索框、用户入口（登录/注册）、购物车图标
  3. 分类导航：横向排列的商品分类（数码、服装、家居、食品）
  4. 轮播图区域：占位 3 张 banner（先只写结构）
  5. 热销商品区：6 个商品卡片，每个包含图片、名称、价格、"加入购物车"按钮
  6. 品牌推荐区：4 个品牌 Logo 展示
  7. 页脚：帮助链接、客服电话、支付方式图标、版权信息

格式要求：

  • 使用 HTML5 语义化标签（header、nav、main、section、article、footer）
  • 每个模块前添加 HTML 注释
  • 使用 2 个空格缩进，保持代码整洁
  • 属性值使用双引号

约束条件：

  • 不要包含任何 CSS（包括 style 属性和 class 属性）
  • 不要包含 JavaScript
  • 所有商品图片使用 figure + figcaption，alt 描述商品名称
  • 按钮使用 button 标签，不要误用 a 标签
  • 链接使用 a 标签，href 使用 # 作为占位符
  • 价格使用语义化方式标记（可考虑 data 属性或适当标签）
  • 搜索框使用 form + input + button 组合，label 正确关联

</details>

### 练习二：为同一需求编写两个版本的提示词

**需求**：生成一个在线课程详情页的 HTML 结构，包含课程封面、讲师信息、课程大纲、学习要求和报名按钮。

**任务**：
- 版本 A：简单提示词（不超过 3 句话）
- 版本 B：结构化提示词（使用 RTFC 框架，详细具体）

然后分析：如果你把这两个提示词分别发给 AI，预期输出会有哪些差异？

<details>
<summary>参考答案</summary>

**版本 A（简单提示词）：**

帮我写一个在线课程详情页，要有课程封面、讲师介绍、课程大纲、学习要求和报名按钮。


**版本 B（结构化提示词）：**

你是一位专注于教育平台前端开发的专家，
特别擅长语义化 HTML 和课程类页面的信息架构设计。

请为我生成一个在线课程详情页的 HTML5 结构。

页面模块（从上到下）：

  1. 课程头部区域：

    • 课程封面图（使用 figure + figcaption）
    • 课程标题（h1）
    • 课程副标题/一句话介绍
    • 课程元信息：时长、难度等级、已有学员数、评分

  2. 讲师信息区域（aside 或 section）：

    • 讲师头像（alt 包含讲师姓名）
    • 讲师姓名和头衔
    • 讲师简介（2-3 句话）

  3. 课程大纲区域（section）：

    • 章节列表，使用 ol 或 ul
    • 每个章节包含：章节序号、标题、时长、内容简介
    • 前 3 章显示完整内容，后续章节标记为"登录后查看"

  4. 学习要求区域（section）：

    • 前置知识列表
    • 适合人群说明
    • 学习成果预期

  5. 报名区域（section）：

    • 价格信息（原价和现价）
    • "立即报名"按钮（button 标签）
    • 退款政策说明

格式要求：

  • 使用 HTML5 语义化标签
  • 每个 section 添加注释
  • 使用 2 空格缩进

约束条件：

  • 不要包含 CSS 和 JavaScript
  • 所有图片必须有 alt 属性
  • 表单按钮使用 button 而非 a 标签
  • 课程大纲使用有序列表 ol（章节有顺序）
  • 价格使用 del 标签标记原价

**预期差异分析：**

| 维度 | 版本 A 输出 | 版本 B 输出 |
|------|------------|------------|
| 语义化 | 可能大量使用 div，标签选择随意 | header、main、section、aside、figure 等标签使用恰当 |
| 结构细节 | 可能遗漏"学习成果预期"或"退款政策"等细节 | 覆盖所有要求的子项 |
| 可访问性 | alt 属性可能缺失或敷衍 | 每个 img 都有描述性 alt |
| 列表类型 | 可能全部使用 ul | 章节用 ol（有序），其他用 ul（无序） |
| 价格标记 | 可能纯文本"原价 299，现价 199" | 使用 del 和 strong 等语义化标签 |
| 注释 | 无 | 每个 section 有注释 |

</details>

### 练习三：添加上下文让 AI 输出更精准

**场景**：你正在为一个"宠物领养平台"写页面，已经有一个首页，现在需要生成一个"宠物详情页"。

**已有首页代码片段：**

```html
<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/pets">待领养宠物</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>

任务：编写一个提示词，让 AI 基于已有风格生成宠物详情页，保持代码风格一致。

参考答案 
你是一位专注于公益平台前端开发的专家，
特别注重语义化和可访问性。

我正在开发一个"宠物领养平台"网站。
以下是我已有的首页导航代码风格：

```html
<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/pets">待领养宠物</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>

请基于以上风格，生成一个"宠物详情页"的完整 HTML 结构。

页面模块：

  1. 导航栏：与首页风格一致（可直接复用上述结构）
  2. 宠物基本信息区：
    • 宠物照片（多张，使用 figure，alt 描述宠物特征）
    • 宠物名字（h1）
    • 关键信息：品种、年龄、性别、体重、健康状况
    • 领养状态标签（可领养/已领养/审核中）
  3. 宠物故事区：
    • 救助背景介绍
    • 性格特点列表
    • 生活习惯说明
  4. 领养要求区：
    • 领养条件清单
    • 所需材料说明
  5. 操作区：
    • "申请领养"按钮
    • "分享"按钮
    • "返回列表"链接
  6. 页脚：与首页保持一致风格

格式要求：

  • 与提供的导航代码风格完全一致（缩进、引号、标签选择）
  • 使用 HTML5 语义化标签
  • 每个区域添加注释

约束条件：

  • 不要包含 CSS 和 JavaScript
  • 所有图片必须有描述性 alt 属性
  • 信息列表根据语义选择 ul 或 ol
  • 按钮使用 button 标签，链接使用 a 标签
  • 状态标签使用适当的方式标记（如 strong 或 em）

</details>

---

## 常见误区 ⚠️

| 误区 | 正确理解 |
|------|----------|
| "提示词越长越好" | 长度不是关键，**信息密度**才是。冗余的描述会稀释重点，反而让 AI 抓不到核心需求。 |
| "一次提示词解决所有问题" | 复杂任务应该分步进行。先生成骨架确认结构，再填充内容，最后审查优化。 |
| "复制别人的提示词模板就能用好" | 模板是起点，不是终点。你需要根据具体需求调整，理解每个部分的作用比照搬更重要。 |
| "AI 懂我，不用写那么细" | AI 不会读心术。你认为"显而易见"的信息，AI 可能完全猜错。明确优于暗示。 |
| "约束条件越多越好" | 过多的约束会限制 AI 的发挥，甚至导致冲突。只列出真正重要的约束。 |
| "只要代码，不需要解释" | 让 AI 解释它的选择，能帮你学习为什么这样写，也是验证 AI 是否"真懂"的方法。 |
| "同样的提示词每次结果都一样" | AI 输出有随机性。如果一次结果不理想，可以微调提示词再试，或要求 AI 基于反馈修改。 |

---

## 速查卡片 📋

### RTFC 提示词框架速查

【R - 角色 Role】
你是一位[年限]经验的[领域]专家，
擅长[技能1]、[技能2]和[技能3]。

【T - 任务 Task】
请为我[具体动作][具体内容]。
页面/组件包含：[模块1]、[模块2]、[模块3]。

【F - 格式 Format】

  • 使用 HTML5 语义化标签（header、nav、main、section、article、footer）
  • 每个 section 添加 HTML 注释
  • 使用 2 个空格缩进
  • 属性值使用双引号

【C - 约束 Constraints】

  • 不要包含 CSS 和 JavaScript
  • 所有 img 必须有描述性 alt 属性
  • 表单 label 必须关联 input
  • 不要使用已废弃标签
  • 链接文本必须描述目标内容

### 语义化标签选择速查

| 内容类型 | 推荐标签 | 避免使用 |
|----------|----------|----------|
| 页面头部 | header | div class="header" |
| 导航链接 | nav + ul + li | div class="nav" |
| 主要内容 | main | div class="main" |
| 独立文章 | article | div class="post" |
| 内容区块 | section | div class="section" |
| 侧边内容 | aside | div class="sidebar" |
| 页面底部 | footer | div class="footer" |
| 图表图片 | figure + figcaption | div class="img-box" |
| 时间日期 | time + datetime | span class="date" |
| 地址信息 | address | span class="address" |

### 提示词优化检查清单

- [ ] 是否设定了明确的角色？
- [ ] 任务描述是否具体可执行？
- [ ] 是否列出了所有需要的模块/字段？
- [ ] 是否指定了输出格式（标签风格、缩进、注释）？
- [ ] 是否排除了不需要的内容（CSS、JS、class）？
- [ ] 是否加入了语义化检查清单？
- [ ] 是否加入了可访问性检查清单？
- [ ] 是否提供了必要的上下文（项目背景、已有代码）？
- [ ] 是否要求 AI 解释它的选择？
- [ ] 约束条件是否过多或冲突？

### 快速提示词模板

**生成页面：**

你是一位前端专家。请生成[页面类型]的 HTML5 结构。
模块：[列表]
要求：语义化标签、无 CSS、无 JS、alt 属性齐全、添加注释。


**审查代码：**

请审查以下 HTML 的语义化和可访问性，
指出问题并给出优化版本。
代码：


**解释代码：**

我是初学者，请解释这段 HTML 中每个标签的选择理由，
以及如果不用这个标签会有什么影响。
代码：


---

## 扩展阅读

- [Prompt Engineering Guide（中文）](https://www.promptingguide.ai/zh)
- [OpenAI Prompt Engineering 最佳实践](https://platform.openai.com/docs/guides/prompt-engineering)
- [MDN：HTML 语义化](https://developer.mozilla.org/zh-CN/docs/Glossary/Semantics)
- [MDN：HTML5 元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)
- [WAI-ARIA 实践指南](https://www.w3.org/WAI/ARIA/apg/)
- [HTML 可访问性检查清单](https://www.a11yproject.com/checklist/)

> 下一篇：第33篇：AI辅助代码审查与优化
# 人工智能 # 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开源社区