commit 4b1558dacea4ef1923f283697ef842a6fa8096cf
Author: wehub-skill-sync <skill-sync@wehub.local>
Date:   Mon Jul 13 21:36:13 2026 +0800

    chore: import zh skill kami-landing

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..604235f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,59 @@
+# kami-landing
+
+一个即插即用的技能组件，能将需求简报转化为一份适合印刷的 kami 风格一页纸——
+暖色 parchment 画布、墨蓝色强调色、统一字重的衬线体，无斜体，无冷灰色调。
+输出效果类似白皮书或工作室一页纸，而非应用界面。
+
+> **请先阅读** — 代理合约、Schema 以及自检清单均位于
+> [`SKILL.md`](./SKILL.md) 中。本 README 是针对人类的快速入门。
+
+## 你会得到什么
+
+一份独立的单文件 HTML，包含：
+
+- **暖色 Parchment 画布**（`#f5f4ed`），绝不使用 `#ffffff`。
+- **单一色相强调色** — 墨蓝色（`#1B365D`），限制在可见面积的 5% 以内。
+- **字重为 500 的衬线体**用于层次结构。全篇无斜体。
+- **紧凑的印刷节奏** — 行高 1.10–1.55，按语言感知的字符间距。
+- **每个数字堆栈使用表格数字（tabular-nums）**。
+- **纯十六进制标签填充**（不使用 `rgba()`，因为打印渲染器会双重绘制）。
+- **1px 描边环 + 隐约阴影**用于深度感 — 不使用硬投影。
+- **天然多语言**（可通过 `language` 参数选择 EN / zh-CN / ja 堆栈）。
+
+## 30 秒速览
+
+该技能是"由代理驱动、无脚本"模式：没有 `compose.ts`。代理读取 `SKILL.md`，收集需求简报，然后直接使用 [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) 中目录化的 token 和组件编写 `out/index.html`。
+
+预览规范版的 Open Design 实例：
+
+```bash
+open example.html
+```
+
+开始一个新项目：
+
+1. 在您的代理（Claude · Cursor · Codex · …）中打开该技能。
+2. 回答两轮简报问题（品牌标识 + 内容）。
+3. 编写文件。完成。
+
+## 文件结构
+
+```text
+skills/kami-landing/
+├── SKILL.md      # ← 代理合约（请先阅读此文件）
+├── README.md     # ← 你在这里
+└── example.html  # 规范版 Open Design 渲染效果
+```
+
+## 边界约束
+
+- 无外部 JavaScript。页面是纸张，而非应用。
+- 无硬投影、无拟态设计、无 `backdrop-filter`。
+- 无第二强调色。无斜体。无冷蓝色调。
+- 每页最多使用一个 `.tag.brush`（它是唯一被允许的渐变效果）。
+
+## 另请参阅
+
+- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) — 完整的 token 规范。
+- [`skills/kami-deck/`](../kami-deck/) — 同系列技能，用于生成同一 kami 设计语言的幻灯片。
+- 上游来源：[`tw93/kami`](https://github.com/tw93/kami) — 原始 Claude 技能（MIT 许可证），本设计系统改编自该项目。
diff --git a/README.wehub.md b/README.wehub.md
new file mode 100644
index 0000000..b6e2916
--- /dev/null
+++ b/README.wehub.md
@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`kami-landing`
+- 中文类目：kami 纸张风品牌白皮书/落地页
+- 上游仓库：`nexu-io__open-design`
+- 上游路径：`design-templates/kami-landing/SKILL.md`
+- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/design-templates/kami-landing/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准
diff --git a/SKILL.md b/SKILL.md
new file mode 100644
index 0000000..354b335
--- /dev/null
+++ b/SKILL.md
@@ -0,0 +1,190 @@
+---
+name: kami-landing
+description: >
+  生成一份可印刷品质的单页 kami（紙 / 纸）文档——暖色羊皮纸画布、墨蓝强调色、
+  单一字重衬线体、无斜体、无冷灰。输出读起来像专业白皮书或工作室一页纸，
+  而非应用 UI。天然支持多语言（EN · zh-CN · ja）。一个自包含的 HTML 文件，
+  零依赖。
+triggers:
+  - kami
+  - 紙
+  - 纸
+  - paper one-pager
+  - 白皮书
+  - white paper
+  - parchment landing
+  - editorial document
+  - print-grade page
+  - kami landing
+od:
+  category: brand-page
+  surface: web
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  audience: founders, design studios, OSS maintainers, researchers
+  tone: editorial, restrained, print-first
+  scale: viewport-anchored long-form single page
+  preview:
+    type: html
+    entry: index.html
+    reload: debounce-100
+  design_system:
+    requires: false
+  craft:
+    requires:
+      - typographic-rhythm
+      - pixel-discipline
+inputs:
+  - id: brand
+    label: Brand identity
+    description: 名称、标语、地点、版本/修订号、主 URL。
+  - id: hero
+    label: Hero / cover block
+    description: 眉标 + 大标题（一行，显示尺寸下 ≤ 6 词）+ 副标题 + 3 个 hero 元信息标记。
+  - id: manifesto
+    label: Manifesto paragraph + signature
+  - id: metrics
+    label: 3-6 metric tiles (value · label · sub)
+  - id: chapters
+    label: 3-5 个带编号的章节（标题 + 导语 + 正文）
+  - id: footer
+    label: License · year · contact + 3-column site index
+parameters:
+  output_format:
+    type: enum
+    values: [standalone-html]
+    default: standalone-html
+  language:
+    type: enum
+    values: [en, zh-CN, ja]
+    default: en
+    description: >
+      在 `:root` 上设置主要衬线字体栈。英文使用 Charter，
+      中文使用 TsangerJinKai02 / Source Han Serif，日文使用
+      YuMincho。允许内联混排内容；浏览器按字形自动进行降级回退。
+outputs:
+  - path: <out>/index.html
+    description: 自包含 HTML，kami CSS 内联，零 JS，除 Google Fonts 外零外部依赖。
+capabilities_required:
+  - file-write
+example_prompt: |
+  为我打造一份 kami 风格的一页纸，品牌为"Lumen Field"，
+  一家发布专注用声景应用的小众工作室。大标题 "Soundscapes for
+  focused work."，宣言段落 + 签名 "by Lumen Field,
+  Berlin"，3 个指标卡片（12 soundscapes / 4 presets / 1 daily ritual），
+  三个带编号的章节，分别介绍工作室、应用和路线图。
+  英文语言栈。
+---
+
+# kami-landing
+
+生成一份 **kami（紙 / 纸）** 设计系统的单页文档。
+其美学借鉴了编辑印刷物、技术白皮书和旧式打字机信件——目标是*好内容印在好纸上*，
+而非*现代应用 UI*。
+
+> **设计系统权威来源：** [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md)。
+> 交付前请先阅读。标记（tokens）、排版规则、"十大不变原则"以及禁用色都在那里。
+
+## 你将获得
+
+一个自包含的 HTML 文件，包含：
+
+- **暖色羊皮纸画布**（`#f5f4ed`）——绝不用 `#ffffff`。
+- **单一色相强调色**——墨蓝（`#1B365D`），用于章节编号、大标题中的强调词、宣言的左竖线以及指标数值。其他位置使用墨蓝时，覆盖面积不得超过文档可视区域的 5%。
+- **单一字重（500）衬线体构建层级**——Charter（英文）、TsangerJinKai02 / Source Han Serif（中文）或 YuMincho（日文），由 `language` 参数选择。**任何位置都不使用斜体。**
+- **紧凑的印刷节奏**——行高 1.10–1.55，字间距依语言而定（英文 0，中文 0.35px，日文 0.02em）。
+- **数字堆叠均使用 `font-variant-numeric: tabular-nums`**，确保指标列和页码数字整齐对齐。
+- **通过 1px 描边 + 极淡阴影（`0 4px 24px rgba(0,0,0,0.05)`）营造深度**。无硬阴影、无新拟物风格、无 backdrop-filter 模糊。
+- **标记填充使用纯色十六进制值**（例如 `#E4ECF5`），绝不使用 `rgba()`——印刷渲染器会将 alpha 标记双重着色。
+- **响应式**，支持 1280 / 980 / 768 / 560 断点。
+
+## 页面结构
+
+```text
+1. 眉标行        —— 语言切换器 · 版本 · 修订号（12px 无衬线大写）
+2. Hero          —— 展示级大标题（96–106px 衬线 500 字重）、副标题（21px）、
+                   三个 hero 标记芯片（纸张色调）
+3. 宣言          —— 引出段落，衬线 400 字重，20px，行高 1.65，带
+                   墨蓝左竖线和签名页脚
+4. 指标行        —— 3-6 个单元格：数值（24px 衬线 500 字重墨蓝，tabular-nums）、
+                   标签（12px 衬线 500 字重橄榄色）
+5. 章节          —— 带编号（`01`、`02`……）墨蓝衬线 500 字重 14px，
+                   章节标题 28-32px，正文 14-15px
+6. 页脚          —— 引题词（大号衬线 500 字重）、许可协议 · 年份 · 联系方式、
+                   三列网站索引，12px 衬线 500 字重
+```
+
+## 工作流程约定
+
+### 1. 收集品牌简介
+
+使用 `AskQuestion`（或等效方法）分批次收集品牌简介。不要一次性将所有输入项抛给用户；分两轮询问：
+
+1. 身份轮——名称、标语、地点、版本/修订号、主 URL、主要语言。
+2. 内容轮——宣言段落 + 签名、3-6 个指标卡片、3-5 个章节条目（标题 + 导语 + 正文）。
+
+### 2. 选择语言栈
+
+`language` 参数控制 `:root` 上设置的 `--serif` 栈。根据宣言和章节正文的主要语言选择：
+
+| `language` | `--serif`                                                 | 说明                                   |
+| :--------- | :-------------------------------------------------------- | :------------------------------------- |
+| `en`       | Charter, Georgia, Palatino, Times New Roman, serif         | 默认                                   |
+| `zh-CN`    | TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia   | 正文字间距 0.35px                       |
+| `ja`       | YuMincho, Hiragino Mincho ProN, Source Han Serif JP        | 同时将 `--olive` 覆写为 `#4d4c48`（YuMincho 笔画更细） |
+
+内联混排内容没有问题——浏览器按字形自动进行降级回退。**不要**将三个字体族链入同一个 `font-family` 声明中，那样会稀释字符表现。
+
+### 3. 编写 `index.html`
+
+输出一个所有 CSS 内联的单一文件。镜像 [`example.html`](./example.html) 的结构，且仅使用 `design-systems/kami/DESIGN.md` 中的标记。**不要**发明新的颜色、字重或字体族。
+
+agent 可直接插入的组件基元（均在示例的 `<style>` 块中定义）：
+
+- `.eyebrow`, `.label`——无衬线上划线
+- `.metric`——数值 + 标签纵向配对
+- `.section-num` + `.section-title` + `.section-lede`
+- `.tag.standard`, `.tag.brush`——纯色十六进制标签（每页最多一个 brush 标签）
+- `.quote`——左竖线衬线 500 字重引用
+- `ul.dash`——墨蓝色破折号项目符号
+- `.code`——象牙色背景、1px 边框的代码块
+- `.footer-kicker`——大号衬线 500 字重词
+
+为每个可编辑元素标记 `data-od-id="<unique-slug>"`，以便宿主应用的评论模式能够定位。
+
+### 4. 交付前自检
+
+- [ ] 页面背景为羊皮纸色（`#f5f4ed`），绝不用 `#ffffff`。
+- [ ] 墨蓝（`#1B365D`）覆盖可见区域的 ≤ 5%——统计章节编号、宣言竖线、指标数值、大标题强调词。总计 ≤ 5%。
+- [ ] 所有灰色均为暖色（R ≈ G > B）。无 `slate-*`，无 `#f3f4f6`。
+- [ ] 衬线字重保持在 500——衬线文字上**任何位置**都不得出现 `font-weight: 700` 或 `900`。
+- [ ] 任何位置都不得出现 `font-style: italic`。强调改用墨蓝颜色或 `.tag` 标记。
+- [ ] 所有数字堆叠（指标数值、页码、日期、财务数字）均带有 `font-variant-numeric: tabular-nums`。
+- [ ] 所有标记填充均为纯色十六进制值（例如 `#E4ECF5`），绝不使用 `rgba()`。
+- [ ] 阴影：最多使用 `1px` 描边或 `0 4px 24px rgba(0,0,0,0.05)` 极淡阴影。无硬阴影。
+- [ ] 大标题在显示尺寸下 ≤ 6 词；中文 ≤ 8 字。
+- [ ] 在 768px 和 560px 断点下，布局折叠为单列，无水平滚动。
+
+## 本技能包含的文件
+
+```text
+skills/kami-landing/
+├── SKILL.md                 # 本约定文档
+├── README.md                # 人类快速入门指南
+└── example.html             # 规范的 Open Design 渲染示例
+```
+
+## 边界
+
+- **不要**发明新的颜色或字体。kami 调色板是固定的；如果需求要求品牌色，请拒绝，或者将品牌色渲染为单个 `.tag.brush` 强调标记。
+- **不要**引入第二种强调色。选择墨蓝，或者不选。
+- **不要**在一个声明中混合三种字体栈；选择主要语言，在 `:root` 上覆写 `--serif`，让浏览器按字形自动降级回退来处理内联混排内容。
+- **不要**为标记填充使用 `rgba()`——印刷渲染器会将 alpha 标记双重着色。请使用 `design-systems/kami/DESIGN.md` §2 表格中预混合的纯色十六进制值。
+- **不要**添加 JavaScript 动画。页面是纸，不是应用——动感应留给读者的滚动。
+
+## 参见
+
+- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md)——完整的标记（token）规范。
+- [`skills/kami-deck/`](../kami-deck/)——姊妹技能，用同一套 kami 语言生成幻灯片。
+- 上游：[`tw93/kami`](https://github.com/tw93/kami)——该设计系统所改编的原始 Claude 技能（MIT 协议）。
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..8be8cb3
--- /dev/null
+++ b/example.html
@@ -0,0 +1,673 @@
+<!DOCTYPE html>
+<html lang='zh-CN'>
+<head>
+<meta charset='utf-8' />
+<meta name='viewport' content='width=device-width, initial-scale=1' />
+<title>Open Design — 在温暖纸张上设计智能。</title>
+<meta name='description' content='Open Design 以 kami 单页风格呈现。温暖羊皮纸底色，墨蓝强调色，单一字重的衬线体，无斜体，无冷灰色。' />
+<link rel='preconnect' href='https://fonts.googleapis.com' />
+<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
+<link href='https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet' />
+<style>
+/*
+ * kami (紙 / 纸) — canonical one-pager stylesheet.
+ *
+ * SINGLE SOURCE OF TRUTH for the kami-landing skill's visual system.
+ * Tokens, type rules, and the "ten invariants" are defined by
+ * design-systems/kami/DESIGN.md. Do not invent new tokens here;
+ * extend the design system first.
+ *
+ * Typeface choice: Source Serif 4 (Charter family) is the EN default
+ * because Charter itself is not Google-hosted. The fallback chain
+ * resolves to Charter on macOS and to Georgia / Palatino elsewhere.
+ */
+
+:root {
+  /* ----- Surface ----- */
+  --parchment: #f5f4ed;
+  --ivory: #faf9f5;
+  --warm-sand: #e8e6dc;
+
+  /* ----- Brand (single chromatic accent) ----- */
+  --brand: #1B365D;
+  --brand-light: #2D5A8A;
+
+  /* ----- Text (four levels — no fifth) ----- */
+  --near-black: #141413;
+  --dark-warm: #3d3d3a;
+  --olive: #504e49;
+  --stone: #6b6a64;
+
+  /* ----- Border ----- */
+  --border: #e8e6dc;
+  --border-soft: #e5e3d8;
+
+  /* ----- Tag tints (solid hex, NEVER rgba) ----- */
+  --tag-08: #EEF2F7;
+  --tag-14: #E4ECF5;
+  --tag-22: #D0DCE9;
+  --tag-30: #D6E1EE;
+
+  /* ----- Type stacks ----- */
+  --serif: 'Source Serif 4', Charter, Georgia, Palatino, 'Times New Roman', serif;
+  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, Monaco, monospace;
+
+  /* ----- Motion ----- */
+  --whisper: 0 4px 24px rgba(0, 0, 0, 0.05);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { background: var(--parchment); color: var(--near-black); }
+body {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga', 'calt';
+}
+strong { font-weight: 500; }
+img { max-width: 100%; display: block; }
+a { color: var(--brand); text-decoration: none; border-bottom: 1px solid currentColor; }
+a:hover { color: var(--brand-light); }
+
+.shell {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 88px 64px 120px;
+  position: relative;
+}
+
+/* ---------- eyebrow strip (top meta) ---------- */
+.eyebrow-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--stone);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 18px;
+  margin-bottom: 88px;
+}
+.eyebrow-row .lang {
+  display: inline-flex;
+  gap: 16px;
+}
+.eyebrow-row .lang a {
+  color: var(--stone);
+  border-bottom: none;
+}
+.eyebrow-row .lang a.active { color: var(--brand); }
+.eyebrow-row .meta {
+  display: inline-flex;
+  gap: 22px;
+  font-variant-numeric: tabular-nums;
+}
+.eyebrow-row .meta b { color: var(--near-black); font-weight: 500; }
+
+/* ---------- hero ---------- */
+.hero {
+  display: grid;
+  grid-template-columns: 1.45fr 0.55fr;
+  gap: 64px;
+  align-items: end;
+  margin-bottom: 96px;
+}
+.hero-copy h1 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(60px, 7.4vw, 106px);
+  line-height: 1.05;
+  letter-spacing: -1.2px;
+  color: var(--near-black);
+  margin-bottom: 28px;
+}
+.hero-copy h1 .ink { color: var(--brand); }
+.hero-copy .tagline {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 21px;
+  line-height: 1.45;
+  color: var(--olive);
+  max-width: 38ch;
+}
+.hero-tokens {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: flex-end;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.4px;
+  color: var(--stone);
+  text-transform: uppercase;
+}
+.hero-tokens .row {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--ivory);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 14px;
+  font-variant-numeric: tabular-nums;
+}
+.hero-tokens .row b {
+  color: var(--brand);
+  font-weight: 500;
+  font-family: var(--serif);
+  font-size: 14px;
+}
+.hero-tokens .row span { font-family: var(--sans); }
+
+/* ---------- manifesto (pull paragraph + signature) ---------- */
+.manifesto {
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 44px 0 40px;
+  margin-bottom: 88px;
+  display: grid;
+  grid-template-columns: 1fr 1.85fr;
+  gap: 56px;
+  align-items: start;
+}
+.manifesto .label {
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--stone);
+}
+.manifesto .body {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 1.65;
+  letter-spacing: 0.05em;
+  color: var(--olive);
+  border-left: 2px solid var(--brand);
+  padding: 4px 0 4px 24px;
+}
+.manifesto .body strong { color: var(--near-black); font-weight: 500; }
+.manifesto .signature {
+  margin-top: 22px;
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--dark-warm);
+  display: inline-flex;
+  gap: 10px;
+  align-items: baseline;
+}
+.manifesto .signature span { color: var(--stone); }
+
+/* ---------- metrics row ---------- */
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 88px;
+}
+.metric {
+  padding: 28px 22px 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-right: 1px solid var(--border-soft);
+}
+.metric:last-child { border-right: 0; }
+.metric .value {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 36px;
+  line-height: 1;
+  color: var(--brand);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.5px;
+}
+.metric .label {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--near-black);
+  margin-top: 8px;
+}
+.metric .sub {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--olive);
+  line-height: 1.5;
+  max-width: 28ch;
+}
+
+/* ---------- chapters ---------- */
+.chapters {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 72px;
+  margin-bottom: 96px;
+}
+.chapter {
+  display: grid;
+  grid-template-columns: 1fr 2.6fr;
+  gap: 56px;
+  align-items: start;
+}
+.chapter .head { display: flex; flex-direction: column; gap: 14px; }
+.chapter .num {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--brand);
+  letter-spacing: 0.4px;
+  font-variant-numeric: tabular-nums;
+}
+.chapter .title {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 28px;
+  line-height: 1.2;
+  color: var(--near-black);
+  letter-spacing: 0.4px;
+}
+.chapter .lede {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--olive);
+  line-height: 1.5;
+  max-width: 30ch;
+}
+.chapter .body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.chapter .body p {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--dark-warm);
+  line-height: 1.55;
+  max-width: 62ch;
+}
+.chapter .body p strong { color: var(--near-black); font-weight: 500; }
+.chapter .body code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--brand);
+  background: var(--tag-08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.chapter ul.dash {
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.chapter ul.dash li {
+  position: relative;
+  padding-left: 16px;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--dark-warm);
+  line-height: 1.55;
+}
+.chapter ul.dash li::before {
+  content: '\2013';
+  position: absolute;
+  left: 0;
+  color: var(--brand);
+}
+
+/* ---------- chapter aside (pull-out card) ---------- */
+.chapter-aside {
+  background: var(--ivory);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 22px 22px 20px;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  transition: box-shadow 0.2s;
+}
+.chapter-aside:hover { box-shadow: var(--whisper); }
+.chapter-aside .a-label {
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--stone);
+}
+.chapter-aside .a-body {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--near-black);
+  white-space: pre;
+  overflow-x: auto;
+  background: var(--parchment);
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  padding: 12px 14px;
+  line-height: 1.65;
+}
+.chapter-aside .a-body .k { color: var(--brand); }
+.chapter-aside .a-body .c { color: var(--stone); }
+
+/* ---------- tag system ---------- */
+.tag {
+  display: inline-block;
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 2px;
+  color: var(--brand);
+  background: var(--tag-08);
+  letter-spacing: 0.4px;
+}
+.tag.standard { background: var(--tag-14); padding: 2px 8px; border-radius: 4px; }
+.tag.brush {
+  background: linear-gradient(to right, #D6E1EE, #E4ECF5 70%, #EEF2F7);
+}
+.tag-row { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+
+/* ---------- footer ---------- */
+.footer {
+  border-top: 1px solid var(--border);
+  padding-top: 56px;
+  display: grid;
+  grid-template-columns: 1.4fr 0.85fr 0.85fr 0.9fr;
+  gap: 48px;
+  align-items: start;
+}
+.footer .kicker {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 56px;
+  line-height: 1.05;
+  letter-spacing: -0.6px;
+  color: var(--near-black);
+  margin-bottom: 14px;
+}
+.footer .kicker .ink { color: var(--brand); }
+.footer .colophon {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--olive);
+  max-width: 32ch;
+  line-height: 1.55;
+}
+.footer .col h4 {
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--stone);
+  margin-bottom: 16px;
+}
+.footer .col ul { list-style: none; padding: 0; margin: 0; }
+.footer .col li {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--dark-warm);
+  margin-bottom: 8px;
+}
+.footer .col li a { color: var(--dark-warm); border-bottom: none; }
+.footer .col li a:hover { color: var(--brand); }
+.footer .col li small {
+  display: block;
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--stone);
+  letter-spacing: 0.4px;
+  margin-top: 1px;
+}
+
+.legal {
+  margin-top: 56px;
+  border-top: 1px solid var(--border-soft);
+  padding-top: 22px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--stone);
+  letter-spacing: 0.4px;
+  font-variant-numeric: tabular-nums;
+}
+.legal b { color: var(--near-black); font-weight: 500; }
+
+/* ---------- responsive ---------- */
+@media (max-width: 1080px) {
+  .shell { padding: 64px 48px 96px; }
+  .hero { grid-template-columns: 1fr; gap: 36px; align-items: start; }
+  .hero-tokens { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
+  .manifesto { grid-template-columns: 1fr; gap: 22px; }
+  .metrics { grid-template-columns: repeat(2, 1fr); }
+  .metric:nth-child(2n) { border-right: 0; }
+  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
+  .chapter { grid-template-columns: 1fr; gap: 22px; }
+  .footer { grid-template-columns: 1fr 1fr; gap: 36px; }
+  .footer .kicker { font-size: 44px; }
+}
+@media (max-width: 640px) {
+  .shell { padding: 48px 24px 72px; }
+  .hero-copy h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.6px; }
+  .hero-copy .tagline { font-size: 17px; }
+  .metrics { grid-template-columns: 1fr; }
+  .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); }
+  .metric:last-child { border-bottom: 0; }
+  .footer { grid-template-columns: 1fr; gap: 28px; }
+  .footer .kicker { font-size: 36px; }
+  .chapter .body p { font-size: 13.5px; }
+  .legal { flex-direction: column; gap: 10px; align-items: flex-start; }
+}
+</style>
+</head>
+<body>
+
+<main class='shell'>
+
+  <!-- ============ 顶部元信息栏 ============ -->
+  <div class='eyebrow-row' data-od-id='eyebrow-row'>
+    <div class='lang'>
+      <a href='#' class='active'>EN</a>
+      <a href='#'>中文</a>
+      <a href='#'>日本語</a>
+    </div>
+    <div class='meta'>
+      <span><b>Vol. 01</b> · 期号 Nº 26</span>
+      <span><b>v0.2.0</b></span>
+      <span>Apache-2.0</span>
+      <span>MMXXVI</span>
+    </div>
+  </div>
+
+  <!-- ============ 英雄区 ============ -->
+  <section class='hero' data-od-id='hero'>
+    <div class='hero-copy'>
+      <h1>在温暖<span class='ink'>纸张</span>上设计智能。</h1>
+      <p class='tagline'>面向编辑文档、白皮书和单页的开源工作室——由你自己的编程代理排版。</p>
+    </div>
+    <div class='hero-tokens'>
+      <span class='row'><b>31</b> <span>项技能</span></span>
+      <span class='row'><b>72</b> <span>套设计系统</span></span>
+      <span class='row'><b>12</b> <span>款代理 · BYOK</span></span>
+    </div>
+  </section>
+
+  <!-- ============ 宣言 ============ -->
+  <section class='manifesto' data-od-id='manifesto'>
+    <span class='label'>宣言 · Nº 01</span>
+    <div>
+      <p class='body'>
+        我们将你现有的编程代理视为一位<strong>创意协作者</strong>，而非一个黑箱。Open Design 赋予它 31 项可组合的技能和 72 套品牌级设计系统，然后让路。输出的是一个真正的文件——而非一段提示词——你明天就可以交给客户。
+      </p>
+      <div class='signature'>
+        — Open Design Studio
+        <span>柏林 · 开放 · 地球 · 52.5200° N · 13.4050° E</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ 指标行 ============ -->
+  <section class='metrics' data-od-id='metrics'>
+    <div class='metric'>
+      <div class='value'>31</div>
+      <div class='label'>项技能</div>
+      <div class='sub'>基于文件，今天即可交付，与 Claude Code 即插即用。</div>
+    </div>
+    <div class='metric'>
+      <div class='value'>72</div>
+      <div class='label'>套设计系统</div>
+      <div class='sub'>可移植的 DESIGN.md 设计令牌——Linear、Vercel、Stripe、Apple、kami……</div>
+    </div>
+    <div class='metric'>
+      <div class='value'>12</div>
+      <div class='label'>款代理 CLI</div>
+      <div class='sub'>在 $PATH 中自动检测；一键切换后端。</div>
+    </div>
+    <div class='metric'>
+      <div class='value'>3</div>
+      <div class='label'>条命令</div>
+      <div class='sub'>从 <code>git clone</code> 到第一个成品，本地离线完成。</div>
+    </div>
+  </section>
+
+  <!-- ============ 章节 ============ -->
+  <section class='chapters' data-od-id='chapters'>
+
+    <article class='chapter' data-od-id='chapter-01'>
+      <div class='head'>
+        <p class='num'>01</p>
+        <h2 class='title'>它是什么</h2>
+        <p class='lede'>一个面向你已信任的代理的本地优先设计工作室。</p>
+      </div>
+      <div class='body'>
+        <p>
+          Open Design 是 <strong>Anthropic 的 Claude Design 的开源替代品</strong>。它在你的笔记本电脑上运行。你的代理读取一个 <code>SKILL.md</code> 文件文件夹和一个 <code>DESIGN.md</code> 系统文件夹，然后生成真实文件——落地页、幻灯片、白皮书、单页、移动端原型、仪表盘。
+        </p>
+        <p>
+          技能提供行为。系统提供品味。适配器桥接代理。<strong>BYOK 尊重你的钱包。</strong>每个输出都是可移植的 HTML 或 Markdown——没有专有文件格式，没有供应商锁定。
+        </p>
+        <ul class='dash'>
+          <li>文件，而非不透明的提示词——每项技能都是一个 Markdown 文件夹。</li>
+          <li>确定性的视觉方向，而非随机生成。</li>
+          <li>沙箱化 iframe 预览，真实的 <code>cwd</code>，可导出的成品。</li>
+        </ul>
+        <div class='chapter-aside'>
+          <div class='a-label'>三条命令 · 30 秒</div>
+          <pre class='a-body'><span class="c"># 克隆、安装、启动本地守护进程。</span>
+git clone <span class="k">https://github.com/nexu-io/open-design</span>
+pnpm install
+pnpm tools-dev</pre>
+        </div>
+      </div>
+    </article>
+
+    <article class='chapter' data-od-id='chapter-02'>
+      <div class='head'>
+        <p class='num'>02</p>
+        <h2 class='title'>它的感受</h2>
+        <p class='lede'>编辑纪律，而非聊天窗口的即兴发挥。</p>
+      </div>
+      <div class='body'>
+        <p>
+          一个新项目始于一个 30 秒的问题表单：品牌、受众、规模、语言。代理在 OKLch 色空间中选择五种视觉方向之一，锁定字体堆栈，将成品写入磁盘。<strong>你可以阅读它触碰过的每一个文件。</strong>
+        </p>
+        <p>
+          每次迭代都在沙箱化的 iframe 预览中审阅，每个可编辑元素都带有注释模式锚点，这样你可以给出有针对性的反馈，而无需重述整份简报。重新运行是确定性的——相同的简报，相同的输出。
+        </p>
+        <p>
+          结果就是 <em class='tag standard'>看起来像 AI</em> 和 <em class='tag standard'>看起来像已发布</em> 之间的区别。<span class='tag brush'>按惯例每页一个笔刷标签</span>；其余部分保持纯色十六进制。
+        </p>
+      </div>
+    </article>
+
+    <article class='chapter' data-od-id='chapter-03'>
+      <div class='head'>
+        <p class='num'>03</p>
+        <h2 class='title'>下一步发布什么</h2>
+        <p class='lede'>2026 年第二季度——打包、多租户令牌、守护进程加固。</p>
+      </div>
+      <div class='body'>
+        <p>
+          路线图是公开的。我们现在正在推进的三条线索：
+        </p>
+        <ul class='dash'>
+          <li><strong>打包桌面构建</strong>——签名版 Mac、Windows NSIS、Linux AppImage，全部源自 <code>tools-pack</code>。</li>
+          <li><strong>多租户品牌令牌</strong>——一个运行的守护进程，多个租户；<code>OD_DATA_DIR</code> 和 <code>OD_MEDIA_CONFIG_DIR</code> 已打下基础。</li>
+          <li><strong>守护进程端成品持久化</strong>——每次渲染都是磁盘上的一个文件，位于 <code>.od/artifacts/</code> 下，带有稳定的 SHA，因此设计历史在每次代理重启后都能保留。</li>
+        </ul>
+        <p>
+          此列表中的任何内容都不需要付费计划。<strong>Open Design 将永远保持 Apache-2.0 许可</strong>；工作室通过销售品牌级设计系统来盈利，而非限制运行时功能。
+        </p>
+      </div>
+    </article>
+
+  </section>
+
+  <!-- ============ 页脚 ============ -->
+  <footer class='footer' data-od-id='footer'>
+    <div>
+      <h2 class='kicker'>Open <span class='ink'>Design.</span></h2>
+      <p class='colophon'>
+        在温暖纸张上设计并发布，来自柏林 · 开放 · 地球。Apache-2.0 许可，可用于任何用途，商业或非商业。
+      </p>
+    </div>
+    <div class='col'>
+      <h4>源码</h4>
+      <ul>
+        <li><a href='#'>github.com/nexu-io</a><small>/open-design</small></li>
+        <li><a href='#'>发布版本<small>v0.2.0 · MMXXVI</small></a></li>
+        <li><a href='#'>Issues<small>开放 · 23</small></a></li>
+      </ul>
+    </div>
+    <div class='col'>
+      <h4>技能</h4>
+      <ul>
+        <li><a href='#'>kami-landing<small>本页面</small></a></li>
+        <li><a href='#'>kami-deck<small>幻灯片伴侣</small></a></li>
+        <li><a href='#'>open-design-landing<small>品牌营销</small></a></li>
+      </ul>
+    </div>
+    <div class='col'>
+      <h4>工作室</h4>
+      <ul>
+        <li><a href='#'>宣言<small>v0.2.0 · 2.4k 字符</small></a></li>
+        <li><a href='#'>路线图<small>2026 年 Q2 / Q3</small></a></li>
+        <li><a href='#'>联系<small>提交一个 Issue</small></a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <div class='legal'>
+    <span><b>Open Design</b> · Apache-2.0 · MMXXVI</span>
+    <span>以 kami 排版 · 紙 · 纸 · 纸张优先</span>
+  </div>
+
+</main>
+</body>
+</html>