GitHub 热门项目推荐：unslop（JavaScript

这个项目有什么用

unslop 是一个给 Claude Code 和 Codex 用的 skill，专门把「vibecoded」、一眼看着像 AI 生成的界面，改造成有自身设计性格的界面。它会先找出界面里的「slop」——紫色渐变、发光、emoji 标签、喊话式文案、不均匀的间距——再根据你的产品定一个方向，像设计师做 redline review 一样一屏一屏地修。

它替代了什么

替代人工逐项排查「AI 味」的视觉问题：渐变、光晕、emoji 标签、文案语气、间距节奏等。
替代「凭感觉改一版」的流程：先审计、再定方向，然后按固定顺序分轮修改，改动有据可依。
替代只给建议不动手的方案：它直接在项目里改屏幕。

典型使用场景

用 Next.js、React、Vue、Svelte、Tailwind 或纯 HTML/CSS 写的 dashboard、应用和落地页。
手上只有一个链接的线上站点，也可以拿来做快照并处理。
需要一条 10 秒以内的方形「story video」，展示屏幕自己被「unslopping」的过程，方便发到社交平台。

适合谁用

适合已经在用 Claude Code 或 Codex、希望把 AI 生成的原型快速推进到「看起来像被设计过」的开发者、独立开发者和产品团队。如果你本来就有成熟设计系统和设计稿，它的价值会相对有限。

核心特性

先审计再动手：在修改任何东西之前，先列出每一处 slop 以及它出现的位置，让你可以提前介入方向。
从产品出发定方向：给出性格、世界观、承载颜色的那一两个瞬间，以及一个 signature detail，都取自你的产品本身。
按固定顺序分轮修改：依次处理 spacing、color、icons、copy、type、layout、details、visuals 和 motion。
克制的判断：如果屏幕本来就不错，它会直接告诉你，并只建议几处小改进，而不是推倒重做。
可选生成视觉素材：hero 需要场景或物件时，可通过 fal、Replicate、OpenAI images 或 Higgsfield 之类的图像服务生成；未接入时会提议以 MCP server 方式接入，且每次付费生成前都会展示 prompt 并征得同意。
生成 story video：输出一条 10 秒以内的方形视频，记录屏幕自我改造的过程，依赖 Playwright 与 ffmpeg。

怎么安装

前提：你需要已经使用 Claude Code 或 Codex；若要快照线上站点或生成 story video，还需要 Node.js 环境下的 npm，story video 另外要求 ffmpeg 已安装并在 PATH 中可用。官方 README 未说明具体的语言版本要求。

安装到 Claude Code 的全局 skills 目录：

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

如果只想在单个项目里使用，把 skill 复制到该项目内的 .claude/skills/ 目录即可。

Codex 用户可以直接让它从仓库安装：

$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

也可以手动复制到 ~/.agents/skills/，或复制到单个项目内的 .agents/skills/：

git clone https://github.com/heydamir/unslop
mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/

若要快照线上站点或制作 story video，在你运行 skill 的项目目录下安装 Playwright 及其 Chromium 浏览器：
```
npm install -D playwright
npx playwright install chromium
```

怎么使用

在 Claude Code 中输入 /unslop 并说明需求；在 Codex 中输入 $unslop。也可以用自己的话直接描述，agent 会自行识别并调用这个 skill。

/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post it

常见进阶用法：

只改某个区块，例如上面示例中的 hero，而不是整页重做。
直接给线上链接，让它对站点做快照后处理。
在同一个请求里追加「make the story video」，生成可发布的方形短视频；这一步需要 Playwright 和 ffmpeg。

需要图像生成时，它会先展示 prompt 并在每次付费生成前征求你的同意；未接入图像服务时，会提议以 MCP server 的方式接入。具体支持的服务与配置方式，官方文档未说明细节。

适用场景与注意事项

适合：AI 生成的原型、个人项目、落地页和 dashboard 的视觉打磨；希望保留自己产品调性而非套模板的界面。
不适合：已有严格设计规范与设计稿、需要像素级对齐既有设计系统的团队；以及不希望 agent 直接修改代码库的场景。
联网与外部依赖：快照线上站点和 story video 依赖 Playwright 与 Chromium；story video 还依赖 ffmpeg；图像生成属于可选的第三方付费服务。
付费提醒：README 明确说明每次付费生成前都会展示 prompt 并先询问，但仍需自行留意所用图像服务的计费。
许可证：项目采用 CC-BY-4.0，二次使用与分发时需注意署名等条款要求。