splatstudio · 5차원 전문 디자인 리뷰

비평 스킬 · 5차원 전문가 리뷰

모든 아티팩트를 5가지 차원으로 평가하고 실행 가능한 수정 사항을 제안하는 단일 파일 HTML "디자인 리뷰 보고서"를 생성합니다. huashu-design 전문가 비평 흐름에서 영감을 받았습니다.

사용 시기

• 에이전트(또는 사용자)가 아티팩트(데크/프로토타입/랜딩 페이지)를 생성한 후 사용자가 "이게 뭐가 문제야?" 또는 "이걸 리뷰해줘"라고 요청할 때
• 에이전트가 출력물을 내보내기 전에 자체 점검 루프로 실행할 때
• 동일한 디자인의 두 변형을 비교할 때

생성 결과물

다음을 포함하는 단일 자체 포함 <artifact type="text/html"> 리뷰 보고서:

1. 헤더 — 리뷰된 아티팩트, 날짜, 리뷰어("OD · Critique skill"), 1줄 평결
2. 레이더 차트 (인라인 SVG, 라이브러리 없음) — 5개 점수 표시
3. 5개의 차원 카드, 각각:
   • 점수 0–10 (밴드 포함: 0–4 Broken · 5–6 Functional · 7–8 Strong · 9–10 Exceptional)
   • 1문단 증거 (특정 요소/파일/라인 인용)
   • 하나의 Keep / Fix / Quick-win 불릿
4. 하단 결합 액션 목록:
   • Keep — 잘 작동하는 것, 건드리지 말 것
   • Fix — 시각적으로 비용이 많이 드는 P0/P1 문제
   • Quick wins — 5–15분 투자로 불균형적으로 큰 효과를 보는 조정

5가지 차원

각 차원은 독립적입니다 — 데크는 혁신성에서 9/10을 받을 수 있지만 계층성에서 4/10을 받을 수 있으며, 보고서는 이를 명확히 말해야 합니다. 흥미로운 실패를 평균으로 모호하게 만들지 마십시오.

1. 철학 일관성 · 哲学一致性

아티팩트가 명확한 방향을 선택하고 모든 미세 결정(크롬/키커/간격/강조)에 걸쳐 이를 유지합니까?

찾아야 할 증거:

• 선언된 하나의 디자인 방향(예: Monocle / WIRED / Kinfolk)이 있습니까, 아니면 세 가지 스타일이 뒤섞여 있습니까?
• 크롬/키커 어휘가 하나의 레지스터를 유지합니까, 아니면 3페이지에서는 "Vol.04 · Spring"이라고 하고 7페이지에서는 "BUT WAIT 🔥"라고 합니까?
• 강조/세리프/모노가 전체적으로 동일한 규칙으로 사용됩니까?

0–4 세 가지 스타일이 서로 충돌합니다. 5–6 하나의 방향이지만 절반의 요소가 표류합니다. 7–8 일관됨, 경계 페이지에서 가끔 표류. 9–10 모든 요소가 동일한 명제를 주장합니다.

2. 시각적 계층 · 视觉层级

낯선 사람이 무엇을 먼저, 두 번째, 세 번째로 읽어야 할지 설명 없이 알 수 있습니까?

찾아야 할 증거:

• 각 페이지에서 가장 큰 서체가 분명히 가장 중요한 것입니까?
• 모노/세리프/산스 역할이 정보의 역할(메타/본문/디스플레이)과 일치합니까?
• 경쟁하는 "시끄러운" 요소가 많습니까? 아니면 명확한 기본 + 보조 + 3차 계층이 있습니까?

0–4 모든 것이 외칩니다. 5–6 히어로 페이지에서는 계층이 작동하지만 본문에서는 깨집니다. 7–8 명확한 계층, 가끔 충돌. 9–10 시선이 마찰 없이 움직입니다.

3. 세부 실행 · 细节执行

90/10 작업 — 정렬, 행간, 큰 크기에서의 커닝, 이미지 프레이밍, 발/크롬 마감, 경계 케이스 간격.

찾아야 할 증거:

• 큰 숫자 페이지: 숫자가 기준선에 정렬되어 있습니까, 아니면 떠 있습니까?
• grid-2-7-5에서 왼쪽/오른쪽 열 상단이 정렬되어 있습니까?
• frame-img + 캡션 비율이 페이지 전체에서 일관됩니까?
• 모노 레이블: 동일한 자간? 동일한 대문자 규칙?
• 1자 라인을 유발하는 고아 <br>이 있습니까?

0–4 보이는 테이프와 끈. 5–6 대부분의 페이지 깨끗함, 1–2개 흐트러짐. 7–8 세련됨, 전문가의 눈이 2–3개 실수 발견. 9–10 잡지 수준 — 손으로 인쇄한 타이포그래퍼가 고개를 끄덕일 정도의 세부 사항.

4. 기능성 · 功能性

아티팩트가 의도된 용도로 작동합니까? 클릭 대상, 네비게이션, 프레젠테이션 거리에서의 가독성, 코드 블록의 복사-붙여넣기 용이성, 관련된 경우 모바일 대비책.

찾아야 할 증거:

• 데크: 키보드/휠/터치 네비게이션이 모두 작동합니까? Iframe 스크롤 대비책?
• 랜딩: CTA가 접힌 부분 위에 있습니까? 모바일에서 전화번호를 탭할 수 있습니까?
• 런북: 코드 블록을 복사할 수 있습니까, 모노 폰트, 스마트 따옴표 없음?
• 중요한 정보를 4m 거리에서 읽을 수 있습니까(대형 화면 프레젠테이션)?

0–4 시각적으로는 괜찮지만 작업을 수행하지 못함. 5–6 핵심 흐름은 작동, 경계 케이스 깨짐. 7–8 정상 사용에 견고함. 9–10 방어적으로 엔지니어링됨 — iframe/전체화면/붙여넣기/인쇄를 망설임 없이 처리.

5. 혁신성 · 创新性

이것이 중간값을 넘어서는가? 사람들이 몸을 기울이게 만드는 요소가 하나라도 있는가?

찾아야 할 증거:

• 요구되지 않은 예상치 못한 레이아웃/모션/타이포그래피 움직임이 하나라도 있는가?
• 아니면 100% 안전 — 어떤 에이전시의 데크/랜딩이 될 수 있는가?
• 혁신이 획득(방향과 일치)되었는가, 아니면 억지로 붙인 것(킨포크 느린 삶 데크에 무작위 WebGL)인가?

0–4 일반적인 AI 슬롭 중간값. 5–6 유능하지만 기억에 남지 않음. 7–8 하나의 기억에 남는 순간, 나머지는 견고함. 9–10 도용하고 싶은 여러 움직임 — 그러나 각각이 명제에 분명히 기여함.

채점 규율 (채점 전에 읽으십시오)

• 항상 증거를 인용 — "히어로 페이지가 Playfair 디스플레이와 Inter 산스를 같은 줄에 혼합하기 때문에 4점"이 "일관성이 없어 보인다"보다 낫습니다. 증거 없는 숫자는 거부됩니다.
• 평균을 높이지 마십시오 — 페이지 3이 깨져서 계층성이 5점이라면, 페이지 1과 2가 괜찮다고 7점으로 올리지 마십시오. 점수는 최악의 지속 밴드입니다.
• 점수를 인플레이션하지 마십시오 — 7점은 강함을 의미하며, 수용 가능을 의미하지 않습니다. 모든 점수가 7점 이상이면 비판적으로 검토하지 않는 것입니다.
• 혁신성은 낮아도 됩니다 — 프로덕션 결과물의 경우 5/10은 괜찮습니다. 적절한 보수성을 처벌하지 마십시오.

워크플로우

1단계 — 아티팩트 확보

세 가지 모드:

1. 프로젝트 파일 — 사용자가 "방금 만든 index.html을 리뷰해줘"라고 말함: 프로젝트 폴더에서 엽니다.
2. 붙여넣은 HTML — 사용자가 채팅에 코드를 붙여넣음: 메시지에서 읽습니다.
3. 이 턴에서 당신이 생성 — 위에서 아티팩트를 내보냈고 자체 비판을 원함: 자신의 <artifact>를 다시 읽습니다.

여러 HTML 파일이 있으면 어느 파일을 리뷰할지 물어보십시오 (모두 리뷰하지 마십시오).

2단계 — 채점에 충분히 읽기

전체 <style>을 훑어본 다음, 대표적인 콘텐츠 블록 6–8개를 읽으십시오. 프론트매터만으로 채점하지 마십시오. 점수는 선언된 의도가 아닌 실행된 디자인에 따라 달라집니다.

3단계 — 증거와 함께 채점

5가지 차원 각각에 대해 점수를 쓰고 특정 요소를 명명하는 30–80단어 증거 문단을 작성하십시오. 라인 번호, 클래스 이름, 페이지 번호를 사용하십시오.

예시:

차원: 세부 실행
점수: 6 / 10
증거: 3페이지의 통계 카드는 깔끔하게 정렬됨(grid-6, 3×2) 그러나
8페이지에서는 오른쪽 열 하단이 왼쪽보다 2vh 더 높음. 이유는
.callout에 3vh 상단 여백이 있고 figure에는 없기 때문. 이미지
캡션은 5페이지에서 모노를 사용하지만 7페이지에서는 산스를 사용함 — 하나를 선택하십시오.

4단계 — 액션 목록 구축

5개 증거 문단을 다음으로 집계:

• Keep (3–5개 불릿) — 사용자가 다음 반복에서 깨뜨리지 말아야 할 구체적으로 작동하는 것. 클래스/페이지/요소로 인용.
• Fix (3–6개 불릿) — 필수 수행, 분당 절약되는 시각적 비용 순으로 정렬. 각 불릿 ≤ 1문장.
• Quick wins (3–5개 불릿) — 각 5–15분, 높은 신호 대 잡음 비율 (예: "4페이지에서 열 표류를 수정하려면 display:flex를 grid로 교체").

5단계 — 보고서 HTML 내보내기

단일 파일 생성:

• 헤더: 아티팩트 이름 + 리뷰어 크레딧 + 날짜
• 큰 레이더 차트 (SVG)
• 1열 또는 2열 그리드의 5개 차원 카드
• 하단에 체크박스 어포던스가 있는 세 가지 액션 목록

활성화된 DESIGN.md 토큰이 있으면 사용하고, 그렇지 않으면 중립적인 라이트 테마(오프-화이트 배경, 거의 검은색 텍스트, 레이더 채우기를 위한 하나의 악센트)를 기본값으로 사용합니다.

출력 계약

<artifact identifier="critique-<artifact-slug>" type="text/html" title="Critique · <Artifact Title>">
<!doctype html>
<html>...</html>
</artifact>

아티팩트 전에 한 문장 ("Reviewed X across 5 dimensions, see report below.")을 말하고 </artifact> 후에 중지 — 채팅에서 보고서를 설명하지 마십시오. 사용자가 아티팩트를 읽을 것입니다.

엄격한 규칙

• 매번 5개 점수 — 부분 보고서(예: 3개 차원만)는 허용되지 않습니다.
• 점수당 증거 — "느낌이 안 좋음" / "작업 필요" 없음. 요소를 인용할 수 없으면 점수는 정당화되지 않습니다.
• 점수를 인플레이션하지 마십시오 — 전체 평균이 8점 이상이면 의심스럽습니다. 스스로 확인하십시오.
• 같은 턴에 자신의 아티팩트를 리뷰하지 마십시오 — 사용자가 먼저 볼 필요가 있습니다. 명시적 요청("방금 만든 것을 비평해줘")에만 자체 비평하십시오.
• 단일 파일 HTML만 가능 — 외부 CSS/JS 없음. 모든 것을 인라인으로 작성.
• 레이더 차트 필수 — 보고서에 인식 가능한 실루엣을 제공하고 사용자가 한눈에 약한 축을 식별할 수 있게 합니다.