kami-document-design
Design system and AI skill for generating beautiful warm-parchment documents (resumes, slides, one-pagers, portfolios, letters, white papers) with a consistent editorial aesthetic.
소스 정보
- 저장소
- reason-machines/trending-skills
- 최근 소스 활동
- 2026년 4월 21일 06:48
- 감지된 SKILL.md 언어
- 영어
- 스타
- 82
- 포크
- 15
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- kami-document-design
- description
- Design system and AI skill for generating beautiful warm-parchment documents (resumes, slides, one-pagers, portfolios, letters, white papers) with a consistent editorial aesthetic.
- triggers
- ["make me a resume","build a slide deck","create a one-pager","write a white paper","design a portfolio","generate a recommendation letter","turn this into a polished document","帮我排版一份文档"]
# Kami Document Design Skill
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Kami (紙, かみ) is an aesthetic constraint system for professional printed documents. It produces warm parchment canvas output across six document types, with Chinese and English variants, using a single ink-blue accent and editorial typography tuned for print.
## What Kami Does
Kami is not a UI framework — it is a visual language applied to documents you actually want to read. It gives AI agents a strict design spec so every generated document shares the same signature: parchment background, ink-blue accent, serif for authority, sans for utility, tight editorial whitespace.
**Six document types:**
- **One-Pager** — compact company/product intro, single page
- **Long Doc / White Paper** — multi-section research or analysis
- **Letter** — recommendation, cover, formal correspondence
- **Portfolio** — project showcase, multi-page
- **Resume / CV** — founder or professional CV
- **Slides** — keynote-style deck, 4–8 slides
Each type has a Chinese variant and an English variant. Kami selects the correct variant based on the language you write in.
## Installation
**Claude Code (recommended):**
```bash
npx skills add tw93/kami -a claude-code -g -y
```
**Codex:**
```bash
npx skills add tw93/kami -a codex -g -y
```
**Claude Desktop:**
1. Download the ZIP from [Releases](https://github.com/tw93/kami/releases)
2. Open Customize → Skills → "+" → Create skill
3. Upload the ZIP
The skill auto-triggers on natural language — no slash command needed.
## Design Tokens (Hard Rules)
| Element | Value | Rule |
|---|---|---|
| Canvas | `#f5f4ed` | Warm parchment, never pure white |
| Accent | `#1B365D` | Ink blue only, no second chromatic hue |
| Neutrals | Yellow-brown undertone | No cool blue-grays |
| Serif weight | `500` | Never bold — single weight is the signature |
| Title line-height | `1.1–1.3` | Tight |
| Dense body | `1.4–1.45` | Captions, labels |
| Reading body | `1.5–1.55` | Paragraphs — never `1.6+` |
| Shadows | Ring or whisper only | No hard drop shadows |
| Tag backgrounds | Solid hex only | `rgba()` triggers WeasyPrint double-rectangle bug |
**Fonts:**
- **Chinese:** TsangerJinKai02 (serif) + Source Han Sans (sans). TsangerJinKai is free for personal use; commercial use requires a license from [tsanger.cn](https://tsanger.cn).
- **English:** Newsreader (serif, OFL) + Inter (sans, OFL)
## HTML Document Structure
All Kami output is self-contained HTML rendered to PDF (via WeasyPrint or browser print). The canonical structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document Title</title>
<style>
/* ─── Tokens ─────────────────────────────────── */
:root {
--canvas: #f5f4ed;
--ink: #1B365D;
--ink-mid: #2c4a7a;
--ink-soft: #4a6fa5;
--muted: #8a7f6e;
--border: #d4cfc4;
--white: #ffffff;
}
/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── Page ───────────────────────────────────── */
@page {
size: A4;
margin: 18mm 16mm;
}
body {
background: var(--canvas);
color: var(--ink);
font-family: 'Newsreader', 'Georgia', serif;
font-size: 10.5pt;
line-height: 1.52;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ─── Typography ─────────────────────────────── */
h1 {
font-size: 22pt;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
}
h2 {
font-family: 'Inter', 'Helvetica Neue', sans-serif;
font-size: 7.5pt;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6pt;
}
h3 {
font-size: 11pt;
font-weight: 500;
line-height: 1.3;
color: var(--ink);
}
p {
font-size: 10pt;
line-height: 1.52;
color: #3d3427;
}
.sans {
font-family: 'Inter', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<!-- document content here -->
</body>
</html>
```
## Document Type Examples
### Resume (English)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Resume – Jane Smith</title>
<style>
:root {
--canvas: #f5f4ed; --ink: #1B365D; --muted: #8a7f6e;
--border: #d4cfc4; --accent-bg: #1B365D;
}
@page { size: A4; margin: 16mm 18mm; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--canvas);
color: var(--ink);
font-family: 'Newsreader', Georgia, serif;
font-size: 10pt;
line-height: 1.52;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Header */
.header {
border-bottom: 1.5pt solid var(--ink);
padding-bottom: 10pt;
margin-bottom: 14pt;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.header h1 {
font-size: 20pt;
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
}
.header .contact {
font-family: 'Inter', sans-serif;
font-size: 8pt;
color: var(--muted);
text-align: right;
line-height: 1.6;
}
/* Section */
.section { margin-bottom: 14pt; }
.section-label {
font-family: 'Inter', sans-serif;
font-size: 7pt;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 0.5pt solid var(--border);
padding-bottom: 3pt;
margin-bottom: 8pt;
}
/* Entry */
.entry { margin-bottom: 9pt; }
.entry-header {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.entry-title {
font-size: 10.5pt;
font-weight: 500;
}
.entry-date {
font-family: 'Inter', sans-serif;
font-size: 8pt;
color: var(--muted);
}
.entry-sub {
font-family: 'Inter', sans-serif;
font-size: 8.5pt;
color: var(--muted);
margin-bottom: 3pt;
}
.entry ul {
padding-left: 13pt;
font-size: 9.5pt;
line-height: 1.48;
color: #3d3427;
}
/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 4pt; margin-top: 3pt; }
.tag {
background: #1B365D;
color: #f5f4ed;
font-family: 'Inter', sans-serif;
font-size: 7pt;
font-weight: 500;
padding: 2pt 6pt;
border-radius: 2pt;
}
.tag-light {
background: #d4cfc4;
color: #1B365D;
font-family: 'Inter', sans-serif;
font-size: 7pt;
font-weight: 500;
padding: 2pt 6pt;
border-radius: 2pt;
}
</style>
</head>
<body>
<div class="header">
<div>
<h1>Jane Smith</h1>
<p style="font-family:Inter,sans-serif;font-size:9pt;color:#8a7f6e;margin-top:3pt;">
Staff Engineer · Platform Infrastructure
</p>
</div>
<div class="contact">
jane@example.com<br>
github.com/janesmith<br>
San Francisco, CA
</div>
</div>
<div class="section">
<div class="section-label">Experience</div>
<div class="entry">
<div class="entry-header">
<span class="entry-title">Staff Engineer</span>
<span class="entry-date">2021 – Present</span>
</div>
<div class="entry-sub">Stripe · Platform Infrastructure</div>
<ul>
<li>Led migration of payment routing layer to event-driven architecture, reducing p99 latency by 34%.</li>
<li>Designed the internal developer platform serving 600+ engineers across 12 product teams.</li>
<li>Mentored 5 senior engineers through promotion cycles to staff level.</li>
</ul>
</div>
<div class="entry">
<div class="entry-header">
<span class="entry-title">Senior Software Engineer</span>
<span class="entry-date">2018 – 2021</span>
</div>
<div class="entry-sub">Airbnb · Search & Discovery</div>
<ul>
<li>Built the real-time availability indexing pipeline handling 2M events/minute.</li>
<li>Shipped personalized ranking model that lifted booking conversion by 8%.</li>
</ul>
</div>
</div>
<div class="section">
<div class="section-label">Skills</div>
<div class="tags">
<span class="tag">Go</span>
<span class="tag">Rust</span>
<span class="tag">Kubernetes</span>
<span class="tag">Kafka</span>
<span class="tag">PostgreSQL</span>
<span class="tag-light">System Design</span>
<span class="tag-light">Technical Leadership</span>
</div>
</div>
</body>
</html>
```
### One-Pager (Chinese)
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>公司介绍</title>
<style>
:root { --canvas: #f5f4ed; --ink: #1B365D; --muted: #8a7f6e; --border: #d4cfc4; }
@page { size: A4; margin: 14mm 16mm; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--canvas);
color: var(--ink);
font-family: 'TsangerJinKai02', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
font-size: 10pt;
line-height: 1.52;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.hero {
text-align: center;
padding: 18pt 0 14pt;
border-bottom: 1.5pt solid var(--ink);
margin-bottom: 16pt;
}
.hero h1 {
font-size: 24pt;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.2;
}
.hero .tagline {
font-family: 'Source Han Sans SC', 'PingFang SC', sans-serif;
font-size: 10pt;
color: var(--muted);
margin-top: 5pt;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; }
.block { padding: 10pt; background: #edeade; border-radius: 3pt; }
.block-label {
font-family: 'Source Han Sans SC', sans-serif;
font-size: 7pt;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 5pt;
}
.block p {
font-size: 9.5pt;
line-height: 1.5;
color: #3d3427;
}
.metric-row {
display: flex;
justify-content: space-around;
margin: 14pt 0;
padding: 10pt;
border-top: 0.5pt solid var(--border);
border-bottom: 0.5pt solid var(--border);
}
.metric { text-align: center; }
.metric .num {
font-size: 20pt;
font-weight: 500;
color: var(--ink);
GitHub에서 보기이 SKILL.md는 매우 커서 SkillsMP가 여기에는 첫 섹션만 미리 보여줍니다. GitHub에서 보기
