Unslop — AI 티 나는 화면을 디자인된 화면으로

Unslop

unslop was created by Damir Sokolovsky (@heydamir (https://x.com/heydamir)), who started the Unslopping series on X. It is licensed under CC BY 4.0, so keep this credit in any copy or adaptation.

Vibecoded UI fails in the same predictable ways. Every surface glows, every label has an emoji, spacing is whatever the model typed that day, and the copy shouts. Unslopping fixes the craft and keeps the product. The features, content and order of sections stay. What changes is that every size, color, word and image becomes deliberate.

Removing slop is only half the job. A screen that is clean but could belong to any product is the next template. Every run ends with a screen that only this product could have.

The difference between slop and craft is where the richness goes. Slop spreads color and effects over the chrome, the backgrounds, buttons, borders and labels. Craft keeps the chrome quiet and puts the richness into one or two moments of content that people remember, like a rendered object, a beautiful chart or an image from the product's world.

Work like a designer doing a redline pass, one layer at a time, across the whole screen.

What good looks like

• One bright element. Each screen has one polished thing that carries the color and the craft, a rendered object, a painted scene or a rich chart. Everything around it is quiet, so it reads instantly.

• Quiet chrome. Navigation, buttons and text use the tinted neutrals and one accent. Nothing glows, nothing competes with the bright element.

• A clear idea. You can say in one sentence what the visual shows and why it belongs to this product.

• Text on calm space. The headline sits on a part of the image or layout that was left empty for it, short and specific, with one primary and one secondary action and nothing stacked under them.

• Real product, real material. Previews look like the real app with plausible data, and objects look like real things with weight, light and shadow.

Which visual styles tend to work, and which fail, is in references/visuals.md (https://github.com/heydamir/unslop/blob/main/skills/unslop/references/visuals.md). Finished examples to learn from are in references/refs.md (https://github.com/heydamir/unslop/blob/main/skills/unslop/references/refs.md), and code treatments like drawing an image in glyphs are in references/effects.md (https://github.com/heydamir/unslop/blob/main/skills/unslop/references/effects.md).

Run it

1. Look at the screen. Find the files that render it. If you can run the app or open the file in a browser and take a screenshot, do it, so you judge what people see and not only the code.

   • Only a link to a live site, no code? Save the page with node ＜skill folder＞/scripts/snapshot.mjs ＜url＞ unslop/original.html and work on a copy of that file. Add --dark or --light to match the theme the user sees. It also saves original.live.png, a screenshot of the live page, so render the saved copy and compare the two before you start. Animated backgrounds drawn by scripts do not survive, so describe them in the audit from the live page.

   • Only a screenshot? Rebuild the screen as one static HTML file first, matching it closely, and treat that as the original.

   • In both cases the result is a redesigned page in code that the user can hand to whoever owns the real site, so say that in the report.

2. Audit. Go through references/signs.md (https://github.com/heydamir/unslop/blob/main/skills/unslop/references/signs.md) and list every sign you find, one line each with where it lives.

3. Decide how much to change. Read the audit honestly before planning anything.

   • Heavy slop, many signs across color, type, icons and copy. Run the full process below.

   • Light slop, a screen that is mostly designed with a few signs left. Polish mode. Fix only what the audit found, take the direction from the existing brand instead of inventing a new one, and keep the palette, type, layout and visual. Bigger ideas, like a moment that is missing or a scene for the hero, go into the report as suggestions, not changes.

(이하 생략 — 전체 SKILL.md는 원본 저장소에서 확인하세요: https://github.com/heydamir/unslop/blob/main/skills/unslop/SKILL.md)

원본: https://github.com/heydamir/unslop/blob/main/skills/unslop/SKILL.md · 라이선스: CC-BY-4.0 (Damir Sokolovsky) — 원문 그대로 옮겼으며, 자세한 조건은 저장소의 LICENSE를 따릅니다.

※ 화면 표시를 위해 꺾쇠괄호(< >)를 전각 문자(＜ ＞)로 바꿨습니다. 그대로 복사해 쓰실 때는 위 원본 저장소의 SKILL.md를 받아 주세요.