kami-landing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

kami-landing

Produce a single-page document in the kami (紙 / 纸) design system. The aesthetic borrows from editorial print, technical white papers, and old typewritten correspondence — the goal is good content on good paper, not modern app UI.

Design system source of truth:
design-systems/kami/DESIGN.md
. Read it before shipping. Tokens, type rules, the "ten invariants", and forbidden colors all live there.

生成符合**kami（紙 / 纸）**设计系统的单页文档。该设计风格借鉴了印刷社论、技术白皮书和老式打字机信函的风格——核心目标是「优质纸张承载优质内容」，而非「现代应用UI」。

设计系统权威来源：
design-systems/kami/DESIGN.md
。交付前请务必阅读。设计令牌、字体规则、「十项不变原则」以及禁用颜色都在此文档中。

What you get

你将获得

A single self-contained HTML file with:

Warm parchment canvas (
```
#f5f4ed
```
) — never
```
#ffffff
```
.
Single chromatic accent — ink-blue (
```
#1B365D
```
), used on the section number, the headline accent word, the left rule of the manifesto, and the metric values. Anywhere else, ink-blue must cover ≤ 5% of the document surface area.
Serif at one weight (500) for hierarchy — Charter (EN), TsangerJinKai02 / Source Han Serif (CN), or YuMincho (JA), selected by the
```
language
```
parameter. No italic anywhere.
Tight print rhythm — line-heights 1.10–1.55, letter-spacing per language (0 for EN, 0.35px for CN, 0.02em for JA).
Numeric stacks set in
font-variant-numeric: tabular-nums
so metric columns and pagination digits sit cleanly aligned.
Depth via 1px rings + whisper shadows (
```
0 4px 24px rgba(0,0,0,0.05)
```
). No hard drop shadows, no neumorphism, no backdrop-filter blurs.
Tag fills as solid hex (e.g.
```
#E4ECF5
```
), never
```
rgba()
```
— print renderers double-paint alpha tags.
Responsive at 1280 / 980 / 768 / 560.

一个包含所有内容的独立HTML文件，具备以下特性：

暖调羊皮纸底色（
```
#f5f4ed
```
）——绝对不能使用
```
#ffffff
```
。
单一彩色强调色——墨蓝色（
```
#1B365D
```
），仅用于章节编号、标题强调词、宣言左侧分隔线以及指标数值。除此之外，墨蓝色在文档中的占比必须≤5%。
单一字重（500）衬线字体构建层级——根据
```
language
```
参数选择Charter（英文）、TsangerJinKai02 / Source Han Serif（中文）或YuMincho（日文）。全程禁用斜体。
紧凑的印刷排版节奏——行高1.10–1.55，根据语言设置字间距（英文0，中文0.35px，日文0.02em）。
数字堆叠采用
font-variant-numeric: tabular-nums
，确保指标列和页码数字对齐整齐。
通过1px边框+柔和阴影营造层次感（
```
0 4px 24px rgba(0,0,0,0.05)
```
）。禁用生硬投影、新拟态风格和背景模糊效果。
标签填充使用纯色十六进制值（例如
```
#E4ECF5
```
），绝对不能使用
```
rgba()
```
——印刷渲染器会重复绘制带透明度的标签。
响应式适配，支持1280 / 980 / 768 / 560像素断点。

Page structure

页面结构

text

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

text

1. 顶部导航栏     — 语言切换器 · 版本 · 编号（12px无衬线大写字体）
2. 英雄区         — 展示级标题（96–106px衬线字体500字重）、标语（21px）、
                     三个英雄令牌芯片（羊皮纸色调）
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字重

Workflow contract

工作流程规范

1. Gather brand brief

1. 收集品牌需求

Use

AskQuestion

(or equivalent) to collect the brand brief in chunks. Don't dump the whole input list on the user; ask in two rounds:

Identity round — name, tagline, location, edition / version, primary URL, dominant language.
Content round — manifesto paragraph + signature, 3-6 metric tiles, 3-5 chapter (title + lede + body) entries.

使用

AskQuestion

（或类似工具）分阶段收集品牌需求。不要一次性向用户抛出所有问题，分两轮询问：

品牌识别信息轮——名称、标语、地域、版本/编号、主URL、主导语言。
内容信息轮——宣言段落+签名、3-6个指标卡片、3-5个章节（标题+导语+正文）内容。

2. Pick the language stack

2. 选择语言字体栈

The

language

parameter controls which

--serif

stack is set on

:root

. Pick based on the dominant language of the manifesto and chapter body copy:

`language`	`--serif`	Notes
`en`	Charter, Georgia, Palatino, Times New Roman, serif	default
`zh-CN`	TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia	letter-spacing 0.35px on body
`ja`	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	also override `--olive` to `#4d4c48` (YuMincho strokes are thinner)

Inline mixed-script content is fine — the browser per-glyph fallback chain handles it. Do not chain all three families inside one

font-family

declaration; that dilutes character.

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. Write

index.html

3. 编写

index.html

Output a single file with all CSS inline. Mirror the structure of

example.html

and use only the tokens from

design-systems/kami/DESIGN.md

. Do not invent new colors, weights, or font families.

Component primitives the agent can drop in (all defined in the example's

<style>

block):

```
.eyebrow
```
,
```
.label
```
— sans-serif overlines
```
.metric
```
— value + label vertical pair
```
.section-num
```
+
```
.section-title
```
+
```
.section-lede
```
```
.tag.standard
```
,
```
.tag.brush
```
— solid-hex tags (one brush max per page)
```
.quote
```
— left-rule serif 500 quote
```
ul.dash
```
— en-dash bullets in ink-blue
```
.code
```
— ivory-bg, 1px-border code block
```
.footer-kicker
```
— mega serif 500 word

Tag every editable element with

data-od-id="<unique-slug>"

so the host app's comment mode can target it.

输出一个内联所有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="<唯一标识>"

属性，以便宿主应用的评论模式可以精准定位。

4. Self-check before delivering

4. 交付前自检

Page background is parchment (
```
#f5f4ed
```
), never
```
#ffffff
```
.
Ink-blue (
```
#1B365D
```
) covers ≤ 5% of visible surface — count section numbers, the manifesto rule, the metric values, the headline accent. Total ≤ 5%.
All grays are warm (R ≈ G > B). No
```
slate-*
```
, no
```
#f3f4f6
```
.
Serif weight stays at 500 — no
```
font-weight: 700
```
or
```
900
```
anywhere on serif text.
No
```
font-style: italic
```
anywhere. Emphasis swaps to ink-blue color or a
```
.tag
```
instead.
All numeric stacks (metric values, pagination, dates, financial figures) carry
```
font-variant-numeric: tabular-nums
```
.
All tag fills are solid hex (e.g.
```
#E4ECF5
```
), never
```
rgba()
```
.
Shadows: at most a
```
1px
```
ring or a
```
0 4px 24px rgba(0,0,0,0.05)
```
whisper. No hard drop shadows.
Headline ≤ 6 words at display size; CJK ≤ 8 characters.
At 768px and 560px the layout collapses to one column without horizontal scroll.

页面背景为羊皮纸色（
```
#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断点处，布局自动切换为单列，无横向滚动。

Files in this skill

本技能包含的文件

text

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

text

skills/kami-landing/
├── SKILL.md                 # 本规范文档
├── README.md                # 快速入门指南
└── example.html             # 标准Open Design渲染示例

Boundaries

边界限制

Do not invent new colors or typefaces. The kami palette is fixed; if a brief demands a brand color, push back or render the brand color as a single
```
.tag.brush
```
accent.
Do not introduce a second accent color. Pick ink-blue or pick nothing.
Do not mix all three font stacks in one declaration; pick the dominant language, override
```
--serif
```
on
```
:root
```
, and let the browser per-glyph fallback resolve mixed-script inline content.
Do not use
```
rgba()
```
for tag fills — print renderers double-paint alpha tags. Use the pre-blended solid hex from the table in
```
design-systems/kami/DESIGN.md
```
§2.
Do not add JavaScript for animation. The page is paper, not an app — motion belongs to the reader scrolling.

绝对不要发明新颜色或字体。kami调色板是固定的；如果需求中要求品牌色，要么拒绝，要么将品牌色作为单个
```
.tag.brush
```
强调色使用。
绝对不要引入第二种强调色。要么选墨蓝色，要么不使用强调色。
绝对不要在一个声明中混合三个字体栈；选择主导语言，在
```
:root
```
上覆盖
```
--serif
```
，让浏览器的逐字形回退机制处理行内混合脚本内容。
绝对不要为标签填充使用
```
rgba()
```
——印刷渲染器会重复绘制带透明度的标签。使用
```
design-systems/kami/DESIGN.md
```
第2节表格中预混合的纯色十六进制值。
绝对不要添加动画JavaScript。页面是「纸张」，不是应用——动态效果只来自读者的滚动操作。

kami-landing

Original

Translation

kami-landing

kami-landing

What you get

你将获得

Page structure

页面结构

Workflow contract

工作流程规范

1. Gather brand brief

1. 收集品牌需求

2. Pick the language stack

2. 选择语言字体栈

3. Write
`index.html`

3. 编写
`index.html`

4. Self-check before delivering

4. 交付前自检

Files in this skill

本技能包含的文件

Boundaries

边界限制

See also

相关链接

kami-landing

Original

Translation

kami-landing

kami-landing

What you get

你将获得

Page structure

页面结构

Workflow contract

工作流程规范

1. Gather brand brief

1. 收集品牌需求

2. Pick the language stack

2. 选择语言字体栈

3. Write index.html

3. 编写index.html

4. Self-check before delivering

4. 交付前自检

Files in this skill

本技能包含的文件

Boundaries

边界限制

See also

相关链接

3. Write
`index.html`

3. 编写
`index.html`