wehub-resource-sync
733 lines
45 KiB
HTML
733 lines
45 KiB
HTML
<!doctype html>
|
||
<html lang="zh-Hant">
|
||
<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-tw.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-tw.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_TW">
|
||
<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-tw.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" data-lang="zh">简体中文</a>
|
||
<a href="./index-tw.html" class="active" 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。字距、行高、字號都按語言做了印刷級調優。日文與韓文為最佳努力的 CJK 路徑，交付前會做視覺 QA。</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>
|