AgentSkillsDir 首页
提交
unslop 项目配图
Claude 技能

面向编程智能体的 Unslop UI Skill · heydamir

unslop 来自 Damir Sokolovsky（heydamir/unslop，CC BY 4.0），是适用于 Claude Code 和 Codex 的技能，把“氛围编程”出来、一眼 AI 味的界面改成有设计感的界面。它先找出 slop：紫色渐变、发光、emoji 标签、喊口号的文案和忽大忽小的间距；再从你的产品出发提出方向，然后像设计师批红线一样逐轮修改。

你要改文风，还是改界面？

文风同名的写作工具，例如 theclaymethod/unslop 或 pstack 里的 /unslop 命令，是改写文字的。不是本页。
界面heydamir/unslop 修改界面代码，就是本页。它不是 unslop.site 或其他产品，也不是托管改站服务：AgentSkillsDir 不会替你改站。

安装后输入 /unslop

  1. Claude Code
    git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
  2. Codex
    $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop
  3. 然后
    /unslop this dashboard
Codex 或仅单个项目？

在 Codex 中用 $unslop 调用。它会先审查并提出方向，再动手修改。以上为上游 README 步骤，AgentSkillsDir 尚未实测。

它是什么，不是什么

unslop 适用于任何技术栈（Next.js、React、Vue、Svelte、Tailwind 或纯 HTML/CSS）的仪表盘、应用和落地页；只有一个链接时也能处理线上网站。它保留产品本身：功能、内容和板块顺序不变，让每个尺寸、颜色、用词和图片都变得有意为之。上游的目标是做出只属于这个产品的界面，而不是一个更干净的模板。

它不是写作去 AI 味工具，不是以依赖包形式安装的设计系统，也不是一项服务。本页是附来源链接的目录条目。

安装

以下命令依据提交 1d13095e4bef 的上游 README（2026 年 11 月 1 日抓取）。AgentSkillsDir 尚未实测。

  • Claude Code

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

    把技能文件夹复制到 ~/.claude/skills/，然后输入 /unslop。

    仅当前项目：改为复制到项目内

    mkdir -p .claude/skills && cp -r unslop/skills/unslop .claude/skills/

  • Codex

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

    在 Codex 中输入这一行，它会从仓库目录安装。然后输入 $unslop。

    或手动复制到 ~/.agents/skills/（单个项目用 .agents/skills/）

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

README 只写了这两个助手，所以本页只列这两个。

第一次运行 /unslop

输入 /unslop（Codex 用 $unslop）并说明要处理什么，或者直接用自己的话提要求，助手会自动调用这个技能。可以指向代码里的页面，给一个链接，或者给一张截图（SKILL.md 说明会先把截图还原成一个静态 HTML 文件）。README 的示例：

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

上游还附带两个氛围编程出来的示例界面（一个仪表盘、一个首屏）可供试用，见 examples/。

一次运行的过程

  1. Audit列出每一处 slop 信号及其所在位置。
  2. Direction从你的产品出发定下性格、世界观、承载色彩的一两个时刻和一个标志性细节。动手改之前先提出。
  3. Passes按顺序逐轮处理：间距、颜色、图标、文案、字体、布局、细节、视觉和动效。
  4. Visuals可选。可通过你接入的出图服务生成主视觉；每次付费生成前都会展示提示词并征求同意。
  5. Story video可选。一段不到 10 秒的方形视频，展示界面一步步去掉 AI 味。需要 Playwright 和 ffmpeg。

上游说明，如果界面已经不错，它会直接说明，只建议几处小调整，而不是推倒重来。

它会挑出哪些 slop 信号

以下摘自上游的信号清单，每条附带上游给出的修法。完整清单还包括图表、logo、落地页首屏、视觉，以及清理后容易退回的“模板感”。

  • 背景、卡片、按钮上的紫到蓝、紫到粉渐变一个中性底色，强调色只用在有意义的地方
  • 彩色外发光、发光胶囊标签去掉，用底色层级和细线表现层次
  • 标题、数字或 logo 上的渐变文字统一的主文字颜色
  • 把 emoji 当导航图标、标签或状态（🏠 🚀 🔥）一套线性图标，或干脆不用
  • 凡是 AI 就加 ✨；到处是“New ✨”“Beta 🚀”徽标去掉，或只留一个低调的文字徽标
  • 全大写加宽字距的标签句首大写、正常字距
  • mt-[13px] 这类随意间距统一到 4px 步进
  • 喊口号式文案：“Welcome back! 👋”“+12%!!”“supercharge”平实陈述并给出参照：“较上月 +12%”
  • 主视觉背后漂浮的光斑、球体和发光线条纯背景，或一张真实的产品画面
  • 对并非实时的元素使用 animate-pulse 和呼吸光效保持静止

阅读上游完整的 signs.md

限制与可选依赖

  • 抓取线上网站和录制演示视频需要 Playwright 及其 Chromium 浏览器，安装在你运行技能的项目里：
    npm install -D playwright npx playwright install chromium
  • 演示视频还需要 PATH 中可用的 ffmpeg。每段视频都带一个小小的“unslop by @heydamir”署名，这是许可要求。
  • 主视觉图通过你接入的出图服务生成（上游提到 fal、Replicate、OpenAI images 和 Higgsfield）。每次付费生成前都会展示提示词并征求同意。仪表盘和应用很少需要。
  • 以上均为上游能力，本站未复现，也不托管 Playwright、ffmpeg 或出图运行环境。

不是写作版 unslop

有好几个工具叫这个名字。theclaymethod/unslop 和 pstack 里的 /unslop 命令是改写文字、去掉 AI 腔，它们是不同作者的独立项目。heydamir/unslop 不碰你的文风，只改界面。它也和本目录里的 Archify、Graphify 等技能无关。分辨方法：我要改的是文字，还是像素？

本页能帮你做什么

  • 区分 UI unslop 与同名写作工具
  • 复制 README 中 Claude Code 或 Codex 的安装命令
  • 给出 /unslop 与 $unslop 的调用方式和上游示例
  • 列出上游检查的 slop 信号及对应修法
  • 标出可选的 Playwright、ffmpeg 与付费出图步骤
  • 链接固定版本的源码及其 CC BY 4.0 署名要求

AgentSkillsDir 没有在任何网站上运行过 unslop，包括本站。

安装前

  • 这是会给助手添加指令和两个 Node 脚本（snapshot 与 story）的第三方代码。安装前请先阅读 SKILL.md 和脚本。
  • 收录不等于安全审查。AgentSkillsDir 没有审查过这些代码。
  • 像审查其他改动一样审查它的 diff。上游会保留功能和内容，但它确实会修改你的文件。

常见问题

unslop UI skill 是什么？

Damir Sokolovsky 开源的智能体技能（heydamir/unslop，CC BY 4.0），适用于 Claude Code 和 Codex。它先审查界面里的 AI 味，从你的产品出发提出方向，再逐轮修改间距、颜色、图标、文案、字体、布局、细节、视觉和动效。

它和写作类的 unslop 工具是一回事吗？

不是。theclaymethod/unslop 和 pstack 里的 /unslop 命令是改写文字、去掉 AI 腔。heydamir/unslop 改的是界面代码。想改文风，用写作工具；想改界面长相，看本页。

如何为 Claude Code 安装 unslop？

依据 README：git clone https://github.com/heydamir/unslop，然后 mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/。只用于单个项目时，改为复制到 .claude/skills/。AgentSkillsDir 尚未实测。

如何为 Codex 安装？

在 Codex 中输入 $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop，或把 skills/unslop 复制到 ~/.agents/skills/。用 $unslop 调用。AgentSkillsDir 尚未实测。

能在 Cursor 或其他助手里用吗？

上游 README 只写了 Claude Code 和 Codex，所以本页只列这两个。尝试其他助手前请先查看仓库是否有更新。

/unslop 可以作用在什么上？

代码库里的页面（Next.js、React、Vue、Svelte、Tailwind 或纯 HTML/CSS）、只有一个链接时的线上网站，或一张截图（SKILL.md 说明会先把截图还原成一个静态 HTML 文件）。上游示例：“/unslop this dashboard”和“/unslop the hero of https://example.com”。

界面本来就不错，它也会大改吗？

上游说明不会：它先审查、先提方向再动手；如果界面已经不错，会直接说明，只建议几处小调整。

需要 Playwright、ffmpeg 或出图服务吗？

只有额外功能需要。Playwright 用于抓取线上网站和录制演示视频，视频还需要 ffmpeg。主视觉图通过你接入的出图服务生成，每次付费生成前都会询问。AgentSkillsDir 尚未复现这些步骤，也不托管其中任何一项。

CC BY 4.0 对我的项目意味着什么？

你可以使用、修改和分享这个技能，包括商业用途，前提是署名 Damir Sokolovsky（@heydamir）并链接回仓库。演示视频里带有一个小小的“unslop by @heydamir”署名，也是这个原因。

AgentSkillsDir 会替人去 AI 味或审查代码吗？

不会。这是附来源链接的目录条目。AgentSkillsDir 不改任何人的界面，没有运行过这个技能，也没有审查过它的代码。收录不等于安全审查。

更正与建议

发现内容过时，或想推荐一个技能？发送更正邮件。若要推荐资源，请提交供人工审核。