从参考网站到可执行提示词：一套稳定的工作流

好的参考网站提供证据，好的提示词则把这些证据转化成明确决策。

最常见的问题，是只描述页面“看起来像什么”：深色背景、大标题、顺滑动效、高级感。这些词可以说明方向，但结构、层级、交互和响应式规则仍然需要开发者继续猜。

把参考网站当成一个系统

写提示词之前，先把看到的内容拆成五层：

1. 目标：用户看完之后应该理解什么、完成什么？
2. 结构：页面有哪些区块，顺序是什么？
3. 层级：第一、第二、第三视觉焦点分别是什么？
4. 行为：哪些元素会移动、响应、展开或保持固定？
5. 约束：小屏幕、慢网络和减少动效设置下应该如何表现？

这样做能把模糊的视觉感受转化成可以开发的页面模型。

描述关系，而不只是孤立参数

“标题使用 64px”不如“标题是页面第一视觉焦点，视觉重量约为辅助文案的两倍，并限制在较窄的阅读宽度内”有效。

关系可以适应不同屏幕和字体，固定数值往往不行。提示词当然可以包含具体尺寸，但尺寸应该服务于清楚的视觉关系。

使用稳定的提示词骨架

一个完整的网站提示词可以按下面的顺序组织：

产品与目标用户
页面的主要行动
页面结构
视觉层级
字体、颜色与间距方向
媒体和动效行为
响应式规则
无障碍与性能约束
必须保持可编辑的内容

顺序很重要。先决定结构，再处理装饰；先定义行为，再描述动画细节。

分两轮完成

第一轮先生成信息架构、视觉层级和响应式行为正确的完整页面，不要把所有篇幅都花在润色上。

第二轮只细化少量高影响决策，例如标题比例、卡片尺寸、图片处理、交互节奏和区块之间的间距。

这通常比用一条超长提示词要求“一次完美”更快，也更容易判断问题究竟来自结构还是样式。

保留方法，不复制品牌

好的复刻不是复制另一个品牌，而是借用一种构图方法，再把它应用到新的产品、用户和内容上。

你可以从 WebPrompts 提示词库 选择一个可靠结构，然后在提示词里明确自己的页面需要表达什么，而不是只描述参考网站展示了什么。