DesignNov 1, 2026@donghyeok99Staff

unslop: AI가 만든 티 나는 화면을 디자인된 화면으로 고치는 Claude 스킬

바이브코딩한 대시보드를 고치는 과정을 올린 X 영상이 좋아요 1만 6천 개를 넘겼고, 그 방법이 Claude 스킬로 나왔어요

/unslop을 치면 보라색 그라데이션, 글로우, 이모지 아이콘이 빨간 표시를 받고, 회색 화면과 줄 맞춘 카드, 차트 선 하나로 바뀌어요.

누가: X에서 Unslopping 시리즈를 연 Damir Sokolovsky(@heydamir)가 만들었어요. 바이브코딩한 화면이 AI가 만든 티가 나서 고민인 사람을 위한 스킬이에요.
언제: 2026년 10월 29일에 저장소가 열렸어요. 릴리스 태그는 아직 없어요.
어디서: Claude Code 스킬이에요. Next.js, React, Vue, Svelte, Tailwind, 순수 HTML/CSS 화면에 쓰고, 코드 없이 라이브 사이트 링크만 줘도 돼요.

이게 불편했어요

에이전트에게 화면을 맡기면 기능은 금방 돌아가는데, 모든 카드가 빛나고 라벨마다 이모지가 붙고 간격은 그날그날 달라요. 어딘가 이상한 건 알겠는데, 디자이너가 아니면 무엇부터 손대야 할지 짚기 어려웠어요.

그래서 이렇게 풀어요

unslop은 고치기 전에 먼저 화면에서 AI 티가 나는 곳을 하나씩 찾아 어디에 있는지 적어요. 그다음 제품이 무엇을 하는지에서 성격, 세계, 색이 몰릴 한두 곳, 시그니처 디테일을 정해 보여 주고, 내가 답하면 디자이너가 레드라인 리뷰를 하듯 간격부터 모션까지 한 겹씩 고쳐요. 화면이 이미 괜찮으면 그렇다고 말하고 작은 손질 몇 가지만 권해요.

안에서는 이렇게 돌아가요

1
나 → Claude Code (unslop)
/unslop this dashboard명령으로 부르거나 말로 부탁해도, Claude가 스킬 설명을 보고 unslop을 골라 화면 파일부터 찾아요.skills/unslop/SKILL.md
2
Claude Code (unslop) → references/signs.md
징후 목록으로 감사보라 그라데이션, 색 글로우, 이모지 아이콘, 대문자 라벨, 제멋대로 간격마다 위치와 고칠 방법을 한 줄씩 적어요.skills/unslop/references/signs.md
3
Claude Code (unslop) → 나
감사 목록 + 방향 다섯 줄제품, 성격, 세계, 모먼트, 시그니처를 보여 주고, 내 답을 들은 뒤에야 파일을 고치기 시작해요.skills/unslop/SKILL.md
4
references/tokens.md → Claude Code (unslop)
4px 간격 단위, 회색 램프, 서체 값간격, 색, 아이콘, 문구, 타이포, 레이아웃, 디테일, 비주얼, 모션을 이 순서로 한 겹씩 고칠 때 쓰는 시작값이에요.skills/unslop/references/tokens.md
5
Claude Code (unslop) → 고친 화면과 정사각 영상
프로젝트 스택 그대로 고친 화면기능과 섹션 순서는 그대로 두고, 체크리스트로 다시 렌더해 감사 목록에 남은 것이 없는지 확인해요.skills/unslop/SKILL.md
6
Claude Code (unslop) → scripts/story.mjs
node story.mjs story.html unslop-story.mp4단계마다 CSS만 덧씌운 story.html을 Playwright로 열고, 값이 바뀌는 모습을 초당 60장씩 찍어요.skills/unslop/scripts/story.mjs
7
scripts/story.mjs → 고친 화면과 정사각 영상
ffmpeg로 묶은 정사각 MP4빨간 측정선과 unslop by @heydamir 크레딧이 들어간 영상이 나와요. --wide를 주면 16:9예요.skills/unslop/scripts/story.mjs

넣으면 이렇게 나와요

/unslop this dashboard감사 목록과 방향 다섯 줄을 먼저 보여 주고, 답을 들은 뒤 대시보드를 고쳐요.

/unslop the hero of https://example.com링크의 페이지를 snapshot.mjs로 저장해 사본을 고치고, 사이트 주인에게 넘길 코드로 돌려줘요.

/unslop my landing page and make the story video so I can post it고친 랜딩 페이지와, 화면이 고쳐지는 10초 안쪽의 정사각 영상을 함께 만들어요.

나한테 맞을까요

이럴 때 좋아요

바이브코딩으로 만든 대시보드나 랜딩 페이지가 템플릿처럼 보일 때
디자이너 없이 출시 전에 화면을 한 번 다듬고 싶을 때
코드는 없고 라이브 사이트 링크만 있는데 고친 시안이 필요할 때
고쳐지는 과정을 SNS에 올릴 짧은 영상이 필요할 때

이건 안 돼요

스토리 영상은 Playwright와 ffmpeg가 있어야 만들 수 있고, 작업 시간이 몇 분 더 걸려요.
히어로 이미지 생성은 fal, Replicate, OpenAI images, Higgsfield 같은 이미지 서비스가 있어야 하고, 유료 생성 전마다 프롬프트를 보여 주고 물어봐요.
링크나 스크린샷만 줬을 때는 실제 사이트가 아니라 다시 만든 페이지 코드를 돌려줘요. 실제 반영은 사이트를 가진 사람이 해야 해요.
CC BY 4.0이라 회사에서도 쓰고 고칠 수 있지만, Damir Sokolovsky(@heydamir) 크레딧과 저장소 링크를 남겨야 해요.

발행 전에 Devalley 편집자가 검토했어요. 칼럼은 어떻게 만드나요

unslop: a Claude skill that fixes AI-looking UI

Its maker's X video of a vibecoded dashboard being redesigned passed 16,000 likes; the process is now a Claude skill

After /unslop, the purple gradient, glows and emoji icons get red marks, then give way to a grey screen, aligned cards and a single chart line.

Who: Made by Damir Sokolovsky (@heydamir), who started the Unslopping series on X, for anyone whose vibecoded screens look AI-made.
When: The repository opened on October 29, 2026. No release tags yet.
Where: A Claude Code skill. Works on Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, and on a live site from just a link.

What was hard

Hand a screen to an agent and it works quickly, but every card glows, every label has an emoji and the spacing changes from row to row. You can tell something is off, yet without a designer it is hard to say where to start.

What it does about it

unslop audits before it edits: it lists each sign of slop and where it lives. Then it reads what the product does and proposes a character, a world, the one or two places that carry colour and a signature detail. Once you answer, it fixes the screen layer by layer, like a designer's redline review, from spacing to motion. If the screen is already good, it says so and suggests a few small refinements.

Eight frames from the README's video of a dashboard unslopping itself

How it runs inside

1
You → Claude Code (unslop)
/unslop this dashboardAs a command or in plain words, Claude picks unslop from its description and finds the screen's files.skills/unslop/SKILL.md
2
Claude Code (unslop) → references/signs.md
Audit against the list of signsPurple gradients, glows, emoji icons, uppercase labels, stray spacing: one line each, where it lives and its fix.skills/unslop/references/signs.md
3
Claude Code (unslop) → You
Audit + five-line directionProduct, character, world, moments and signature are shown first; files are edited only after you answer.skills/unslop/SKILL.md
4
references/tokens.md → Claude Code (unslop)
4px spacing scale, grey ramps, typeStarting values for the passes, in order: spacing, colour, icons, copy, type, layout, details, visuals, motion.skills/unslop/references/tokens.md
5
Claude Code (unslop) → Fixed screen and square video
Fixed screen in the project's own stackFeatures and section order stay; it renders again and checks the audit list against the checklist until nothing is left.skills/unslop/SKILL.md
6
Claude Code (unslop) → scripts/story.mjs
node story.mjs story.html unslop-story.mp4Opens story.html, where each step only adds CSS, in Playwright and captures the values changing at 60 frames a second.skills/unslop/scripts/story.mjs
7
scripts/story.mjs → Fixed screen and square video
Square MP4 encoded with ffmpegRed measurements and an unslop by @heydamir credit are in the video; --wide makes it 16:9.skills/unslop/scripts/story.mjs

What goes in, what comes out

/unslop this dashboardShows the audit and a five-line direction first, then fixes the dashboard once you answer.

/unslop the hero of https://example.comSaves the page with snapshot.mjs, fixes a copy and hands back code for whoever owns the site.

/unslop my landing page and make the story video so I can post itThe fixed landing page plus a square video under 10 seconds of it unslopping itself.

Is it for you

Good for

A vibecoded dashboard or landing page that looks like a template
Polishing a screen before launch without a designer
A live site you only have a link to, when you want a fixed draft
A short video of the fix to post on social media

Not for

The story video needs Playwright and ffmpeg, and adds a few minutes to a run.
Generated hero images need an image service such as fal, Replicate, OpenAI images or Higgsfield; it shows the prompt and asks before every paid generation.
From a link or a screenshot it returns a rebuilt page in code, not a change to the live site; the site's owner applies it.
CC BY 4.0: companies may use and change it, as long as they credit Damir Sokolovsky (@heydamir) and link back to the repository.

Reviewed by Devalley’s editor before publishing. How the column is made

Repositoryheydamir/unslop ↗

Stars3.2k

LicenseCC-BY-4.0

바로 써 보기

필요한 것

Claude Code근거: README.md
git근거: README.md
Playwright근거: README.md
ffmpeg근거: README.md

README의 설치 줄은 bash용이라 Windows PowerShell에서는 그대로 실행되지 않아요(PR #5에서 고치는 중). Playwright와 ffmpeg는 스토리 영상을 만들 때만 있으면 돼요.

있는지 확인하는 명령

git --version
ffmpeg -version

설치 (Claude Code)

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

써 보기

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

원본: github.com/heydamir/unslop · ⭐ 3.2k, 2026-11-01 기준 · CC-BY-4.0

에이전트에게 붙여 넣기

빈 폴더에서 Claude Code나 Codex를 열고 그대로 붙여 넣으세요.

처음 붙여 넣을 것

https://github.com/heydamir/unslop 에 있는 unslop 스킬을 Claude Code에 설치해 줘요.

먼저 `git --version`으로 git이 있는지 확인해 줘요. 그다음 README에 적힌 대로 아래 두 줄을 실행해 줘요.

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

Windows PowerShell이라 이 줄이 그대로 안 되면, 같은 일을 하도록 unslop/skills/unslop 폴더를 내 홈의 .claude/skills 폴더 아래로 복사해 줘요. 이미 unslop이라는 스킬 폴더가 있으면 덮어쓰기 전에 나한테 물어봐 줘요.

끝나면 .claude/skills/unslop 안에 SKILL.md가 있는지 확인해 주고, 스토리 영상을 만들 수 있는지 보려고 `ffmpeg -version`도 실행해서 결과를 알려 줘요. 새 세션에서 /unslop을 쓸 수 있다고 알려 주면 돼요.

설치가 끝나면

/unslop {내 대시보드나 랜딩 페이지} 화면을 봐 줘요. 화면 파일은 {파일 경로}예요. 고치기 전에 AI 티가 나는 곳을 위치와 함께 목록으로 보여 주고, 방향 다섯 줄(제품, 성격, 세계, 모먼트, 시그니처)을 제안해 줘요. 내가 방향에 답하면 아홉 단계로 고쳐 주고, 단계마다 무엇이 바뀌었는지 몇 줄씩 알려 줘요. 마지막에 올릴 수 있게 스토리 영상도 만들어 줘요.

Try it

What it needs

Claude Codefrom: README.md
gitfrom: README.md
Playwrightfrom: README.md
ffmpegfrom: README.md

The README's install lines are for bash and fail as written in Windows PowerShell (PR #5 is fixing that). Playwright and ffmpeg are only needed for the story video.

Commands to check

git --version
ffmpeg -version

Install (Claude Code)

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

Try it

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

Source: github.com/heydamir/unslop · ⭐ 3.2k as of 2026-11-01 · CC-BY-4.0

Paste into your agent

Open Claude Code or Codex in an empty folder and paste this as it is.

Paste first

Install the unslop skill from https://github.com/heydamir/unslop into Claude Code.

First check that git is there with `git --version`. Then run these two lines, as the README has them:

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

If this is Windows PowerShell and those lines fail, do the same thing another way: copy the unslop/skills/unslop folder into the .claude/skills folder in my home directory. If a skill folder called unslop is already there, ask me before overwriting it.

When it's done, check that SKILL.md is inside .claude/skills/unslop, and run `ffmpeg -version` to tell me whether the story video will work. Then tell me /unslop is ready in a new session.

Once it is installed

/unslop my {dashboard or landing page}. The screen lives in {file path}. Before changing anything, list every place it looks AI-made with where it is, and propose a five-line direction (product, character, world, moments, signature). Once I answer, fix it in the nine passes and tell me in a few lines what changed in each. At the end, make the story video so I can post it.

0 comments

Be the first to comment.

unslop: AI가 만든 티 나는 화면을 디자인된 화면으로 고치는 Claude 스킬

이게 불편했어요

그래서 이렇게 풀어요

안에서는 이렇게 돌아가요

넣으면 이렇게 나와요

나한테 맞을까요

이럴 때 좋아요

이건 안 돼요

unslop: a Claude skill that fixes AI-looking UI

What was hard

What it does about it

How it runs inside

What goes in, what comes out

Is it for you

Good for

Not for

Topics of this piece

Community posts using it

Related pieces