Claude Design Principles
핵심 인식: 좋은 디자인은 무에서 추측하는 것이 아니라, 기존 맥락에서 '자라나는' 것입니다. 이 스킬은 Claude Design의 판단력을 실행 가능한 체크리스트로 압축합니다.
🚦 언제 트리거되는가 (필독)
작업이 아래 중 하나에 해당한다면, 반드시 먼저 이 스킬의 세 가지 하드 룰(아래 참조)을 로드한 후 작업을 시작하십시오:
- 웹페이지, 랜딩 페이지, 컴포넌트 라이브러리
- 슬라이드, 프레젠테이션, 보고서 문서
- 앱 / 웹 프로토타입, 인터랙션 데모
- 포스터, 시각 자료, 인포그래픽
- 브랜드 자료, 카드, 로고
- 'AI가 만든 것처럼 보이지 않아야 하는' HTML/SVG 출력
트리거 키워드: 디자인, design, UI, mockup, prototype, 프로토타입, slide, deck, poster, landing, wireframe, mock, 인터페이스, 페이지, 프레젠테이션, 발표 자료
⛔ 세 가지 하드 룰 (위반 시 실패)
룰 1: 디자인 전에 반드시 맥락을 수집할 것
'머릿속에 좋은 아이디어가 있으니 바로 시작한다'는 것은 존재하지 않습니다. 작업 전에 최소한 하나는 확보해야 합니다:
- 기존 UI 키트 / 디자인 시스템 파일
- 브랜드 토큰 (색상 팔레트, 폰트 스택, 간격, 모서리 둥글기 규칙)
- 참고 사이트 / 제품 스크린샷
- 기존 코드베이스의 컴포넌트
- 명확한 브랜드 설명 문서 (예: Equation 브랜드 가이드북)
위 항목 중 하나도 없을 경우 → 먼저 Jane에게 요청하거나, '시각적 DNA 앵커'(예: 'Aesop 같은 미색 + 세리프 폰트 + 여백')를 함께 결정해야 합니다.
제로부터의 모크업은 최후의 수단이며, 그럴 경우 일반적인 AI 슬롭을 생성하게 됩니다.
룰 2: 한 번에 최소 3가지 안 제시, 기본 → 전위로 점진적
단 하나의 안만 제시하는 것은 허용되지 않습니다. 매 출력마다 최소:
- 안 A (표준 버전) — 기존 디자인 시스템을 엄격히 따르며, 모험 없음
- 안 B (고급 버전) — 시스템에 약간의 변화 추가 (색상, 레이아웃, 글자 배열 리듬)
- 안 C (전위 버전) — 시스템에서 벗어나 새로운 은유, 참신한 레이아웃, 대담한 타이포그래피 시도
이를 별도의 슬라이드 / 탭 / 나란히 카드로 보여주어 Jane이 혼합하여 선택할 수 있게 합니다.
룰 3: AI 슬롭 리스트 전부 금지
다음 패턴은 AI 생성임이 명확하므로 사용 금지 (전체 목록은 ai-slop-avoid.md 참조):
- ❌ 넓은 면적의 그라데이션 배경 (보라-파랑, 분홍-주황 등)
- ❌ 둥근 모서리 컨테이너 + 왼쪽 4px 색상 막대 악센트
- ❌ SVG로 직접 그림 그리기
- ❌ Inter / Roboto / Arial / Fraunces / 시스템 폰트
- ❌ 이모지 남발 (브랜드가 명확히 사용하지 않는 한)
- ❌ 채우기 위한 데이터, 아이콘, 통계
- ❌ 가상의 '사용자 리뷰', 플레이스홀더 초상화
- ❌ 모든 섹션에 '신뢰 마크' / '고객 로고' 추가
📐 실행 프로세스 (7단계)
1. 요구사항 읽기 → 이 스킬이 트리거되는지 확인
2. 맥락 수집 → UI 키트 / 브랜드 자산 / 참고 자료 요청; 없으면 Jane에게 물어보기
3. 질문 목록 → question-templates.md에 따라 최소 10개 질문
4. 시각 시스템 결정 → 구두/서면으로 'X 폰트 + Y 색상 팔레트 + Z 레이아웃 리듬을 사용하겠습니다' 명시
5. 다중 안 구성 → 최소 3개 변형, 탭/트윅/슬라이드로 노출
6. 자체 점검 → ai-slop-avoid.md 목록 검토
7. 전달 → 파일을 열어 Jane에게 보여주기 + open -R로 Finder 열기
🎛️ Tweaks 실시간 조정 모드 (선택 사항이지만 권장)
HTML 출력에 다음과 같이 JSON 설정 블록을 남겨두십시오:
<script>
const TWEAKS = /*EDITMODE-BEGIN*/{
"primaryColor": "#D97757",
"fontSize": 16,
"radius": 8,
"dark": false
}/*EDITMODE-END*/;
</script>
용도: 추후 색상/글꼴 크기를 변경해야 할 때, 전체 HTML을 뒤지지 않고 이 JSON 블록만 정확히 교체하면 됩니다. Jane도 직접 수정하고 새로고침하여 미리볼 수 있습니다. 전체 템플릿은 starter-components/tweaks-block.html에 있습니다.
📊 하드 기준 (논의 불가)
| 매체 | 최소 글자 크기 | 최소 히트 타겟 |
|---|---|---|
| 1920×1080 슬라이드 | 24px | — |
| 인쇄 문서 | 12pt | — |
| 모바일 목업 | 14px | 44px |
| 데스크톱 웹 본문 | 16px | — |
🔧 PAI 측 보조 스킬 (런타임 보완)
이 스킬은 '디자인 판단력'만 해결합니다. 실제 작업 시 조합:
| 요구사항 | 사용할 것 |
|---|---|
| 시각적 방향 참고 (50 스타일 / 21 팔레트) | ui-ux-pro-max |
| 프론트엔드 구조 / 컴포넌트 코드 품질 | frontend-design:frontend-design |
| Dev 서버 시작 + 브라우저 검증 | webapp-testing / Browser MCP |
| HTML → PPTX | pptx / nano-ppt-generator |
| 일러스트 / 아이콘 플레이스홀더 실제 제작 | nano-image-generator-skill / Art |
| 슬라이드 HTML 구조 | ppt / html-ppt-designer |
📎 첨부 파일 (v1.1.0 확장)
📚 규칙 문서 (필요 시 시나리오별 로드)
| 파일 | 언제 읽는가 |
|---|---|
ai-slop-avoid.md | 매 디자인 전에 검토 — 25가지 안티패턴 + 대안 |
question-templates.md | 작업 시작 시, Jane에게 질문할 목록이 필요할 때 |
typography-system.md | 글자 크기/굵기/줄 높이/폰트 조합 결정 시 |
color-system.md | 색상 배합, WCAG 대비 확인, oklch 조정 시 |
spacing-rhythm.md | 간격/모서리 둥글기/그림자/정렬 결정 시 |
design-heuristics.md | 레이아웃 버그, '왜 어색한지 모르겠다' 할 때 — 게슈탈트/피츠/힉스 법칙 참조 |
🧩 스타터 컴포넌트 (원클릭 복사용 스캐폴딩)
| 파일 | 용도 |
|---|---|
starter-components/deck-stage.html | 슬라이드 스테이지 (1920×1080 + 키보드 네비게이션 + 적응형 크기 조정) |
starter-components/design-canvas.html | 다중 안 병렬 캔버스 (표준/고급/전위) |
starter-components/tweaks-block.html | Tweaks 실시간 조정 템플릿 + postMessage 프로토콜 |
starter-components/ios-frame.html | iPhone 16 Pro 디바이스 프레임 + 상태 표시줄 + Home Indicator |
starter-components/browser-window.html | 브라우저 창 (Safari/macOS 스타일 + 탭 바) |
starter-components/animations.html | 타임라인 애니메이션 엔진 (Stage + Sprite + 50줄 핵심) |
🧭 의사 결정 트리: 작업 수신 시 어떤 파일을 먼저 읽을까?
디자인 작업 수신
↓
필독: SKILL.md (이 파일) 세 가지 하드 룰
↓
┌─────────────────────────────────┐
│ 작업 유형 → 해당 하위 파일 읽기 │
├─────────────────────────────────┤
│ 코드 작성 전 → ai-slop-avoid │
│ Jane에게 질문 → question-templates│
│ 폰트 결정 → typography-system │
│ 색상 배합 → color-system │
│ 간격/둥글기 결정→ spacing-rhythm │
│ PC 웹페이지 → browser-window │
│ 앱/모바일 → ios-frame │
│ PPT/Deck → deck-stage │
│ 다중 안 표시 → design-canvas │
│ 인터랙티브 효과→ animations │
│ 실시간 조정 → tweaks-block │
│ 뭔가 어색한데 이유를 모르겠다 → design-heuristics │
└─────────────────────────────────┘
💬 미래의 나에게 하는 말
디자인 실패의 90%는 미적 감각 부족이 아니라, 제대로 묻지 않음 + 맥락 부족 + 단 하나의 안만 제시함에서 비롯됩니다. 이 스킬을 체크리스트처럼 사용하여 각 단계를 모두 거치십시오. '빠른 결과물'과 '좋은 디자인'을 혼동하지 마십시오.