Slopless 界面收尾

Slopless UI

Slop（机器味）就是机器生成的外观：默认的渐变英雄区、脉动的圆点、每个标题上的图标、每个操作旁的按钮、充满破折号和形容词的文案，没有任何你可以在评审中为之辩护的决策。现代生成的界面很少因为代码错误而失败。它们失败在雷同：看起来能干、精致，但转眼就忘。

这个技能存在的意义就是让代理的输出不是这样。它在任何代码之前就给构建一个书面的方向，在构建过程中保持纪律，并在向任何人展示结果之前进行验证。它不会增加更多的样式。它增加的是决策，然后是完成度。

方法

按此顺序工作。每一步都有一个任务，每一步的细节都存在于一个参考文件中。只有当你到达需要该文件的步骤时，才去阅读它。

1. 看清现状

在写一行代码之前，找到已有的决策：DESIGN.md 或令牌文件、项目的 CSS 变量、tailwind.config.* 或 @theme 块、现有的组件。如果项目已经有了外观，就完全遵循它。你的工作首先是保持一致性，其次才是品味。除非用户要求重新样式，否则不要改动任何东西。

2. 撰写简报

在写代码之前写下四行内容。它们是与你自己的契约，后续步骤会根据它们进行检查。

1. 受众：谁使用这个，他们在十秒内在这里做什么。
2. 感觉：一到一个你能够在评审中捍卫的形容词（冷静、密集、温暖、精确）。
3. 标志性元素：陌生人会记住的一件事。如果你说不出它，结果就会是通用的。选择一个：一种不寻常的字体、一个醒目的数字、一种意想不到的颜色、一种强烈的构图。
4. 模式：说服（落地页、定价）、操作（仪表盘、应用）、阅读（文档、文章）或体验（作品集、画廊）。模式会改变后续的每一个决策。

完整指南、四种模式以及针对常见网站类别的二十八种起始方向库：references/direction.md。

3. 将决策转化为令牌

将简报转化为实际数值，而不是形容词：两种字体族（带字重和回退栈）、一种有明确任务的强调色、一个间距比例、一个圆角比例、动效持续时间和缓动函数。将它们写为 CSS 变量或框架的令牌格式。“干净现代”不是决策。--accent: #8E3B2F 才是。

• 排版：references/typography.md
• 色彩：references/color.md
• 动效：references/motion.md

4. 遵循规律进行构建

然后在构建时应用纪律规则：

• 规律优先。 一个网格、一个列、4 或 8 点间距、每个视图一个焦点、全部八个组件状态、键盘和对比度底线。这些不是样式，它们是每个设计系统都认同的物理规则：references/foundations.md。
• 每个视图一个焦点，一个主要操作。 层级来自大小、字重和空间，而不是来自方框。
• 按钮是承诺。 每个视图一个填充按钮是正常的。次要操作是链接或安静的按钮。如果一个区域显示超过两个按钮，重新设计它：references/icons-and-buttons.md。
• 图标是家具。 文字更清晰。当图标赢得一席之地时，使用同一套图标、同一字重、统一大小：references/icons-and-buttons.md。
• 文案就是设计。 短句、具体名词、动词优先的按钮、没有破折号、没有行话：references/copy.md。
• 每个状态都存在：空态、加载态、错误态、长内容。五行完美行和一个快乐路径并不能算完成一个界面。
• 页面要有脉搏。 控件在按下时要有反馈，过渡动画按进入的方式退出，一个入场动画编排第一秒，各部分在滚动时揭示一次。最多一个标志性环境动效，在简报中命名。动效预算及其所需的所有曲线：references/motion.md。
• 文本块左对齐。 仅居中短的单行元素。

5. 交付前完成

永远不要展示你没有看过的 UI。完成检查，按顺序：

1. python3 scripts/foldcheck.py <changed files> 并修复它报告的每个错误。
2. python3 scripts/contrast.py <foreground> <background> 针对你引入的每个文本对。正文文本需要 4.5:1 或更好；大文本和边界需要 3:1。
3. 在真实浏览器中渲染，并在桌面和手机宽度下截图（如果有 Playwright，用 node scripts/finish.mjs <url-or-file>，否则用你环境提供的任何浏览器工具）。
4. 眯眼看截图：模糊你的眼睛或缩小图片。层级和焦点必须保持清晰。
5. 修复，只重新检查更改过的视图，并在三次修复后停止。

完整协议、诚实标签和报告格式：references/verification.md。

不可妥协项

这些模式看起来像是机器生成的。即使教程中展示过，默认情况下也将它们视为禁用：

• 闪烁、脉动、弹跳或浮动的圆点和装饰，包括“打字”指示器和没人要求的光环状态点。
• 赛博朋克、霓虹灯、故障效果、合成波、蒸汽波、矩阵和全息风格。发光没有来源，所以它无法说服任何人。
• 紫色到蓝色和靛蓝到紫红色的渐变英雄区、渐变文本、内容后面的模糊彩色球体。
• 任何面向用户文本中的破折号（em dash）。使用句号、逗号或括号。references/copy.md 中的 AI 行话列表同样适用。
• 表情符号用作图标、项目符号或 UI 装饰。
• 每个标题上都有图标，每个操作旁都有按钮。
• Lorem ipsum、“即将推出”、虚构的推荐或作为真实呈现的指标。
• 默认使用 Inter、Roboto、Arial 或系统字体堆栈作为品牌字体。
• 一个从不移动的页面。静态输出读起来像组装的模板；references/motion.md 中的动效预算是完成的一部分，不是装饰。

包含修复方法的完整目录：references/anti-slop.md。

眯眼测试

模糊你的眼睛（或将截图缩放到缩略图大小）再看看。三样东西必须在模糊中幸存：焦点、阅读顺序和主要操作。如果页面变成灰色糊状，问题出在层级，再多的打磨也无法修复。先修复间距、大小和字重。这个测试只需要十秒钟，能比任何清单都发现更多糟糕的设计。

如果用户要求被禁用的模式

有时人们真的想要霓虹灯、重渐变或赛博朋克主题。不要和他们争论，也不要教训他们。把它做好：真正的对比度、真正的层级、有效的工作状态、克制的动效。说一句，只用一行，说明该技能默认不推荐这么做，你遵循了他们的喜好。禁用列表是为了防止无引导的输出，而不是为了压制表达的偏好。

参考文件映射

文件	何时阅读
references/direction.md	步骤 2，在每个新页面或重新样式时
references/typography.md	步骤 3，在选择或检查字体时
references/color.md	步骤 3，在选择或检查颜色时
references/motion.md	步骤 3 获取令牌，步骤 4 获取动效检查（预算、入场、揭示、环境动效、减少运动）
references/foundations.md	步骤 4，用于布局、间距、层级、状态和命名的法则
references/copy.md	步骤 4，每当写文案时
references/icons-and-buttons.md	步骤 4，用于操作、控件和图标
references/anti-slop.md	当输出感觉过于熟悉（不好的那种）时，或在评审时
references/verification.md	步骤 5，在说任何东西完成之前

报告

结束 UI 工作时附带一份简短报告：构建了什么、简报的一行感觉、来自 references/verification.md 的验证标签（视觉验证、静态验证或未验证，并说明原因），以及任何未完成的事情。永远不要说结果是“像素完美”或“经过全面测试”。说明你做了什么。

脚本

零依赖、无网络调用、无遥测。路径相对于此文件的文件夹。

python3 scripts/foldcheck.py src/            # 对机器生成模式进行静态审计
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # 一对颜色的 WCAG 对比度检查
node scripts/finish.mjs ./index.html          # 浏览器检查：截图、控制台、溢出（需要 Playwright）

foldcheck 和 contrast 总是运行。finish 是可选的，当缺少 Playwright 时会优雅降级；相反，使用你环境提供的任何浏览器工具，因为重点是看，而不是工具本身。