heydamir/unslop

unslop 是一个面向 Claude 的技能，用来把“vibecoded”、带有明显 AI 生成感的界面，改造成更有明确设计方向的界面。它适合已经用 AI 或快速方式生成网页屏幕、希望先得到结构化审查再逐项修复的人，而不是从零开始重做整个设计。

实际工作方式

它先做审计：列出紫色渐变、光晕、emoji 标签、夸张文案、不均匀间距等“slop”迹象，并标注每处所在位置。接着从产品本身出发提出一个设计方向，在此之前不会改动任何内容，因此用户可以在早期介入调整。方向确定后，它按顺序进行修改：间距、颜色、图标、文案、字体、布局、细节、视觉和动效。如果屏幕本身已经不错，它会直接说明，并只建议少量微调，而不是重新设计。

根据说明，它不依赖具体技术栈，适用于 Next.js、React、Vue、Svelte、Tailwind 或纯 HTML/CSS 构建的界面，覆盖仪表盘、应用和落地页。只有链接时，也可以对线上站点操作。仓库提供了两个带有 AI 感的示例屏幕，可直接试用 示例屏幕。

使用路径

文档中的使用路径是 Claude Code。用户可以把技能复制到 ~/.claude/skills/ 供所有项目使用，或复制到某个项目的 .claude/skills/ 中，然后输入 /unslop 并指定目标，或者直接用自然语言描述需求，让 Claude 自行选用该技能。具体步骤见 安装说明。

条件与附加能力

有些能力是可选的，不属于核心的审查与修复流程：

• 视觉生成： 当 hero 区域需要图片或场景时，技能可以调用 fal、Replicate、OpenAI images 或 Higgsfield 等图像服务。若尚未连接，它可以提议以 MCP server 方式接入。每次付费生成前都会展示提示词并征得同意。仪表盘和应用通常很少需要这一步。
• 故事视频： 生成一段方形、不到 10 秒的屏幕“自我去 AI 感”视频，需要 Playwright 和 ffmpeg。这是与设计修改分开的输出。
• 并非只读审查： 审计和方向在先，但之后仍会修改文件；除非用户中途叫停，否则它不是只读审阅工具。

许可证 为 CC BY 4.0：允许使用、修改和商业使用，但必须注明 Damir Sokolovsky 并链接回仓库。项目范围和当前状态以 仓库 为准。