Pacheche/unslop-anything

Unslop Anything (무엇이든 언슬롭하기)

AI 슬롭이란 아무도 결정하지 않은 것입니다. 모델이 가장 흔한 답을 선택했기 때문에 결과가 다른 수천 개의 결과와 똑같아 보입니다: 보라색 그라데이션, 모든 라벨의 이모지, 인사말 제목, "단순한 X가 아니라 Y입니다"라는 문장. 좋은 패턴조차도 모든 사람이 기본값으로 사용하기 시작하면 슬롭이 됩니다.

따라서 언슬로핑은 두 부분으로 이루어지며, 둘 다 필요합니다:

1. 기본값을 제거하세요. 이름이 붙은 모든 징후를 찾아 구체적인 값이나 구체적인 문장으로 고치세요.
2. 결정을 추가하세요. 어떤 제품에도 속할 수 있는 깔끔한 결과는 다음 템플릿에 불과합니다. 완성된 작업에는 이 제품, 브랜드 또는 작가만이 가질 수 있는 것이 하나 이상 포함되어야 합니다.

작업은 직접 수행합니다: 파일을 읽고, 편집하고, 렌더링하고, 비교합니다. 자료가 알려줄 수 없는 것에 대해서만 사용자에게 물어보세요.

이 스킬을 사용하는 방법

경로는 이 스킬의 폴더를 기준으로 합니다. 참조는 필요할 때만 로드하고, 한 번에 모두 로드하지 마세요.

1. 경로 선택. 무엇을 언슬롭할지 결정하고 해당 참조만 엽니다.

매체	읽을 파일
웹 앱, 대시보드, 랜딩 페이지, 모든 HTML/CSS/React/Vue/Svelte UI	references/ui-signs.md, references/ui-passes.md, references/direction.md
모바일 앱 화면 (iOS, Android, React Native, Flutter, SwiftUI)	위 UI 파일 + references/mobile.md
이미지, 일러스트레이션, 아이콘 세트, 포스터, 소셜 그래픽, 슬라이드, 로고	references/visual-design.md, references/direction.md
글쓰기: 포스트, 스레드, 기사, 이메일, 문서, README, UI 카피	references/writing.md
카피도 슬롭인 UI	먼저 UI를 한 다음 references/writing.md로 카피 패스 수행

사용자가 특정 오버레이나 컴포넌트를 요청하고 이름이 모호한 경우("팝업 만들어줘"), 빌드하기 전에 references/component-vocabulary.md를 확인하세요.

2. 작업 선택.

   • 감지. 사용자가 "이거 슬롭이야?"라고 묻거나, 감사를 원하거나, 아무것도 변경하지 말라고 한 경우. 해당 매체의 징후 파일만 로드하세요 (ui-signs.md, visual-design.md 또는 writing.md). 편집하지 마세요. 다음 형식으로 답변하세요:

     슬롭 수준: N% (높음 | 낮음 | 없음)
     <카테고리>
     - <징후>: <위치: 파일:줄, 화면 영역 또는 "인용된 문장"> -> <몇 단어로 수정>
     확인해야 할 주장: <확인할 수 없는 주장, 또는 없음>
     확인되지 않음: <볼 수 없었던 것, 또는 없음>
     수정해 드릴까요?
     

   • 수정 (기본값). 아래 워크플로를 실행하세요.

3. 자료를 눈앞에 확보하세요.

   • 코드: 화면을 렌더링하는 파일을 찾으세요. 실행할 수 있다면 렌더링하고 스크린샷을 찍으세요. 코드뿐만 아니라 사람들이 보는 것을 평가하세요.
   • 코드가 없는 URL: 브라우저 도구로 열고, 스크린샷을 찍고, HTML을 로컬 복사본으로 저장하여 작업하세요. 출력은 사용자가 사이트 소유자에게 전달할 수 있는 재설계된 파일입니다. 그렇게 말하세요.
   • 스크린샷만 있는 경우: 원본에 가깝게 일치하는 하나의 정적 HTML 파일로 재구축하고, 그것을 원본으로 취급하고, 그렇게 말하세요.
   • 브라우저나 렌더 도구가 없거나 앱이 시작되지 않는 경우: 화면을 정적 HTML 파일로 추출하고, 가능하면 렌더링하세요. 그렇지 않으면 코드에서 작업하고 모든 시각적 확인 사항을 확인되지 않음: 아래에 나열하세요.
   • 글쓰기: 초안이 붙여넣어지지 않았으면 요청하세요. 대상 독자가 불분명하면 한 가지 질문을 하세요: 누가 이것을 어디서 읽는가?

워크플로

1. 스캔. 코드나 텍스트 파일의 경우 스캐너를 실행하세요. 후보를 찾을 뿐, 결론을 내리지는 않습니다:

   python3 <skill folder>/scripts/slop_scan.py <files or folders>
   python3 <skill folder>/scripts/slop_scan.py --text draft.md      # 모든 파일에 대한 글쓰기 규칙
   

   Windows에서는 python3 대신 py를 사용하세요. Python 3만 필요합니다. 종료 코드 0은 후보 없음, 1은 후보 있음, 2는 스캔된 항목 없음을 의미합니다. 대상만 스캔하세요: 화면의 파일과 그것이 사용하는 공유 컴포넌트 및 스타일, 전체 저장소는 안 됩니다. 단, 사용자가 저장소 전체 감사를 요청한 경우는 예외입니다. 저장소 전체 감사의 경우 --json을 사용하고, 읽기 전에 규칙별로 히트를 그룹화하세요. 각 히트를 읽어 확인하세요. 거짓 양성은 제거하고 보고서에 이유를 명시하세요.
2. 감사. 해당 매체의 징후 파일을 살펴보세요. 징후당 한 줄: 무엇, 어디에 (file:line, 화면 영역 또는 인용된 문장), 어떻게 수정할지. 스캐너가 볼 수 없는 징후(계층, 리듬, 구성, 의미)를 추가하세요.
3. 평가. 징후 파일의 카테고리 중 적어도 하나의 징후가 있는 카테고리의 수를 세세요. 각 징후는 그것을 처음 나열한 하나의 카테고리에만 기록하세요. 그 수에 10을 곱한 값이 슬롭 수준입니다. UI의 경우, 마지막 카테고리(템플릿 모양)는 다른 9개가 비어 있을 때만 계산됩니다. 그런 다음 모드를 선택하세요:
   • 높음 (50% 이상): 전체 프로세스, 방향 설정 우선.
   • 낮음 (10-40%): 다듬기 모드. 감사에서 찾은 것만 수정하세요. 팔레트, 서체, 레이아웃, 어조 및 브랜드는 유지하세요. 더 큰 아이디어는 보고서에 제안으로 남깁니다.
   • 없음 (0%): 솔직하게 말하세요. 정확한 값과 함께 두세 가지 개선 사항을 제시하고 사용자가 동의할 때만 적용하세요. 단지 다르게 만들기 위해 좋은 작업을 절대 변경하지 마세요.
4. 방향 설정 (UI 및 시각 디자인이 높음인 경우에만). references/direction.md를 따르세요: 제품 문장, 캐릭터, 세계, 순간, 시그니처, 그리고 새로운 디자인의 경우 세 가지 후보 방향을 제시한 후 하나로 결정하세요. 감사와 방향을 보여준 후 멈추고 사용자의 답변을 기다리세요. 방향을 나중에 바꾸면 모든 것을 다시 해야 하기 때문입니다. 사용자가 이미 "그냥 해"라고 말한 경우에만 기다림을 건너뛰세요. 그때도 세 가지 후보(각각 한 줄)와 선택한 이유를 보고서에 포함하세요.
5. 패스별로 수정. UI: references/ui-passes.md의 패스 순서. 시각 디자인: references/visual-design.md의 순서. 글쓰기: references/writing.md의 워크플로. 다음 패스를 시작하기 전에 전체 작업에 걸쳐 현재 패스를 완료하세요.
6. 검증. 다시 렌더링하고(실행당 최대 세 번) 전체 크기로 영역별로 확인하세요: 충돌하는 열, 잘리거나 겹치는 텍스트 및 정렬이 맞지 않는 가장자리는 거기서만 보입니다. 감사 목록과 사용한 참조의 체크리스트와 대조하세요. 스캐너를 다시 실행하세요. 목록에 남아 있는 것은 수정하거나 명시적으로 정당화하세요.
7. 보고서. 전후 슬롭 수준, 방향, 패스당 변경된 사항에 대한 몇 줄, 제거한 거짓 양성, 확인할 수 없었던 것(확인되지 않음:), 사용자가 확인해야 하는 주장.

굽힐 수 없는 규칙

• 프로덕트는 유지하고, 공정을 바꾸세요. 기능, 콘텐츠, 데이터, 섹션 순서 및 제품 이름은 그대로 유지됩니다. 섹션을 추가하지 마세요.
• 목 데이터는 플레이스홀더만 대체합니다. 원본에 플레이스홀더 값($123,456, Lorem, John Doe, 가짜 차트)이 표시되면 그럴듯한 목 데이터로 대체할 수 있습니다. 모든 목 데이터를 보고서에 대체할 목 데이터 아래에 나열하세요. 실제 데이터는 절대 변경되지 않습니다.
• 절대 만들어내지 마세요. 새로운 기능, 통계, 사용후기, 출처, 로고 또는 인용문은 없습니다. "10,000+ 팀이 신뢰" 또는 "10배 빠름"과 같은 주장은 사용자에게 확인을 받거나 제거됩니다. 보고서에 나열하세요.
• 제거된 장식은 새로운 장식으로 대체되지 않습니다. 보라색 그라데이션을 유리 모피즘, 그레인, 네온, 벤토 그리드 또는 3D 유리 아이콘으로 바꾸는 것은 새로운 트렌드의 동일한 슬롭입니다.
• 조용함이 희미함을 의미하지는 않습니다. 모든 색상을 제거하여 아무것도 읽히지 않게 하는 것도 실패입니다. 색상은 의미를 전달하는 곳(기본 동작, 선택, 상태, 데이터 계열, 하나의 순간)에 유지됩니다.
• 색상과 라벨은 진실을 말합니다. 라벨은 숫자와 일치합니다("64% 회복"은 척도가 그렇게 말하지 않으면 "훌륭함"이 아닙니다). 빨간색은 문제를 의미합니다. 녹색은 좋음을 의미합니다.
• 디자인 시스템을 통해 작업하세요. 프로젝트에 테마 토큰이나 CSS 변수가 있으면 해당 값을 변경하거나 사용 방식을 변경하세요. 하드코딩된 값으로 우회하지 마세요.
• 작가의 목소리와 실제 브랜드를 유지하세요. 실제 로고, 색상 또는 서체는 유지됩니다. 로고의 보라색-파란색 그라데이션, 스파클 타일 또는 광택은 사용자가 그렇다고 말하지 않는 한 브랜드가 아닙니다. 글쓰기는 작가의 어휘, 직설성 및 유머를 유지합니다.
• 유명한 앱을 복사하는 것은 언슬로핑이 아닙니다. 구조와 수치를 위해 3-5개의 참조를 연구하고, 한 제품의 디자인을 다른 제품에 붙여넣지 마세요.
• 탐지기 추측은 없습니다. 감지 모드에서는 증거와 함께 패턴을 명명합니다. 무언가가 "AI에 의해 작성되었다"고 주장하지 마세요.

변명	현실
"이제 깔끔해 보여요"	깔끔함은 템플릿입니다. 템플릿 테스트를 실행하세요: 경쟁사 이름을 넣어보세요. 여전히 맞다면 방향을 더 밀어붙이세요.
"사용자는 그냥 더 예쁘게 만들길 원해요"	예쁨과 차별화는 같지 않습니다. 예쁜 AI 앱 열 개를 나란히 놓으면 하나의 앱입니다.
"색상을 제거하면 해결됩니다"	램프, 강조색 및 의미 없이 색상을 제거하면 회색 템플릿이 됩니다.
"스캐너가 아무것도 찾지 못했습니다"	히트가 0이란 grep 가능한 징후가 없다는 뜻입니다. 계층, 리듬 및 의미는 여전히 당신의 눈이 필요합니다.
"렌더링은 건너뛸게요, 코드가 맞으니까요"	슬롭은 사람들이 보는 것에 있습니다. 잘린 텍스트, 고르지 않은 간격 및 약한 계층은 렌더링될 때만 나타납니다.

템플릿 테스트 (매번, 마지막에 실행)

제품 이름이나 작가 이름을 경쟁사 이름으로 바꾸세요. 화면, 이미지 또는 텍스트가 편집 없이도 여전히 맞는다면 완료된 것이 아닙니다. 카피, 시각적 순간 및 시그니처 디테일에서 방향을 더 강하게 밀어붙이세요.