wehub-resource-sync
733 lines
45 KiB
HTML
733 lines
45 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Kami 紙：面向 AI Agent 的文档设计系统</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
|
||
<link rel="icon" href="assets/images/logo.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="./styles.css">
|
||
<link rel="canonical" href="https://kami.tw93.fun/index-zh.html">
|
||
<link rel="alternate" hreflang="en" href="https://kami.tw93.fun/">
|
||
<link rel="alternate" hreflang="zh-CN" href="https://kami.tw93.fun/index-zh.html">
|
||
<link rel="alternate" hreflang="ja" href="https://kami.tw93.fun/index-ja.html">
|
||
<link rel="alternate" hreflang="zh-Hant" href="https://kami.tw93.fun/index-tw.html">
|
||
<link rel="alternate" hreflang="ko" href="https://kami.tw93.fun/index-ko.html">
|
||
<link rel="alternate" hreflang="x-default" href="https://kami.tw93.fun/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Kami 紙：面向 AI Agent 的文档设计系统">
|
||
<meta property="og:description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
|
||
<meta property="og:url" content="https://kami.tw93.fun/index-zh.html">
|
||
<meta property="og:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
|
||
<meta property="og:image:width" content="3110">
|
||
<meta property="og:image:height" content="2392">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Kami 紙：面向 AI Agent 的文档设计系统">
|
||
<meta name="twitter:description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
|
||
<meta name="twitter:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "Kami",
|
||
"description": "面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。",
|
||
"url": "https://kami.tw93.fun/index-zh.html",
|
||
"applicationCategory": "DesignApplication",
|
||
"operatingSystem": "Any",
|
||
"author": {
|
||
"@type": "Person",
|
||
"name": "Tw93",
|
||
"url": "https://tw93.fun",
|
||
"sameAs": ["https://github.com/tw93", "https://twitter.com/HiTw93", "https://tw93.fun", "https://weekly.tw93.fun", "https://yobi.tw93.fun"]
|
||
},
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "USD"
|
||
}
|
||
}
|
||
</script>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "Kami 是什么？",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "一个面向 AI agent 的文档设计系统。一种强调色、衬线层级、暖色羊皮纸画布。给任何 LLM agent 一段描述，就能得到稳定的排版输出。也可以作为视觉设计简报给到图像渲染工具。" }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Kami 能生成什么？",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "八种文档模板：一页纸、长文档、信件、作品集、简历、幻灯片、个股研报、更新日志，外加一套落地页系统（中、英、韩文）。另有 18 种内联 SVG 图表。输出为 HTML，可导出为 PDF、PNG 或可编辑的 PPTX 幻灯片。" }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "怎么安装 Kami？",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "Claude Code（v2.1.142+）：/plugin marketplace add tw93/kami && /plugin install kami@kami。Codex 插件市场：codex plugin marketplace add tw93/kami && codex plugin add kami@kami。读取 ~/.agents 的通用 agent：npx skills add tw93/kami/plugins/kami -a universal -g -y。Claude Desktop：从 GitHub Releases 下载 release asset kami.zip，不要下载 Source code 压缩包，然后在 Skills 设置中上传即可。" }
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "Kami 支持哪些语言？",
|
||
"acceptedAnswer": { "@type": "Answer", "text": "英文、中文、日文、韩文。每种语言使用专属衬线字体：英文 Charter，中文 TsangerJinKai02，日文 YuMincho，韩文 Source Han Serif K。" }
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<header class="hero">
|
||
<div class="eyebrow">
|
||
<span>Design System · v1.9.4<span class="eyebrow-date"> · 2026.07</span></span>
|
||
<span class="hero-links">
|
||
<nav class="lang-switch" aria-label="Language" data-lang-switch>
|
||
<button class="lang-trigger" type="button" aria-expanded="false" data-lang-trigger>简体中文</button>
|
||
<div class="lang-menu" data-lang-menu>
|
||
<a href="./index.html" data-lang="en">English</a>
|
||
<a href="./index-zh.html" class="active" data-lang="zh">简体中文</a>
|
||
<a href="./index-tw.html" data-lang="tw">繁體中文</a>
|
||
<a href="./index-ja.html" data-lang="ja">日本語</a>
|
||
<a href="./index-ko.html" data-lang="ko">한국어</a>
|
||
</div>
|
||
</nav>
|
||
<a href="https://github.com/tw93/kami" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="https://x.com/HiTw93" target="_blank" rel="noopener" aria-label="X">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||
</svg>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
<h1>Kami<span class="cn">紙</span></h1>
|
||
<p class="tagline">好内容，值得好版面。Kami 是一套适合 AI 时代的排版设计系统，让文档更清晰好读，也容易记住。</p>
|
||
<div class="hero-tokens">
|
||
<span><b>Canvas</b>#f5f4ed</span>
|
||
<span><b>Accent</b>#1B365D</span>
|
||
<span><b>Serif</b>TsangerJinKai / Charter</span>
|
||
<span><b>Sans</b>= Serif (一页一字体)</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ 00 DEMOS ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">00 · See it</p>
|
||
<h2 class="section-title">输出样本</h2>
|
||
<p class="section-lede">把文档需求交给 Claude。无论是一页纸、长文、正式信件、作品集、简历还是幻灯片，Kami 都用少量清晰规则，把提示词变成可交付的排版。同一份 brief 也能 <a href="https://github.com/tw93/kami#beyond-documents" style="color:var(--brand); text-decoration:none; font-weight:500;">交给绘图模型</a>，README 里附了样图和可复制的提示词。</p>
|
||
</div>
|
||
<div class="demo-grid">
|
||
<div class="demo-card">
|
||
<a href="assets/demos/demo-tesla.pdf" target="_blank"><img src="assets/demos/demo-tesla.png" alt="Tesla Q1 2026 财报点评" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Equity Report · 中文</p>
|
||
<p class="demo-desc">Tesla Q1 2026 财报点评</p>
|
||
</div>
|
||
<div class="demo-card">
|
||
<a href="assets/demos/demo-musk-resume.pdf" target="_blank"><img src="assets/demos/demo-musk-resume.png" alt="Musk resume" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Resume · English</p>
|
||
<p class="demo-desc">创始人简历，2 页</p>
|
||
</div>
|
||
<div class="demo-card">
|
||
<a href="assets/demos/demo-kami-print.pdf" target="_blank"><img src="assets/demos/demo-kami-print.png" alt="Kami 打印一页纸" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">一页纸 · 中文</p>
|
||
<p class="demo-desc">Kami 介绍，白底打印版，1 页</p>
|
||
</div>
|
||
<div class="demo-card">
|
||
<a href="assets/demos/demo-agent-slides.pdf" target="_blank"><img src="assets/demos/demo-agent-slides.png" alt="Agent slides" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Slides · English</p>
|
||
<p class="demo-desc">Agent keynote, 6 slides</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ LANDING PAGES ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">Landing Pages</p>
|
||
<h2 class="section-title">用 Kami 搭建</h2>
|
||
<p class="section-lede">同一套落地页模板用于三款不同产品，一组约束规则，三种截然不同的用途。</p>
|
||
</div>
|
||
<div class="landing-grid">
|
||
<div class="landing-card">
|
||
<a href="https://kami.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/kami-landing.png" alt="Kami 官网" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Kami</p>
|
||
<p class="demo-desc">设计系统主页</p>
|
||
</div>
|
||
<div class="landing-card">
|
||
<a href="https://luo.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/luo-landing.png" alt="Luo 落文官网" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Luo 落文</p>
|
||
<p class="demo-desc">CJK 阅读字体</p>
|
||
</div>
|
||
<div class="landing-card">
|
||
<a href="https://mole.fit" target="_blank" rel="noopener"><img src="assets/showcase/mole-landing.png" alt="Mole 官网" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Mole 鼹</p>
|
||
<p class="demo-desc">macOS 系统工具</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 01 INSTALL ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">01 · Usage</p>
|
||
<h2 class="section-title">安装与调用</h2>
|
||
<p class="section-lede">直接告诉 Claude 你要什么，比如「帮我排版一份白皮书」「做一份简历」「帮我做一份作品集」，skill 会自动触发，无需斜杠命令。</p>
|
||
</div>
|
||
<pre class="code"><span class="c"># Claude Code (v2.1.142+)</span>
|
||
/plugin marketplace add tw93/kami
|
||
/plugin install kami@kami
|
||
|
||
<span class="c"># Codex plugin marketplace</span>
|
||
codex plugin marketplace add tw93/kami
|
||
codex plugin add kami@kami</pre>
|
||
<p class="section-lede" style="font-size:14px;">读取 <code>~/.agents/</code> 的通用 agent：<code>npx skills add tw93/kami/plugins/kami -a universal -g -y</code>。这个 plugin 路径暴露生成好的轻量 skill 包；直接用 <code>tw93/kami</code> 只会装到 SKILL.md。</p>
|
||
<p class="section-lede" style="font-size:14px;">Claude Desktop：下载 release asset <a href="https://github.com/tw93/kami/releases/latest/download/kami.zip" style="color:var(--brand); text-decoration:none; font-weight:500;">kami.zip</a>，不要下载 GitHub 的 Source code 压缩包，然后在 Customize > Skills > "+" > Create skill 中直接上传。</p>
|
||
</section>
|
||
|
||
<!-- ============ 02 MANIFESTO ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">02 · Manifesto</p>
|
||
<h2 class="section-title">设计原则</h2>
|
||
</div>
|
||
<p class="manifesto">暖米纸底，<em>油墨蓝</em>点缀，serif 承担层级，硬阴影与花哨配色都退后；这套系统面向印刷文档，负责把内容收束成稳定、清晰、易读的版面。羊皮纸底为默认，另有可选的白底版本，把任意文档切到白底以适配打印机，暖意则沉入卡片与表格。</p>
|
||
<ol class="rules">
|
||
<li><span class="n">1</span><p>页面背景 parchment <code>#f5f4ed</code>，不用纯白</p></li>
|
||
<li><span class="n">2</span><p>强调色只有油墨蓝 <code>#1B365D</code>，不引入第二种彩色</p></li>
|
||
<li><span class="n">3</span><p>所有灰色暖调 (yellow-brown undertone)，禁止冷蓝灰</p></li>
|
||
<li><span class="n">4</span><p>英文 serif 通吃标题和正文，中文标题用 serif、正文用 sans</p></li>
|
||
<li><span class="n">5</span><p>Serif 正文 400，标题 500，不用合成 bold</p></li>
|
||
<li><span class="n">6</span><p>行距三档：紧凑标题 1.1–1.3 / 密排 1.4–1.45 / 阅读 1.5–1.55</p></li>
|
||
<li><span class="n">7</span><p>Tag 背景必须实色 hex，禁止 rgba（WeasyPrint 双层矩形 bug）</p></li>
|
||
<li><span class="n">8</span><p>阴影只用 ring 或 whisper shadow，不用硬 drop shadow</p></li>
|
||
</ol>
|
||
</section>
|
||
|
||
<!-- ============ 03 COLOR ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">03 · Color</p>
|
||
<h2 class="section-title">暖调克制</h2>
|
||
<p class="section-lede">唯一强调色、纯暖调中性灰、零冷色；油墨蓝全文档不超过 <b>5%</b> 面积，超过就从克制变成堆砌。</p>
|
||
</div>
|
||
|
||
<h3 class="subhead">画布 · Canvas</h3>
|
||
<div class="swatches">
|
||
<div class="swatch"><div class="chip" style="background:#f5f4ed"></div><div class="info"><p class="name">Parchment</p><p class="role">页面底色，也是整套设计的温度来源</p><span class="hex">#F5F4ED</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#faf9f5"></div><div class="info"><p class="name">Ivory</p><p class="role">卡片 · 浮起容器</p><span class="hex">#FAF9F5</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#e8e6dc"></div><div class="info"><p class="name">Warm Sand</p><p class="role">按钮默认背景 · 交互面</p><span class="hex">#E8E6DC</span></div></div>
|
||
<div class="swatch dark"><div class="chip" style="background:#141413"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Deep Dark</p><p class="role">深色主题页面底，不取纯黑，保留一点橄榄底色</p><span class="hex">#141413</span></div></div>
|
||
</div>
|
||
|
||
<h3 class="subhead">主调 · Brand</h3>
|
||
<div class="swatches">
|
||
<div class="swatch brand"><div class="chip" style="background:#1B365D"></div><div class="info"><p class="name">Ink Blue</p><p class="role">主色 · CTA · quote 竖线 · 章节标题</p><span class="hex">#1B365D</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#2D5A8A"></div><div class="info"><p class="name">Ink Light</p><p class="role">深色底上的链接 · 亮变体</p><span class="hex">#2D5A8A</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#30302e"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Dark Surface</p><p class="role">深色主题容器 · 暖炭灰</p><span class="hex">#30302E</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#b53333"></div><div class="info"><p class="name">Error</p><p class="role">错误，深暖红，不刺眼</p><span class="hex">#B53333</span></div></div>
|
||
</div>
|
||
|
||
<h3 class="subhead">中性 · Warm Neutrals</h3>
|
||
<div class="swatches" style="grid-template-columns: repeat(4, 1fr);">
|
||
<div class="swatch"><div class="chip" style="background:#141413"></div><div class="info"><p class="name">Near Black</p><span class="hex">#141413</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#3d3d3a"></div><div class="info"><p class="name">Dark Warm</p><span class="hex">#3D3D3A</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#504e49"></div><div class="info"><p class="name">Olive</p><span class="hex">#504e49</span></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#6b6a64"></div><div class="info"><p class="name">Stone</p><span class="hex">#6b6a64</span></div></div>
|
||
</div>
|
||
|
||
<h3 class="subhead">Tag Tints · rgba → 实色对照</h3>
|
||
<p style="font-size:14px; color: var(--olive); margin: 0 0 16px; line-height: 1.55;">这里列的是油墨蓝 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">#1B365D</code> 叠加在 parchment 上的等效实色；Tag 背景不使用 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">rgba()</code>，避免 WeasyPrint 的双层矩形问题。</p>
|
||
<div class="tint-strip">
|
||
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#EEF2F7">Tag sample</span><p class="opacity">0.08</p><span class="hex">#EEF2F7</span></div>
|
||
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.14</p><span class="hex">#E4ECF5</span></div>
|
||
<div class="tint default"><span class="flag">Default</span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.18</p><span class="hex">#E4ECF5</span></div>
|
||
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#D0DCE9">Tag sample</span><p class="opacity">0.22</p><span class="hex">#D0DCE9</span></div>
|
||
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#D6E1EE">Tag sample</span><p class="opacity">0.30</p><span class="hex">#D6E1EE</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 04 TYPE ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">04 · Typography</p>
|
||
<h2 class="section-title">字体系统</h2>
|
||
<p class="section-lede">Serif 承担层级，sans 承担功能；serif 正文 400，标题 500。</p>
|
||
</div>
|
||
|
||
<div class="family-grid">
|
||
<div class="family serif">
|
||
<p class="glyph">紙 Aa</p>
|
||
<p class="role">Serif · 标题</p>
|
||
<p class="name">TsangerJinKai02 / Charter</p>
|
||
<p class="use">承担标题、引语与数字强调，中文取仓耳今楷，英文取 Charter。</p>
|
||
</div>
|
||
<div class="family mono">
|
||
<p class="glyph"></></p>
|
||
<p class="role">Mono · 代码</p>
|
||
<p class="name">JetBrains Mono</p>
|
||
<p class="use">用于代码块、版本号、hex 值与等宽数字，字号较正文低一档。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="subhead">层级（印刷品 pt · 屏幕 px ≈ pt × 1.33）</h3>
|
||
<div class="type-grid">
|
||
|
||
<div class="type-row">
|
||
<div class="type-label">Display</div>
|
||
<div class="type-sample display">高质量文档读起来<br>清晰、稳定、有余韵</div>
|
||
<div class="type-specs"><b>36–48 pt</b><br>weight 500<br>line 1.10</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Section H1</div>
|
||
<div class="type-sample h1">色彩系统 · Color</div>
|
||
<div class="type-specs"><b>18–22 pt</b><br>weight 500<br>line 1.20</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Subsection H2</div>
|
||
<div class="type-sample h2">画布 · Canvas</div>
|
||
<div class="type-specs"><b>14–16 pt</b><br>weight 500<br>line 1.25</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Item H3</div>
|
||
<div class="type-sample h3">Tag Tints · rgba 对照</div>
|
||
<div class="type-specs"><b>12–13 pt</b><br>weight 500<br>line 1.30</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Body Lead</div>
|
||
<div class="type-sample lede">面向印刷文档的约束系统，目标是稳定、清晰、易读。</div>
|
||
<div class="type-specs"><b>11 pt</b><br>weight 400<br>line 1.55</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Body</div>
|
||
<div class="type-sample body">油墨蓝全文档不超过 5% 面积，超过就从克制变成堆砌；所有灰色都有暖黄底色，R ≈ G > B 是基本规律。</div>
|
||
<div class="type-specs"><b>9.5–10 pt</b><br>weight 400<br>line 1.55</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Body Dense</div>
|
||
<div class="type-sample dense">密排正文用于简历、一页纸、名片、索引卡，中文 pt 字号下 1.4–1.45 的行距最舒服，英文网页的 1.6 放进来会显得松散。</div>
|
||
<div class="type-specs"><b>9–9.2 pt</b><br>weight 400<br>line 1.40</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Caption</div>
|
||
<div class="type-sample caption">图注、脚注、说明文字，颜色用 olive 或 stone 降一级。</div>
|
||
<div class="type-specs"><b>8.5–9 pt</b><br>weight 400<br>line 1.45</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-label">Label</div>
|
||
<div class="type-sample label">Design System · v1.9.4</div>
|
||
<div class="type-specs"><b>7.5–8 pt</b><br>weight 600<br>line 1.35</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 05 SPACING ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">05 · Spacing & Shape</p>
|
||
<h2 class="section-title">节奏与形</h2>
|
||
<p class="section-lede">基础单位 4pt，密度越高 margin 越小，场合越正式 margin 越大。</p>
|
||
</div>
|
||
|
||
<table class="space-table">
|
||
<tr>
|
||
<th>Scale</th><th>Value</th><th>Use</th><th></th>
|
||
</tr>
|
||
<tr><td class="name">xs</td><td class="val">2–3 pt</td><td class="use">同行内元素</td><td class="bar"><span style="width:6px"></span></td></tr>
|
||
<tr><td class="name">sm</td><td class="val">4–5 pt</td><td class="use">tag padding · 紧凑布局</td><td class="bar"><span style="width:12px"></span></td></tr>
|
||
<tr><td class="name">md</td><td class="val">8–10 pt</td><td class="use">组件内部</td><td class="bar"><span style="width:24px"></span></td></tr>
|
||
<tr><td class="name">lg</td><td class="val">16–20 pt</td><td class="use">组件之间 · 卡片 padding</td><td class="bar"><span style="width:48px"></span></td></tr>
|
||
<tr><td class="name">xl</td><td class="val">24–32 pt</td><td class="use">section 标题 margin</td><td class="bar"><span style="width:72px"></span></td></tr>
|
||
<tr><td class="name">2xl</td><td class="val">40–60 pt</td><td class="use">大 section 之间</td><td class="bar"><span style="width:140px"></span></td></tr>
|
||
<tr><td class="name">3xl</td><td class="val">80–120 pt</td><td class="use">长文档章节之间</td><td class="bar"><span style="width:240px"></span></td></tr>
|
||
</table>
|
||
|
||
<h3 class="subhead">圆角尺度 · Radii</h3>
|
||
<div class="radii">
|
||
<div class="radius"><div class="box" style="border-radius:4px"></div><div class="r"><b>4</b> pt</div><div class="label">极紧</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:6px"></div><div class="r"><b>6</b> pt</div><div class="label">代码块</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:8px"></div><div class="r"><b>8</b> pt</div><div class="label">默认卡片</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:12px"></div><div class="r"><b>12</b> pt</div><div class="label">容器</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:16px"></div><div class="r"><b>16</b> pt</div><div class="label">特色卡片</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:24px"></div><div class="r"><b>24</b> pt</div><div class="label">大容器</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:32px"></div><div class="r"><b>32</b> pt</div><div class="label">Hero</div></div>
|
||
</div>
|
||
|
||
<h3 class="subhead">深度 · 阴影三法</h3>
|
||
<p style="font-size:14px; color: var(--olive); margin: 0 0 12px; line-height: 1.55;">Kami 不用传统硬阴影，深度交给 ring shadow、whisper shadow 与明暗交替。</p>
|
||
<div class="shadow-row">
|
||
<div class="shadow-demo sd-ring">
|
||
<p class="t">Ring Shadow</p>
|
||
<p class="s">0 0 0 1pt var(--ring-warm)<br> <br>按钮 · 卡片 hover</p>
|
||
</div>
|
||
<div class="shadow-demo sd-whisper">
|
||
<p class="t">Whisper Shadow</p>
|
||
<p class="s">0 4pt 24pt rgba(0,0,0,0.05)<br> <br>极轻浮起 · 特色卡</p>
|
||
</div>
|
||
<div class="shadow-demo sd-alt">
|
||
<p class="t">Light ⇌ Dark</p>
|
||
<p class="s">parchment ⇌ deep-dark<br> <br>section 级别 · 对比最明显</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 06 COMPONENTS ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">06 · Components</p>
|
||
<h2 class="section-title">原子组件</h2>
|
||
<p class="section-lede">组件不求多，只保留能解决具体问题的一组。</p>
|
||
</div>
|
||
|
||
<div class="comp-grid">
|
||
|
||
<div class="comp">
|
||
<h3>Buttons</h3>
|
||
<p class="hint">ring shadow 替代硬投影 · 8pt 圆角</p>
|
||
<div class="demo" style="display:flex; gap:10px; flex-wrap:wrap;">
|
||
<span class="btn btn-primary">Primary CTA</span>
|
||
<span class="btn btn-secondary">Secondary</span>
|
||
<span class="btn btn-ghost">Ghost</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Tags · 三档</h3>
|
||
<p class="hint">实色 hex · 从弱到强选</p>
|
||
<div class="demo" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
|
||
<span class="tag calm">极淡 0.08</span>
|
||
<span class="tag standard">标准 0.18</span>
|
||
<span class="tag brush">笔刷渐变</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Quote</h3>
|
||
<p class="hint">左 2pt 品牌实线 + olive 色</p>
|
||
<blockquote class="quote">一千个 no 换一个 yes，宁可清淡，不可浓艳。</blockquote>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Metric</h3>
|
||
<p class="hint">serif 数字 + sans 标签 · tabular-nums</p>
|
||
<div class="metrics demo">
|
||
<div class="metric"><span class="metric-value">6</span><span class="metric-label">文档类型</span></div>
|
||
<div class="metric"><span class="metric-value">1</span><span class="metric-label">强调色</span></div>
|
||
<div class="metric"><span class="metric-value">8</span><span class="metric-label">条规则</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Section Title</h3>
|
||
<p class="hint">serif 500 · 15pt · 纯字号层级，无装饰</p>
|
||
<div class="demo">
|
||
<span class="sample-section-title">核心项目 · Selected Works</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Dash List</h3>
|
||
<p class="hint">短横线代替圆点 · 更书卷气</p>
|
||
<ul class="dash demo">
|
||
<li>暖米纸底，不用纯白</li>
|
||
<li>油墨蓝点缀，不引第二色</li>
|
||
<li>Serif 承担权威</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Code Block</h3>
|
||
<p class="hint">ivory 底 + 0.5pt border + 6pt 圆角 + mono 字体</p>
|
||
<pre class="code"><span class="c">// 暖米纸 · 一种克制的温度</span>
|
||
canvas = parchment; accent = <span class="k">ink_blue</span>
|
||
palette = <span class="k">warm_neutrals</span> − cool_grays
|
||
document = <span class="k">serif</span> × hierarchy + generous_space
|
||
beauty = constraints × <span class="k">intention</span> ÷ noise</pre>
|
||
</div>
|
||
|
||
<div class="comp">
|
||
<h3>Featured Card</h3>
|
||
<p class="hint">whisper shadow + 16pt 圆角</p>
|
||
<div class="demo" style="background:var(--ivory); border-radius:16px; padding:18px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.05); border: 1px solid var(--border-cream);">
|
||
<p style="font-family:var(--serif); font-weight:500; font-size:15px; margin:0 0 6px; color:var(--near-black);">Tesla 公司介绍 · One-Pager</p>
|
||
<p style="font-size:12px; color:var(--olive); margin:0 0 10px; line-height:1.5;">单页 A4 · 中文版 · 4 张指标卡 + 3 段正文 + 时间线</p>
|
||
<div style="display:flex; gap:8px; flex-wrap:wrap;">
|
||
<span class="tag calm">中文</span>
|
||
<span class="tag calm">A4 × 1</span>
|
||
<span class="tag calm">Ink Blue</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 07 DIAGRAMS ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">07 · Diagrams</p>
|
||
<h2 class="section-title">内联图表</h2>
|
||
<p class="section-lede">十八种内联 SVG 图表，覆盖架构、流程、数据三大场景。直接告诉 Claude 需要哪种图，会自动嵌入文档，配色与字体沿用 Kami 设计语言。</p>
|
||
</div>
|
||
<div class="chart-showcase">
|
||
<!-- Architecture mini -->
|
||
<div class="chart-card">
|
||
<div class="chart-label">架构图 · Architecture</div>
|
||
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
|
||
<rect width="280" height="160" fill="#f5f4ed"/>
|
||
<!-- Browser → API -->
|
||
<path d="M 84,79.5 L 103,79.5 L 103,78 L 107,80 L 103,82 L 103,80.5 L 84,80.5 Z" fill="#6b6a64"/>
|
||
<!-- API → Database -->
|
||
<path d="M 172,79.5 L 191,79.5 L 191,78 L 195,80 L 191,82 L 191,80.5 L 172,80.5 Z" fill="#504e49"/>
|
||
<!-- Node: Client -->
|
||
<rect x="20" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
|
||
<text x="52" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">CLIENT</text>
|
||
<text x="52" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Browser</text>
|
||
<!-- Node: API (focal) -->
|
||
<rect x="108" y="58" width="64" height="44" rx="3" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
|
||
<text x="140" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#1B365D">SERVICE</text>
|
||
<text x="140" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">API</text>
|
||
<!-- Node: Database -->
|
||
<rect x="196" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#504e49" stroke-width="0.8"/>
|
||
<text x="228" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">DATA</text>
|
||
<text x="228" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Database</text>
|
||
</svg>
|
||
<p class="chart-caption">系统组件与连接关系，一个焦点节点</p>
|
||
</div>
|
||
<!-- Flowchart mini -->
|
||
<div class="chart-card">
|
||
<div class="chart-label">流程图 · Flowchart</div>
|
||
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
|
||
<rect width="280" height="160" fill="#f5f4ed"/>
|
||
<!-- Start pill -->
|
||
<rect x="100" y="8" width="80" height="28" rx="14" fill="#141413"/>
|
||
<text x="140" y="25" text-anchor="middle" font-size="9" fill="#f5f4ed">Start</text>
|
||
<!-- Start → diamond (arrow down) -->
|
||
<path d="M 139.5,36 L 139.5,48 L 138,48 L 140,52 L 142,48 L 140.5,48 L 140.5,36 Z" fill="#504e49"/>
|
||
<!-- Decision diamond -->
|
||
<polygon points="140,52 172,72 140,92 108,72" fill="#f5f4ed" stroke="#141413" stroke-width="1"/>
|
||
<text x="140" y="76" text-anchor="middle" font-size="8" fill="#141413">Valid?</text>
|
||
<!-- Yes arrow right -->
|
||
<path d="M 172,71.5 L 204,71.5 L 204,70 L 208,72 L 204,74 L 204,72.5 L 172,72.5 Z" fill="#1B365D"/>
|
||
<text x="186" y="68" text-anchor="middle" font-size="8" fill="#1B365D">Yes</text>
|
||
<!-- Success node (focal) -->
|
||
<rect x="208" y="56" width="64" height="32" rx="4" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
|
||
<text x="240" y="75" text-anchor="middle" font-size="9" fill="#141413">Process</text>
|
||
<!-- No arrow down -->
|
||
<path d="M 139.5,92 L 139.5,112 L 138,112 L 140,116 L 142,112 L 140.5,112 L 140.5,92 Z" fill="#504e49"/>
|
||
<text x="151" y="106" font-size="8" fill="#504e49">No</text>
|
||
<!-- Reject node -->
|
||
<rect x="96" y="116" width="88" height="32" rx="4" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
|
||
<text x="140" y="134" text-anchor="middle" font-size="9" fill="#504e49">Reject</text>
|
||
</svg>
|
||
<p class="chart-caption">决策分支，Yes / No 路径，焦点为成功路径</p>
|
||
</div>
|
||
<!-- Bar chart (shifted left) -->
|
||
<div class="chart-card">
|
||
<div class="chart-label">柱状图 · Bar Chart</div>
|
||
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
|
||
<rect width="280" height="160" fill="#f5f4ed"/>
|
||
<rect x="18" y="78" width="42" height="50" rx="3" fill="#6b6a64"/>
|
||
<rect x="78" y="62" width="42" height="66" rx="3" fill="#504e49"/>
|
||
<rect x="138" y="44" width="42" height="84" rx="3" fill="#2d4e7a"/>
|
||
<rect x="198" y="30" width="42" height="98" rx="3" fill="#1B365D"/>
|
||
<text x="39" y="145" text-anchor="middle" font-size="10" fill="#6b6a64">Q1</text>
|
||
<text x="99" y="145" text-anchor="middle" font-size="10" fill="#504e49">Q2</text>
|
||
<text x="159" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q3</text>
|
||
<text x="219" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q4</text>
|
||
<text x="39" y="73" text-anchor="middle" font-size="9" font-weight="600" fill="#6b6a64">180</text>
|
||
<text x="99" y="57" text-anchor="middle" font-size="9" font-weight="600" fill="#504e49">220</text>
|
||
<text x="159" y="39" text-anchor="middle" font-size="9" font-weight="600" fill="#2d4e7a">195</text>
|
||
<text x="219" y="25" text-anchor="middle" font-size="9" font-weight="600" fill="#1B365D">240</text>
|
||
</svg>
|
||
<p class="chart-caption">季度营收对比，可选颜色渐变或单色</p>
|
||
</div>
|
||
<!-- Donut chart -->
|
||
<div class="chart-card">
|
||
<div class="chart-label">环形图 · Donut Chart</div>
|
||
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
|
||
<rect width="280" height="160" fill="#f5f4ed"/>
|
||
<path d="M 80,25 A 55,55 0 1,1 47.7,124.5 L 62.4,104.3 A 30,30 0 1,0 80,50 Z" fill="#1B365D" stroke="white" stroke-width="1.5"/>
|
||
<path d="M 47.7,124.5 A 55,55 0 0,1 35.5,47.7 L 55.7,62.4 A 30,30 0 0,0 62.4,104.3 Z" fill="#504e49" stroke="white" stroke-width="1.5"/>
|
||
<path d="M 35.5,47.7 A 55,55 0 0,1 80,25 L 80,50 A 30,30 0 0,0 55.7,62.4 Z" fill="#6b6a64" stroke="white" stroke-width="1.5"/>
|
||
<text x="80" y="77" text-anchor="middle" font-size="13" font-weight="600" fill="#1B365D">60%</text>
|
||
<text x="80" y="92" text-anchor="middle" font-size="10" fill="#504e49">主营</text>
|
||
<rect x="150" y="46" width="10" height="10" rx="2" fill="#1B365D"/>
|
||
<text x="165" y="55" font-size="11" fill="#4d4c48">主营业务 · 60%</text>
|
||
<rect x="150" y="72" width="10" height="10" rx="2" fill="#504e49"/>
|
||
<text x="165" y="81" font-size="11" fill="#4d4c48">服务收入 · 25%</text>
|
||
<rect x="150" y="98" width="10" height="10" rx="2" fill="#6b6a64"/>
|
||
<text x="165" y="107" font-size="11" fill="#4d4c48">其他来源 · 15%</text>
|
||
</svg>
|
||
<p class="chart-caption">营收结构拆解，支持 3–6 个分段</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 08 DECISION TABLE ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">08 · Decision Lookup</p>
|
||
<h2 class="section-title">决策速查</h2>
|
||
<p class="section-lede">遇到“该用什么”时先看这张表，不在表里就回到基础原则。</p>
|
||
</div>
|
||
<table class="decision">
|
||
<tr><th>要做什么</th><th>怎么做</th></tr>
|
||
<tr><td class="task">大标题</td><td class="how">serif <code>500</code>，字号按层级，line-height <code>1.10–1.30</code></td></tr>
|
||
<tr><td class="task">正文阅读</td><td class="how">sans <code>400</code>，<code>9.5–10 pt</code>，line-height <code>1.55</code></td></tr>
|
||
<tr><td class="task">强调一个数字</td><td class="how"><code>color: var(--brand)</code>，不要粗体</td></tr>
|
||
<tr><td class="task">分隔两段内容</td><td class="how"><code>2.5pt</code> 品牌色左侧竖线，或 <code>0.5pt</code> 暖灰虚线</td></tr>
|
||
<tr><td class="task">引用某人的话</td><td class="how">左 <code>2pt</code> 品牌色实线 + olive 色</td></tr>
|
||
<tr><td class="task">展示代码</td><td class="how">ivory 底 + <code>0.5pt</code> border + <code>6pt</code> 圆角 + mono 字体</td></tr>
|
||
<tr><td class="task">区分主次按钮</td><td class="how">Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal</td></tr>
|
||
<tr><td class="task">标注某张特殊卡片</td><td class="how"><code>border: 0.5pt solid var(--brand)</code> 或 <code>border-left: 3pt</code></td></tr>
|
||
<tr><td class="task">章节开始</td><td class="how">serif <code>500</code> · <code>15pt</code> · 纯字号层级，无额外装饰</td></tr>
|
||
<tr><td class="task">文档封面</td><td class="how">单页 Display 字号 + 右对齐作者/日期 + 大量留白</td></tr>
|
||
<tr><td class="task">数据卡</td><td class="how">ivory 底 + <code>8pt</code> 圆角 + serif 大数字（油墨蓝） + sans 小标签</td></tr>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ============ 09 ANTI ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">09 · Anti-Patterns</p>
|
||
<h2 class="section-title">反面示例</h2>
|
||
<p class="section-lede">破例可以，但理由要足够清楚。</p>
|
||
</div>
|
||
|
||
<div class="anti">
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>页面背景用 <code>#ffffff</code> 纯白或 <code>#f3f4f6</code> 冷灰，会让版面变硬，也削弱 Kami 的暖米纸气质。</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>始终使用 <code>#f5f4ed</code> parchment，打印时把 <code>@page background</code> 也设为同色，避免白边。</p>
|
||
</div>
|
||
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>Tag 用 <code>rgba(201,100,66,0.18)</code>，WeasyPrint 会让 padding 区与字形区透明度叠加，形成双层矩形。</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>查 tint 对照表，改用等效实色 <code>#E4ECF5</code>，颜色稳定，PDF 也干净。</p>
|
||
</div>
|
||
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>标题用 <code>font-weight: 600</code> 或更粗的合成 bold，笔画容易变糊，版面也会显得粗重。</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>正文 400，标题 500（真实 W05 字重）；需要更强存在感时，用字号或品牌色左侧竖线，不靠合成粗体。</p>
|
||
</div>
|
||
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>box-shadow 硬投影 <code>0 2px 8px rgba(0,0,0,0.3)</code> 观感偏硬，印刷时也容易发黑。</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>用 ring shadow (<code>0 0 0 1pt</code>)、whisper (<code>rgba 0.05</code>)，或直接用明暗交替建立层次。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 10 BACKGROUND ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">10 · Background</p>
|
||
<h2 class="section-title">设计缘起</h2>
|
||
</div>
|
||
<div class="background-text">
|
||
<p>我喜欢美股投资，经常让 Claude 写研究报告。每次出来的东西都是同一种默认文档的样子：灰扑扑的，结构不清晰，格式老旧，换个对话就换一套排版，没有一份让人想读下去。于是我开始一条一条地调字体、配色、间距，直到报告变成一份自己真正愿意看的页面。</p>
|
||
<p>后来要去做《你不知道的 Agent：原理、架构与工程实践》分享，手上已经有文档，不想再做 PPT，就用 Claude Design 按自己的设计风格来排版，反复调了很多轮，最后慢慢满意了。加入了 inline SVG 图表、统一暖色调、也收紧了编辑节奏，做着做着覆盖了我常用的文档场景，就把这个过程继续抽象了一下，成了现在的 kami：一套交给任何 agent 都能放心出活的安静设计系统。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 11 FAQ ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">11 · 常见问题</p>
|
||
<h2 class="section-title">FAQ</h2>
|
||
</div>
|
||
<dl class="faq">
|
||
<div class="faq-pair">
|
||
<dt>Kami 是什么？</dt>
|
||
<dd>一个面向 AI agent 的文档设计系统。一种强调色、衬线层级、暖色羊皮纸画布。给任何 LLM agent 一段描述，就能得到稳定的排版输出。也可以作为视觉设计简报给到 Claude Design 或 GPT Canvas 这类图像渲染工具。</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>能生成什么？</dt>
|
||
<dd>八种文档模板：一页纸、长文档、信件、作品集、简历、幻灯片、个股研报、更新日志，外加一套落地页系统（中、英、韩文）。另有 18 种内联 SVG 图表用于可视化说明。输出为 HTML，可导出为 PDF、PNG 或可编辑的 PPTX 幻灯片。</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>怎么安装？</dt>
|
||
<dd>Claude Code（v2.1.142+）：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin marketplace add tw93/kami</code>，然后 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin install kami@kami</code>。Codex：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin marketplace add tw93/kami</code>，然后 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin add kami@kami</code>。读取 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">~/.agents</code> 的通用 agent：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">npx skills add tw93/kami/plugins/kami -a universal -g -y</code>。Claude Desktop：从 GitHub Releases 下载 release asset kami.zip，不要下载 Source code 压缩包，然后在自定义 > Skills 中上传即可。</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>支持哪些语言？</dt>
|
||
<dd>英文、中文、日文、韩文。每种语言使用专属衬线字体：英文用 Charter，中文用 TsangerJinKai02，日文用 YuMincho，韩文用 Source Han Serif K。字距、行高、字号都按语言做了印刷级调优。</dd>
|
||
</div>
|
||
</dl>
|
||
</section>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer class="footer">
|
||
<div class="mark">
|
||
<svg width="56" height="56" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-label="Kami mark">
|
||
<rect x="6" y="6" width="68" height="68" rx="10" fill="#faf9f5" stroke="#1B365D" stroke-width="1.25"/>
|
||
<line x1="16" y1="26" x2="64" y2="26" stroke="#1B365D" stroke-width="1.25"/>
|
||
<text x="40" y="56" font-family="TsangerJinKai02, Georgia, serif" font-size="34" font-weight="500" fill="#141413" text-anchor="middle">紙</text>
|
||
</svg>
|
||
<div>
|
||
<p class="wm-name">Kami · 紙</p>
|
||
<p class="wm-sub">好内容，值得好版面。</p>
|
||
</div>
|
||
</div>
|
||
<div class="colophon">
|
||
<div><a href="https://github.com/tw93/kami" style="color:var(--brand); text-decoration:none; font-weight:500;">GitHub</a> · One-Pager · Long Doc · Letter · 作品集 · Resume · Slides</div>
|
||
<div style="margin-top:8px; color: var(--olive); font-family: var(--serif);">
|
||
Serif 承担权威，sans 承担功能，暖灰承担节奏，油墨蓝承担焦点。
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</main>
|
||
<script>
|
||
(function(){
|
||
var sw=document.querySelector('[data-lang-switch]');
|
||
if(!sw)return;
|
||
var trigger=sw.querySelector('[data-lang-trigger]');
|
||
function setOpen(open){
|
||
sw.classList.toggle('is-open',open);
|
||
trigger.setAttribute('aria-expanded',open);
|
||
}
|
||
trigger.addEventListener('click',function(e){
|
||
e.stopPropagation();
|
||
setOpen(!sw.classList.contains('is-open'));
|
||
});
|
||
sw.querySelectorAll('[data-lang-menu] a').forEach(function(a){
|
||
a.addEventListener('click',function(){
|
||
localStorage.setItem('kami-lang',a.getAttribute('data-lang'));
|
||
});
|
||
});
|
||
document.addEventListener('click',function(e){
|
||
if(!sw.contains(e.target))setOpen(false);
|
||
});
|
||
document.addEventListener('keydown',function(e){
|
||
if(e.key==='Escape')setOpen(false);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|