kami-landing은(는) 무엇을 하나요?
kami (紙 / 纸) 디자인 시스템을 사용하여 단일 페이지 문서를 생성합니다. 이 미학은 편집 인쇄물, 기술 백서, 그리고 오래된 타자기 서신에서 영감을 받았습니다. 목표는 현대적인 앱 UI가 아닌 좋은 종이에 좋은 콘텐츠를 제공하는 것입니다.
디자인 시스템의 진실 공급원:
design-systems/kami/DESIGN.md. 배포 전에 반드시 읽으십시오. 토큰, 타이포그래피 규칙, "열 가지 불변 사항", 그리고 금지된 색상이 모두 여기에 정의되어 있습니다.
제공되는 것
다음을 포함하는 단일 자체 포함 HTML 파일:
- 따뜻한 양피지 캔버스 (
#f5f4ed) — 절대#ffffff를 사용하지 않습니다. - 단일 크로매틱 악센트 — 잉크 블루 (
#1B365D), 섹션 번호, 헤드라인 강조 단어, 선언문 왼쪽 규칙, 메트릭 값에 사용됩니다. 그 외에는 잉크 블루가 문서 표면적의 5%를 초과해서는 안 됩니다. - 계층 구조를 위한 단일 굵기(500)의 세리프 —
language매개변수에 따라 Charter (EN), TsangerJinKai02 / Source Han Serif (CN), 또는 YuMincho (JA)가 선택됩니다. 이탤릭체는 어디에도 사용하지 않습니다. - 조밀한 인쇄 리듬 — 줄 높이 1.10–1.55, 언어별 자간 (EN은 0, CN은 0.35px, JA는 0.02em).
- 숫자 스택은
font-variant-numeric: tabular-nums으로 설정되어 메트릭 열과 페이지 번호 숫자가 깔끔하게 정렬됩니다. - 1px 테두리 + 속삭이는 그림자를 통한 깊이감 (
0 4px 24px rgba(0,0,0,0.05)). 강력한 드롭 섀도우, 뉴모피즘, backdrop-filter 블러는 사용하지 않습니다. - 태그 채우기는 고정 헥스 값 (예:
#E4ECF5)으로, 절대rgba()를 사용하지 않습니다 — 인쇄 렌더러는 알파 태그를 이중으로 덧칠합니다. - 반응형 — 1280 / 980 / 768 / 560 픽셀.
페이지 구조
1. Eyebrow 행 — 로케일 전환기 · 에디션 · 버전 (12px 산세리프 대문자)
2. Hero — 디스플레이 헤드라인 (96–106px 세리프 500), 태그라인 (21px),
세 개의 hero-token 칩 (종이 색조)
3. 선언문 — 세리프 400, 20px, 1.65 LH의 인용 단락,
잉크 블루 왼쪽 규칙과 서명 푸터 포함
4. 메트릭 행 — 3-6개 셀: 값 (24px 세리프 500 ink-blue, tabular-nums),
레이블 (12px 세리프 500 olive)
5. 챕터 — 번호 (`01`, `02`, …) 잉크 블루 세리프 500 14px,
섹션 제목 28-32px, 본문 14-15px
6. 푸터 — 키커 단어 (메가 세리프 500), 라이선스 · 연도 · 연락처,
12px 세리프 500의 3열 사이트 인덱스
워크플로 계약
1. 브랜드 브리핑 수집
AskQuestion(또는 이에 상응하는 도구)을 사용하여 브랜드 브리핑을 청크 단위로 수집합니다. 전체 입력 목록을 사용자에게 한 번에 덤프하지 말고, 두 라운드에 걸쳐 질문하십시오:
- 아이덴티티 라운드 — 이름, 태그라인, 위치, 에디션 / 버전, 기본 URL, 주요 언어.
- 콘텐츠 라운드 — 선언문 단락 + 서명, 3-6개의 메트릭 타일, 3-5개의 챕터 (제목 + 서문 + 본문) 항목.
2. 언어 스택 선택
language 매개변수는 :root에 설정될 --serif 스택을 제어합니다. 선언문 및 챕터 본문의 주요 언어에 따라 선택하십시오:
language | --serif | 참고 |
|---|---|---|
en | Charter, Georgia, Palatino, Times New Roman, serif | 기본값 |
zh-CN | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia | 본문 자간 0.35px |
ja | YuMincho, Hiragino Mincho ProN, Source Han Serif JP | 또한 --olive를 #4d4c48로 재정의 (YuMincho 획이 더 얇음) |
혼합 스크립트 인라인 콘텐츠는 괜찮습니다 — 브라우저의 글리프별 폴백 체인이 처리합니다. 세 가지 글꼴 패밀리를 하나의 font-family 선언에 연결하지 마십시오. 이는 문자를 희석시킵니다.
3. index.html 작성
모든 CSS가 인라인으로 포함된 단일 파일을 출력합니다. example.html의 구조를 미러링하고 design-systems/kami/DESIGN.md의 토큰만 사용하십시오. 새로운 색상, 굵기 또는 글꼴 패밀리를 발명하지 마십시오.
에이전트가 사용할 수 있는 컴포넌트 프리미티브 (모두 예제의 <style> 블록에 정의됨):
.eyebrow,.label— 산세리프 상단선.metric— 값 + 레이블 수직 쌍.section-num+.section-title+.section-lede.tag.standard,.tag.brush— 고정 헥스 태그 (페이지당 최대 하나의 brush).quote— 왼쪽 규칙 세리프 500 인용구ul.dash— 잉크 블루 엔 대시 불릿.code— 아이보리 배경, 1px 테두리 코드 블록.footer-kicker— 메가 세리프 500 단어
호스트 앱의 댓글 모드가 타겟팅할 수 있도록 data-od-id="<unique-slug>"를 사용하여 모든 편집 가능한 요소에 태그를 지정하십시오.
4. 전달 전 자체 점검
- 페이지 배경이 양피지 (
#f5f4ed)이며, 절대#ffffff가 아닙니다. - 잉크 블루 (
#1B365D)가 보이는 표면적의 5% 이하로 사용됩니다 — 섹션 번호, 선언문 규칙, 메트릭 값, 헤드라인 악센트를 합산하여 총 5% 이하입니다. - 모든 회색조는 따뜻합니다 (R ≈ G > B).
slate-*,#f3f4f6은 사용하지 않습니다. - 세리프 굵기는 500으로 유지됩니다 — 세리프 텍스트에
font-weight: 700또는900이 없어야 합니다. - 어디에도
font-style: italic이 없습니다. 강조는 잉크 블루 색상 또는.tag로 대체됩니다. - 모든 숫자 스택 (메트릭 값, 페이지 번호, 날짜, 재무 수치)에
font-variant-numeric: tabular-nums가 적용됩니다. - 모든 태그 채우기는 고정 헥스 값 (예:
#E4ECF5)이며, 절대rgba()가 아닙니다. - 그림자: 최대
1px테두리 또는0 4px 24px rgba(0,0,0,0.05)속삭이는 그림자. 강력한 드롭 섀도우는 사용하지 않습니다. - 헤드라인은 표시 크기에서 6단어 이하; CJK는 8자 이하.
- 768px 및 560px에서 레이아웃이 가로 스크롤 없이 단일 열로 축소됩니다.
이 스킬의 파일
design-templates/kami-landing/
├── SKILL.md # 이 계약서
├── README.md # 인간용 빠른 시작 가이드
└── example.html # SplatStudio 표준 렌더링
경계
- 새로운 색상이나 서체를 발명하지 마십시오. kami 팔레트는 고정되어 있습니다. 브리핑에 브랜드 색상이 필요하면 거절하거나 브랜드 색상을 단일
.tag.brush악센트로 렌더링하십시오. - 두 번째 악센트 색상을 도입하지 마십시오. 잉크 블루를 선택하거나 아무것도 선택하지 마십시오.
- 세 가지 글꼴 스택을 하나의 선언에 혼합하지 마십시오. 주요 언어를 선택하고,
:root에서--serif를 재정의한 후, 브라우저의 글리프별 폴백이 혼합 스크립트 인라인 콘텐츠를 처리하도록 두십시오. - 태그 채우기에
rgba()를 사용하지 마십시오. — 인쇄 렌더러는 알파 태그를 이중으로 덧칠합니다.design-systems/kami/DESIGN.md§2의 표에서 미리 혼합된 고정 헥스 값을 사용하십시오. - 애니메이션을 위해 JavaScript를 추가하지 마십시오. 페이지는 종이이며, 앱이 아닙니다 — 움직임은 독자가 스크롤하는 것에 속합니다.
참고 항목
design-systems/kami/DESIGN.md— 전체 토큰 사양.design-templates/kami-deck/— 동일한 kami 언어로 슬라이드 데크를 생성하는 자매 스킬.- 상류:
tw93/kami— 디자인 시스템이 적용된 원본 Claude 스킬 (MIT).