数据说明本文 Star 数等数字取自 2026 年 11 月 3 日 GitHub API 实测快照规则与流程描述均以 unslop 仓库 README 及 SKILL.md 原文为准。用 AI 生成过一个仪表盘或落地页的开发者多半见过这种页面紫色渐变、发光边框、每个图标前一个 emoji、“Welcome back! ”、标签全部大写还加了字距、间距全凭模型当天心情。它功能齐全但一眼就是AI 做的。10 月 29 日设计师 Damir Sokolovskyheydamir把解决这个问题的方法做成了开源技能heydamir/unslop——一个给 Claude Code 和 Codex 用的去 AI 味技能上线 5 天 Star 冲到 6,027同期位列 TrendShift 日榜前列。一、AI 味不是玄学是可枚举的工程问题unslop 最有价值的观点是vibecoded UI 的失败方式是可预测的。它把一眼 AI的信号整理成一张审计清单——紫色渐变、辉光、渐变文字、emoji 当图标、New ✨徽章、玻璃光泽的装饰球、全大写宽字距标签、无意义的 pulse 动画、不齐的间距、喊口号式文案。审计就是把每一条信号定位到具体代码位置一行一条。它对廉价感根源的判断只有一句话但相当锋利Slop 把丰富度撒在镶边上背景、按钮、边框、标签craft 把镶边调安静把丰富度集中到一到两个让人记住的内容瞬间。也就是说AI 生成页面的通病不是丑而是丰富度放错了地方。这一条判断比很多整本设计书都更接近实践。为什么模型总是生成这些套路从 SKILL.md 的清单反推原因不难理解紫色渐变、辉光、emoji 这类元素在训练数据里与科技感落地页高度共现模型自然把它们当作好看的最大概率组合而真正的好设计依赖具体产品的上下文决策——监控工具该像仪表、笔记应用该像纸墨——这恰恰是统计生成最难自发学会的部分。unslop 的思路因此不是换个更强的模型而是把设计师的决策过程显式写成机器可执行的规则让模型照着流程做判断而不是靠概率猜审美。项目档案2026-11-03 实测指标数值Star6,027创建后 5 天语言JavaScript技能本体为 Markdown 规则创建时间2026-10-29协议CC BY 4.0商用可用需署名适用范围Next.js / React / Vue / Svelte / Tailwind / 纯 HTMLCSS甚至只有链接的线上页面二、工作流先审计、再定方向、然后九遍修unslop 的执行流程刻意模仿了设计师做 redline 评审的方式核心是先诊断、先对齐、再动手看屏幕找到渲染代码能跑就截图判断人看到的东西而不只是代码审计对照信号清单逐条定位分诊重度 slop 走全流程轻度只做抛光没有 slop 就直说最多给两三条微调建议——绝不为了改而改定方向动第一行代码之前先写出五行设计方向给用户确认Product产品一句话、Character2~3 个具体性格词禁用 clean/modern/premium 这类万能词、World产品天然属于的世界笔记应用靠近纸墨监控工具靠近仪表和夜班、Moments哪一两处承载丰富色彩、Signature一个只有这个产品才有的签名细节。SKILL.md 给的签名示例非常具体监控工具用实时状态点、开发者工具用键帽、教学应用用手绘下划线、配送应用用路线线——都是一个不许五个。方向确认前不动代码因为中途换方向意味着全部重做九遍修理间距 → 颜色 → 图标 → 文案 → 字体 → 布局 → 细节 → 视觉 → 动效顺序固定。间距最先因为节奏定了其他才读得准文案在字体和布局之前因为标题长度决定字号和位置核对跑 checklist 对照审计清单残留的再修。这个流程本身就是给所有AI 改稿改不动场景的答案把审美判断前置成一次用户确认把执行拆成单向依赖的固定顺序——和编译器先建 AST 再做 pass 是同一个思想。三、最值得抄走的硬规则九遍修理里全是具体到像素的规则摘几组最有代表性的遍硬规则间距一切落在 4px 网格同物同尺寸导航是最密区域行高 32~36、间距 2~4清除mt-[13px]这类破坏节奏的一次性值颜色一条带世界色调的中性色阶三个文字层级primary/secondary/muted镶边只用一个 accent 且对比度达 4.5:1边框是正文色 6~10% 透明度的发丝线渐变只允许同色系内的明度变化图标所有 emoji 图标换成单一图标集默认 lucide统一 16/18px、1.5 描边颜色跟随文字层级文案界面文字禁用感叹号禁用 supercharge/seamless/unlock/magic 等膨胀词数字变化必须写明对比基准12% vs last month问候式标题Welcome back, Damir! 改为命名上下文October 2026标签短而具体Search不是Search anything...字体两个字重400/500最多 600层级靠字号和颜色而非加粗数字用tabular-nums且全文一种格式细节嵌套圆角公式内半径 外半径 − 中间 padding图表一屏一个主视觉、每图一个 accent统计卡就是数字本身不许塞迷你图凑数动效删除无意义的循环动画禁用transition-all过渡必须具名全屏一条缓动曲线拿 Tailwind 代码感受一下尺度差异!-- 改前AI 味典型写法 --divclassmt-[13px] p-[11px] rounded-2xl bg-gradient-to-r from-purple-500 to-blue-500 shadow-[0_0_30px_rgba(139,92,246,0.5)] transition-all hover:scale-105 animate-pulse uppercase tracking-widest Supercharge Your Workflow ✨/div!-- 改后unslop 风格 --divclassmt-6 p-5 rounded-xl border border-white/10 bg-[#1f1f23] transition-colors hover:bg-[#2b2b30] text-sm工作流自动化/div颜色没有消失只是从镶边搬进了该有的一两处瞬间动效没有消失只剩一个有解释意义的状态切换。四、安装与上手# Claude Code技能复制进 skills 目录即可gitclone https://github.com/heydamir/unslopmkdir-p~/.claude/skillscp-runslop/skills/unslop ~/.claude/skills/# Codex直接让 skill-installer 装# $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop使用就是一句自然语言/unslop this dashboard、/unslop the hero of https://example.com只有链接也能改脚本会先快照保存副本。另有一个彩蛋能力用 Playwright ffmpeg 生成页面逐遍自我修正的 10 秒故事视频——所有变化都是 CSS 原位补间而非切图这条视频在 X 上的原始版本就是它走红起点。五、给开发者的可操作建议把审计清单变成 CI 检查即使不用 AI 编码清单里的transition-all、9999px圆角、非 4px 网格间距、全大写标签都值得写成 ESLint/Stylelint 规则拦下来先定方向再让 AI 动手把 Character/World/Moments/Signature 五行模板贴进你的系统提示词AI 生成质量的方差会显著收窄警惕换一种流行unslop 的 Do-not 清单专门警告不要把 slop 换成新装饰玻璃、噪点、bento 网格治 slop 的本质是让每个值都有理由不是追新风格借鉴分诊逻辑避免过度设计unslop 明确规定没有 slop 就直说绝不为改而改这句话值得写进任何 AI 改稿类工具的提示词——先判断该不该改再决定怎么改注意协议CC BY 4.0 允许商用与改写但集成进自家工具链时需保留对原作者的署名。结语unslop 5 天 6,000 Star 的速度说明AI 生成的东西一眼就是 AI 生成的已经从吐槽变成了行业的真实痛点。它给出的答案朴素得近乎反直觉审美不是玄学是一张可以逐条核对的清单加上固定的修复顺序。当会写代码被模型拉平之后知道什么是好正在变成新的稀缺能力——unslop 只是把这种能力第一次写成了机器可执行的规则。本文由 AI 基于公开仓库数据撰写数据采集时间 2026-11-03。
与INCLUDE索引的锁序分裂)
