内容
作者只写 Markdown 和标准 HTML。渲染层负责排版、代码、表格和提示块的呈现，无须作者了解组件类名。
渲染参考
每一条标记的输入与代表性 HTML 结构并排放，能看见这类结构在文心中如何呈现；它不是某一渲染器的兼容性证明。
三方契约
内容呈现出问题时，先判断是谁的责任。这张表就是分界线。
| 层 | 负责什么 | 不负责什么 |
|---|---|---|
| 作者 | 写标准 Markdown，写有意义的 alt 文本和标题层级。 | 不写视觉类名，不复制组件结构，不用 HTML 模拟排版。 |
| 渲染器 | 生成标准 HTML、标题 id、图片与表格语义。 | 不伪造图注、链接目的或内容状态。 |
| 文心样式 | 提供 .wx-md 与全部裸元素的呈现。 | 不改变正文语义，也不覆盖真正组件的类名。 |
两层，两种选择器策略
同样是代码块，kit/components/code.css 管你自己写的 <pre class="wx-code">，
kit/markdown/syntax.css 管渲染器吐出的 .wx-md pre > code。
样子一样，选择器策略不同——前者的类名由你控制，后者不是。
把两者混为一谈是设计系统开始腐烂的地方，所以它们分属两个目录、两个 @layer。
判据
问一句：这段 HTML 的类名由我控制吗？不由——它属于内容层。
最短用法
<link rel="stylesheet" href="kit/index.css">
<article class="wx-md wx-md--measured" lang="zh-CN">
<!-- Markdown 渲染器的输出原样放进来 -->
</article>wx-md 提供正文节奏，wx-md--measured 限制行长（中文 36em，西文 68ch）。
两者都不要求作者改动一个字。
Hugo、remark/rehype、markdown-it、VitePress 和 Docusaurus 都可以接入；
差异不只在锚点和提示块，还包括图片与图注、外链告知、宽表格的可聚焦滚动等输出结构。
样式层不绑定某一种工具；kit/markdown/hugo/ 下有一份 Hugo 渲染钩子作为参考实现。
没有 wx-md 的时候
裸 HTML——完全没有类名的页面——也必须是可读的。这是 kit/base/ 的职责判据：
没有它，裸 <h1> 会不对吗？
61 个需要样式的元素现在全部覆盖，包括浏览器默认值与这套语言直接冲突的那些：
<mark> 的亮黄、<fieldset> 的 2px 凹槽边框、
<progress> 的平台蓝。