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

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

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

学习目标

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

核心知识点

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

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

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

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

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

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

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

2.1 角色设定（Role）

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

对比实验：

无角色设定：

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

有角色设定：

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

角色设定模板：

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

2.2 任务描述（Task）

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

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 标签

输出差异对比：

案例二：生成联系表单

坏提示词 ❌

写个联系我们的表单。

好提示词 ✅

你是一位注重表单可访问性和用户体验的前端专家。 请生成一个"联系我们"页面的 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辅助代码审查与优化