### [AI 网页制作提示词：先写页面目标，再交代内容和状态](https://alyyhw.com/article/5188)

**Published:** 2026-08-02T05:57:12

**Author:** AI菜鸟网

**Excerpt:** 用页面目标、用户路径、真实内容、组件状态和验收条件组织 AI 网页制作提示词。

让 AI “做一个高级网页”通常得到的是一张好看的静态图，而不是能被用户理解的页面。有效的网页提示词要先回答：谁会访问、他要完成什么、页面上有哪些真实内容、加载失败或无数据时怎样呈现。视觉风格放在这些之后，才不会盖过产品目标。

![AI网页制作提示词的信息层级与移动端检查示意图](https://login.alyyhw.com/wp-content/uploads/2026/08/ai-long-image-layout-20260802.jpg)

先确定内容层级与状态，再讨论颜色、卡片和动效。

## 从用户路径开始，而不是从配色开始

写出用户进入页面后的第一眼信息、要做的关键动作和完成后的反馈。例如资源下载页需要说明资源是什么、适用谁、如何获取和失败时怎么办。把这些变成模块清单，设计与开发才能围绕真实任务展开。

| 页面层 | 需要明确的内容 | 验收方式 |
| --- | --- | --- |
| 首屏  | 页面目的与主要动作 | 三秒内能否理解 |
| 内容  | 真实标题、说明、来源边界 | 不使用占位承诺 |
| 状态  | 加载、空数据、错误、成功 | 每种状态都有说明 |
| 移动端 | 阅读顺序与点击区域 | 窄屏可正常操作 |

## 提示词要包含状态与边界

> 请为【用户类型】设计一个用于【核心动作】的网页结构。先输出用户路径、信息层级和模块清单，再给出视觉建议。使用以下真实内容字段：【字段】。必须考虑加载、空数据、错误与成功状态；移动端优先；不编造评价、数据或功能，不把关键信息写进不可复制的装饰图。

得到方案后，把每个模块对应到真实数据源和页面链接。必要时先做文字原型，确认阅读顺序，再进入视觉稿。长图层级与移动端检查可借鉴[信息层级的排版方法](https://alyyhw.com/article/5160)。

## 上线前检查

检查可访问性、文字对比度、键盘操作、表单错误提示和真实链接。不要把演示数据当成线上承诺；涉及账号、支付或隐私信息时，应交由具备相应安全能力的系统处理。

**Tags:** AI工作流, AI方法论, AI设计, Claude

**Categories:** AI设计

---