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.
Source facts
- Repository
- reason-machines/trending-skills
- Last source activity
- April 21, 2026 at 06:48
- Detected SKILL.md language
- English
- Stars
- 82
- Forks
- 15
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions ยท Read-only preview- 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);
View on GitHubThis SKILL.md is very large, so SkillsMP previews the first section here. View on GitHub
