Shijiuwei/unslop

去杂乱 (Unslop)

Unslop 由 Damir Sokolovsky（@heydamir）创建，他在 X 上发起了“去杂乱”系列。它基于 CC BY 4.0 许可协议，因此任何副本或改编版本中都必须保留此署名。

栋梁木（Vibecoded）UI 的失败方式可以预测。每个表面都发光，每个标签都带有表情符号，间距取决于模型当天的输出，文案则靠吼叫。

去杂乱修复的是工艺，保留的是产品。功能、内容和区块顺序保持不变。改变的是每一个尺寸、颜色、词汇和图像，它们都变得深思熟虑。

仅仅去除杂乱只完成了工作的一半。一个干净但可能属于任何产品的屏幕，不过是下一个模板。每一次运行结束时，屏幕都应该只属于这个特定的产品。

杂乱与工艺的区别在于富集度的去处理。杂乱会将颜色和特效分散在次要元素上——背景、按钮、边框和标签。工艺则让次要元素保持低调，将富集度集中在一两处能让用户记住的内容上，比如一个渲染对象、一个漂亮的图表或一张来自产品世界的图片。

像设计师进行审查校对一样工作，一次一层，遍及整个屏幕。

好的设计长什么样

• 一个亮点。 每个屏幕都有一个精制的东西来承载颜色和工艺：一个渲染对象、一幅画或一个富图表。它周围的一切都很安静，以便它被瞬间识别。
• 静默的次要元素。 导航、按钮和文本使用带有色调的中性色和一个强调色。没有任何东西发光，没有东西与亮点竞争。
• 清晰的概念。 你能用一句话说出画面展示了什么，以及它为什么属于这个产品。
• 文本在安静的空间上。 标题位于图片或布局中特意留空的部分，简短而具体，搭配一个主要和一个次要操作，下方没有任何堆叠。
• 真实产品，真实材质。 预览看起来像有合理数据的真实应用，对象看起来像具有重量、光影的真实物体。

哪些视觉风格通常有效，哪些会失败，请参阅 references/visuals.md。可供学习的完成示例在 references/refs.md 中，而像用字形绘制图像这样的代码处理技巧则在 references/effects.md 中。

运行它

1. 查看屏幕。 找到渲染它的文件。如果你能运行应用或在浏览器中打开文件并截图，就去做，这样你就能根据人们实际看到的内容（而不仅仅是代码）进行判断。
   • 只有一个现场网站的链接，没有代码？使用 node <skill folder>/scripts/snapshot.mjs <url> unslop/original.html 保存页面，然后处理该文件的副本。添加 --dark 或 --light 以匹配用户看到的主题。它还会保存 original.live.png（现场页面的截图），因此请先渲染保存的副本并比较两者，然后再开始。由脚本绘制的动画背景无法保留，因此请从现场页面中描述它们。
   • 只有一张截图？首先将屏幕重建为一个静态 HTML 文件，紧密匹配，并将其视为原始文件。
   • 在这两种情况下，结果都是一个重新设计的、可运行的页面，用户可以将其交给实际站点的所有者，因此在报告中说明这一点。
2. 审计。 浏览 references/signs.md，列出你找到的每一个迹象，一行一个，注明其位置。
3. 决定改变多少。 在计划任何事情之前，诚实地阅读审计结果。
   • 重度杂乱，在颜色、字体、图标和文案方面有许多迹象。运行下面的完整流程。
   • 轻度杂乱，一个大多已设计好，只遗留少数迹象的屏幕。使用打磨模式。只修复审计发现的问题，从现有品牌中获取方向，而不是发明新的，并保持调色板、字体、布局和视觉。更大的想法，比如一个缺失的瞬间或英雄区域场景，作为建议放入报告中，而不是作为更改。
   • 没有杂乱。 坦率地说明，并最多提议两三个小的改进，附带精确值。仅在用户同意时才应用它们，然后停止。永远不要仅仅为了不同而改变一个好的屏幕。
4. 设定方向并停止。 写出下面描述的五行文字。向用户展示审计结果和设计方向，并等待他们的反馈后再进行编辑，因为之后更改方向意味着重做所有工作。如果你有向用户提问的工具，请通过它来提问；否则，用纯文本提问并停止。只有当用户已经说“直接做”时，才跳过等待。
5. 按顺序进行九个阶段的修复。 在开始下一个阶段之前，完成对整个屏幕的当前阶段。当几乎所有代码行都改变时，按顺序规划各个阶段，然后一口气写出新的屏幕，只要每个阶段都已应用。间距第一，因为一旦节奏正确，其他一切都会看起来不同。文案在字体和布局之前，因为标题的长度决定了它的大小和位置。视觉和动效最后，因为它们应该适配一个已经可以在没有它们的情况下工作的屏幕。
6. 检查。 运行此文件末尾的检查清单，再次渲染并与审计列表进行比较。列表中仍存在的内容将被修复。
7. 报告 设计方向、每个阶段改动了几行内容，以及你编写的任何图像提示。
8. 记录， 当被要求，或者用户想要分享某些东西时。构建故事文件并渲染 故事视频 中描述的视频。如果用户从一开始就要求，请在过程中将每个阶段写入故事文件。

保持运行快速。最多渲染屏幕三次以进行检查。当你生成图像时，在设计方向确认后立即开始，并在其运行时继续执行前面的阶段，而不是等待它。

每个阶段的精确值都位于 references/tokens.md 中。

方向

在触及任何东西之前，写下五行简短的文字。根据页面所说的产品用途和目标用户来推导它们。切勿根据流行趋势。

• 产品。 用一个简单的句子说明它做什么以及为谁而做。
• 角色。 两三个具体的词，比如 冷静、精确、略带温暖 或 快速、技术性、有趣。像干净、现代、时尚、简约和极简这样的词是不允许的，因为它们描述了每个模板。
• 世界。 产品自然所属的地域或材料。一个笔记应用靠近纸和墨水，一个监控工具靠近仪器和夜班，一个旅行应用靠近地图和窗光。这个世界设定了中性色的色调、强调色和视觉风格。
• 瞬间。 屏幕中获得丰富颜色、材质和细节的一两个位置，从产品所展示的内容中选择。预览中渲染的卡片或设备，图表中每种颜色代表一个系列的图表，放置在内容旁边的来自世界的物体。写出它们是什么。
• 标志。 只有这个产品才有的一个小细节，并持续使用。监控工具的实时状态点，开发者工具的自定义键帽，教学应用的手绘下划线，配送应用的路线线。一个细节，而不是五个。

这里的例子只展示了答案的形态。根据你面前的实际情况来推导你的答案，即使某个例子恰好符合。

如果产品已经有一个真正的品牌（比如一个 logo 文件、一种颜色或一种字体，且它们不是杂乱），请保留它，并围绕它构建设计方向。紫到蓝的渐变、闪光和发光即使是放在 logo 里，也算是杂乱，除非用户明确说明它们不算。

1. 间距

• 所有内容都基于 4px 的网格。外边距、内边距、间距和固定高度都是 4 的倍数，因此即使 28 或 104 不在代币列表中也是可以的。在小型控件内部的微调中，2px 的步长是可以的，而精确居中的奇数值则可以保留。
• 相同事物，相同尺寸。列表中的所有行共享一个高度和一个间距，一行中的所有卡片共享一个内边距。
• 空间显示分组。组内的空间小于组间的空间，因此列表读作一个块，而区块读作分开的。
• 内容对齐。图标位于一列，标签从一行开始，数字在一列中右对齐。没有任何东西因为一个随机的 translate 或奇特的外边距而偏离对齐线。
• 内边距遵循密度。紧凑的面板和侧边栏大约 16，卡片 20 到 24，页面边缘 24 到 32。
• 导航是应用中最密集的部分。行高 32 到 36，行间距 2 到 4，图标一列，标签一行。部分标签离它自己的项目比离上面的部分更近，比如上面 24，下面 8。完成后测量侧边栏，它是间距最常破裂的地方。
• 移除破坏节奏的孤立值，比如 mt-[13px] 或 py-[11px]，并用来自比例尺的步长替换它们。

2. 色彩

• 从一个中性色阶开始构建，并根据方向中的“世界”对其着色。从代币中选择石墨、暖灰或墨黑，或者以同样的方式自行着色。背景、凸起表面、边框和文本都来自这个色阶。
• 在应用和仪表盘中，背景、表面、边框和文本保持中性（石墨色阶或类似的灰色）。人们长时间盯着它们看，内容必须承载颜色。一个背景读起来是橙色、棕色、蓝色或绿色的屏幕就做得太过火了。世界通过强调色、图表和“瞬间”来展现，而不是表面。落地页可以将其表面进一步朝向“世界”着色。
• 三种文本角色：主要、次要和静默。不是十种略有不同的薰衣草色。
• 在次要元素中，一个强调色，极少使用。它标记主要操作、选中状态或唯一重要的数字。
• 方向中的“瞬间”是例外。在它们内部，颜色可以很丰富——图表中几种色调，一个具有真实材质的渲染对象，一张有自己光影的图片——只要它保持在“世界”范围内，并且每种颜色都有含义。
• 如果品牌有一种真实的颜色，它就变成强调色，并离开表面。如果没有真实的品牌颜色，则从“世界”中取强调色。
• 带文本的强调色达到 4.5:1 的对比度。如果达不到，就使其变暗，或者在其上放置深色文本。用作文本或浅色表面上的墨水的强调色需要相同的对比度，因此在那里使用其较深的色调。
• 在暗色主题上，主要按钮可以是色阶中的一种灰白色，配上深色文本，而强调色可以放在一个更小的位置，比如选中状态或关键数字。这通常看起来比彩色按钮更用心。
• 语义颜色只承载含义，比如绿色表示好的变化，红色表示错误，并且它们被降低饱和度以适配调色板。
• 移除表面上的色相渐变、渐变文本、彩色发光和投影、内容后面的径向色彩过渡和斑点，以及霓虹灯边框。
• 边框是安静的发丝线，色阶中文本颜色在 6% 到 10% 不透明度下。
• 在暗色主题上，深度来自表面层次和发丝线，而不是阴影。浮动在图片上的窗口或对象可以保留柔和的、中性的阴影。在浅色主题上，阴影是中性的、柔和的和小尺寸的。
• 渐变更允许作为单个中性色内部微小的色调偏移，比如一个活动行从 #2b2b2b 到 #1f1f1f。绝不允许从一个色相到另一个色相。

3. 图标

• 每个用作图标或标签装饰的表情符号都变成一个来自同一套的线框图标。使用项目已有的图标集，否则用 lucide。
• 所有地方统一尺寸和描边，16 或 18px，1.5 描边。
• 图标取其文本角色的颜色，通常是次要或静默色。它们从不用自己的颜色。
• 每个行中图标框宽度相同，与标签的间距固定为 8 或 10，以便标签对齐。
• 移除无任何添加的图标，比如每个卡片标题中的表情符号或每个部分标签前的表情符号。需要颜色的类别获得小的状态点。

4. 文案

• 标题用直白的词汇说明产品为谁做什么，因此不可能符合其他产品。使用页面上已有的信息，不要发明新的。
• 界面文本中不要有感叹号，更不要 !!。
• 去掉问候式标题，比如 欢迎回来，Damir！👋。标题命名上下文，比如页面名称或时间段，例如 2026年10月。
• 使用简短的标签。搜索，而不是 搜索任何内容...。
• 变化说明它对比的是什么，比如 同比上月 +12% 或 同比上月减少 3 个。
• 标题、副标题、标签、按钮和说明文字结尾不加句号。只有包含多个句子的段落才保留句号。
• 去掉高调词汇，比如超强赋能、无缝、解锁、魔法、革新或颠覆性，以及在任何地方都使用 AI 驱动。
• 无法验证的声明，比如 受到 10,000+ 个团队的喜爱 或 快 10 倍，如果用户确认它们是真实的，则变得低调且具体，否则应删除。进行询问，并在报告中列出它们。
• 模拟数据看起来真实，具有合理的数字和名称，绝不要 [X] 或 123,456。
• 像 PRO、新 ✨ 或 Beta 🚀 这样的徽章消失，除非产品真的需要它们，并且在此情况下它们也是低调的文字。

5. 字体

• 为方向中的“角色”选择字体，来自代币中的字体家族。当项目的字体是真实品牌的一部分时，保留它。像 Inter 这样并未被选择的默认字体，如果另一个字体家族更符合角色，可以替换。界面使用一个家族，加上至多一个来自代币任意行的合作伙伴：用于数字和元数据的等宽字体，或用于超大标题的显示字体。
• 使用来自比例尺的几个尺寸和两个字重（400 和 500），至多 600 用于罕见的强调。没有 700 到 900 的标题，没有渐变文本。
• 层级结构来自尺寸和颜色，而不是字重。
• 所有地方使用句子大小写。像 导航 或 本月已付 这样带有宽字间距的标签变为 Navigation 和 Paid this month。
• 小号文字绝不用负的字间距。小号文字的可读性意味着更大、稍粗或略松。紧凑的字间距仅用于大号展示文字。
• 数字使用 tabular-nums，并且在整个屏幕上使用一种格式。如果一个数字使用逗号，所有数字都使用。
• 链接是焦点交互元素的颜色，或者没有变化（只在悬停时显示下划线）。它们不假装是按钮。

6. 布局

• 内容宽度是固定的。标题和操作只使用它们所需的空间，而不是容器的一半。
• 一行最多三列。当内容足够短而无需更多列时，两列。简单的两列布局（比如标签和值）在一边。
• 表格像表格。标题行与数据行不同，数字右对齐，文本左对齐，不同名称的表格（比如销售和用户）不会意外地看起来像同一个。
• 滚动容器中的列保持对齐。标题和内容使用相同的网格，因此列不会左右跳动。
• 模态框居中，宽度不超过 640，内容不填满整个高度。它们不做内容区域所做的一切。
• 如果方向没有暗示别的做法，狭窄的布局向右或居中。宽屏布局使侧边栏固定，并将主体推向内容的自然最大宽度。
• 只有在需要时才有分组。相关字段分组在一起，带有标题（如果需要）。独立的参数不会因为放在同一个无标签的框中而被分组。
• 右侧页面上没有随机的图像、徽标或昵称。装饰性图像属于英雄区域或一瞬间。

7. 细节

• 悬停状态有一个状态：颜色转移或发丝线边框变为实线。不是镜子层。
• 微交互：检查是否一切都感觉有反应。按钮有悬停和按下状态，选项卡有激活状态，下拉菜单有选项悬停。
• 禁用元素降低不透明度，并且不悬停。
• 充足的可点击区域。所有交互元素至少为 32px 高，外部链接为 36px。图标按钮通过将内边距增加到所需尺寸来达到这个尺寸。
• 空状态告诉你没有数据而不是空表格，告诉你如何修复它，并且本身看起来与应用的其余部分一样精致。
• 加载状态看起来是稳定的：骨架屏或中性旋转器，而不是一个五彩缤纷的转圈器。
• 每个边框和阴影都有一个目的。移除装饰性边框，比如卡片周围的。

8. 视觉

• 英雄区域：每个给出了“瞬间”的屏幕都有一个。英雄区域是屏幕上主要详图的地方。它是一张不平凡但属于这个世界的图片。可以是渲染的硬件、产品截图、信息丰富的数据可视化、书法、纸上的笔迹、与 UI 重叠的物体照片、货架上的产品照片、地点的建筑照片、数据任务的示意插图、扫描的纹理、实验室的蓝绿色调照片，或任何其他源自“世界”的具象内容。好的英雄区域是完整的场景、角落的真实物体、或充满连续数据的图表。坏的是模糊的霓虹灯渐变、阿凡达山脉、浮动球体、多面几何物体、抽象的波形、涡旋、北欧水景、单调的重复虚拟数据，或任何“品牌风格”插图的东西。
• 英雄区域图像与 UI 重叠而不隐藏在下面。环境向英雄区域的边缘倾斜，并在文本和 UI 所在的位置淡化。
• 图像是高质量的，而不是低分辨率的、压缩的或伪造的。
• 英雄区域图像是用一个工具生成的（当可用且有权限时），使用来自方向的提示。
• 扁平彩色插图只在你拥有应用程序内的用户内容（如头像和背景图片）时才被允许，因为它们就是用户带来的。
• 图标不再需要字节。一个内置的 SVG 或一个小型、明确定义的字体图标成本更低。

9. 动效

• 动效的存在是为了解释变化。一个标签从一个状态到另一个状态，列表元素进入视图，导航面板打开。它们不是装饰性的。
• 声音是快速的。动效持续时间在 100 毫秒到 200 毫秒之间，100 毫秒用于小变化，200 毫秒用于面板。如果它值 400 毫秒，那就是一个故事。
• 进入无论如何都是可见的触发的元素获得一个轻微的上升。淡入为 50 毫秒，向上 100 毫秒 0px 到 -4px。
• 过渡整体上逐渐消失：背景：元素以不同的速度移动，前景更快，背景更慢或静止。一个面板在内容后面稍微延迟进入，就像翻到一页的背面。这不是强制性的，但从一个平面跳跃到另一个平面就是杂乱。
• 没有视差滚动。只有当你准备做额外的工作才能让它看起来真正不错时，才值得考虑。它从未偶然看起来不错。
• 改变布局：只有当一个元素被删除或插入时才进行布局动画，而不是每次状态变化。如果布局也进行动画，那么一个标签从一个值移动到另一个找到的只是成本。即时移动，如果你必须延缓，就用一个更快的变换。
• 悬停状态几乎不进行动画，因为按照定义，大多数悬停在被触发时是瞬时的。如果你确实需要一个悬停动画，使其缩短且简单。
• 动画在屏幕上一次只发生在 2-3 个元素上。更多就会令人分心。固定定位的元素（比如 Cookie 横幅）不触发它们自己的动画。
• 连续动画（比如脉动标记）很少见，并且总是可选的，或者在你希望用户注意的元素上。
• 对于数据可视化，动画在 500 到 1000 毫秒之间，使用缓入缓出。
• 0.01 秒。

检查清单

在这九个阶段中的每个阶段完成后，快速检查这些事情。

• 间距：所有内容都在栅格上，组内间距一致，组间间距不同
• 字体：在部分字符中仅使用句子大小写，没有大写字母标签，数字设置为表格数字，文本角色仅使用主/副/静默字体
• 颜色：次要元素为单色调色板，强调色为单色，无渐变（不发光、无彩色阴影、无糊状背景），对比度合规性
• 图标：无表情符号图标，来自单套，尺寸/描边一致，颜色为次要或静默
• 文案：无感叹号，无问候语，标签简短，声明可验证
• 图表：方向来自方向
• 组件：表格、模态框、滚动容器、空状态都处理得当
• 图像：单一图像类型（非混合/匹配），清晰、高质量，与 UI 重叠
• 动效：短暂、针对特定状态变化，无视差，无糊状执行

故事视频

如果用户要求一个视频，或者你想分享这样的内容，这是一个快速格式，用于记录从原始状态到最终状态的过程。

构建一个 story.json 文件，包含以下结构：

{
  "original": "html for initial product state",
  "passes": [
    { "name": "spacing", "html": "html after spacing pass", "explanation": "one sentence about what changed and why and how" },
    { "name": "color", "html": "html after color pass", ... },
    { "name": "icons", ... },
    { "name": "copy", ... },
    { "name": "type", ... },
    { "name": "layout", ... },
    { "name": "details", ... },
    { "name": "visuals", ... },
    { "name": "motion", ... }
  ],
  "final": "html for final product state",
  "explanations": "a few sentences about the final design"
}

然后，使用 node <skill folder>/scripts/story.mjs story.json 来渲染一个 MP4 或 WebM 文件，帧与帧之间平滑过渡，第一帧和最后一帧在最终结果上停留更长时间。它会为你产生一个带有说明的标签。

参考文献

所有这些文件都是从技能文件本身引用的。它们位于 references/ 中。

• signs.md 用于空格、颜色、图标、文案、字体、布局、细节、视觉和动效中的杂乱迹象
• tokens.md 用于精确的值，包括颜色色阶、字体大小比例、渐变、阴影和生成
• visuals.md 用于视觉风格示例
• refs.md 用于完成的去杂乱示例
• effects.md 用于代码处理，如图标形式绘制图像

许可协议

Unslop 由 Damir Sokolovsky（@heydamir）创建，他在 X 上发起了“去杂乱”系列。它基于 CC BY 4.0 许可协议，因此任何副本或改编版本中都必须保留此署名。