unslop

项目简介

unslop 是用于 Claude Code 和 Codex 的 Skill，可把带有明显 AI 生成痕迹的界面改造成具有自身特色的设计界面。它会先找出常见的 AI 生成痕迹，例如紫色渐变、发光效果、表情符号标签、夸张文案和不均匀间距，再根据产品确定设计方向，并像设计师做红线批注一样逐轮修正屏幕。它适用于 Next.js、React、Vue、Svelte、Tailwind 以及原生 HTML 和 CSS，可处理仪表盘、应用、落地页，也能在只有链接时处理线上站点。

核心功能

• 审查会列出每种 AI 生成痕迹及其所在位置；方向会从产品中提炼角色、世界、承载色彩的一两个瞬间以及标志性细节；分轮调整按间距、颜色、图标、文案、字体、布局、细节、视觉和动效的顺序进行；可处理 Next.js、React、Vue、Svelte、Tailwind 或原生 HTML 和 CSS，并适用于仪表盘、应用、落地页，以及仅提供链接的线上站点；当首屏需要场景或物体时，可通过图像服务生成视觉内容，并在每次付费生成前展示提示词并征得确认；故事视频会生成一段不超过 10 秒的方形视频，展示屏幕如何被逐步修正，需要 Playwright 和 ffmpeg。

适用场景

• 重新设计带有明显 AI 生成痕迹的仪表盘，使其更像经过设计的产品而非 AI 模板；为线上网站首屏提供产品专属的视觉方向与针对性修正；改进落地页并生成可发布的短故事视频；审查已有界面，如果已经不错则给出小改进建议而不是全面重做。

快速开始

• 在 Claude Code 中，克隆仓库后将 skills/unslop 复制到 ~/.claude/skills/；单项目则复制到项目内的 .claude/skills/。在 Codex 中，可从仓库安装该 Skill，或复制到 ~/.agents/skills/；单项目则复制到 .agents/skills/。在 Claude Code 中输入 /unslop，在 Codex 中输入 $unslop，也可以用自己的话描述需求，让代理自行选用该 Skill。若要给线上站点做快照或制作故事视频，在运行该 Skill 的项目目录中安装

部署与要求

• 给线上站点做快照或制作故事视频需要 Playwright 及其 Chromium 浏览器。制作故事视频还需要安装 ffmpeg 并确保它在 PATH 中可用。

采用前须知

• 许可证：CC-BY-4.0。在使用、修改或分发项目前，请确认其具体条款。