nyrthoughts/anti-slop-ui

anti-slop-ui은(는) 무엇을 하나요?

Claude Code, Codex CLI 및 Cursor에서 UI의 AI 생성 흔적을 감사하고 정렬된 패스로 수정하는 스킬입니다. 처음부터 다시 디자인하지 않고, 기존 요소를 의도적으로 보이게 만듭니다.

사용 시기

사용자가 화면, 페이지 또는 컴포넌트가 AI 생성처럼 보인다고 정리, 탈슬롭, 탈빈티지 또는 다듬어 달라고 요청합니다. 또는 사용자가 파일, 디렉토리 또는 URL을 가리키며 일반적이거나 기본값처럼 보이거나 빈티지 코드 같다고 말합니다.

워크플로우

1단계: 디자인 방향 읽기

프로젝트 루트에서 DESIGN.md를 찾고, 그 다음 templates/에서 찾습니다. 파일이 있으면 로드합니다. 모든 결정은 이 방향과 일관되어야 합니다. DESIGN.md가 없으면 사용자에게 알리고 계속 진행하기 전에 함께 작성할 것을 제안합니다. 방향은 필수입니다. 이 단계를 건너뛰지 마십시오.

2단계: 감사

대상(파일, 디렉토리 또는 렌더링된 페이지)을 스캔합니다. 발견한 모든 AI 흔적을 범주별로 그룹화하여 나열합니다. 다음 체크리스트를 사용하세요:

• 보라-파랑 그라데이션, 광택, 블롭
• 기본 폰트(Inter/Roboto/system)와 스케일 부재
• 모든 제목 위에 띄어쓰기된 대문자 눈썹
• 제목의 한 단어가 색상, 이탤릭 또는 그라데이션으로 강조됨
• 아이콘으로 사용된 이모지
• 카드 수프: 동일한 반경, 동일한 그림자, 카드 속의 카드
• 중앙 정렬 히어로 + 3개 기능 카드 레이아웃
• 내용 없는 카피: "Supercharge", "Unlock", "Welcome back", 느낌표
• 가짜 통계, 로고, 사용후기
• 반짝이 이모지가 있는 "New" 배지, 맥동하는 점
• transition-all, 비로더의 animate-pulse, 카드의 hover:scale
• 임의 간격(mt-[13px], gap-[11px])
• 장식용 01/02/03 번호 매기기, 중간 점 구분자, 모든 CTA의 화살표
• 대체 클리셰 (크림 + 세리프 + 테라코타; 검정 + 형광 초록)
• 빈 상태/로딩 상태/오류 상태 누락, 375px 미만에서 깨짐

각 발견에 대해 파일과 라인(또는 URL의 경우 선택자)을 기록합니다.

3단계: 방향 제안

다음 질문에 답하는 짧은 방향(3-5줄)을 작성합니다:

1. 이 제품이 무엇인지 (한 문장).
2. 특성 -- "깔끔한", "현대적인", "미니멀한"이 아닌 형용사 하나.
3. 강조 색상 -- 트렌드가 아닌 제품이나 브랜드에서 파생된 하나의 색상.
4. 시그니처 디테일 -- 이 제품만이 가질 수 있는 하나의 작고 구체적인 요소.

방향을 사용자에게 제시합니다. 코드를 편집하기 전에 승인을 기다리십시오. 사용자가 무언가를 변경하면 방향을 업데이트하고 다시 확인합니다.

4단계: 정렬된 패스

이 순서대로 수정을 적용합니다. 각 패스를 완료한 후 다음 패스를 시작하십시오. 각 패스 후에 무엇이 변경되었는지 간략히 기록합니다.

패스 1: 간격

• 임의 값(mt-[13px])을 가장 가까운 4px 그리드 단계로 바꿉니다.
• 갭을 프로젝트 스케일(Tailwind 기본값 또는 DESIGN.md의 스케일)로 정규화합니다.
• 컨테이너 내에서 일관된 패딩을 보장합니다.

패스 2: 색상

• 그라데이션, 광택, 블롭, 색상 그림자를 제거합니다.
• DESIGN.md의 중립 램프를 적용합니다(또는 하나를 파생: 단일 색조 회색).
• 방향의 강조 색상을 대화형 요소에만 적용합니다.
• 텍스트 대비 확인: 본문 최소 4.5:1, 큰 텍스트 3:1.

패스 3: 아이콘

• 이모지를 프로젝트의 아이콘 패밀리로 바꿉니다(기본값: Lucide, 16-18px, stroke 1.5).
• 텍스트 콘텐츠에서 장식용 이모지를 제거합니다.
• 전체적으로 하나의 아이콘 패밀리를 사용합니다.

패스 4: 카피

• 과장된 단어 제거: "Supercharge", "Unlock", "Seamlessly", "Effortlessly", "AI-powered", "Revolutionize", "next-generation."
• UI 텍스트에서 느낌표를 제거합니다.
• 웨이브 이모지가 있는 "Welcome back"을 제거합니다.
• "Learn more" / "Get started" CTA를 해당 행동에 특화된 동사 + 결과로 바꿉니다.
• 가짜 통계, 로고, 사용후기를 제거합니다. 실제 데이터로 대체하거나 섹션을 제거합니다.
• 기능이 지난 주 이내에 출시되지 않았다면 "New" 배지를 제거합니다.

패스 5: 타이포그래피

• DESIGN.md의 폰트를 설정합니다(또는 방향에서 선택한 것; 기본값으로 Inter를 사용하지 마십시오).
• 굵기 고정: 본문 400, 강조 500, 기본 작업 최대 600.
• 제목에 이탤릭을 사용하지 않습니다. 띄어쓰기된 대문자 라벨을 사용하지 않습니다(uppercase tracking-widest 제거).
• 일관된 타입 스케일을 적용합니다. 데이터에는 tabular-nums를 사용합니다.

패스 6: 레이아웃

• 중앙 히어로 + 3개 카드 패턴이 나타나는 곳을 깨뜨립니다.
• 카드 중첩을 제거합니다. 카드가 남아 있으면 카드 크기를 다양하게 만듭니다.
• 중첩된 둥근 모서리 규칙 적용: 안쪽 = 바깥쪽 - 패딩.
• 레이아웃이 375px, 768px 및 1280px에서 작동하는지 확인합니다.

패스 7: 상태 및 모바일

• 데이터 종속 컴포넌트에 빈 상태가 없으면 추가합니다.
• 데이터를 가져오는 곳에 로딩 스켈레톤을 추가합니다.
• API 호출이 실패할 수 있는 곳에 오류 상태를 추가합니다.
• 375px에서 아무것도 넘치거나 붕괴되지 않는지 확인합니다.

패스 8: 모션

• transition-all을 특정 속성(transition-colors, transition-opacity, transition-transform)으로 바꿉니다.
• 스켈레톤 로더가 아닌 것에서 animate-pulse를 제거합니다.
• 카드에서 hover:scale을 제거합니다.
• 프로젝트에 하나의 이징 곡선을 설정합니다(기본값: cubic-bezier(0.22, 1, 0.36, 1)).
• 로드 시 하나의 진입 애니메이션: 불투명도 + 작은 translateY, 200-300ms, 한 번.

5단계: 자체 점검

모든 패스 후 2단계의 감사 체크리스트를 다시 실행합니다. 흔적이 남아 있으면 수정하거나 유지한 이유를 사용자에게 설명합니다(예: "그라데이션이 실제 브랜드 색상이며 DESIGN.md에서 확인되었습니다").

사용자에게 확인: 변경된 사항, 발견된 흔적 수, 수정된 흔적 수, 남아 있는 흔적과 그 이유.

규칙

• 하나의 클리셰를 다른 클리셰로 바꾸지 마십시오. 수정이 크림 + 세리프 + 테라코타 또는 검정 + 형광 초록을 도입하면 되돌리고 제품에서 파생된 것으로 시도하십시오.
• 콘텐츠를 창작하지 마십시오. 실제처럼 보이는 가짜 통계, 로고, 사용후기 또는 자리 표시자 이름을 추가하지 마십시오.
• 한 번에 하나의 변경, 한 번에 하나의 패스. 앞서 나가지 마십시오.
• 기존 디자인 시스템을 존중하십시오. 프로젝트가 특정 토큰을 가진 컴포넌트 라이브러리를 사용하는 경우, 재정의하는 대신 해당 토큰에 맞게 수정을 조정하십시오.
• 코드를 편집하기 전에 항상 방향에 대한 사용자 승인을 기다리십시오.

크레딧

이 스킬은 오픈소스 디자인-스킬 커뮤니티의 아이디어를 종합합니다. 독창적인 작업이며 아래 출처의 텍스트가 복사되지 않았습니다.

영감:

• Unslop by Damir Sokolovsky (CC-BY-4.0) -- 패스별 워크플로우 및 여러 흔적 범주(간격 그리드, 아이콘 일관성, 카피 금지, 모션 규칙)는 Unslop의 접근 방식에서 적용되었습니다. CC-BY-4.0에 따라: Damir Sokolovsky에게 크레딧, 원본 https://github.com/heydamir/unslop, CC-BY-4.0 라이선스.
• Impeccable by Paul Bakaus (Apache-2.0) -- 감사 우선 접근 방식 및 결정적 탐지 개념.
• frontend-design by Anthropic (Apache-2.0) -- 클리셰 카탈로그(크림 + 세리프, 검정 + 초록, 대문자 눈썹).
• Hallmark by Nutlope / Together AI (MIT) -- 기본 규칙 및 여러 너비에서 테스트하는 아이디어.
• Taste Skill by Leonxlnx (MIT) -- 장식용 번호 매기기 및 가는 선에 대한 엄격한 금지.
• ai-design-skills by elayadesign (MIT) -- 숫자 규칙 접근 방식 및 폰트 금지.
• 이 저장소의 docs/ai-tells.md에 있는 15가지 흔적 카탈로그.