Impeccable — 프런트엔드 디자인 스킬
프로덕션 등급의 프런트엔드 인터페이스를 디자인하고 반복합니다. 실제 작동하는 코드, 확고한 디자인 선택, 탁월한 장인정신.
pbakaus/impeccable 기반 (Apache 2.0), Anthropic의 프런트엔드 디자인 스킬을 확장했습니다.
설정
디자인 작업이나 파일 편집 전에:
- 컨텍스트 읽기 — 프로젝트 루트에 PRODUCT.md / DESIGN.md가 있는지 확인합니다. PRODUCT.md가 없거나 자리 표시자(200자 미만)인 경우, 사용자에게
impeccable:teach를 먼저 실행하라고 제안합니다. - 레지스터 식별 — 모든 디자인 작업은 브랜드(마케팅, 랜딩, 캠페인, 포트폴리오: 디자인이 곧 제품) 또는 제품(앱 UI, 관리자, 대시보드, 도구: 디자인이 제품을 위한 수단)입니다. 디자인 전에 식별하세요.
- 레지스터 참조 로드 — 레지스터에 따라 이 스킬의 참조 파일에서 브랜드 또는 제품 참조를 사용하세요.
명령어
사용자가 특정 impeccable 명령어를 호출할 때(예: "이 페이지 감사", "체크아웃 연마"), impeccable:<명령어> [대상] 패턴을 따르세요. 각 명령어는 이 스킬의 참조 디렉토리에 참조 파일이 있습니다.
| 명령어 | 카테고리 | 설명 |
|---|---|---|
impeccable:craft [기능] | 구축 | 시각적 반복을 포함한 전체 형성-후-구축 흐름 |
impeccable:teach | 구축 | 일회성 설정: 디자인 컨텍스트 수집, PRODUCT.md 및 DESIGN.md 작성 |
impeccable:document | 구축 | 기존 프로젝트 코드에서 DESIGN.md 생성 |
impeccable:extract [대상] | 구축 | 재사용 가능한 컴포넌트와 토큰을 디자인 시스템으로 추출 |
impeccable:shape [기능] | 구축 | 코드 작성 전 UX/UI 계획 |
impeccable:critique [대상] | 평가 | UX 디자인 리뷰: 계층, 명확성, 정서적 공명 |
impeccable:audit [대상] | 평가 | 기술 품질 검사 실행 (a11y, 성능, 반응형) |
impeccable:polish [대상] | 개선 | 최종 점검, 디자인 시스템 정렬, 출시 준비 |
impeccable:bolder [대상] | 개선 | 지루한 디자인 증폭 |
impeccable:quieter [대상] | 개선 | 과도하게 대담한 디자인 완화 |
impeccable:distill [대상] | 개선 | 핵심으로 축소 |
impeccable:harden [대상] | 개선 | 오류 처리, i18n, 텍스트 오버플로우, 엣지 케이스 |
impeccable:onboard [대상] | 개선 | 첫 실행 흐름, 빈 상태, 활성화 경로 |
impeccable:animate [대상] | 향상 | 목적 있는 모션 추가 |
impeccable:colorize [대상] | 향상 | 전략적 색상 도입 |
impeccable:typeset [대상] | 향상 | 글꼴 선택, 계층, 크기 수정 |
impeccable:layout [대상] | 향상 | 레이아웃, 간격, 시각적 리듬 수정 |
impeccable:delight [대상] | 향상 | 즐거움의 순간 추가 |
impeccable:overdrive [대상] | 향상 | 기술적으로 뛰어난 효과 추가 |
impeccable:clarify [대상] | 수정 | 불명확한 UX 카피 개선 |
impeccable:adapt [대상] | 수정 | 다양한 기기에 적응 |
impeccable:optimize [대상] | 수정 | 성능 개선 |
impeccable:live | 반복 | 시각적 변형 모드: 브라우저에서 요소 반복 |
라우팅
- 대상 미지정: 카테고리별로 그룹화된 명령어 테이블을 렌더링하고, 사용자가 무엇을 하고 싶은지 묻습니다.
- 명령어 일치: 이 스킬의 reference/ 디렉토리에서 해당 참조 파일을 로드하고 지침을 따릅니다.
- 일치하지 않지만 디자인 관련: 공유 디자인 법칙과 레지스터 참조를 직접 적용합니다.
공유 디자인 법칙
모든 디자인, 두 레지스터 모두에 적용합니다. 구현 복잡성을 미적 비전과 일치시킵니다. 프로젝트마다 다양하게 적용하며, 동일한 선택에 수렴하지 마십시오.
색상
- OKLCH를 사용합니다. 명도가 0 또는 100에 가까워질수록 채도를 줄이세요. 극단에서 높은 채도는 싸구려 보입니다.
#000또는#fff를 절대 사용하지 마세요. 모든 중립 색상을 브랜드 색조로 약간 물들이세요(채도 0.005–0.01이면 충분합니다).- 색상을 선택하기 전에 색상 전략을 선택하세요. 약속 강도에 따른 네 단계:
- 절제된: 물든 중립색 + 단일 강조색 ≤10%. 제품 기본값. 브랜드 미니멀리즘.
- 약속된: 하나의 채도가 높은 색상이 표면의 30–60%를 차지합니다. 아이덴티티 중심 페이지의 브랜드 기본값.
- 전체 팔레트: 3–4개의 명명된 역할, 각각 의도적으로 사용됩니다. 브랜드 캠페인, 제품 데이터 시각화.
- 흠뻑 젖은: 표면 자체가 색상입니다. 브랜드 히어로, 캠페인 페이지.
- "단일 강조색 ≤10%" 규칙은 절제된 경우에만 해당합니다. 약속된 / 전체 팔레트 / 흠뻑 젖은은 의도적으로 이를 초과합니다.
테마
어둡게 vs 밝게는 절대 기본값이 아닙니다. "도구가 어둡게 보이면 멋지니까" 어둡게 하지 마세요. "안전하니까" 밝게 하지 마세요.
선택하기 전에 물리적 장면을 한 문장으로 작성하십시오: 누가, 어디서, 어떤 주변광 아래서, 어떤 기분으로 이것을 사용하는가. 문장이 답을 강제하지 않는다면, 충분히 구체적이지 않은 것입니다. 답이 나올 때까지 세부 사항을 추가하세요.
"옵저버빌리티 대시보드"는 답을 강제하지 않습니다. "SRE가 어두운 방에서 오전 2시에 27인치 모니터로 인시던트 심각도를 훑어보는 중"은 답을 강제합니다.
타이포그래피
- 본문 줄 길이를 65–75ch로 제한하세요.
- 크기 + 두께 대비를 통한 계층 (단계 간 ≥1.25 비율). 평평한 스케일은 피하세요.
레이아웃
- 리듬을 위해 간격을 다양화하세요. 모든 곳에 같은 패딩은 단조로움입니다.
- 카드는 게으른 대답입니다. 진정으로 최선의 어포던스일 때만 사용하세요. 중첩된 카드는 항상 잘못입니다.
- 모든 것을 컨테이너로 감싸지 마세요. 대부분은 컨테이너가 필요 없습니다.
모션
- CSS 레이아웃 속성에 애니메이션을 적용하지 마세요.
- 지수 곡선으로 ease-out하세요(ease-out-quart / quint / expo). 바운스나 탄성은 없음.
절대 금지 (안티패턴)
일치시키고 거부하세요. 이 중 하나라도 작성하려고 한다면, 다른 구조로 다시 작성하세요.
- 사이드-스트라이프 테두리. 카드, 목록 항목, 콜아웃 또는 알림에 강조색으로서
border-left또는border-right>1px. 전체 테두리, 배경 색조, 앞에 붙는 숫자/아이콘 또는 아무것도 사용하지 마세요. - 그라데이션 텍스트.
background-clip: text+ 그라데이션. 장식적이며 의미가 없습니다. 단일 단색을 사용하세요. 강조는 두께나 크기로. - 기본값으로서의 유리 모피즘. 장식적으로 사용되는 블러와 유리 카드. 드물고 목적이 있거나 아무것도 없음.
- 히어로-메트릭 템플릿. 큰 숫자, 작은 레이블, 지원 통계, 그라데이션 강조. SaaS 클리셰.
- 동일한 카드 그리드. 아이콘 + 제목 + 텍스트가 있는 동일한 크기의 카드가 끝없이 반복됨.
- 첫 번째 생각으로 모달. 모달은 일반적으로 게으름입니다. 먼저 인라인/점진적 대안을 모두 사용해 보세요.
카피
- 모든 단어는 제자리를 차지할 자격이 있습니다. 제목을 반복하는 소개, 반복된 머리말 없음.
- 엠 대시 없음. 쉼표, 콜론, 세미콜론, 마침표 또는 괄호를 사용하세요.
AI Slop 테스트
누군가 이 인터페이스를 보고 의심의 여지 없이 "AI가 만들었다"고 말할 수 있다면, 실패한 것입니다.
카테고리-반사 체크 — 두 가지 높이:
- 1차: 누군가 카테고리만으로 테마 + 팔레트를 추측할 수 있다면("옵저버빌리티 → 어두운 파란색", "헬스케어 → 흰색 + 청록색", "금융 → 네이비 + 금색", "암호화폐 → 검정에 네온"), 그것은 훈련 데이터 반사입니다. 도메인에서 답이 명확하지 않을 때까지 장면 문장과 색상 전략을 재작업하세요.
- 2차: 누군가 카테고리-대비-참조에서 미학적 계열을 추측할 수 있다면("SaaS-크림이 아닌 AI 워크플로우 도구 → 에디토리얼-타이포그래픽", "네이비-앤-골드가 아닌 핀테크 → 터미널 네이티브 다크 모드"), 그것은 한 단계 더 깊은 함정입니다. 첫 번째 반사는 피했지만, 두 번째는 피하지 못했습니다. 두 답이 모두 명확하지 않을 때까지 재작업하세요.
참조 파일
각 명령어와 디자인 영역에 대한 자세한 참조 파일은 이 스킬의 reference/ 디렉토리에 있습니다. skill_view(name='impeccable', file_path='reference/<name>.md')로 로드하세요.
주요 디자인 영역 참조 (심층 분석을 위해 로드):
reference/brand.md— 브랜드 레지스터: 마케팅, 랜딩, 캠페인 페이지reference/product.md— 제품 레지스터: 앱 UI, 대시보드, 도구reference/typography.md— 유형 시스템, 글꼴 페어링, 모듈러 스케일, 오픈타입reference/color-and-contrast.md— OKLCH, 물든 중립색, 다크 모드, 접근성reference/spatial-design.md— 간격 시스템, 그리드, 시각적 계층reference/motion-design.md— 이징 곡선, 스테거링, 모션 축소reference/interaction-design.md— 폼, 포커스 상태, 로딩 패턴reference/responsive-design.md— 모바일 우선, 유동적 디자인, 컨테이너 쿼리reference/ux-writing.md— 버튼 레이블, 오류 메시지, 빈 상태reference/cognitive-load.md— 인터페이스의 인지 부하 감소reference/heuristics-scoring.md— 닐슨 스타일 발견 평가 루브릭
명령어별 참조 (일치하는 명령어에 로드):
reference/craft.md— 전체 형성-후-구축 흐름reference/shape.md— 코드 전 UX/UI 계획reference/teach.md— PRODUCT.md 및 DESIGN.md 설정reference/document.md— 기존 코드에서 DESIGN.md 생성reference/extract.md— 토큰을 디자인 시스템으로 추출reference/critique.md— UX 디자인 리뷰reference/audit.md— 기술 품질 검사reference/polish.md— 최종 품질 점검reference/bolder.md— 안전한 디자인 증폭reference/quieter.md— 과장된 디자인 완화reference/distill.md— 핵심으로 축소reference/harden.md— 프로덕션 준비reference/onboard.md— 첫 실행 흐름 및 빈 상태reference/animate.md— 목적 있는 애니메이션reference/colorize.md— 전략적 색상 도입reference/typeset.md— 타이포그래피 수정reference/layout.md— 레이아웃 및 간격 수정reference/delight.md— 개성과 기억에 남는 터치reference/overdrive.md— 기존 한계를 넘어서reference/clarify.md— UX 카피 개선reference/adapt.md— 기기 적응reference/optimize.md— UI 성능reference/live.md— 브라우저 변형 반복
CLI 도구
Impeccable은 AI 하네스 없이 UI 안티패턴을 감지하기 위한 독립형 CLI도 함께 제공합니다:
npx impeccable detect src/ # 디렉토리 스캔
npx impeccable detect index.html # HTML 파일 스캔
npx impeccable detect https://example.com # URL 스캔 (Puppeteer 필요)
npx impeccable detect --fast --json . # 정규식 전용, JSON 출력
HTML, CSS, JSX, TSX, Vue, Svelte 파일에서 25개 이상의 안티패턴을 스캔합니다. 종료 코드 0 = 깨끗함, 2 = 문제 발견. Node.js 18+ 필요.