Kami Document Design

Kami Document Design Skill

Skill by 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):

npx skills add tw93/kami -a claude-code -g -y

Codex:

npx skills add tw93/kami -a codex -g -y

Claude Desktop:

1. Download the ZIP from 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)

Fonts:

• Chinese: TsangerJinKai02 (serif) + Source Han Sans (sans). TsangerJinKai is free for personal use; commercial use requires a license from 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:

<!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)

<!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>