unslop

Unslop

unslop 由 Damir Sokolovsky（@heydamir）创建，他在 X 上发起了 Unslopping 系列。项目采用 CC BY 4.0 许可，因此任何副本或改编版本都必须保留此致谢。

Vibecoded UI 总是以相同且可预见的方式出问题。每个界面都泛着光，每个标签都带着表情符号，间距全凭模型当天输入了什么，文案则大声叫嚷。Unslopping 修正设计功力，同时保留产品本身。功能、内容和区块顺序保持不变。改变的是每个尺寸、颜色、词语和图像都经过深思熟虑。

去除杂乱只是工作的一半。界面虽然干净，却可以属于任何产品，这只是下一个模板。每次运行的最终界面都只可能属于这个产品。

杂乱与匠心的区别，在于丰富感放在哪里。杂乱会把颜色和效果铺满界面框架、背景、按钮、边框和标签。匠心则让界面框架保持安静，把丰富感集中在一两个令人难忘的内容元素上，例如渲染出的物体、精美的图表，或来自产品世界的图像。

像设计师进行逐层红线审查那样工作，逐层检查整个界面。

优秀设计的样子

• 一个亮眼元素。 每个界面都有一个经过精心打磨、承载色彩与匠心的元素，例如渲染出的物体、绘制的场景或内容丰富的图表。周围的一切都保持安静，让它一眼就能被看见。
• 安静的界面框架。 导航、按钮和文本使用带色调的中性色和一种强调色。没有发光效果，也没有任何元素与亮眼元素争抢注意力。
• 清晰的理念。 你能用一句话说清楚视觉呈现了什么，以及它为何属于这个产品。
• 在平静的空间中放置文本。 标题位于图像或布局中预留的空白处，简短而具体；只配一个主要操作和一个次要操作，下面不再堆叠其他内容。
• 真实的产品，真实的材质。 预览看起来像真实应用，数据也合情合理；物体则要像真实事物一样具有重量、光线和阴影。

哪些视觉风格通常有效，哪些容易失败，请参阅 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。

方向

在动手做任何事之前，先写五行简短的内容。根据页面对产品功能和目标用户的描述来提炼，绝不能追随流行趋势。

• 产品。 用一句朴实的话说明产品的功能和目标用户。
• 特质。 用两三个具体词语描述，例如 沉静、精准、略带暖意 或 快速、技术感、俏皮。不要用干净、现代、时尚、极简和高端之类的词，因为这些词适用于所有模板。
• 世界。 产品自然所属的场所或材质。笔记应用贴近纸张和墨水，监控工具贴近仪器和夜班，旅行应用贴近地图和窗边的光线。这个世界决定中性色调、强调色和视觉风格。
• 时刻。 选一到两个能让屏幕呈现丰富色彩、材质和细节的地方，依据产品所展示的内容来选。可以是预览中渲染出的卡片或设备、颜色各自代表一组数据的图表，或放在内容旁边、取自产品所属世界的物件。写明它们是什么。
• 标志。 仅属于这个产品的一处小细节，并始终保持一致。监控工具的实时状态圆点、开发者工具的键帽、教学应用的手绘下划线、配送应用的路线线条。只选一处，不要选五处。

此处的示例只展示答案的形式。请从眼前的产品中提炼方向，即使某个示例恰好适用也一样。

如果产品已经拥有真实的品牌元素，例如标志文件、颜色或字体，而且这些元素并不粗制滥造，就保留它们，并围绕它们构建方向。紫到蓝的渐变、闪光和光晕都属于粗制滥造，即使出现在标志中也一样；除非用户另有说明，否则它们不算品牌元素。

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. 图标

• 所有用作图标或标签装饰的 emoji 都应替换为同一套线性图标。优先使用项目已有的图标集，否则使用 lucide。
• 所有图标的尺寸和描边宽度应统一，设为 16 或 18px，描边宽度为 1.5。
• 图标应采用对应文本角色的颜色，通常为次要或弱化色。图标绝不能使用专属颜色。
• 每行的图标框宽度应一致，图标与标签之间的间距固定为 8 或 10，以确保标签对齐。
• 删除没有实际作用的图标，例如每张卡片标题中或每个分区标签前的 emoji。需要颜色区分的类别应使用小型状态圆点。

4. 文案

• 标题要用通俗的语言说明产品为谁解决什么问题，且内容不能套用到其他产品上。使用页面上已有的信息，不要编造新事实。
• 界面文本中不要使用感叹号，也绝不要使用 !!。
• 不要使用 Welcome back, Damir! 👋 之类的问候式标题。标题要说明上下文，例如页面名称或时间段，如 October 2026。
• 标签要简短。使用 Search，不要用 Search anything...。
• 变化要说明比较对象，例如 +12% vs last month 或 3 fewer vs last month。
• 标题、副标题、标签、按钮和说明文字末尾不要加句号。只有包含多个句子的段落才保留句号。
• 不要使用 supercharge、seamless、unlock、magic、revolutionize 或 game-changing 等夸大宣传用语，也不要到处都写 AI-powered。
• 对于 Loved by 10,000+ teams 或 10x faster 这类无法核实的声明，如果用户确认属实，就改写得低调且具体；否则删除。请询问，并在报告中列出这些声明。
• 模拟数据要看起来真实，使用合理的数字和名称，绝不要使用 [X] 或 123,456。
• 除非产品确实需要，否则去掉 PRO、New ✨ 或 Beta 🚀 等徽章；如确实需要，则将其作为低调的文字显示。

5. 字体

• 根据设计方向的个性，从令牌中的字体系列里选择字体。项目字体若属于真实品牌的一部分，就保留。像 Inter 这样无人选择的默认字体，如果有更符合品牌个性的字体，可以替换。界面最多使用一个字体系列，再搭配令牌任意一行中的一种字体，数字和元信息可用等宽字体，大号标题可用展示字体。
• 从字体大小比例中选取少数几种字号，并使用两种字重：400 和 500；只有少数需要强调的内容才最多使用 600。标题不要使用 700 到 900 的字重，也不要使用渐变文字。
• 通过字号和颜色建立层级，而不是依赖字重。
• 所有文本均使用句首字母大写格式。像 NAVIGATION 或 PAID THIS MONTH 这样采用宽字距的标签，改为 Navigation 和 Paid this month。
• 小字号文本绝不要使用负字距。要提升小字号文本的可读性，应增大字号、适当加粗或略微放宽字距。紧凑字距只用于大号展示文字。
• 数字使用 tabular-nums，并确保整屏采用统一的格式。如果一个数字写作 $48,210，下一个就不要写成 $124,860.40。
• 不要用斜体来强调内容。

6. 布局

• 保留各个区块及其顺序。在区块内部，如果能让画面更清晰，可以调整对齐方式和比例。
• 应用和仪表板保持真实的应用比例。外壳铺满视口，侧边栏宽 240 到 280，内容区自适应，通常限制在 1440 到 1600 宽；页面长度由内容决定，首屏下方还应有更多区块。绝不要把应用缩进窄窄的居中栏。如果原图是在背景上绘制的小窗口，就保留其窗口感，显示窗口边框和背景，同时让窗口内部仍保持桌面端比例。
• 最有感染力的落地页主视觉是一处场景。用一张生成的图片铺满主视觉区域，主体位于一侧，标题放在同一张图片中较为平静、留白的部分，产品视图从底边向上延伸。参考示例中的主视觉。
• 如果没有场景，就采用非对称分栏：文字放在一侧，视觉内容至少占一半宽度；或者在下方的大幅产品视图上方放置文字。所有内容都堆叠并居中是模板默认样式，仅在主视觉简短且没有视觉内容时保留。
• 在场景式主视觉中，文字区块放在上方，位于导航和产品视图顶部之间的空间内，以视觉中心为准，略高于真正的中点。
• 分栏时，文字区块应与视觉内容垂直居中，使任一侧都不留下大片空白角落。如果视觉内容高出许多，应缩短它，而不是把文字往下推。文字旁边放置悬浮卡片和设备很难取得平衡，优先使用单一、完整的视觉内容。导航到标题的间距标记适用于堆叠式主视觉；分栏式主视觉则应居中对齐。
• 长标题左对齐。居中文字适用于一到两行的短标题。
• 只设置一个主要操作，旁边最多再放一个次要操作。其他内容移出主视觉区域。
• 导航保持简洁：徽标、现有链接和一个按钮。登录使用旁边低调的文本链接，不要再做成第二个按钮。不必使用悬浮胶囊式页眉。在小屏幕上，链接折叠为一个菜单按钮。
• 将首屏作为一个整体来设计。主视觉应占满视口高度，不留空荡荡的区域。如果内容较短，就将其居中，或者让产品视图从较低位置开始并延伸至底边之外，引导用户继续向下滚动。
• 在小屏幕上，所有内容按阅读顺序堆叠；标题缩小至设计标记指定的移动端字号，视觉内容放在操作按钮之后。密集的预览在移动端应简化，减少行列，而不是缩小显示。预览中的文字不得小于 11px。

7. 细节

• 嵌套圆角。内层圆角等于外层圆角减去两者之间的内边距，且不小于 4。控件使用 8 到 10，卡片使用 12 到 16，面板使用 14 到 20。不要把所有东西都做成胶囊形。
• 数量和元数据应以低调的文本呈现，通常使用等宽字体和柔和的颜色，而不是发光的胶囊。
• 键盘快捷键应显示为小型按键帽。
• 图表应置于低调的网格上，标签使用低调的等宽字体。同一系列中不要使用彩虹色柱条，不要使用发光柱条，也不要把日期标签全大写。如果图表只是占位噪声，就用能传达真实信息的数据替换它。
• 图表也要有层次，就像文本一样。一个主图表应明显是屏幕上最醒目的内容，并经过精心绘制，例如使用平滑曲线或镜像对比。其他任何展示数据的内容都应更小且类型不同，例如带细条的排名列表或简短表格，绝不要再放一个同等大小的图表。
• 每张图表只用一种强调色。重点内容，例如当前月份、正在追踪的曲线或增长的计划，应使用强调色，其余内容使用色阶中的中性色。只有在图表确实需要区分系列时才使用多种色调，即便如此，也要突出一种色调，其余保持低调。
• 统计卡片只放数字：一个标签、一个醒目的数值，以及与之比较的变化。不要添加迷你趋势图、计数、迷你柱条或图标来填充卡片，这些看起来只是装饰。如果卡片中的实物正是该数字所统计的对象，则可以放入看起来真实的物品，例如付费收入旁边的付款收据，或支出旁边的银行卡。根据仪表板的需要设置卡片数量即可，但每张卡片都要能独立呈现信息，且不能是迷你图表。
• 调整卡片尺寸。并排放置、宽度相同且内容类型相同的卡片，看起来像模板。让网格富有节奏感，例如在一个宽图表上方排列三到四个紧凑的统计卡片，或将宽图表与窄列表并排放置。
• 根据数据选择图表类型。趋势用折线图，对比用柱状图，占比用一条堆叠条或带条形的列表，单一目标用进度条。
• 活跃状态应是轻微的表面层级变化，配以极细的高光线，而不是带光晕的渐变。
• 悬停和焦点状态必须存在，且颜色应在调色板范围内。为键盘用户提供清晰可见的焦点环。
• Logo 应以产品名称为主，并使用主字体系列；如果有简单的标记，也可以加上。不要使用渐变字标或闪光图块。
• 设计方向中的标志性细节只应出现在恰当的位置，不要出现在其他地方。

8. 视觉效果

• 去掉装饰性填充物。光亮的斑块、球体、星云、漂浮的立方体、发光网格、全息大脑和机器人都无法说明产品是什么。
• 落地页首屏视觉应展示真实内容。
• 仪表盘和应用界面几乎从不需要生成图像。它们的亮点应来自产品本身：精心绘制的图表、优美排版的数据、产品照片或头像等真实内容，以及鲜活的状态。对于产品涉及的实体对象，例如金融应用中的支付卡，用代码构建通常更好：使用真实材质、柔和渐变、芯片和数字。
• 仅在空状态、引导流程、营销场景或用户提出要求时，才为应用生成图像。
• 使用图像生成工具时，落地页首屏视觉的首选是生成一幅符合设计方向的场景图，宽度足以铺满整个首屏，并在文字所在处留出平静的空白。它承载色彩和氛围，界面元素则安静地叠放其上。
• 在场景图下方展示产品；如果没有图像生成工具，则直接将产品作为视觉主体。用代码构建预览，展示页面已经承诺的内容，可使用项目组件、精心编写的 HTML 和合理的数据，例如主界面、一个关键卡片或产品生成的结果。展示文案已经描述的内容，不算虚构功能。在场景首屏中，产品预览从底部边缘向上延伸，并超出边缘。
• 产品界面应呈现一个亮点，而不只是普通卡片。可以在其中放置渲染对象，例如数据图表上的支付卡，丰富的图表，或一个与主题相关的小物件。这些只是对象类型，选用合适的即可。
• 开始这一步之前，请查看 references/refs.md 中的参考内容。借鉴其中的特质，例如构图、光线、克制感和亮点的安排，切勿照搬主题或布局。
• 有图像生成工具时，用它生成渲染对象和场景。没有的话，就尽可能用代码构建，写好其余内容的提示词，并留出尺寸合适的空位。
• 如何选择主题、编写提示词以及安排图像位置，请参阅 references/visuals.md。开始这一步之前请先阅读。

9. 动效

• 移除无意义的循环动效，例如对非实时元素使用 animate-pulse 或 animate-ping、标题上的闪烁效果、呼吸式光晕、漂浮元素和视差效果。
• 移除 transition-all、弹跳弹簧效果、卡片上的 hover:scale，以及悬停时移动超过几像素的任何效果。
• 保留能解释内容的动效。悬停时快速改变颜色或表面样式，按下时轻微缩小，菜单从打开位置向上淡入几像素，变化的数字使用渐变动画。
• 对颜色、背景、边框、不透明度和变换使用过渡，并明确指定属性，例如 Tailwind 中的 transition-colors 或 transition-[transform,opacity]，不要使用一概而论的写法。切勿为宽度、高度、顶部、左侧、边距或大范围模糊效果添加动画，这些效果在性能较弱的设备上会卡顿。
• 全屏统一使用来自设计令牌的一种缓动曲线和少数几种时长。反馈动效要短，入场动效可以稍长。
• 加载时最多使用一种入场动效：主内容短暂淡入并上移，稍作错开。不要让每张卡片都从不同方向飞入。

故事视频

一段短视频，逐步修复杂乱的屏幕，并在问题之处用红色标注线标出。开始制作前，请按顺序查看 refs/story-dashboard-frames.webp 中的八帧。那段视频曾广泛传播，其原理如下：

• 没有元素被替换，一切都在渐变。 只有一个页面，每一步只改变 CSS，因此内边距、间距、尺寸、颜色、圆角和阴影都会从旧值原地过渡到新值。你会看到间距逐渐拉开，紫色逐渐褪去，圆角逐渐变柔和。
• 波浪式变化。 元素从左上角开始，每隔几十毫秒依次变化，因此变化会扫过整个屏幕，而不是所有内容同时翻转。
• 文字滚动。 发生变化的文案会模糊淡出，新文字则逐字向上浮现。
• 先标注问题。 对粗糙之处添加红色选框和标签；在间距调整步骤中显示红色尺寸标注，修正后变为白色；在细节步骤中勾勒圆角并标出半径。
• 画面紧凑，时长短。 画面为正方形，紧密裁切最显著的变化区域，确保在手机上清晰易读，时长约为 10 秒。

这会多花几分钟，因此只在用户需要时制作。

1. 一个故事文件。 构建 unslop-story/story.html，将原始屏幕及其样式一并保存为独立副本。原有规则保持不变，它们就是第 0 步。
2. 步骤。 设置 3 到 5 步，将多轮修改合并起来，让每一步都带来可见变化，例如 间距、颜色和图标、字体和文案、细节。新的图表或视觉元素放在最后一步。在 head 中将步骤列为 <meta name="unslop-steps" content="Spacing, Color and icons, Type and copy, Details">。名称中包含 Spacing 时会显示间距测量值，包含 Details 时会显示圆角轮廓。
3. 每一步都是叠加的 CSS。 将第 1 步的更改写在 .s1 下，第 2 步写在 .s2 下，依此类推，例如 .s1 .card { padding: 24px } 或 .s2 body { background-color: #141415 }。这些类会逐步叠加，因此第 3 步仍会包含第 1 步和第 2 步的规则。只改值，不改结构，这样浏览器才能在它们之间平滑过渡。
4. 无法平滑过渡的内容及处理方式。
   • 渐变、光晕和色彩晕染：将它们放在单独的图层上，并将其 opacity 渐变到 0，同时更改下方的纯色。渐变文字只能放在 .from span 上，不能放在 swap 或其父元素上，因为文字裁剪也会裁到隐藏的新文字。
   • 胶囊形元素：将其圆角写成高度的一半，例如 23px，不要写成 9999px，否则圆角只会在最后一帧才变化。
   • 谨慎使用 swap，只用于文字发生变化的地方；每个故事最多使用八个。二十个 swap 同时模糊会让画面看起来像是在两张图片之间切换，而视频绝不能有这种效果。字重、字号、字距和颜色的变化都会自行平滑过渡，因此不需要 swap。新字体系列在对应步骤中直接切换，不要使用 swap。
   • 文字变化、新字体系列、表情符号变为图标：<span class="swap" data-at="3"><span class="from">Welcome back, Damir! 👋</span><span class="to">October 2026</span></span>。到第 3 步时，旧内容会模糊淡出，新内容会滚动出现。
   • 表情符号变为图标：将新图标放在表情符号旁边，置于同一个框内；两者绝对定位叠放，并在对应步骤中交叉渐变 opacity。这不算 swap，也不计入数量限制。
   • 消失的内容，例如 New ✨ 徽章：使用 data-out="2"，在第 2 步将其收起。
   • 出现的内容，例如图例：使用 data-in="4"，在第 4 步将其淡入。为其预留空间，避免其他内容跳动。
5. 标注线。 测量值会实时跟随元素，因此元素移动时，标注数字会从旧值变到新值。这是观众关注的时刻，要仔细选择标注内容。
   • data-gap 放在垂直堆叠区块上，例如侧边栏中的品牌行、搜索框、导航组和套餐组，或主栏中的标题、统计行和图表。不要放在每一行上，否则屏幕会挤满 2px 的小标签。每个堆叠区域尽量标注 4 到 6 处间距；如果有多个堆叠区域，为每个区域设置独立名称，例如 data-gap="sidebar" 和 data-gap="main"。
   • data-radius 放在 2 到 4 个圆角会变化的按钮和卡片上。
   • data-slop="Gradient text" 等标注用于在开头短暂显示粗糙之处，最多标注 5 处。选择彼此分开的典型示例，并使用简短标签。此项为可选，参考视频中没有使用。
6. 只有屏幕及其背景。 视频展示的是故事页面本身，不应在页面外增加窗口、边框或阴影，因此页面自身的背景应填满画面，屏幕是唯一的盒子。如果屏幕位于一个会扩展到桌面尺寸的窗口中，请在故事中将其锚定到左侧，使其向右扩展，而不是横向滑动。故事页面的渲染宽度为 1440，至少高 900，因此不要根据 100vh 设置元素尺寸；position: fixed 只用于背景图层。
7. 镜头。 <meta name="unslop-frame" content="0 0 960"> 用页面像素指定画面范围，即 x、y 和宽度。将 x 和 y 对准屏幕自身的左上角，让画面边缘带有页面背景；裁剪时聚焦于变化最明显的区域，通常是侧边栏，或标题和第一组卡片。
8. 渲染。 运行 node <skill folder>/scripts/story.mjs unslop-story/story.html unslop-story.mp4；默认输出正方形视频，使用 --wide 输出 16:9 视频。运行需要 Playwright 和 ffmpeg；如果缺少其中任何一个，请告诉用户安装它所需的那条命令。若要先实时预览，请使用 --play 替代输出路径运行；视频会在浏览器窗口中循环播放，直到窗口关闭。交付前，用 ffmpeg 提取几帧并检查。检查故事文件和视频不计入本次运行的渲染次数限制。
9. 故事文件是用于展示的作品。 完成后的干净结果仍应使用项目自身的技术栈，作为普通代码交付，不包含 .s 类或故事属性。根据许可证要求，每个视频都要带有小型署名 unslop by @heydamir。

不要

• 不要更改产品名称，即使名称中包含 AI 也不行。保留真实的 Logo 原样不动。如果 Logo 本身很俗气，比如渐变色块上的表情符号或闪光图案，就将其重新绘制为扁平风格：仅保留使用新字体的字标，或用单一纯色呈现一个体现产品理念的简单图形。绝不要使用光泽或渐变球体、光晕或渐变色块，这些元素第一眼就会让人联想到 AI。
• 不要改变产品的定位。保留其功能、内容和各部分的顺序，除非用户另有要求。毫无意义的占位内容可以替换为有意义的内容。
• 不要用新的装饰元素替代已移除的装饰，也不要用一种潮流风格替换另一种，例如玻璃质感、颗粒、噪点、霓虹灯或便当网格。
• 不要编造功能、声明或数据。
• 不要让每个产品都套用同一种视觉风格。配色倾向、字体和视觉风格应由设计方向决定，而不是习惯。

检查清单

• 已明确设计方向，且每次迭代都遵循这一方向
• 所有间距值均为 4px 的倍数，相同的元素尺寸一致
• 图标、标签和数字各自对齐在同一列中
• 使用一套带色调的中性色阶、三种文本角色，以及一个对比度足够的强调色
• 不使用色相渐变、渐变文字、光晕、彩色阴影或色块
• 界面中没有表情符号
• 统一使用一套图标集，尺寸和描边粗细一致
• 字体应符合产品特质，字重为 400 到 600；不用加宽字距的全大写标签、斜体，也不对小号文字使用负字距
• 不使用感叹号；短字符串末尾不加句号；不使用问候式标题；不作未经核实的声明
• 数字格式统一，并使用等宽数字
• 嵌套圆角的数值相加后保持一致
• Hero 区域应包含真实视觉素材或产品预览，并至少呈现一个具体场景；绝不使用填充内容或带标签的占位符
• 首屏作为一个整体进行设计，不留大片空白区域
• 不使用循环或弹跳动效；统一使用一种缓动曲线；不对布局属性进行动画处理
• 模板检查：如果把产品名称换成另一个产品的名称，页面看起来仍然合适吗？如果是，就在文案、视觉设计和标志性细节上进一步强化设计方向