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.
Quellinformationen
- Repository
- reason-machines/trending-skills
- Letzte Quellaktivitรคt
- 21. April 2026 um 06:48
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 82
- Forks
- 15
Installationsoptionen
Standardmรครig ist der Prompt ausgewรคhlt, der zuerst die Quelle prรผft. Sie kรถnnen zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prรผfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich fรผr eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen ยท Schreibgeschรผtzte Vorschau- 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);
Auf GitHub ansehenDiese SKILL.md ist sehr gross, daher zeigt SkillsMP hier nur den ersten Abschnitt. Auf GitHub ansehen
