Design System · v1.5.0 · 2026.05

Kami紙

좋은 콘텐츠는 좋은 종이를 만날 자격이 있습니다. Kami는 AI 시대를 위한 레이아웃 디자인 시스템으로, 문서를 명확하고 읽기 쉽고 기억에 남게 만듭니다.

Canvas#f5f4ed Accent#1B365D SerifCharter / TsangerJinKai Sans= Serif (페이지당 단일 폰트)

00 · See it

출력 샘플

Claude에게 브리프를 전달하세요: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드 모두 하나의 작고 신뢰할 수 있는 규칙 세트에서 정돈된 레이아웃으로 완성됩니다. 동일한 브리프는 이미지 렌더러에도 적용할 수 있으며, README에 복사-붙여넣기 프롬프트와 샘플 출력물이 포함되어 있습니다.

Tesla equity report

Equity Report

Tesla 2026년 1분기 실적 분석

Musk resume

Resume

창업자 이력서, 2페이지

Kaku portfolio

Portfolio

Kaku 터미널 포트폴리오, 일본어, 7페이지

Agent slides

Slides

에이전트 키노트, 6슬라이드

Landing Pages

Kami로 제작

동일한 랜딩 페이지 템플릿을 세 가지 다른 제품에 적용한 결과. 하나의 제약 세트, 세 가지 다른 목적.

Kami landing page

Kami

디자인 시스템 홈페이지

Luo landing page

Luo

CJK 읽기용 폰트, 중국어

Mole landing page

Mole

macOS 시스템 유틸리티

01 · Usage

설치 및 사용

Claude에게 필요한 것을 말하세요. 예를 들어 "이력서 만들어 줘", "스타트업 원페이저 만들어 줘", "발표용 슬라이드 디자인해 줘". 스킬이 자동으로 실행되며, 슬래시 명령어가 필요 없습니다.

# Claude Code
npx skills add tw93/kami -a claude-code -g -y

# Codex
npx skills add tw93/kami -a codex -g -y

Claude Code 플러그인 마켓플레이스 설치는 버전 2.1.136-2.1.138에서 일시적으로 영향을 받습니다; 업스트림에서 루트 스킬 경로 검증이 수정될 때까지 위의 Claude Code 명령어를 사용하세요.

Claude Desktop: kami.zip을 다운로드한 후, Customize > Skills > "+" > Create skill에서 업로드하세요.

02 · Manifesto

디자인 원칙

따뜻한 양피지 캔버스, 잉크 블루를 유일한 강조색으로, 세리프가 계층 구조를 담당하며, 하드 섀도우와 화려한 팔레트는 배제합니다. 이 시스템은 인쇄물을 위해 만들어졌습니다: 안정적이고, 명확하며, 절제되어 있습니다.

  1. 1

    페이지 배경은 양피지 #f5f4ed, 순백은 절대 사용하지 않음

  2. 2

    강조색은 잉크 블루 #1B365D 하나만; 두 번째 유채색 없음

  3. 3

    모든 회색은 따뜻한 색조, 황갈색 기반; 차가운 청회색 사용 금지

  4. 4

    영문은 제목과 본문 모두 세리프; 중문은 제목에 세리프, 본문에 산세리프

  5. 5

    세리프 본문은 400, 제목은 500. 합성 볼드 사용 금지

  6. 6

    세 가지 행간 밴드: 타이트 제목 1.1-1.3 / 밀집 1.4-1.45 / 읽기 1.5-1.55

  7. 7

    태그 배경은 반드시 솔리드 hex; rgba 금지, WeasyPrint 이중 사각형 버그

  8. 8

    그림자: 링 또는 위스퍼만 허용, 하드 드롭 섀도우 금지

03 · Color

따뜻한 절제

하나의 강조색 + 따뜻한 중성색 + 차가운 색상 제로. 잉크 블루는 어떤 페이지에서든 5% 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다.

Canvas

Parchment

페이지 배경, 감성의 기초

#F5F4ED

Ivory

카드 / 부상된 표면

#FAF9F5

Warm Sand

버튼 기본 / 인터랙티브 표면

#E8E6DC

Deep Dark

다크 테마 페이지 기본, 순수 블랙 아님

#141413

Brand

Ink Blue

기본 색상 · CTA · 인용 바 · 섹션 오버라인

#1B365D

Ink Light

다크 표면 위 링크 · 밝은 변형

#2D5A8A

Dark Surface

다크 테마 컨테이너 · 웜 차콜

#30302E

Error

오류 상태, 깊은 따뜻한 레드

#B53333

Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

Tag Tints: rgba에서 솔리드 hex로

양피지 위 잉크 블루 #1B365D의 솔리드 hex 등가값. 태그는 WeasyPrint 이중 사각형 렌더링 버그를 피하기 위해 rgba() 대신 솔리드 hex를 사용합니다.

 Tag sample

0.08

#EEF2F7
 Tag sample

0.14

#E4ECF5
DefaultTag sample

0.18

#E4ECF5
 Tag sample

0.22

#D0DCE9
 Tag sample

0.30

#D6E1EE

04 · Typography

타입 시스템

세리프는 계층을, 산세리프는 기능을 담당합니다. 세리프 본문은 400, 제목은 500.

Aa

Serif · 제목 + 본문

Charter / TsangerJinKai02

제목, 본문, 풀 인용, 숫자 강조에 사용됩니다. 영문은 Charter, 중문은 TsangerJinKai02를 사용합니다.

</>

Mono · 코드

JetBrains Mono

코드 블록, 버전 번호, hex 값, 표형 숫자.

스케일 (인쇄 pt; 화면 px = pt x 1.33)

Display
좋은 문서는 명확하고
안정적이며 절제되어 있다
36-48 pt
weight 500
line 1.10
H1 Section
Color System · Palette
18-22 pt
weight 500
line 1.20
H2 Subsection
Canvas · Warm Neutrals
14-16 pt
weight 500
line 1.25
H3 Item
Tag Tints · Solid Hex
12-13 pt
weight 500
line 1.30
Body
잉크 블루는 어떤 페이지에서든 5% 이하만 차지합니다. 그 이상은 절제가 아니라 혼잡입니다. 모든 회색은 황갈색 기반입니다: R ≈ G > B가 기본 원칙입니다.
9.5-10 pt
weight 400
line 1.55
Caption
그림 주석, 각주, 주석 텍스트. 색상은 올리브 또는 스톤으로 낮아집니다.
8.5-9 pt
weight 400
line 1.45
Label
Design System · v1.5.0
7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

리듬과 형태

기본 단위: 4pt. 밀집 레이아웃은 더 작은 여백을, 격식 있는 문서는 더 큰 여백을 사용합니다.

스케일값용도
xs2-3 pt인라인 요소
sm4-5 pt태그 패딩 · 타이트 레이아웃
md8-10 pt컴포넌트 내부
lg16-20 pt컴포넌트 간격 · 카드 패딩
xl24-32 pt섹션 제목 마진
2xl40-60 pt주요 섹션 간격
3xl80-120 pt긴 문서 챕터 간격

Radii

4 pt
타이트
6 pt
코드 블록
8 pt
기본 카드
12 pt
컨테이너
16 pt
피처 카드
24 pt
대형 컨테이너
32 pt
히어로

깊이: 세 가지 그림자 방식

Kami는 전통적인 하드 섀도우를 피합니다. 깊이감은 링 섀도우, 위스퍼 섀도우, 명암 교차를 통해 표현합니다.

링 섀도우

0 0 0 1pt var(--ring-warm)
 
버튼 · 카드 호버

위스퍼 섀도우

0 4pt 24pt rgba(0,0,0,0.05)
 
부드러운 부상 · 피처 카드

라이트 ⇌ 다크

parchment ⇌ deep-dark
 
섹션 레벨 · 가장 강한 대비

06 · Components

원자 모듈

작은 고정 세트로, 구체적인 문서 문제를 해결하는 곳에만 유지합니다.

버튼

하드 드롭 대신 링 섀도우 · 8pt radius

Primary CTA Secondary Ghost

태그, 세 단계

솔리드 hex · 약에서 강으로 선택

Light 0.08 Standard 0.18 Brush gradient

인용

좌측 2pt brand solid + olive 텍스트

천 번의 거절 끝에 하나의 승낙, 장식보다 명확함을 우선합니다.

메트릭

세리프 숫자 + 산세리프 레이블 · tabular-nums

6문서 유형
1강조색
8규칙

섹션 제목

serif 500 · 15pt · 크기 주도 계층, 장식 없음

Selected Works · Projects

대시 목록

불릿 대신 대시 · 에디토리얼 톤

  • 따뜻한 양피지, 순백은 절대 아님
  • 잉크 블루 강조색, 두 번째 색상 없음
  • 세리프가 권위를 담당

코드 블록

ivory bg + 0.5pt border + 6pt radius

// 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

피처 카드

whisper shadow + 16pt radius

Tesla Company Profile · One-Pager

단일 A4 페이지 · 메트릭 카드 4개 + 본문 섹션 3개 + 타임라인

English A4 x 1 Ink Blue

07 · Diagrams

인라인 차트

아키텍처, 프로세스, 데이터 차트 시나리오를 아우르는 14가지 인라인 SVG 다이어그램 유형. Claude에게 필요한 유형을 말하면 문서에 직접 삽입되며, 색상과 폰트는 Kami 디자인 언어를 따릅니다.

Architecture
CLIENT Browser SERVICE API DATA Database

시스템 구성 요소와 연결, 하나의 포컬 노드

Flowchart
Start Valid? Yes Process No Reject

분기 결정, 예/아니오 경로, 성공에 포컬

Bar Chart
Q1 Q2 Q3 Q4 180 220 195 240

분기별 매출 비교, 그라데이션 또는 단색

Donut Chart
60% Primary Core revenue · 60% Services · 25% Other · 15%

매출 구조 분석, 3-6개 세그먼트 지원

08 · Decision Lookup

빠른 참조

무엇을 사용해야 할지 확신이 없을 때 이 표를 참고하세요. 여기에 없다면, 기본 원칙으로 돌아가세요.

작업방법
큰 제목serif 500, 계층에 따른 크기, line-height 1.10-1.30
읽기 본문serif 400, 9.5-10 pt, line-height 1.55
숫자 강조color: var(--brand), 볼드 아님
두 섹션 구분2.5pt brand 좌측 바, 또는 0.5pt warm-gray 점선
인용좌측 2pt brand solid + olive 텍스트
코드 표시Ivory bg + 0.5pt border + 6pt radius + mono font
기본 vs 보조기본: brand fill + ivory text; 보조: warm-sand + charcoal
특별 카드 표시border: 0.5pt solid var(--brand) 또는 border-left: 3pt
섹션 시작Serif 500 · 15pt · 크기 주도 계층, 장식 불필요
문서 표지단일 페이지, Display 크기 + 우측 정렬 저자/날짜 + 넉넉한 여백
데이터 카드Ivory bg + 8pt radius + serif 큰 숫자, ink blue + sans 작은 레이블

09 · Anti-Patterns

피해야 할 것

예외는 허용되지만, 이유는 명시적이어야 합니다.

하지 마세요

#ffffff 순백이나 #f3f4f6 쿨 그레이를 페이지 배경으로 사용하지 마세요. 페이지가 딱딱해지고 따뜻한 양피지 특성이 약해집니다.

하세요

항상 #f5f4ed 양피지를 사용하세요. 인쇄 시 흰 테두리를 방지하기 위해 @page background도 같은 색상으로 설정하세요.

하지 마세요

태그에 rgba(27,54,93,0.18)를 사용하지 마세요. WeasyPrint는 패딩과 글리프 영역을 다른 불투명도로 렌더링하여 이중 사각형을 만듭니다.

하세요

등가 솔리드 hex #E4ECF5를 위한 틴트 조회 표를 사용하세요. 렌더링이 깔끔하게 유지되고 색상이 안정적입니다.

하지 마세요

제목을 font-weight: 600 이상의 합성 볼드로 설정하지 마세요. 합성 볼드는 획을 흐리게 하고 타이포그래피 품질을 떨어뜨립니다.

하세요

본문 400, 제목 500 (실제 W05). 더 강한 존재감이 필요하면 크기나 brand 좌측 바를 사용하고, 합성 볼드는 절대 사용하지 마세요.

하지 마세요

하드 드롭 섀도우 0 2px 8px rgba(0,0,0,0.3)을 사용하지 마세요. 시각적으로 무겁고 인쇄 시 어두운 얼룩으로 나타날 수 있습니다.

하세요

링 섀도우 0 0 0 1pt 또는 위스퍼 rgba 0.05, 아니면 단순히 밝고 어두운 섹션을 교차시키세요.

10 · Background

디자인 기원

저는 미국 주식에 투자하며 항상 Claude에게 리서치 리포트를 작성해 달라고 합니다. 매번 출력물은 같은 기본 문서 모양이었습니다: 회색이고, 평면적이며, 세션마다 레이아웃이 달랐습니다. 구조를 파악하기 어렵고, 서식은 구식이었으며, 페이지의 어떤 것도 계속 읽고 싶게 만들지 못했습니다. 그래서 타이포그래피, 팔레트, 간격을 하나의 규칙씩 고쳐나가기 시작했고, 결국 리포트는 제가 실제로 즐길 수 있는 페이지가 되었습니다.

나중에 "당신이 모르는 에이전트: 원칙, 아키텍처, 엔지니어링 실무"를 발표해야 했습니다. 이미 문서가 있었고 슬라이드를 처음부터 만들고 싶지 않아서, Claude Design으로 제 스타일에 맞게 레이아웃을 잡고 여러 차례 수정하여 만족스러운 수준에 도달했습니다. 그 과정에서 인라인 SVG 차트, 통일된 웜 팔레트, 더 타이트한 에디토리얼 리듬이 추가되었습니다. 정기적으로 작성하는 모든 문서를 커버할 때까지 계속 성장했고, 추상화 과정을 거쳐 kami가 되었습니다: 어떤 에이전트에게든 넘겨주고 출력물을 신뢰할 수 있는, 하나의 조용한 디자인 시스템입니다.

11 · Questions

FAQ

Kami란 무엇인가요?
AI 생성 문서를 위한 제약 기반 디자인 시스템입니다. 하나의 강조색, 세리프 주도 계층 구조, 따뜻한 양피지 캔버스. LLM 에이전트에게 브리프를 전달하면 정돈된 레이아웃을 돌려받습니다. Claude Design이나 GPT Canvas 같은 이미지 렌더러에 전달할 수 있는 비주얼 브리프로도 활용됩니다.
무엇을 만들 수 있나요?
10가지 템플릿 유형: 원페이저, 긴 문서, 레터, 포트폴리오, 이력서, 슬라이드, 주식 리포트, 변경 로그, 랜딩 페이지(영문 + 중문). 비주얼 설명을 위한 14가지 인라인 SVG 다이어그램 유형 포함. HTML 출력물을 PDF, PNG 또는 슬라이드 덱으로 내보낼 수 있습니다.
어떻게 설정하나요?
Claude Code: npx skills add tw93/kami -a claude-code -g -y. 플러그인 마켓플레이스 설치는 Claude Code 2.1.136-2.1.138에서 일시적으로 영향을 받습니다. Codex나 OpenCode 같은 범용 에이전트: npx skills add tw93/kami -a '*' -g -y. Claude Desktop: GitHub Releases에서 kami.zip을 다운로드하여 Customize > Skills에서 업로드하세요. 슬래시 명령어가 필요 없으며, 자연어 요청으로 스킬이 자동 실행됩니다.
어떤 언어를 지원하나요?
영어, 중국어, 일본어를 지원합니다. 각 언어별 전용 세리프 폰트를 사용합니다: 영어는 Charter, 중국어는 TsangerJinKai02, 일본어는 YuMincho. 자간, 행간, 폰트 크기는 인쇄 품질을 위해 언어별로 튜닝됩니다. 일본어는 배포 전 비주얼 QA를 포함하는 최선의 CJK 경로입니다.