unslop：Claude技能将AI生成的粗糙UI优化为专业设计
heydamir/unslop: A Claude skill that turns vibecoded, AI-looking UI into a designed interface
做前端和Agent开发的同学必看，这个Claude Skill提供了一套完整的UI审美清洗工作流，参数和步骤清晰，直接拿来就能提升AI生成界面的质感。
A Claude skill that turns vibecoded, AI-looking UI into a designed interface
一个 Claude 技能，能将“氛围编码”（vibecoded）、AI 风格的 UI 转化为具有设计感的界面
GitHub repository created 2026-10-29 · 1119 stars in 1.3 days (about 858 a day) · JavaScript
GitHub 仓库创建于 2026-10-29 · 1.3 天内获得 1119 颗星（约每天 858 颗）· JavaScript
unslop
Created by Damir Sokolovsky (@heydamir), who started the Unslopping series on X.
由 Damir Sokolovsky (@heydamir) 创建，他在 X 上发起了 Unslopping 系列。
unslop is a skill for Claude that turns vibecoded, AI-looking UI into a designed interface with its own character. It finds the slop first, the purple gradients, glows, emoji labels, shouty copy and uneven spacing, then sets a direction from your product and fixes the screen pass by pass like a designer doing a redline review. It works in whatever your screen is built with, like Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, on dashboards, apps and landing pages, and even on a live site when all you have is a link.
unslop 是一个用于 Claude 的技能，它能将“氛围编码”、AI 风格的 UI 转化为具有自身个性的设计界面。它首先识别那些粗糙的设计元素——紫色渐变、发光效果、表情符号标签、夸张的文案和不均匀的间距，然后根据你产品的定位设定方向，像设计师进行红线评审一样逐屏修复。它适用于任何屏幕构建技术，如 Next.js、React、Vue、Svelte、Tailwind 或纯 HTML 和 CSS，可用于仪表盘、应用和落地页，甚至在你只有一个链接的情况下，也能直接处理在线网站。
Install
安装
For Claude Code, copy the skill into your skills folder.
对于 Claude Code，将该技能复制到你的 skills 文件夹中。
For a single project, copy it into `.claude/skills/` inside that project instead.
对于单个项目，请将其复制到该项目内的 `.claude/skills/` 目录中。
Use
使用
In Claude Code, type `/unslop` with what you want, or just ask in your own words and Claude picks the skill up by itself.
在 Claude Code 中，输入 `/unslop` 并附带你想要处理的内容，或者直接用你自己的语言提问，Claude 会自动调用该技能。
It audits the screen and proposes a direction before it edits anything, so you can steer it early. If the screen is already good, it tells you so and suggests a few small refinements instead of redesigning it.
它会在编辑任何内容之前先对屏幕进行审核并提出方向建议，以便你尽早引导。如果屏幕已经很好，它会告知你，并建议进行少量微调，而不是重新设计。
What it does
功能说明
- Audit. Lists every sign of slop with where it lives. - Direction. Character, world, the one or two moments that carry the color, and a signature detail, all taken from your product. - Passes. Spacing, color, icons, copy, type, layout, details, visuals and motion, in that order. - Visuals. Shows your product instead of a glossy blob. When a hero needs a scene or an object, it can generate one through an image service like fal, Replicate, OpenAI images or Higgsfield. If none is connected, it offers to connect one as an MCP server, and it shows the prompt and asks before every paid generation. Dashboards and apps rarely need one. - Story video. A square video under 10 seconds of your screen unslopping itself, ready to post. It needs Playwright and ffmpeg.
- - 审核：列出所有粗糙设计迹象及其所在位置。 - 方向：基于你的产品确定角色、世界观、承载色彩的一两个关键时刻以及标志性细节。 - 迭代轮次：按顺序处理间距、颜色、图标、文案、字体、布局、细节、视觉效果和动画。 - 视觉效果：展示你的产品而非光鲜亮丽的模糊块。当英雄区需要场景或物体时，它可以通过 fal、Replicate、OpenAI images 或 Higgsfield 等图像服务生成。如果没有连接任何服务，它会提议作为 MCP 服务器连接，并在每次付费生成前显示提示词并征求同意。仪表盘和应用通常不需要此功能。 - 故事视频：一段时长不超过 10 秒的正方形视频，展示你的屏幕去除粗糙设计的过程，可直接发布。需要 Playwright 和 ffmpeg。
Try it on the two vibecoded screens in examples.
尝试在 examples 中的两个“氛围编码”屏幕上试用。
Hire the unslopper
雇佣 unslopper
Would rather have a designer do it? Damir unslops one key screen in 3 days, built in your stack, at heydamir.design/unslop.
更希望由设计师来完成？Damir 可在 3 天内为你清理关键屏幕，并使用你的技术栈构建，详情请访问 heydamir.design/unslop。
License
许可证
CC BY 4.0. Use it, change it and share it, including commercially, as long as you credit Damir Sokolovsky (@heydamir) and link back to this repository.
CC BY 4.0。你可以使用、修改和分享它，包括商业用途，只要注明 Damir Sokolovsky (@heydamir) 的署名并链接回本仓库即可。
更进一步：量化金融体系
看懂新闻只是起点——沿量化金融路径，把它变成能交付的工程能力