先把目标写成一个用户任务
提示词的第一条约束不是颜色，也不是框架，而是页面要帮助谁完成什么。不要只写“做一个 AI 官网”，应写“为没有技术背景的中小企业运营者制作 AI 自动化产品首页，让访客在十秒内理解产品能把重复任务交给自动流程，并能进入免费试用”。目标角色、理解目标和下一步动作必须同时存在。
这条约束会影响后面的所有决定。面向开发者的页面可以容纳技术细节和代码示例，面向业务负责人的页面更需要结果、流程和信任信号。如果角色不清楚，AI 会用最常见的 SaaS 套路填空，页面看起来完整，却没有销售对象。
- 目标用户是谁
- 首屏必须理解什么
- 希望用户完成哪个主要动作
把内容结构写到区块级
第二条约束是信息架构。至少列出导航、Hero、问题或场景、产品能力、工作流程、证明、定价或转化区、页尾，并说明每个区块回答什么问题。区块名称本身没有价值，关键是它承担的内容任务。例如 Hero 回答“这是什么”，能力区回答“它怎么工作”，案例回答“为什么可信”。
不要要求 AI 生成不存在的客户数量、评价、融资额或安全认证。没有真实社会证明时，可以展示可验证的产品界面、公开演示、构建过程和明确的验收结果。可信度来自事实，不来自一排虚构徽标。
用设计系统替代风格形容词
第三条约束是视觉系统。与其写“高端科技感”，不如规定背景、表面、文字和强调色的关系，给出字体角色、容器宽度、圆角尺度、间距节奏和图像裁切方式。颜色不必精确到每一个值，但主次必须明确，例如“接近黑色的中性背景、两级深灰表面、米白正文、仅在主要行动和状态上使用黄绿色强调”。
同时规定哪些效果不要出现。禁止随机渐变、无意义发光、每个卡片都使用玻璃效果，往往比再加十个形容词更有效。限制会迫使页面形成一致语言。
描述交互状态，而不是只写“有动效”
第四条约束是交互。写清楚用户能点什么、操作后发生什么，以及加载、成功、失败和空状态如何表达。动效需要说明触发方式、持续时间、是否只播放一次，以及在 prefers-reduced-motion 下如何降级。
如果页面包含视频、Canvas 或 3D，还要指定静态海报、纯色后备和低性能设备策略。一个效果在作者电脑上运行，并不等于它能在普通手机上完成任务。
把移动端当成另一种布局任务
第五条约束是响应式。不要只写“适配手机”。应说明多栏如何重排、首屏高度如何处理、固定元素何时取消、按钮触控区域多大、图片如何裁切、导航如何收纳。手机不是桌面页面按比例缩小，而是优先级重新排序。
一个实用的最低要求是：正文不横向溢出，主要按钮至少 44 像素高，输入时不会被键盘遮挡，视频失败仍能读懂首屏，三栏卡片在窄屏变成自然文档流。
最后写一份可以逐条验证的验收清单
第六条约束是验收。告诉 AI 完成后必须检查哪些宽度、链接、状态和性能指标。示例包括：在 375、768、1440 像素宽度无横向滚动；所有按钮可用键盘到达；每张内容图片有宽高和替代文本；关闭动画后内容仍完整；首屏不依赖超过 200 KB 的图片才能出现。
好的提示词不是一次性的灵感，它更像一份小型产品说明和测试计划。目标决定做什么，结构决定说什么，设计系统决定怎么看，交互与响应式决定怎么用，验收清单决定何时算完成。这六类约束齐全后，生成结果才更接近可上线页面。