Design Quality v2

인터페이스 디자인을 만들고 평가하기 위한 전 주기 스킬입니다. 기존 인터페이스의 경우 감사하고 점수를 매깁니다. 새 인터페이스의 경우 방향을 설정하고 공정성을 보장합니다. 손상된 인터페이스의 경우 패스별로 수정을 적용합니다.

이 버전은 리뷰 모드와 수정 모드를 위해 특화된 서브 에이전트를 사용합니다. 가능한 경우 병렬로 처리하고, 특정 차원의 점수가 5점 이하일 때 자동으로 심층 분석합니다.

게이트 0: 입력 유형 확인

분석 또는 생성을 시작하기 전에 공유된 항목이 무엇인지 식별합니다. 이는 이후 모든 작업에 영향을 미칩니다.

공유된 항목	수행할 작업
스크린샷 / 이미지	시각적으로 분석; 확인할 수 없는 CSS 기록
HTML / CSS 소스	스타일 읽기; 전체 감사 가능
프로젝트 폴더	먼저 주요 CSS/컴포넌트 파일 탐색(glob); 점수 매기기 전에 읽기
URL / 라이브 페이지	DOM 읽기; 브라우저 사용 가능 시 DevTools로 스타일 검사
아티팩트 링크	아티팩트 읽기; HTML 소스로 취급
텍스트 설명만 있음	점수 매기기 전에 위 항목 중 하나 이상 요청; 누락된 내용 설명

또한 컨텍스트 유형을 감지합니다. 이는 적용되는 휴리스틱에 영향을 줍니다.

앱 화면 (도구, 대시보드, SaaS 제품): 밀도가 지배적; 헤더는 작음; 행동이 곧 콘텐츠
페이지 (랜딩 페이지, 마케팅, 편집): 더 많은 창의적 재량권; 히어로가 중요; 섹션과 리듬

확실하지 않은 경우 가정을 명시하고 진행합니다.

모드 선택

요청에서 모드를 감지합니다. 확실하지 않으면 리뷰부터 시작합니다.

요청 유형	모드
"리뷰", "비평", "감사", "이거 AI가 만든 거 같아?"	리뷰
"빌드", "생성", "이 페이지 디자인"	생성
"수정", "개선", "슬롭 제거", "리디자인"	수정 (리뷰 → 적용)
"다듬기", "약간 어색함", "거의 다 됨"	다듬기

프로젝트 루트에 PROJECT_DESIGN.md 파일이 존재하면 먼저 읽습니다. 여기에는 승인된 방향, 팔레트 및 시그니처가 포함되어 있습니다. 허락 없이 덮어쓰지 마십시오.

에이전트 아키텍처

리뷰 모드와 수정 모드의 경우 모든 작업을 직렬로 처리하는 대신 특화된 서브 에이전트를 디스패치합니다. 이는 더 짧은 시간에 더 깊은 분석을 제공합니다.

에이전트 사용 시기

리뷰 모드에서 실제 UI 입력이 있는 경우 → 항상 3개의 병렬 리뷰 에이전트 디스패치
점수가 5 이하인 모든 차원 → 점수 카드 후 일치하는 심층 분석 에이전트 자동 디스패치
수정 모드 → 패스당 전용 수정 에이전트 디스패치 (패스 3과 4는 병렬)
생성 모드 게이트 1 → 제품 URL 또는 카테고리를 알 수 있는 경우 선택적으로 방향 조사 에이전트 디스패치

포크 vs 새 컨텍스트

subagent_type: "fork" — 전체 대화 컨텍스트(UI 입력, 스크린샷, 코드)가 필요한 리뷰 및 수정 에이전트용
기본값 (새 컨텍스트) — 대화 기록이 필요 없는 방향 조사 에이전트용

에이전트 프롬프트 파일

전체 프롬프트 템플릿은 references/agents/에 있습니다. 에이전트를 디스패치할 때 참조하십시오. 각 파일에는 해당 에이전트에 대한 지침과 출력 형식이 포함되어 있습니다.

리뷰 모드

감사, 점수 매기기, 우선순위 지정. 먼저 묻지 않고 코드를 변경하지 않습니다.

단계 0: 3개의 병렬 리뷰 에이전트 디스패치

직접 분석을 수행하기 전에 에이전트 도구를 사용하여 한 메시지에 세 에이전트를 모두 디스패치합니다. 세 개 모두 포크입니다. UI 입력을 포함한 전체 대화 컨텍스트를 상속받습니다.

에이전트 1 — 슬롭 감사자 프롬프트 템플릿: references/agents/review-slop.md 작업: 슬롭 감사, 템플릿 점검, 접근성, 모바일/터치, 성능 빠른 점검.

에이전트 2 — 점수 카드 평가자 프롬프트 템플릿: references/agents/review-scorecard.md 작업: 8개 차원 모두 1–10점으로 점수 매기기, 점수당 근거 제시.

에이전트 3 — 감정 분석가 프롬프트 템플릿: references/agents/review-emotion.md 작업: 모든 주요 상태에 대한 느낌 상태 점검 + 피크-엔드 규칙 매핑.

세 개 모두 완료될 때까지 기다린 후 단계 1로 진행합니다.

단계 1: 종합

세 에이전트의 출력을 표준 출력 형식으로 병합합니다. 여러 에이전트에 나타나는 중복된 발견 사항은 제거합니다. 에이전트 간 점수가 다른 경우 더 낮은 값을 사용하고 차이점을 기록합니다.

## 슬롭 감사
[에이전트 1에서 — 위치와 심각도가 포함된 각 발견 사항]

## 템플릿 점검
[에이전트 1에서]

## 점수 카드
제품 적합성:    X/10   [에이전트 2에서 — 한 줄 메모]
계층 구조:      X/10
명확성:        X/10
취향:          X/10
절제:          X/10
밀도:          X/10
공정성:        X/10
반응형:        X/10
전체:          X/10

## 감정 디자인
[에이전트 3에서 — 느낌 상태 + 피크-엔드 발견 사항]

## 평결
최고 부분:
최악 부분:
필수 수정 (P0): [있는 경우 — 없으면 "없음"]
빠른 해결 (P1): [최대 3개]

출력 후 수정 사항을 적용할지 묻습니다.

단계 2: 자동 심층 분석

점수 카드가 표시된 후 모든 차원을 확인합니다. 점수가 5 이하인 차원에 대해 요청을 기다리지 않고 일치하는 심층 분석 에이전트를 자동으로 디스패치합니다.

디스패치 테이블 및 프롬프트 템플릿은 references/agents/deepdive-dispatch.md를 참조하십시오.

디스패치 전에 알립니다: "계층 구조가 4점입니다 — 집중적인 시각적 계층 구조 비평을 디스패치합니다."

심층 분석 맵:

차원 / 발견 사항	디스패치할 스킬
계층 구조 ≤ 5	`critique-visual-hierarchy` 스킬
명확성 ≤ 5 (어포던스)	`critique-affordance` 스킬
명확성 ≤ 5 (밀도)	`critique-information-density` 스킬
공정성 ≤ 5 (타이포그래피)	`critique-typography` 스킬
공정성 ≤ 5 (색상)	`critique-color` 스킬
공정성 ≤ 5 (레이아웃)	`critique-composition` 스킬
취향 ≤ 5 (평평함)	`interfaces-that-feel` 스킬
밀도 ≤ 5	`critique-information-density` 스킬
감정 호 문제	`peak-end-rule` 스킬

생성 모드

UI를 작성하기 전에 다음 순서를 따릅니다. 각 단계는 게이트입니다. 진행하기 전에 멈추고 확인합니다.

게이트 0: 컨텍스트 유형

진행하기 전에 다음 중 해당하는 것을 명시합니다:

앱 화면 — 도구, 대시보드, 데이터 제품. 밀도, 작업 및 상태가 지배적.
페이지 — 랜딩, 편집, 마케팅. 구성, 리듬 및 섹션이 지배적.

게이트 1: 제품 조사 에이전트 (선택 사항이지만 권장)

제품에 URL, 이름이 있거나 알려진 카테고리에 속하는 경우 사용자에게 제품 이해를 묻기 전에 조사 에이전트를 디스패치합니다. 이는 왕복을 줄이고 사용자가 언급하지 않을 수 있는 도메인별 규칙을 표면화합니다.

프롬프트 템플릿: references/agents/direction-research.md

URL이나 카테고리를 알 수 없으면 이 단계를 건너뛰고 사용자에게 직접 묻습니다.

프로젝트 루트에 기존 PROJECT_DESIGN.md가 있는지 확인합니다. 존재하면 읽습니다. 방향이 이미 설정된 것입니다. 게이트 3(빌드)으로 건너뛰고 기록된 방향을 적용합니다.

없으면 다음을 읽거나 질문합니다: 제품이 하는 일, 대상, 기본 작업, 기존 콘텐츠, 기술 스택, 기존 브랜드 색상, 글꼴, 컴포넌트.

질문: "제 이해가 맞는지 확인해 주시겠어요? 디자인 방향을 설정하기 전입니다." 멈춤. 기다림.

게이트 2: 방향 + 디자인 다이얼

제품에서 다섯 가지 라인을 도출합니다. 트렌드, 포트폴리오 또는 멋져 보이는 것에서 절대 가져오지 않습니다.

제품: 하는 일과 대상, 한 문장으로 평범하게.
캐릭터: 2–3개의 구체적인 단어. 차분함, 정확함, 약간 따뜻함 또는 빠름, 기술적, 장난기. "깔끔함, 현대적, 세련됨, 미니멀, 프리미엄"은 금지입니다. 모든 템플릿을 설명하는 단어입니다.
세계: 제품이 자연스럽게 속하는 재료나 장소. 메모 앱: 종이와 잉크. 모니터링 도구: 계기와 야간 교대. 여행 앱: 지도와 창문 빛. 이는 중성 색상, 강조 색상 및 시각적 순간을 물들입니다.
순간: 디자인이 풍부하고 구체적으로 표현되는 화면의 1–2곳. 다른 모든 것은 조용히 유지되어 이 순간들이 즉시 읽힙니다.
시그니처: 이 제품만 가질 수 있는 작은 세부 사항 하나, 일관되게 반복됨.

1–3개의 방향을 제시합니다. 각 방향에 대해 세 가지 디자인 다이얼을 보여줍니다.

변형  ░░░░░░░░░░  1–10   (1 = 미니멀/중앙 정렬, 10 = 대담/비대칭)
움직임 ░░░░░░░░░░  1–10   (1 = 정적, 10 = 애니메이션)
밀도  ░░░░░░░░░░  1–10   (1 = 여유/편집 스타일, 10 = 대시보드/조밀)

질문: "어떤 방향으로 할까요? 다이얼이 적절한가요, 아니면 조정해야 할 부분이 있나요?" 멈춤. 기다림.

방향이 확인된 후 프로젝트 루트에 PROJECT_DESIGN.md 생성을 제안합니다.

# PROJECT_DESIGN.md

## 방향: [이름]
제품: [한 문장]
캐릭터: [2–3개 단어]
세계: [재료 / 장소]
순간: [1–2개 특정 위치]
시그니처: [하나의 세부 사항]

## 다이얼
변형: X/10
움직임: X/10
밀도: X/10

## 팔레트
캔버스: [토큰 + 16진수]
강조: [토큰 + 16진수]
텍스트 기본: [토큰 + 16진수]
텍스트 희미: [토큰 + 16진수]

## 타이포그래피
디스플레이: [글꼴 이름 + 두께]
본문: [글꼴 이름 + 두께]
모노: [글꼴 이름] (해당하는 경우)

## 테두리 반경: [값]px

디자인 원칙

방향이 확인되면 다음 순서로 적용합니다 (이전 패스가 이후 패스에 영향을 줍니다).

간격 — 먼저 설정

8px 그리드. 모든 여백, 패딩, 간격: 4 또는 8의 배수. (mt-[13px] → 수정.)
동일 요소 = 동일 크기. 모든 목록 행은 하나의 높이와 하나의 간격을 공유합니다.
공간은 그룹화를 보여줍니다: 내부 < 외부. 섹션 레이블은 위의 항목보다 자체 항목에 더 가깝게 배치됩니다.
내비게이션이 가장 조밀: 행 32–36px, 행 사이 2–4px.

색상

하나의 중성 램프, 세계 쪽으로 색조가 더해짐. 배경, 표면, 테두리, 텍스트 모두 해당 램프에서 가져옴.
하나의 강조 색상, 드물게 사용: 기본 동작, 선택, 또는 중요한 숫자 하나.
세 가지 텍스트 역할: 기본, 보조, 희미. 결코 약간 다른 회색 10개를 사용하지 않음.
금지: 표면의 색조 그라데이션, 그라데이션 텍스트, 유색 글로우, 유색 그림자, 방사형 블롭, 네온 테두리.
강조 색상 위에 텍스트: ≥ 4.5:1 대비.
새 색상 토큰에는 OKLCH 선호: oklch(L% C H).

타이포그래피

독특한 디스플레이 글꼴과 깔끔한 본문 글꼴을 짝지음. 두께 대비를 최대화.
모든 제목(h1–h3)에 text-wrap: balance. 본문 및 목록 텍스트에 text-wrap: pretty.
:root 또는 html에 -webkit-font-smoothing: antialiased.
최소 14px 본문 텍스트(16px 선호). 페이지당 하나의 h1.

컴포넌트

버튼: 동사 우선 레이블. 섹션당 하나의 기본.
아이콘으로 이모지 사용 금지. 하나의 아이콘 라이브러리, 하나의 선 두께, currentColor만 사용.
카드: 그림자 OR 테두리, 둘 다 아님.
빈 상태: 일러스트레이션 + 헤드라인 + CTA. 절대 그냥 비워두지 않음.
로딩: 300ms 지연 후 스켈레톤 화면(스피너 아님).
모달: X, 취소, Escape. 포커스 트랩. 닫을 때 포커스 반환.
모든 모달, 서랍, 드롭다운에 overscroll-behavior: contain.
모든 아이콘 버튼에는 aria-label. 모든 양식 입력에는 연결된 <label>.

하나의 밝은 요소 규칙

각 화면은 하나의 정돈되고 풍부한 요소를 얻습니다. 그 주변의 모든 것은 조용히 유지됩니다.

안티-일반 가드레일

디자인이 포트폴리오 스크린샷에서는 인상적이지만 제품을 덜 명확하게 만든다면 거부합니다.

빌드 후

리뷰 모드(에이전트 포함)를 실행합니다. 완료 조건: P0 발견 사항 없음, 전체 점수 ≥ 7/10, 제품 적합성 ≥ 7/10.

수정 모드

먼저 리뷰 모드를 실행하여 점수 카드를 얻습니다. 그런 다음 패스 순서대로 수정 에이전트를 디스패치합니다.

실행 순서:

패스 1, 2 → 순차적 (먼저 간격, 그 다음 색상)
패스 3 + 패스 4 → 병렬 (아이콘과 카피는 독립적)
패스 5–10 → 순차적

각 패스의 에이전트 프롬프트 템플릿은 references/agents/fix-passes.md를 참조하십시오.

각 패스에 대해 에이전트가 무엇을 하고 있는지 알리고 패스당 보고합니다: 변경된 사항과 여전히 주의가 필요한 사항.

패스 순서:

간격 — 8px 그리드 정렬, 리듬, 그룹화
색상 — 슬롭 제거, 중성 램프로 구축
아이콘 — 한 세트, 한 크기, 한 선, currentColor (카피와 병렬)
카피 — 이모지 레이블 제거, 고함 진정, 제품별로 변경 (아이콘과 병렬)
타이포그래피 — 계층 구조, 두께, text-wrap: balance, text-wrap: pretty, 앤티앨리어싱, tabular-nums
레이아웃 — 정렬, 밀도
세부 사항 — 동심원 반경, 그림자, 테두리
접근성 및 터치 — 포커스 상태, aria-label, touch-action: manipulation, 44px 대상, overscroll-behavior
시각 자료 — 빈 상태 일러스트레이션, 아이콘 일관성, 이미지 종횡비. references/passes-visuals.md 참조
모션 — 마지막 패스, 의미를 더하는 곳에만. references/passes-motion.md 참조

모든 패스 후: 리뷰 모드 에이전트를 다시 실행하여 확인합니다. 원래 점수 카드와의 차이를 보고합니다.

다듬기 모드

대부분 잘 디자인되었지만 약간 어색한 인터페이스를 위한 모드입니다.

기법: 브라우저 DevTools(애니메이션 패널)에서 인터페이스 속도를 10%로 늦추고 모든 상태를 살펴봅니다: 호버, 포커스, 활성, 로딩, 빈 상태. 10% 속도에서 어색한 것이 전체 속도에서 미묘하게 잘못된 것입니다.

구체적인 값은 references/micro-polish.md를 참조하십시오.

빠른 체크리스트:

전달 전 체크리스트

UI를 완료로 표시하기 전에:

아이콘으로 이모지 사용 금지 (SVG 사용: Heroicons/Lucide/Phosphor/Radix)
모든 클릭 가능 요소에 cursor-pointer
텍스트 대비 ≥ 4.5:1 (WCAG AA)
키보드 내비게이션을 위한 포커스 상태 표시 (focus-visible, 제거된 outline 사용 금지)
모든 아이콘 버튼에 aria-label
모든 양식 입력에 연결된 <label>

RomuloRogerio/design-quality-v2

design-quality-v2란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서