unslop: AI 냄새 나는 UI를 디자이너처럼 다듬는 Claude 스킬

보라색 그라데이션, 과도한 글로우, 이모지 라벨 등 전형적인 AI 생성 UI의 흔적을 자동으로 찾아내어 수정하는 도구다. Next.js, React, Vue, Svelte, Tailwind, 순수 HTML/CSS 등 화면이 어떤 기술로 만들어졌든 적용 가능하다. 대시보드, 앱, 랜딩 페이지뿐 아니라 링크만 있는 라이브 사이트도 처리할 수 있다.

단순 수정이 아니라 디자인 리드라인 리뷰처럼 단계별로 접근한다. 먼저 화면 전체를 감사(Audit)하여 문제점을 나열하고, 제품 특성에 맞는 방향성을 설정한 후 간격, 색상, 아이콘, 카피, 타이포그래피 순서로 패스를 진행한다. 이미 상태가 좋은 화면이라면 재설계 대신 몇 가지 세부 개선만 제안한다.

히어로 섹션에 필요한 비주얼이 없으면 fal, Replicate, OpenAI images 등 이미지 생성 서비스를 통해 장면을 생성할 수 있다. 유료 생성 전에는 프롬프트를 보여주고 확인을 요청하며, MCP 서버 연결을 제안하기도 한다. 또한 10초 이내의 정사각형 스토리 비디오를 생성하여 수정 과정을 소셜 미디어에 공유할 수 있다.

Claude Code 환경에서 /unslop 명령어 또는 자연어 요청으로 사용할 수 있다. CC BY 4.0 라이선스로 배포되어 상업적 사용이 가능하며, 출처만 명시하면 자유롭게 수정하고 공유할 수 있다. AI로 빠르게 만든 화면의 완성도를 높이고 싶은 개발자에게 적합하다.