Design Tally (디자인 집계)
취향 가이드가 아니라 집계 도구입니다. 다른 안티-슬롭 스킬은 원칙을 제시합니다. 원칙은 한 번에 하나씩 정당화되며 회피됩니다. 이 스킬은 집계를 강제하여 회피를 가시화합니다.
이 스킬이 존재하는 이유
이 스킬이 만들어진 실제 실패 사례: 한 세션에서 8개의 디자인 변형이 생성되었고, 각각은 섹션 제목에 작은 추적된 대문자 라벨을 사용했습니다. 모든 인스턴스는 그 순간에는 합리적으로 보이는 국소적 정당성을 가지고 있었습니다. 아무도 합산하지 않았습니다. 총계는 37개였으며, 시각적으로 구별된다고 제시된 5개 변형에 걸쳐 있었습니다. 지배 원칙("라벨보다 계층 구조를 사용하라")은 항상 로드되어 사용 가능했습니다.
판단은 회피 가능하지만 집계는 회피할 수 없습니다. 집계를 실행하세요.
규칙
UI 작업을 제시하기 전에 — 매번, 예외 없이 — 아래 집계를 생성하여 메시지에 포함시키세요. 요약이 아닙니다. 숫자가 포함된 테이블입니다.
카운트가 0보다 크면, 각 인스턴스에 대해 수정하거나 구체적인 정당성을 작성하세요. "여기서는 괜찮아 보였다"는 정당성이 아닙니다. 동일한 패턴이 여러 화면이나 변형에 걸쳐 나타나면, 각 인스턴스를 개별적으로 읽을 때와 관계없이 그것이 발견 사항입니다.
실제로 출력을 검사하지 않고 집계가 깨끗하다고 보고하지 마세요. 마크업이나 스타일을 읽으십시오. 작성한 내용에 대한 기억에서 추론하지 마십시오.
금지된 패턴
하드 금지. 사용자가 현재 요청에서 이름을 명시적으로 요청하지 않는 한 사용할 수 없습니다. 디자인 브리프에서 선언하는 것만으로는 충분하지 않습니다.
| # | 패턴 | 탐지 방법 |
|---|---|---|
| 1 | 추적 또는 모노 대문자 눈썹(eyebrow) 라벨 | text-transform: uppercase AND (모노스페이스 폰트 패밀리 OR letter-spacing >= 0.05em) |
| 2 | 산문(prose)에 모노스페이스 | 코드, 리터럴 값, 식별자 또는 숫자가 아닌 문자열에 모노스페이스 패밀리 사용 |
| 3 | 제목 두께 700 이상 | 제목 또는 표시 텍스트에 font-weight >= 700 |
| 4 | 이탤릭 표시 유형 | 제목 또는 표시 크기에서 font-style: italic |
| 5 | 하나의 요소에 테두리와 그림자 | 동일한 노드에 border와 box-shadow 모두 있음 |
| 6 | 필(pill) 내부의 앞쪽 점(dot) | 필, 칩, 배지 또는 태그의 첫 번째 자식으로 원, 점 또는 작은 채워진 모양 |
| 7 | Lucide 아이콘 | Lucide 세트 또는 그 형태를 재현하는 손그림 SVG(1.5px 선, 둥근 끝, 24x24 기하학적 글리프). 손그림은 기본적으로 Lucide로 수렴합니다 — 승인된 세트와 대조될 때까지 손그림 아이콘은 위반으로 간주 |
직접 금지되지 않고 인스턴스별로 집계 및 정당화됨:
| # | 패턴 | 탐지 방법 |
|---|---|---|
| 8 | 구분선(Dividers) | 화면당 모든 구분선, 가는 선 및 테두리-구분선 사용을 집계합니다. 각각에 대해 공백이나 근접성으로 대체할 수 없는 이유가 필요함 |
| 9 | 컨테이너 카드 | 화면당 모든 테두리 또는 채워진 박스를 집계합니다. 다른 컨테이너 내부에 중첩된 것은 플래그 지정 |
| 10 | 과도한 텍스트 | 인접한 값, 라벨 또는 상태가 이미 전달하는 내용을 다시 설명하는 산문 |
| 11 | 변형 간 동일한 슬롯 | 구별되는 것으로 제시된 N개의 변형을 생성할 때, 모든 N개에서 동일하게 렌더링된 슬롯 — 섹션 라벨, 푸터, 헤더, 버튼 모양, 간격 리듬 등 |
규칙 11은 교차 변형 검사입니다. 세트를 제시하기 전에 모든 변형에서 동일한 슬롯을 비교하세요. 동일한 라벨 처리를 가진 서로 다른 분위기는 구별되는 변형이 아닙니다.
아이콘
승인된 세트: Phosphor. 글리프를 손으로 그리는 대신 사용하세요.
아이콘을 추가하기 전에, 그것이 단어가 전달할 수 없는 정보를 전달하는지 물어보세요. 텍스트 라벨이 작동한다면 텍스트 라벨을 사용하세요.
린터 실행하기
코드로 존재하는 UI의 경우, 수동 집계 전에 스크립트를 실행하세요:
python3 ~/.claude/skills/design-tally/scripts/tally.py <path> [--json] [--quiet]
규칙 1-6을 다루며 집계 테이블을 출력합니다. 종료 코드는 증명 가능한 규칙(1, 5, 6)에 적중이 있을 때만 1이므로, 후보에서 실패하지 않고 훅이나 CI 단계를 게이트할 수 있습니다.
규칙 2, 3 및 4는 위반이 아닌 후보로 보고됩니다. 스크립트는 모노 패밀리나 700 두께를 볼 수 있지만 산문과 코드, 또는 제목과 라벨을 구분할 수 없습니다. 각 후보를 직접 분류하고 어떻게 판결했는지 말하세요.
스크립트는 규칙 7-11을 볼 수 없으며, Paper 또는 Figma 아트보드를 전혀 읽을 수 없습니다. 디자인 도구 작업의 경우, get_jsx 또는 이와 동등한 것을 사용하여 수동으로 집계하세요 — 스크린샷이나 작성한 내용에 대한 기억에서 절대 하지 마십시오.
깨끗한 스크립트 실행은 깨끗한 집계가 아닙니다. 코드에 대해서만 11개 규칙 중 6개를 다룹니다.
출력 형식
0인 규칙을 포함한 모든 규칙을 보고하세요. 0은 정보이며, 적중만 나열하면 검사가 실제로 실행되었는지 숨겨집니다.
Design tally
| 규칙 | 개수 | 위치 |
|------|------|------|
| 1 eyebrows | 0 | — |
| 2 mono on prose | 2 | 히어로 아래 캡션; 빈 상태 줄 |
| ... | |
그런 다음, 0이 아닌 각 개수에 대해: 수정하거나 인스턴스별 정당성을 명시하세요.
이 목록에 추가하기
사용자가 새 패턴을 식별하면, 집계할 수 있을 정도로 구체적인 탐지 규칙과 함께 테이블에 추가하세요. 감지 가능한 조건으로 명시할 수 없다면, 이 스킬이 아닌 원칙 스킬에 속합니다.