Kami紙
좋은 내용은 읽기 좋은 문서로. Kami는 AI를 위한 문서 템플릿과 편집 지침 모음입니다. 이력서, 보고서, 슬라이드, 제품 소개 페이지를 만들 수 있습니다.
출력 샘플
Claude에게 필요한 문서를 설명하면 한 장 소개서, 보고서, 편지, 포트폴리오, 이력서, 슬라이드를 만들 수 있습니다. 같은 지침을 이미지 생성 도구에도 사용할 수 있으며, README에서 프롬프트와 예시를 볼 수 있습니다.
주식 분석
Tesla 2026년 1분기 실적 분석
이력서
개발자 이력서, 2페이지
한 장 소개서
Kami 소개, 흰 종이 인쇄, 1페이지
슬라이드
에이전트 키노트, 8슬라이드
Kami로 제작
같은 템플릿으로 만든 세 가지 제품 사이트입니다.
Kami
디자인 시스템 홈페이지
Luo
CJK 읽기용 폰트, 중국어
Mole
macOS 시스템 유틸리티
설치 및 사용
Claude에게 "이력서 만들어 줘" 또는 "발표용 슬라이드 만들어 줘"라고 말하면 Kami가 자동으로 실행됩니다. 슬래시 명령어는 필요 없습니다.
# Claude Code, Codex, Cursor 및 기타 에이전트 npx skills add tw93/kami -a claude-code codex cursor -g -y # Claude Code 플러그인 (v2.1.142+) /plugin marketplace add tw93/kami /plugin install kami@kami # Codex 플러그인 codex plugin marketplace add tw93/kami codex plugin add kami@kami # Claude Desktop kami.zip을 내려받아 Customize > Skills > "+" > Create skill에서 업로드
FAQ
- Kami란 무엇인가요?
- Kami는 AI를 위한 문서 템플릿과 편집 지침 모음입니다. Claude Design이나 GPT Canvas 같은 이미지 생성 도구에 레이아웃 지침으로 전달할 수도 있습니다.
- 무엇을 만들 수 있나요?
- Kami는 8가지 문서 템플릿, 다국어 랜딩 페이지 시스템, 18가지 인라인 SVG 다이어그램을 제공하며 문서는 PDF나 PNG로 내보낼 수 있고 슬라이드는 편집 가능한 PPTX도 지원합니다.
- 브랜드 스타일에 맞출 수 있나요?
- 네, 브랜드 색상, 글꼴, 레이아웃 선호를 에이전트에게 알려 주거나 브랜드 설정을 제공하면 명시한 요청이 항상 Kami 기본값보다 우선합니다.
- 어떤 언어를 지원하나요?
- 영어와 중국어를 중심으로 지원합니다. 일본어와 한국어는 글꼴과 레이아웃을 개별 조정하고 결과물을 확인합니다. 기본 글꼴은 순서대로 Charter, TsangerJinKai02, YuMincho, Source Han Serif K입니다.
디자인 기원
저는 미국 주식에 투자하며 항상 Claude에게 리서치 리포트를 작성해 달라고 합니다. 매번 출력물은 같은 기본 문서 모양이었습니다: 회색이고, 평면적이며, 세션마다 레이아웃이 달랐습니다. 구조를 파악하기 어렵고, 서식은 구식이었으며, 페이지의 어떤 것도 계속 읽고 싶게 만들지 못했습니다. 그래서 타이포그래피, 팔레트, 간격을 하나의 규칙씩 고쳐나가기 시작했고, 결국 리포트는 제가 실제로 즐길 수 있는 페이지가 되었습니다.
나중에 "당신이 모르는 에이전트: 원칙, 아키텍처, 엔지니어링 실무"를 발표해야 했습니다. 이미 문서가 있었고 슬라이드를 처음부터 만들고 싶지 않아서, Claude Design으로 제 스타일에 맞게 레이아웃을 잡고 여러 차례 수정하여 만족스러운 수준에 도달했습니다. 그 과정에서 인라인 SVG 차트를 넣고 색상과 간격을 정리했습니다. 평소 만드는 문서에도 적용하면서 템플릿과 규칙을 모았고, 그렇게 Kami가 되었습니다.
디자인 원칙
기본 배경은 따뜻한 종이색이며 잉크 블루로 강조합니다. 세리프 글꼴을 사용하고 글자 크기와 여백으로 제목과 본문을 구분합니다. 인쇄용 흰색 배경을 선택해도 카드와 표에는 은은한 배경색이 남습니다.
- 1
페이지 배경은 양피지
#f5f4ed, 순백은 절대 사용하지 않음 - 2
강조색은 잉크 블루
#1B365D하나만; 두 번째 유채색 없음 - 3
모든 회색은 따뜻한 색조, 황갈색 기반; 차가운 청회색 사용 금지
- 4
제목과 본문은 하나의 세리프로 통일하고, 실제 UI 요소에만 별도 산세리프 사용
- 5
세리프 본문은 400, 제목은 500. 합성 볼드 사용 금지
- 6
세 가지 행간 기준: 타이트 제목 1.1-1.3 / 밀집 1.4-1.45 / 읽기 1.5-1.55
- 7
태그 배경은 반드시 솔리드 hex; rgba 금지, WeasyPrint 이중 사각형 버그
- 8
표면은 기본적으로 평평하게 두고, 실제로 떠 있는 스크린샷이나 팝오버에만 아주 옅은 그림자를 사용
따뜻한 절제
강조색은 하나만 쓰고 회색은 따뜻한 색조로 맞춥니다. 잉크 블루는 페이지 면적의 5% 이내로 사용합니다.
배경색
Parchment
페이지 배경, 감성의 기초
#F5F4EDIvory
카드 / 카드 배경
#FAF9F5Warm Sand
버튼 기본 / 인터랙티브 표면
#E8E6DCDeep Dark
다크 테마 페이지 기본, 순수 블랙 아님
#141413강조색
Ink Blue
기본 색상 · CTA · 레이블 · 섹션 오버라인
#1B365DInk Light
다크 표면 위 링크 · 밝은 변형
#2D5A8ADark Surface
다크 테마 컨테이너 · 웜 차콜
#30302EError
오류 상태, 깊은 따뜻한 레드
#B53333따뜻한 회색
Near Black
#141413Dark Warm
#3D3D3AOlive
#504e49Stone
#6b6a64태그 배경색
등록된 솔리드 색상은 두 단계만 사용합니다. #EEF2F7은 약한 표현, #E4ECF5는 기본값입니다. 솔리드 hex는 WeasyPrint의 이중 사각형 문제도 막습니다.
Quiet
#EEF2F7기본
#E4ECF5타입 시스템
제목과 본문에는 같은 세리프 글꼴을, 코드에는 고정폭 글꼴을 사용합니다.
Aa
Serif · 제목 + 본문
Charter / TsangerJinKai02
제목, 본문, 풀 인용, 숫자 강조에 사용됩니다. 영문은 Charter, 중문은 TsangerJinKai02를 사용합니다.
</>
Mono · 코드
JetBrains Mono
코드 블록, 버전 번호, hex 값, 표형 숫자.
스케일 (인쇄 pt; 화면 px = pt x 1.33)
안정적이며 절제되어 있다
weight 500
line 1.10
weight 500
line 1.20
weight 500
line 1.25
weight 500
line 1.30
weight 400
line 1.55
weight 400
line 1.45
weight 600
line 1.35
리듬과 형태
기본 단위는 4pt입니다. 내용이 많은 문서는 여백을 줄이고, 격식을 갖춘 문서는 넓게 둡니다.
| 스케일 | 값 | 용도 | |
|---|---|---|---|
| xs | 2-3 pt | 인라인 요소 | |
| sm | 4-5 pt | 태그 패딩 · 타이트 레이아웃 | |
| md | 8-10 pt | 컴포넌트 내부 | |
| lg | 16-20 pt | 컴포넌트 간격 · 카드 패딩 | |
| xl | 24-32 pt | 섹션 제목 마진 | |
| 2xl | 40-60 pt | 주요 섹션 간격 | |
| 3xl | 80-120 pt | 긴 문서 챕터 간격 |
Radii
깊이
표면은 기본적으로 평평합니다. 여백, 은은한 배경색, 꼭 필요한 중성 헤어라인으로 계층을 만듭니다. 아주 옅은 그림자는 실제로 떠 있는 스크린샷이나 팝오버에만 사용합니다.
구성 요소
문서 레이아웃에 쓰는 기본 구성 요소입니다.
버튼
채움 + 테두리 · 그림자 없음 · 8px radius
태그, 두 단계
솔리드 hex · 약한 표현 또는 기본
인용
olive 텍스트 + 이탤릭 · 측면 선 없음
천 번의 거절 끝에 하나의 승낙, 장식보다 명확함을 우선합니다.
메트릭
세리프 숫자 + 산세리프 레이블 · tabular-nums
섹션 제목
serif 500 · 15pt · 크기 주도 계층, 장식 없음
일반 목록
간격으로 리듬 형성 · 기호 없음
- 따뜻한 양피지, 순백은 절대 아님
- 잉크 블루 강조색, 두 번째 색상 없음
- 세리프가 권위를 담당
코드 블록
ivory bg + 4pt radius, no border
// warmth from restraint, not from color canvas = parchment; accent = ink_blue palette = warm_neutrals − cool_grays document = serif × hierarchy + generous_space beauty = constraints × intention ÷ noise
기본 카드
ivory 채움 하나 + 8px radius · 테두리와 그림자 없음
Tesla Company Profile · One-Pager
단일 A4 페이지 · 메트릭 카드 4개 + 본문 섹션 3개 + 타임라인
인라인 차트
구성도, 흐름도, 데이터 시각화에 쓸 수 있는 SVG 다이어그램 18종을 제공합니다. Claude에게 필요한 종류를 말하면 문서와 같은 색상과 글꼴로 넣을 수 있습니다.
시스템 구성 요소와 연결, 하나의 핵심 노드
분기 결정, 예/아니오 경로, 성공 경로 강조
분기별 매출 비교, 그라데이션 또는 단색
매출 구조 분석, 3-6개 세그먼트 지원
빠른 참조
용도에 맞는 구성 요소를 아래 표에서 찾으세요. 표에 없다면 앞의 디자인 원칙을 참고하세요.
| 작업 | 방법 |
|---|---|
| 큰 제목 | serif 500, 계층에 따른 크기, line-height 1.10-1.30 |
| 읽기 본문 | serif 400, 9.5-10 pt, line-height 1.55 |
| 숫자 강조 | color: var(--brand), 볼드 아님 |
| 두 섹션 구분 | 먼저 여백을 사용하고, 경계가 꼭 명확해야 할 때만 0.5pt 중성 전체 너비 헤어라인 |
| 인용 | olive 텍스트 + 이탤릭 또는 들여쓰기, 측면 선 없음 |
| 코드 표시 | Ivory bg + 4pt radius + mono font, no border |
| 기본 vs 보조 | 기본: brand fill + ivory text; 보조: warm-sand + charcoal |
| 특별 카드 표시 | 더 명확한 레이블이나 은은한 배경색을 사용하고 강조 테두리는 추가하지 않음 |
| 섹션 시작 | Serif 500 · 15pt · 크기 주도 계층, 장식 불필요 |
| 문서 표지 | 단일 페이지, Display 크기 + 우측 정렬 저자/날짜 + 넉넉한 여백 |
| 핵심 수치 표시 | 베이스라인 한 줄, 투명 배경, 컨테이너 없음 + serif 큰 숫자 + sans 작은 레이블 |
피해야 할 것
예외는 허용되지만, 이유는 명시적이어야 합니다.
페이지 배경
지양#ffffff 순백이나 #f3f4f6 쿨 그레이 배경. 페이지가 딱딱해지고 따뜻한 양피지 특성이 약해집니다.
권장항상 #f5f4ed 양피지. 인쇄 시 흰 테두리를 막기 위해 @page background도 같은 색으로 설정합니다.
태그 색상
지양태그의 rgba(27,54,93,0.18). WeasyPrint는 패딩과 글리프 영역을 다른 불투명도로 렌더링하여 이중 사각형을 만듭니다.
권장등록된 기본 태그 색상 #E4ECF5. 렌더링이 깔끔하게 유지되고 색상이 안정적입니다.
합성 볼드
지양font-weight: 600 이상의 합성 볼드 제목. 획이 흐려지고 타이포그래피 품질이 떨어집니다.
권장본문 400, 제목 500 (실제 W05). 더 강한 존재감이 필요하면 크기, 여백, 잉크 블루 텍스트를 사용합니다.
섀도우
지양하드 드롭 섀도우 0 2px 8px rgba(0,0,0,0.3). 시각적으로 무겁고 인쇄 시 어두운 얼룩으로 나타납니다.
권장표면은 기본적으로 평평하게 두고 여백, 은은한 배경색, 중성 헤어라인으로 계층을 만듭니다. 아주 옅은 그림자는 실제로 떠 있는 UI와 스크린샷에만 사용합니다.