프론트엔드 미학 (Frontend aesthetics)
frontend-design은 입장을 정합니다: 방향을 정하고 아무도 선택하지 않은 기본값을 피합니다. 이 스킬은 그 선택을 검증 가능하게 만드는 결정 규칙, 숫자, 선례 데이터, 그리고 검사를 제공합니다. 필요할 때 참조와 단계 이름을 열어보십시오; 미리 모두 읽을 필요는 없습니다.
1. 먼저 프로젝트의 규칙을 읽으십시오
- 디자인하기 전에 브리핑이나 계약서를 찾으십시오:
DESIGN.md,PRODUCT.md, 토큰 파일 (tokens.css,theme.*,tailwind.config.*), 또는 계약 문서 (FRONTEND_CONTRACT.md). 이 파일들은 이 스킬의 기본값보다 우선합니다. - 프로젝트가 시각적 값을 토큰을 통해 전달한다면, 컴포넌트에 새로운 원시 hex, px 또는 rgba 값이 있는 것은 발견( finding)이지 스타일 선택이 아닙니다.
- 이미 작동하는 것을 유지하십시오: 테마 전환, i18n 키, 접근성 동작, 기존 컴포넌트. 요청받은 범위만 리스타일링하고, 전체 앱을 리스타일링하지 마십시오.
2. 브리핑 (Brief)
references/principles.md에 설명된 브리핑을 작성하십시오: 주제, 대상 및 맥락, 메인 화면의 역할, 밀도, 언어, 그리고 다섯 가지 차원(타이포그래피, 색상, 레이아웃, 모션, 세부 사항). 세 가지 거절 사항을 추가하십시오: 이 디자인이 닮지 말아야 할 기본값들. 사용자가 취향을 설명하지 않았다면, 하나의 방향을 제안하고 그 이유를 설명하십시오. 사용자를 심문하지 마십시오.
3. 선례 (Precedents)
스킬의 기본 디렉토리에서 다음을 실행하십시오:
python scripts/design_lookup.py "saas dashboard dark" --ux --motion
영어 키워드를 사용하십시오. 출력은 일치하는 제품 유형, 스타일, 대비 검사된 텍스트 및 UI 쌍이 포함된 팔레트, 타이포그래피 페어링 및 추론 규칙을 제공합니다. 이를 증거로 취급하되, 정답으로 취급하지 마십시오. 첫 번째 스타일은 종종 밀집된 도구에는 부적합한 트렌드 선택(글라스모피즘, 네온, 벤토)입니다. 텍스트 쌍은 192개의 팔레트 행 중 하나에서만 실패하지만, 대부분의 팔레트는 배경에 대해 3:1 미만의 테두리를 가지므로, 모든 팔레트는 사용하기 전에 UI 쌍을 확인해야 합니다.
4. 방향 (Direction)
references/directions.md에서 하나의 방향을 선택하거나 직접 정의하고, 그것이 이 브리핑에 적합한 이유와 가장 가까운 대안이 적합하지 않은 이유를 설명하십시오. 대담함을 한 곳에 사용하십시오: 하나의 시그니처 요소. 그 외 모든 것은 규율을 따릅니다.
5. 컴포넌트보다 토큰 (Tokens before components)
먼저 색상 역할, 타입 스케일, 간격, 반경, 고도 및 모션 지속 시간을 변수로 정의하십시오 (references/color-and-type.md, references/layout-and-motion.md). 제공하는 모든 텍스트 쌍을 확인하십시오:
python scripts/wcag.py "#1f2937" "#ffffff" "#556070" "#f6f7f9"
6. 구축 (Build)
해피 패스뿐만 아니라 모든 상태를 다루십시오 (references/components-and-states.md). 제품의 언어로 카피를 유지하고 가장 긴 번역을 테스트하십시오.
7. 보고 전에 검증 (Verify before reporting)
- 렌더링하고 확인하십시오.
python scripts/visual_capture.py <url> --out shots --matrix는 기본, 150% 배율, 좁은 화면 및 폰 뷰를 제공하고, 안정된 프레임을 기다리며, 콘솔 에러를 보고합니다.references/visual-review.md를 읽으십시오; 캡처 없이 하는 리뷰는 시각적 리뷰가 아닙니다. - 변경 후 다시 캡처하고
scripts/image_diff.py before.png after.png를 실행하십시오. 변경된 영역이 사용자가 변경했다고 주장하는 내용과 일치하지 않으면, 그 주장은 틀린 것입니다. python scripts/slop_scan.py <변경된 경로>. 종료 상태 1은 차단하는 발견을 의미합니다.- 실제로 제공한 모든 텍스트 및 UI 쌍에 대한 대비 (
wcag.py). - 키보드 전용 통과, 모션 감소 통과, 최악의 데이터로 브레이크 테스트.
- 콘솔 에러는 실패입니다.
blank로 보고된 캡처도 마찬가지이며, 안정되지 않은 것으로 보고된 캡처는 의심스러운 것으로 취급하십시오.
브라우저에 연결할 수 없는 경우, "시각적으로 검증되지 않음(not visually verified)"이라고 작성하고, 건너뛴 상태를 명시하며, 렌더링된 UI의 모양에 대해 아무것도 주장하지 마십시오.
8. 보고 (Report)
방향과 그 이유를 명시하고, 토큰 블록을 제공하며, 각 검증을 명령어와 결과와 함께 나열하십시오. 검증되지 않은 것을 나열하십시오.
불가침 원칙 (Floors: never trade these for looks)
- 텍스트 명암비는 최소 4.5:1. 큰 텍스트(24px, 또는 18.66px 볼드)와 UI 경계 또는 포커스 표시기는 최소 3:1이 필요합니다.
- 모든 상호작용 요소에는 호버 상태와 다른 키보드 포커스 표시기가 있어야 합니다.
- 색상은 단독으로 의미를 전달하지 않습니다.
- 모션은
prefers-reduced-motion을 존중합니다. 초당 3회 이상 깜빡이지 않습니다. - 본문 텍스트는 웹에서 최소 16px, 밀집된 데스크탑 UI에서 최소 14px입니다. 12px 미만의 텍스트는 없습니다.
- 모든 상태가 존재합니다: 로딩, 빈 상태, 에러, 비활성화, 부분 데이터.
- 플레이스홀더 카피는 배포되지 않습니다. 에러는 무슨 일이 일어났는지와 다음에 무엇을 해야 하는지를 말합니다.
- 텍스트는 가장 긴 현실적인 문자열(번역, CJK, 긴 경로 및 모델 이름)을 견딥니다.
취향 규칙 (Taste rules)
- 하나의 지배적인 중립색이 대부분의 작업을 수행합니다. 하나의 악센트는 화면의 약 10%를 넘지 않습니다. 성공, 경고, 위험 색상은 테마 전체에서 고정됩니다.
- 최대 두 개의 타입 패밀리와 필요시 모노스페이스 얼굴을 추가합니다. 하나의 스케일 비율. 계층 구조는 박스 이전에 크기, 두께, 색상 및 공간에서 비롯됩니다.
- 더 적은 테두리와 더 적은 중첩 카드. 하나의 작은 스케일에서 반경. 팔레트에 맞게 색조가 조정된 그림자, 최대 세 가지 고도 레벨.
- 모션: 화면당 하나의 목적 있는 순간, transform과 opacity만 사용, 세션에서 여러 번 반복되는 동작에는 애니메이션 없음.
- 카피: 문장 케이스(sentence case), 동사는 평이하게, 버튼, 결과 메시지 및 메뉴에서 동일한 이름 사용.
선택 테스트 (The choice test)
모든 기본값(폰트, 팔레트, 반경, 그림자, 레이아웃, 아이콘 세트)은 이 브리핑을 위해 선택되어야 합니다. 이유를 말할 수 없다면 변경하십시오. 사용자가 선택한 기본값은 징후(tell)가 아닙니다. references/anti-slop.md는 일반적인 징후와 각각을 플래그하는 스캐너 규칙을 나열합니다.
파일 (Files)
references/principles.md: 결정 순서, 브리핑 템플릿, 거절 사항.references/directions.md: 검증된 시작 토큰이 있는 9가지 방향.references/color-and-type.md: 팔레트, 다크 모드, 대비, 타입 스케일, 폰트 로딩, CJK.references/layout-and-motion.md: 그리드, 밀도, 간격, 반경, 고도, 모션.references/components-and-states.md: 컴포넌트, 상태 매트릭스, 카피, 브레이크 테스트.references/desktop-app.md: WebView 및 데스크탑 앱을 위한 규칙.references/anti-slop.md: 징후, 기본값으로 읽히는 이유, 질문할 내용, 스캐너 규칙 ID.references/critique.md: 리뷰 절차, 9개 기둥, 심각도, 출력 형식.references/visual-review.md: UI를 렌더링, 캡처, 읽고 재차이 분석하는 방법.references/sources.md: 각 규칙의 출처와 의도적으로 사용하지 않은 것.scripts/wcag.py,scripts/design_lookup.py,scripts/slop_scan.py,scripts/visual_capture.py,scripts/image_diff.py: 읽기 전용, 타사 패키지 없음, 네트워크 없음.python이 PATH에 없으면py -3을 사용하십시오.data/: ui-ux-pro-max에서 벤더링된 MIT 라이선스 CSV 데이터 (data/PROVENANCE.md참조).