kami-landing

kami-landing

使用 kami（紙／纸） 设计系统制作单页文档。 其美学借鉴了编辑出版物、技术白皮书和老式打字机信件——目标是优质内容，配上优质纸张，而非现代应用 UI。

设计系统的权威来源： design-systems/kami/DESIGN.md。 发布前请阅读。设计令牌、字体规则、“十项不变量”和禁用颜色都列于其中。

你将获得什么

一个自包含的 HTML 文件，其中包含：

• 暖调羊皮纸画布（#f5f4ed）——切勿使用 #ffffff。
• 单一色彩强调——墨水蓝（#1B365D），用于章节编号、标题中的强调词、宣言的左侧竖线和指标数值。其他任何位置的墨水蓝覆盖面积都不得超过文档表面积的 5%。
• 层级排版使用单一字重的衬线字体（500）——Charter（EN）、TsangerJinKai02 / Source Han Serif（CN）或 YuMincho（JA），由 language 参数决定。全篇不得使用斜体。
• 紧凑的印刷节奏——行高为 1.10–1.55，字间距按语言设置（EN 为 0，CN 为 0.35px，JA 为 0.02em）。
• 数字使用 font-variant-numeric: tabular-nums，确保指标列和分页数字整齐对齐。
• 通过 1px 描边和轻柔阴影营造层次（0 4px 24px rgba(0,0,0,0.05)）。不得使用生硬的投影、拟态风格或 backdrop-filter 模糊效果。
• 标签填充使用纯十六进制颜色（例如 #E4ECF5），不得使用 rgba()——打印渲染器会对半透明标签重复着色。
• 适配 1280 / 980 / 768 / 560。

页面结构

1. Eyebrow row     — locale switcher · edition · version (12px sans uppercase)
2. Hero            — display headline (96–106px serif 500), tagline (21px),
                     three hero-token chips (paper-tinted)
3. Manifesto       — pull paragraph in serif 400, 20px, 1.65 LH, with
                     ink-blue left-rule and signature footer
4. Metrics row     — 3-6 cells: value (24px serif 500 ink-blue, tabular-nums),
                     label (12px serif 500 olive)
5. Chapters        — numbered (`01`, `02`, …) ink-blue serif 500 14px,
                     section title 28-32px, body 14-15px
6. Footer          — kicker word (mega serif 500), license · year · contact,
                     three-column site index in 12px serif 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	正文 letter-spacing 为 0.35px
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	另将 --olive 覆盖为 #4d4c48（YuMincho 笔画较细）

允许行内混排不同文字系统——浏览器会通过逐字形回退链处理。不要在同一条 font-family 声明中串联全部三种字体系列；这会削弱字体个性。

3. 编写 index.html

输出一个 CSS 全部内联的单文件。参照 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 个词；CJK ≤ 8 个字符。
• 在 768px 和 560px 宽度下，布局会折叠为单列，且不出现 水平滚动条。

此技能中的文件

design-templates/kami-landing/
├── SKILL.md                 # this contract
├── README.md                # human quick-start
└── example.html             # canonical Open Design rendering

边界

• 不要臆造新颜色或字体。kami 调色板是固定的；如果需求指定品牌色，请提出异议，或将品牌色作为单个 .tag.brush 强调色来呈现。
• 不要引入第二种强调色。选择墨蓝色，或者不使用强调色。
• 不要在同一声明中混用全部三种字体组；选择主要语言，在 :root 上覆盖 --serif，并让浏览器通过逐字形回退处理混合文字内容。
• 不要对标签填充使用 rgba()——打印渲染器会对带透明度的标签重复绘制。请使用 design-systems/kami/DESIGN.md §2 表格中的预混合纯色十六进制值。
• 不要为动画添加 JavaScript。页面是纸张，不是应用——动效应来自读者滚动。

另请参阅

• design-systems/kami/DESIGN.md — 完整的设计令牌规范。
• design-templates/kami-deck/ — 同类技能，可使用相同的 kami 风格制作 幻灯片。
• 上游：tw93/kami — 原始的 Claude 技能（MIT），设计系统以此为基础进行适配。