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.
Informações da origem
- Repositório
- reason-machines/trending-skills
- Última atividade na origem
- 21 de abril de 2026 às 06:48
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 82
- Forks
- 15
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Exibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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);
Ver no GitHubEste SKILL.md e muito grande, entao o SkillsMP mostra aqui apenas a primeira secao. Ver no GitHub
