krutikkkkkkkkk/网页设计去模板化

Web Design Deslop

“AI slop” 在网页设计中并非单一的错误选择，而是数百万个落地页的平庸平均值：紫色到粉色的渐变、居中的英雄区域配上徽章药丸和两个按钮、三个带淡色图标方块的等宽功能卡片、深色背景上的玻璃卡片、写着“解锁无缝工作流”的文案。每个元素单独看都没问题，但组合在一起就变成一个可以属于任何公司的页面，这意味着它不属于任何公司。

这项技能完成三件事：

1. 审核 现有页面、模型或代码库，报告其 Slop 特征并给出具体修复方案。
2. 指导 新建项目，从一开始就避免产生 Slop。
3. 重写 看起来像是生成的文案。

审核或构建时，请阅读 references/tells.md（视觉、布局、动效和 Tailwind 特征，附带每项的替换方案）。撰写或审查任何标题、副标题、功能简介或行动号召时，请阅读 references/copy.md。

唯一重要的测试

替换测试。 将 Logo 和产品名替换为竞争对手的。页面还能正常运作吗？如果能，那么无论多精致，它都是 Slop。一个经过设计的页面由仅属于该品牌的材料构成：它的产品、它的人、它的所在地、它的流程、它的真实数据、它的语调。下面的每项判断都是此测试的一个特例。

两个辅助测试：

• 眯眼测试。 眯起眼睛。如果看到一列居中、大小相同的圆角矩形，以等间距堆叠，那么布局就是模板化的。经过设计的页面具有不规则的轮廓：一个区域很宽，下一个很窄，一个东西非常大，许多东西非常小。
• 来源测试。 每个决策来自何处？来自品牌的材料——这很好。因为落地页看起来都这样——这就是 Slop 特征。

模式 1：审核

当用户分享 URL、截图、Figma 框架、组件或代码库并希望获得评审，或表示页面看起来千篇一律时使用。

1. 先全面阅读。 对于代码，阅读每个页面/章节组件以及 Tailwind 配置或全局 CSS。对于截图，在撰写评论前查看整个页面。不要仅凭英雄区域就发表意见。
2. 执行替换测试并以一句话给出结论。 诚实且具体：“这可以是任何开发者工具初创公司的首页”比一个分数更有用。
3. 列出 Slop 特征，从最严重的开始。 每项包括：特征、位置（文件和行号或章节名称）、为何看起来像生成的、以及修复方案。从 references/tells.md 中提取，但要针对这个页面编写修复方案，而不是通用替换。
4. 指出值得保留的部分。 每个页面都有做得好的地方。说明这一点，否则用户可能会连同 Slop 一起丢弃。
5. 给出三个影响最大的改动。 通常包括：一个排版决策、一个布局决策、一个内容决策。如果用户只做这些改动，页面应该就能通过眯眼测试。

审核的输出格式：

## 结论
一两句话。替换测试结果。总体评价：模板化 / 混合 / 有设计感。

## 首先修复这些问题
1. [Slop 特征] / [位置] / [具体修复方案]
2. ...
3. ...

## 其他所有问题，按区域划分
### 排版  ### 色彩  ### 布局  ### 组件  ### 动效  ### 文案  ### 内容/图像
（每个区域下列出简短列表；跳过空白区域）

## 保留
已经做得好及其原因。

当用户要求你应用修复时，直接编辑实际文件。除非用户要求，否则不要从零重写整个页面；有针对性的编辑能保留有效部分，且更容易审核。

模式 2：无 Slop 构建

每当生成网站、页面、章节或模板时使用。顺序很重要：早期做出的决策（概念、排版、网格）可以避免 Slop；后期做出的决策（替换这个渐变）只能掩盖它。

在编写任何标记之前

1. 找到品牌的原始材料。 这家企业实际上拥有什么？一个带有真实界面的产品、一个物理场所、一种材料、一个工艺过程、一位有见解的创始人、一个数据集、一个有名有姓的客户群。选择其中一项，并让页面围绕它展开。咖啡烘焙商的网站可以围绕烘焙曲线构建；经销商的网站可以围绕展厅地板构建；发票应用的网站可以围绕真实发票构建。如果用户没有提供任何信息，问一个问题，或者在回复开头说明你正在使用的假设。
2. 选择一个布局概念，而非章节列表。 决定页面做出的一个结构性动作：一个带有粘性左侧的编辑型两栏布局、一个全出血图像节奏、一个密集的索引/表格页面、一个超大的标题配以小号支撑文字、一个水平滚动的产品列表。然后让章节自然衍生出来。永远不要从“英雄区域 → 合作伙伴 Logo → 功能 → 客户评价 → 定价 → 常见问题 → 行动号召 → 页脚”开始。这个列表就是 Slop 模板；如果页面需要其中某些章节，它们应该看起来像这个页面，而不是像那个列表。
3. 先设置排版，再设置色彩。 选择一个有特色的显示字体和一个实用的正文字体；设置一个具有大跳阶的实际缩放比例（例如 14 / 18 / 32 / 72 / 140），而不是 Tailwind 从 text-4xl 到 text-6xl 的平缓梯度。决定对齐方式：左对齐是经过设计的页面的默认选择；全部居中则是生成的页面的默认选择。
4. 从材料中推导调色板。 一到两个品牌色，一个纸张或墨水背景色，以及只在少数地方使用的强调色。渐变并非被禁止，但一个没有来源的渐变（紫色→粉色，蓝色→紫色）是目前网络上最强烈的 AI 特征。

编写标记时

• 改变节奏。 并非每个章节都是 py-24 max-w-7xl mx-auto。让一个章节打破容器，一个位于较窄的列宽中，一个用细线分隔的列表代替卡片。
• 优先使用线条和空间，而非卡片和阴影。 细边框（border-b border-neutral-200）、空白区域和字号大小比 rounded-2xl shadow-lg 盒子能更好地传达层次结构。当某物确实是离散对象（产品、方案）时才使用卡片，不要将其作为默认包装器。
• 使用真实内容或诚实的占位符。 使用来自品牌材料的真实标题。如果某个事实未知，请写上 {{TODO: 真实数据}}，而不是编造“10,000+ 满意客户”。虚假 Logo、虚假五星评价和整数值统计都是内容 Slop，它们比缺少一个章节更糟糕。
• 图标：少用或不用。 表情符号永远不是图标。功能列表不需要每行一个 lucide 图标。如果使用图标，应使用一致的一套，尺寸小，并且相对于文字次要。
• 动效应有理由。 不要在每一个元素上都使用交错淡入上移效果。选一到两个与内容相关的刻意动作（滚动时显示的产品图像，悬停时显示的细节）看起来才是经过设计的。默认过渡效果应快速且简单。
• 图像：具体优于抽象。 不要使用 3D 斑点、渐变球形或“笔记本电脑在桌上”的库存图片。真正的截图、产品照片、地图、文档、来自材料的纹理。如果都没有，一个排版良好的文本块比占位图像更好。
• 同时检查二阶 Slop。 对渐变 Slop 的反应本身也产生了模板：超大衬线字体、颗粒覆盖、带 (01) 的编号章节、到处都是大写等宽标签、跑马灯行、跟随光标的斑点、“© 2026 — 保留所有权利”采用等宽字体。这和原本的 Slop 一样容易被认出。只有当这些设计来源于品牌时才使用，而不是因为它们标志着“有设计感”。

交付前

快速对你的输出进行审核：替换测试、眯眼测试、浏览 references/tells.md。修复发现的问题。然后用一两句话告诉用户页面看起来这样的原因（基于什么材料构建的，布局概念是什么），以便他们能根据决策而非像素进行判断。

模式 3：文案

阅读 references/copy.md。简要概括：生成的文案是抽象的、形容词堆砌的和对称的。经过设计的文案是具体的、精确的和不平衡的。用事实替换每个声明，用实际发生的事替换每个“无缝”，用唯一重要的事替换每个三连排比。标题用品牌的口吻、客户使用的词汇说出事物是什么或做什么。行动号召说出接下来会发生什么（“查看烘焙曲线”、“预约试驾”），而不是“开始”。

校准

• 并非每个模式在所有情况下都是错误的。一个具有三个档位的定价表对于具有三个档位的产品来说是正确的；Slop 特征是在没有支持理由的情况下给中间档位贴上“最受欢迎”的徽章。根据替换测试进行判断，而不是依据检查清单。
• 用户可能想要一个传统且值得信赖的布局（银行、诊所、经销商）。去 Slop 并不意味着怪异。它意味着具体。一个基于真实材料的传统结构是合格的；一个充满通用卡片的实验性布局则不合格。
• 当用户是设计师或开发者时，以代码或精确数值的形式提供修复方案。当他们不是时，用通俗的语言描述更改，并提供帮助实施的意愿。
• 不要奉承，也不要严厉责备。一个诚实的结论、一个排序清单和一条前进路径。