ui-critic

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

특정 인물의 방식으로 화면을 판단하며, 과거의 결정을 증거로 사용합니다. 일반 Claude가 이 사람의 실제 디자인 선택을 예측한 정확도는 44-50%였지만, 이 절차는 동일 주제에 대한 증거가 없는 결정에서 약 60%의 정확도를 보였습니다(결과). 오라클이 아닌 강력한 보조 의견입니다.

질문	수행할 작업
어떤 디자인이 더 나은가요?	비교
이 화면이나 플로우에서 무엇을 변경해야 하나요?	비평
가르쳐주거나, 조정하거나, 잘못 판단한 경우	튜닝
해당 인물이 디자인을 결정했습니다	기록

스크립트는 이 파일과 같은 위치에 있습니다. python3로 실행하고, prepare.py와 annotate.py는 Pillow가 필요합니다(pip install pillow).

항상

• 작업을 먼저 파악하세요. 화면의 용도와 대상을 모른다면 한 번 물어보세요. 그렇지 않으면 가정을 명시하세요.
• 과거 결정이 이 규칙과 일반적인 디자인 의견보다 우선합니다. 최신일수록 더 우선합니다.
• '모범 사례'만으로 추론하지 마세요. 일반적인 추론은 이 사람의 결정에서 우연 이하의 정확도를 보였습니다. 더 많은 정보, 레이블, 개수를 주장하는 경향이 있기 때문입니다. 실제로 그들이 선택한 것을 바탕으로 주장하세요.
• 선호도를 증거 이상으로 일반화하지 마세요. 목록에서 '적게'가 모든 곳에서 '적게'를 의미하지는 않습니다. 그들은 더 짧은 텍스트 칩보다 지도 사진을 선택했고, 비교 단계에 사진과 메모를 추가했습니다. 사람들이 사물을 더 빨리 인식할 수 있도록 하기 위해서입니다.
• 답변을 먼저 제시하세요. 평결을 먼저 말하고, 그다음 세부 사항을 말하세요. 보고서는 당신이 판단하는 점진적 공개 방식을 따릅니다.

Compare

1. 준비. python3 scripts/prepare.py --out <tmp> <이미지들...> 실행 후 준비된 복사본을 사용하세요. 플로우의 경우 각 디자인은 화면의 정렬된 목록입니다.

2. 증거 수집. taste/taste.md를 읽으세요. python3 scripts/cases.py --context "<이 화면의 용도>" --k 4를 실행하세요.

3. 블라인드로 두 번 판단. 공유 컨텍스트 없이 두 개의 하위 에이전트를 생성하고 references/judge.md의 프롬프트를 사용하세요. 하나는 X, Y 순서로 A, B로 레이블된 디자인을 보고, 다른 하나는 Y, X 순서로 봅니다. Sonnet을 사용하세요: Opus는 비용이 몇 배 더 들었지만 점수는 더 나아지지 않았습니다. 각 에이전트에게 사례 이미지 경로를 제공하고 모든 이미지를 읽도록 지시하세요. 당신이 선호하는 디자인, 누가 만들었는지, 또는 어느 것이 더 새로운지 알려주지 마세요.

   두 개 이상의 디자인: 가장 강력해 보이는 두 개를 쌍으로 비교한 후 승자를 다음 디자인과 비교하세요. 한 번에 순위를 요구하지 마세요.

4. 결정.

   • 둘 다 동일한 디자인을 선택: 그것이 평결입니다.
   • 의견이 갈림: 너무 비슷해서 고르기 어렵다고 말하고, 각 측의 가장 좋은 주장을 한 줄로 제시하고, 결정을 위한 핵심 질문을 명시하세요. 직접 동점을 깨지 마세요.

5. 옵션 너머를 보세요. 두 디자인 모두에 결함이 있거나, 패자가 유지할 가치가 있는 아이디어가 있다면, 한두 문장으로 병합된 버전을 제안하세요. 과거 승자는 종종 정확히 이렇게 나왔습니다.

6. 보고서.

   **B.** <한 문장: 결정적으로 차이가 나는 점.>
   신뢰도: 두 순서 모두 동의함 (증거가 아님: 다른 모델이나 증거로도 뒤집힐 수 있음) / 너무 비슷해서 고르기 어려움
   - 이유: <결정적인 차이점, 관련된 과거 결정을 인용하며>
   - A에서 유지할 가치: <있다면>
   - 둘보다 나은 점: <있다면>
   

   요청이 있는 경우에만 승자의 남은 문제에 대한 박스 오버레이를 추가하세요.

Critique

1. 위와 같이 화면을 준비하고 각 화면의 픽셀 크기를 기록하세요. 좌표는 준비된 복사본에서만 일치합니다.
2. 증거 수집. taste/taste.md를 읽고 cases.py --k 4를 실행한 후, 새로운 화면을 보기 전에 모든 사례의 두 이미지를 읽으세요. 아래 점수는 당신이 그것들을 보았다고 가정합니다.
3. 검토, 다음 순서로:
   • 누군가 이 화면에 방문한 유일한 목적은 무엇인가요? 한눈에 무엇을 파악해야 하나요?
   • 요소별로 검토: 이 요소가 여기에 있을 가치가 있나요, 아니면 한 번의 탭으로 치울 수 있나요? 같은 내용이 두 번 언급되나요? 같은 종류의 것이 이 화면이나 앱의 다른 곳에서 두 가지 다른 방식으로 그려져 있나요? 두 번째 동작이 주요 동작과 경쟁하고 있나요? 그림이 단어보다 더 빨리 이해될 수 있나요?
   • 플로우의 경우: 열린 것이 당신이 탭한 것처럼 보이나요? 어떤 단계가 막다른 길인가요?
4. 잘라내기. 최대 3개의 발견 사항, 가장 중요한 것부터 먼저. 접근성 상용구, 일반적인 다듬기, 그리고 지적할 수 없는 것은 제외하세요. 디자인이 좋다면 그렇게 말하고 아무것도 보고하지 마세요. 사소한 문제로 내용을 채우는 것은 실패입니다. 마치기 전에 각 발견 사항이 과거 결정을 취소하지 않는지 확인하세요.
5. 그리기. 준비된 화면 옆에 findings.json을 작성하고, 준비된 복사본의 절대 픽셀 좌표 [x1, y1, x2, y2]로 박스를 표시하세요:

   {"verdict": "한 문장.",
    "screens": [{"path": "/abs/prepared.png", "label": "홈"}],
    "findings": [{"screen": 0, "box": [40, 120, 300, 180], "severity": "high", "title": "...", "why": "...", "fix": "..."}]}
   

   python3 scripts/annotate.py findings.json --out <tmp>를 실행하세요. 각 .annotated.png를 읽고 모든 박스가 설명하는 발견 사항 위에 있는지 확인하세요. 하나라도 어긋나면 숫자를 수정하고 다시 실행하세요. 발견 사항이 카드 자체에 관한 것이라면 카드 전체를 감싸는 박스는 괜찮습니다.
6. 평결, 발견 사항, report.html 및 주석이 달린 이미지의 경로를 보고하세요.

Record a decision

해당 인물이 디자인 사이에서 선택하거나 화면을 보면서 선호도를 말할 때, 기록할 것을 제안하세요: python3 scripts/record.py --context "..." --winner a.png --loser b.png --reason "그들의 말" --topic <짧은-슬러그>. 이유는 그들의 말을 사용하세요. 이렇게 하면 스킬이 향상되며, 설명되지 않은 여러 선택보다 '이유'에 대한 한 문장이 더 가치 있습니다.

Tune

python3 scripts/tune.py를 시작하고, 백그라운드에서 실행한 후 해당 인물에게 URL을 제공하세요. 네 개의 탭이 있습니다:

• 선택: 화살표 키로 디자인 사이를 선택합니다. 약 5분 소요.
• 오류: 판단자가 그들의 의견과 다른 경우와 그 논쟁입니다. 그들은 자신의 선택을 유지하거나 판단자가 옳다고 말합니다.
• 규칙: taste/taste.md를 편집합니다.
• 점수: 자신의 선택 일관성을 포함하여 다시 점수를 매깁니다.

선택 또는 편집 후 python3 scripts/distill.py를 실행하여 모든 결정에서 taste/taste.md를 재구축하세요. 수치 및 다른 사람의 취향과 함께 사용하는 방법은 references/tuning.md를 참조하세요.