kami-document-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Kami Document Design Skill

Kami 文档设计 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.

由 ara.so 开发的 Skill —— 属于 Daily 2026 Skills 合集。

Kami（紙，かみ）是一套针对专业印刷文档的美学约束系统。它可生成六种文档类型的暖调羊皮纸质感输出，支持中英文版本，采用单一墨蓝色强调色与专为印刷优化的编辑排版。

What Kami Does

Kami 能做什么

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.

Kami 不是 UI 框架 —— 它是一种应用于可读性文档的视觉语言。它为 AI Agent 提供严格的设计规范，确保每一份生成的文档都具备统一的标志性风格：羊皮纸背景、墨蓝色强调色、衬线体体现权威感、无衬线体满足实用性、紧凑的编辑留白。

六种文档类型：

单页介绍（One-Pager） —— 简洁的公司/产品介绍，仅一页
长文档/白皮书（Long Doc / White Paper） —— 多章节的研究或分析文档
信函（Letter） —— 推荐信、求职信、正式函件
作品集（Portfolio） —— 项目展示，多页
简历（Resume / CV） —— 创始人或专业人士简历
幻灯片（Slides） —— 主旨演讲风格演示文稿，4–8页

每种类型都有中文和英文版本，Kami 会根据你使用的语言自动选择对应版本。

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:

Download the ZIP from Releases
Open Customize → Skills → "+" → Create skill
Upload the ZIP

The skill auto-triggers on natural language — no slash command needed.

Claude Code（推荐）：

bash

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

Codex：

bash

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

Claude Desktop：

从 Releases 下载 ZIP 包
打开「Customize」→「Skills」→「+」→「Create skill」
上传 ZIP 包

该 Skill 会通过自然语言自动触发，无需使用斜杠命令。

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.
English: Newsreader (serif, OFL) + Inter (sans, OFL)

元素	取值	规则
画布	`#f5f4ed`	暖调羊皮纸色，绝不用纯白
强调色	`#1B365D`	仅使用墨蓝色，无第二种彩色色调
中性色	黄棕底色	不使用冷蓝灰色
衬线体字重	`500`	绝不用粗体 —— 单一字重是标志性风格
标题行高	`1.1–1.3`	紧凑
密集正文	`1.4–1.45`	说明文字、标签
阅读正文	`1.5–1.55`	段落 —— 绝不用 `1.6+`
阴影	仅使用环形或极淡阴影	无生硬投影
标签背景	仅使用纯色十六进制值	`rgba()` 会触发 WeasyPrint 双矩形 bug

字体：

中文： TsangerJinKai02（衬线体）+ Source Han Sans（无衬线体）。TsangerJinKai 可免费用于个人用途；商业用途需从tsanger.cn获取授权。
英文： Newsreader（衬线体，OFL 协议）+ Inter（无衬线体，OFL 协议）

HTML Document Structure

HTML 文档结构

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>

所有 Kami 输出均为独立的 HTML 文件，可通过 WeasyPrint 或浏览器打印功能渲染为 PDF。标准结构如下：

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>

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);
      line-height: 1.1;
    }
    .metric .label {
      font-family: 'Source Han Sans SC', sans-serif;
      font-size: 8pt;
      color: var(--muted);
    }
  </style>
</head>
<body>

  <div class="hero">
    <h1>公司名称</h1>
    <p class="tagline">一句话描述公司核心价值主张</p>
  </div>

  <div class="metric-row">
    <div class="metric">
      <div class="num">300万+</div>
      <div class="label">注册用户</div>
    </div>
    <div class="metric">
      <div class="num">98%</div>
      <div class="label">续约率</div>
    </div>
    <div class="metric">
      <div class="num">42个</div>
      <div class="label">覆盖城市</div>
    </div>
  </div>

  <div class="grid">
    <div class="block">
      <div class="block-label">产品</div>
      <p>核心产品描述，聚焦用户痛点与解决方案，控制在三句话以内。</p>
    </div>
    <div class="block">
      <div class="block-label">市场</div>
      <p>目标市场规模与增长空间，TAM/SAM 数据，竞争格局简述。</p>
    </div>
    <div class="block">
      <div class="block-label">商业模式</div>
      <p>收入来源、定价策略、毛利结构，一段话说清楚。</p>
    </div>
    <div class="block">
      <div class="block-label">团队</div>
      <p>核心团队背景亮点，行业经验与过往成就，简洁有力。</p>
    </div>
  </div>

</body>
</html>

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);
      line-height: 1.1;
    }
    .metric .label {
      font-family: 'Source Han Sans SC', sans-serif;
      font-size: 8pt;
      color: var(--muted);
    }
  </style>
</head>
<body>

  <div class="hero">
    <h1>公司名称</h1>
    <p class="tagline">一句话描述公司核心价值主张</p>
  </div>

  <div class="metric-row">
    <div class="metric">
      <div class="num">300万+</div>
      <div class="label">注册用户</div>
    </div>
    <div class="metric">
      <div class="num">98%</div>
      <div class="label">续约率</div>
    </div>
    <div class="metric">
      <div class="num">42个</div>
      <div class="label">覆盖城市</div>
    </div>
  </div>

  <div class="grid">
    <div class="block">
      <div class="block-label">产品</div>
      <p>核心产品描述，聚焦用户痛点与解决方案，控制在三句话以内。</p>
    </div>
    <div class="block">
      <div class="block-label">市场</div>
      <p>目标市场规模与增长空间，TAM/SAM 数据，竞争格局简述。</p>
    </div>
    <div class="block">
      <div class="block-label">商业模式</div>
      <p>收入来源、定价策略、毛利结构，一段话说清楚。</p>
    </div>
    <div class="block">
      <div class="block-label">团队</div>
      <p>核心团队背景亮点，行业经验与过往成就，简洁有力。</p>
    </div>
  </div>

</body>
</html>

Inline SVG Diagram — Architecture

内嵌 SVG 图表——架构图

html

<!-- Architecture diagram: fits inside any Kami document -->
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="200" viewBox="0 0 480 200">
  <rect width="480" height="200" rx="4" fill="#edeade"/>

  <!-- Node style: ink-blue fill, parchment text -->
  <rect x="20"  y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="65"  y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">Client</text>

  <rect x="195" y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="240" y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">API Gateway</text>

  <rect x="370" y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="415" y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">Service</text>

  <!-- Arrows -->
  <line x1="110" y1="98" x2="193" y2="98" stroke="#1B365D" stroke-width="1.5"
        marker-end="url(#arr)"/>
  <line x1="285" y1="98" x2="368" y2="98" stroke="#1B365D" stroke-width="1.5"
        marker-end="url(#arr)"/>

  <defs>
    <marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 z" fill="#1B365D"/>
    </marker>
  </defs>
</svg>

html

<!-- Architecture diagram: fits inside any Kami document -->
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="200" viewBox="0 0 480 200">
  <rect width="480" height="200" rx="4" fill="#edeade"/>

  <!-- Node style: ink-blue fill, parchment text -->
  <rect x="20"  y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="65"  y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">Client</text>

  <rect x="195" y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="240" y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">API Gateway</text>

  <rect x="370" y="80" width="90" height="36" rx="3" fill="#1B365D"/>
  <text x="415" y="103" text-anchor="middle" fill="#f5f4ed"
        font-family="Inter,sans-serif" font-size="9" font-weight="500">Service</text>

  <!-- Arrows -->
  <line x1="110" y1="98" x2="193" y2="98" stroke="#1B365D" stroke-width="1.5"
        marker-end="url(#arr)"/>
  <line x1="285" y1="98" x2="368" y2="98" stroke="#1B365D" stroke-width="1.5"
        marker-end="url(#arr)"/>

  <defs>
    <marker id="arr" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
      <path d="M0,0 L0,6 L8,3 z" fill="#1B365D"/>
    </marker>
  </defs>
</svg>

Inline SVG Diagram — Quadrant

内嵌 SVG 图表——四象限图

html

<!-- 2×2 quadrant matrix -->
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="280" viewBox="0 0 320 280">
  <rect width="320" height="280" rx="4" fill="#edeade"/>

  <!-- Axes -->
  <line x1="160" y1="20"  x2="160" y2="240" stroke="#d4cfc4" stroke-width="1"/>
  <line x1="20"  y1="140" x2="300" y2="140" stroke="#d4cfc4" stroke-width="1"/>

  <!-- Quadrant labels -->
  <text x="85"  y="38"  text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">Low Effort · High Impact</text>
  <text x="245" y="38"  text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">High Effort · High Impact</text>
  <text x="85"  y="258" text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">Low Effort · Low Impact</text>
  <text x="245" y="258" text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">High Effort · Low Impact</text>

  <!-- Data points -->
  <circle cx="90"  cy="80"  r="6" fill="#1B365D"/>
  <text   x="98"   y="84"   font-family="Inter,sans-serif" font-size="8" fill="#1B365D">Quick win</text>
  <circle cx="220" cy="70"  r="6" fill="#2c4a7a"/>
  <text   x="228"  y="74"   font-family="Inter,sans-serif" font-size="8" fill="#1B365D">Big bet</text>
</svg>

html

<!-- 2×2 quadrant matrix -->
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="280" viewBox="0 0 320 280">
  <rect width="320" height="280" rx="4" fill="#edeade"/>

  <!-- Axes -->
  <line x1="160" y1="20"  x2="160" y2="240" stroke="#d4cfc4" stroke-width="1"/>
  <line x1="20"  y1="140" x2="300" y2="140" stroke="#d4cfc4" stroke-width="1"/>

  <!-- Quadrant labels -->
  <text x="85"  y="38"  text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">Low Effort · High Impact</text>
  <text x="245" y="38"  text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">High Effort · High Impact</text>
  <text x="85"  y="258" text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">Low Effort · Low Impact</text>
  <text x="245" y="258" text-anchor="middle" font-family="Inter,sans-serif"
        font-size="8" fill="#8a7f6e">High Effort · Low Impact</text>

  <!-- Data points -->
  <circle cx="90"  cy="80"  r="6" fill="#1B365D"/>
  <text   x="98"   y="84"   font-family="Inter,sans-serif" font-size="8" fill="#1B365D">Quick win</text>
  <circle cx="220" cy="70"  r="6" fill="#2c4a7a"/>
  <text   x="228"  y="74"   font-family="Inter,sans-serif" font-size="8" fill="#1B365D">Big bet</text>
</svg>

Prompt Patterns (What to Say)

提示语模板（如何使用）

The skill auto-triggers. Just describe your need naturally:

make a one-pager for my startup Acme — B2B SaaS for logistics, $2M ARR, 
Series A raise, targeting US mid-market. Include 3 key metrics.

---

build me a 6-slide deck for my talk on distributed tracing.
Include an architecture diagram and a quadrant comparing approaches.

---

write a recommendation letter from a CTO recommending Sarah Chen 
for a senior ML role. Formal, warm, two pages.

---

帮我做一份 Kaku 项目的作品集，6 页，中文，突出技术亮点和用户数据。

---

generate an Elon Musk style resume — founder CV, 2 pages, 
chronological, English.

该 Skill 会自动触发，只需自然描述你的需求即可：

make a one-pager for my startup Acme — B2B SaaS for logistics, $2M ARR, 
Series A raise, targeting US mid-market. Include 3 key metrics.

---

build me a 6-slide deck for my talk on distributed tracing.
Include an architecture diagram and a quadrant comparing approaches.

---

write a recommendation letter from a CTO recommending Sarah Chen 
for a senior ML role. Formal, warm, two pages.

---

帮我做一份 Kaku 项目的作品集，6 页，中文，突出技术亮点和用户数据。

---

generate an Elon Musk style resume — founder CV, 2 pages, 
chronological, English.

Critical Rules for Generation

生成核心规则

When generating any Kami document, the agent must enforce:

Never use
rgba()
for tag/badge backgrounds — use solid hex. WeasyPrint renders
```
rgba()
```
as a double rectangle.
Never use
font-weight: bold
or
700
on serif headings — lock at
```
500
```
.
Never use
line-height: 1.6
or higher on any element.
Never use pure white (
#ffffff
) as the page background — always
```
#f5f4ed
```
.
Never introduce a second chromatic color — the only accent is
```
#1B365D
```
. Variations are
```
#2c4a7a
```
(mid) and
```
#4a6fa5
```
(soft).

Always set

-webkit-print-color-adjust: exact; print-color-adjust: exact;

body

so backgrounds survive PDF export.

Always use
@page
with A4 margins unless the document type is Slides (use 16:9 or letter-landscape).

Slides layout: use

width: 254mm; height: 143mm;

per slide with

page-break-after: always

生成任何 Kami 文档时，Agent 必须严格遵循以下规则：

标签/徽章背景绝不能使用
rgba()
—— 使用纯色十六进制值。WeasyPrint 会将
```
rgba()
```
渲染为双矩形。
衬线标题绝不能使用
font-weight: bold
或
700
—— 锁定为
```
500
```
。
任何元素的行高绝不能使用
1.6
或更高值。
页面背景绝不能使用纯白（
#ffffff
） —— 必须使用
```
#f5f4ed
```
。
绝不能引入第二种彩色 —— 唯一的强调色是
```
#1B365D
```
。可使用其变体
```
#2c4a7a
```
（中度）和
```
#4a6fa5
```
（柔和）。

必须在
body
上设置

-webkit-print-color-adjust: exact; print-color-adjust: exact;

，确保背景色在 PDF 导出时保留。

必须使用带 A4 边距的
@page
，除非文档类型是幻灯片（使用 16:9 或横向信纸尺寸）。
幻灯片布局： 每张幻灯片使用
```
width: 254mm; height: 143mm;
```
，并设置
```
page-break-after: always
```
。

Rendering to PDF

渲染为 PDF

Browser (recommended for demos):

File → Print → Save as PDF
Margins: None or Minimum
Background graphics: ✓ enabled

WeasyPrint (CI/server):

bash

pip install weasyprint
weasyprint document.html document.pdf

Node (Puppeteer):

const puppeteer = require('puppeteer');

async function htmlToPdf(htmlPath, pdfPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: pdfPath,
    format: 'A4',
    printBackground: true,   // critical for parchment canvas
    margin: { top: '0', right: '0', bottom: '0', left: '0' },
  });
  await browser.close();
}

浏览器（推荐用于演示）：

文件 → 打印 → 另存为 PDF
边距：无或最小
背景图形：✓ 启用

WeasyPrint（CI/服务器环境）：

bash

pip install weasyprint
weasyprint document.html document.pdf

Node（Puppeteer）：

const puppeteer = require('puppeteer');

async function htmlToPdf(htmlPath, pdfPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: pdfPath,
    format: 'A4',
    printBackground: true,   // critical for parchment canvas
    margin: { top: '0', right: '0', bottom: '0', left: '0' },
  });
  await browser.close();
}

Slide Deck Structure

幻灯片结构

html

<style>
  @page { size: 254mm 143mm; margin: 0; }
  body  { margin: 0; padding: 0; background: #f5f4ed; }

  .slide {
    width: 254mm;
    height: 143mm;
    background: #f5f4ed;
    padding: 12mm 14mm;
    page-break-after: always;
    overflow: hidden;
    position: relative;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide:last-child { page-break-after: avoid; }

  /* Accent bar — left edge signature element */
  .slide::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3pt;
    background: #1B365D;
  }
</style>

<div class="slide">
  <h1 style="font-size:28pt;font-weight:500;line-height:1.15;margin-top:16mm;">
    Talk Title
  </h1>
  <p style="font-family:Inter,sans-serif;font-size:11pt;color:#8a7f6e;margin-top:8pt;">
    Subtitle or speaker name · Date
  </p>
</div>

<div class="slide">
  <h2 style="font-family:Inter,sans-serif;font-size:7pt;letter-spacing:.12em;
             text-transform:uppercase;color:#8a7f6e;margin-bottom:10pt;">
    Section 01
  </h2>
  <h3 style="font-size:16pt;font-weight:500;line-height:1.25;margin-bottom:10pt;">
    Slide Heading
  </h3>
  <ul style="font-size:10pt;line-height:1.5;color:#3d3427;padding-left:14pt;">
    <li>First key point with specific data or claim</li>
    <li>Second key point — concrete, not abstract</li>
    <li>Third key point — end with implication</li>
  </ul>
</div>

html

<style>
  @page { size: 254mm 143mm; margin: 0; }
  body  { margin: 0; padding: 0; background: #f5f4ed; }

  .slide {
    width: 254mm;
    height: 143mm;
    background: #f5f4ed;
    padding: 12mm 14mm;
    page-break-after: always;
    overflow: hidden;
    position: relative;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide:last-child { page-break-after: avoid; }

  /* Accent bar — left edge signature element */
  .slide::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3pt;
    background: #1B365D;
  }
</style>

<div class="slide">
  <h1 style="font-size:28pt;font-weight:500;line-height:1.15;margin-top:16mm;">
    Talk Title
  </h1>
  <p style="font-family:Inter,sans-serif;font-size:11pt;color:#8a7f6e;margin-top:8pt;">
    Subtitle or speaker name · Date
  </p>
</div>

<div class="slide">
  <h2 style="font-family:Inter,sans-serif;font-size:7pt;letter-spacing:.12em;
             text-transform:uppercase;color:#8a7f6e;margin-bottom:10pt;">
    Section 01
  </h2>
  <h3 style="font-size:16pt;font-weight:500;line-height:1.25;margin-bottom:10pt;">
    Slide Heading
  </h3>
  <ul style="font-size:10pt;line-height:1.5;color:#3d3427;padding-left:14pt;">
    <li>First key point with specific data or claim</li>
    <li>Second key point — concrete, not abstract</li>
    <li>Third key point — end with implication</li>
  </ul>
</div>

Reference Files

参考文件

File	Purpose
`references/design.md`	Full design spec (Chinese)
`references/design.en.md`	Full design spec (English)
`CHEATSHEET.md`	Quick token reference (Chinese)
`CHEATSHEET.en.md`	Quick token reference (English)
`assets/demos/`	PDF + PNG demo outputs for all 6 types

文件	用途
`references/design.md`	完整设计规范（中文）
`references/design.en.md`	完整设计规范（英文）
`CHEATSHEET.md`	快速令牌参考（中文）
`CHEATSHEET.en.md`	快速令牌参考（英文）
`assets/demos/`	所有6种文档类型的PDF + PNG演示输出

Troubleshooting

故障排除

Backgrounds missing in PDF export: → Add

-webkit-print-color-adjust: exact; print-color-adjust: exact;

body

. Enable "Background graphics" in browser print dialog.

Tags render as double rectangles: → Replace any

rgba()

background with a solid hex value. This is a known WeasyPrint bug.

Chinese text falls back to system font: → Embed TsangerJinKai02 via

@font-face

or ensure the font is installed system-wide. Source Han Sans SC is a safe fallback.

Serif headings look too heavy: → Check

font-weight

— must be

, not

, or

bold

Line-height feels airy / not editorial: → Titles must be

1.1–1.3

. Body must be

1.5–1.55

. Remove any

line-height: 1.6+

Second color crept in: → Audit for any non-neutral color. Only

#1B365D

#2c4a7a

#4a6fa5

are chromatic. Everything else must be the warm neutral ramp (

#f5f4ed

→

#edeade

→

#d4cfc4

→

#8a7f6e

→

#3d3427

→

#1B365D

PDF导出时背景丢失： → 在

body

上添加

-webkit-print-color-adjust: exact; print-color-adjust: exact;

。在浏览器打印对话框中启用“背景图形”。

标签渲染为双矩形： → 将所有

rgba()

背景替换为纯色十六进制值。这是 WeasyPrint 的已知 bug。

中文文本回退到系统字体： → 通过

@font-face

嵌入 TsangerJinKai02，或确保该字体已安装在系统中。Source Han Sans SC 是可靠的备用字体。

衬线标题看起来过重： → 检查

font-weight

—— 必须为

，不能是

、

或

bold

。

行高显得松散/不符合编辑风格： → 标题行高必须为

1.1–1.3

。正文行高必须为

1.5–1.55

。移除所有

line-height: 1.6+

的设置。

出现了第二种颜色： → 检查所有非中性颜色。仅允许使用

#1B365D

、

#2c4a7a

、

#4a6fa5

作为彩色。其他所有颜色必须属于暖调中性色系列（

#f5f4ed

→

#edeade

→

#d4cfc4

→

#8a7f6e

→

#3d3427

→

#1B365D

）。