heydamir/unslop

A Claude skill that turns vibecoded, AI-looking UI into a designed interface

해결하는 문제

unslop은 과도한 보라색 그라데이션, 네온 광택, 이모지 남용, 지나치게 강조된 텍스트, 불량한 간격 등 일반적인 미적 문제를 겪는 "vibecoded" AI 생성 사용자 인터페이스를 수정합니다. 평범해 보이는 AI 디자인을 독특한 브랜드 특성을 가진 세련되고 전문적인 인터페이스로 변환합니다.

작동 방식

Claude Code의 스킬로 작동합니다. 트리거되면 먼저 화면을 감사하여 디자인의 "slop(조잡함)"을 식별합니다. 그런 다음 특정 제품에 기반한 디자인 방향을 제안하고, 간격, 색상, 타이포그래피, 레이아웃 및 시각적 요소를 다루는 일련의 반복 과정을 실행하여 인터페이스를 개선합니다. React, Vue, Svelte, Tailwind와 같은 다양한 웹 프레임워크는 물론 URL을 통한 라이브 웹사이트에서도 작동합니다.

대상 사용자

AI를 사용하여 UI 컴포넌트나 랜딩 페이지를 생성하고, 최종 결과물을 일반적인 AI 프로토타입이 아닌 전문적으로 설계된 제품처럼 보이게 만들고 싶은 개발자 및 디자이너.

주요 특징

  • 기존 UI를 감사하여 구체적인 디자인 결함을 정확히 찾아냅니다.
  • 카피, 레이아웃, 모션을 포함한 구조화된 다단계 재설계 프로세스를 제공합니다.
  • 필요시 외부 이미지 서비스를 사용하여 맞춤형 비주얼이나 장면을 생성합니다.
  • 화면이 변하는 과정을 담은 짧고 공유 가능한 "unslopping" 비디오를 생성합니다.
  • 코드 변경을 수행하기 전에 디자인 방향을 제안하여 초기 단계에서 조율할 수 있도록 합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트