ZZM · V4 · 纸 墨 朱
一块材料切出来的界面
赵子民全部产品共用的设计系统。三种颜色、一把 8pt 梯子、一个「光从正上方来」的光照模型——每个令牌和组件都同时有人读版和机读版。
免费会员拓展
以上全部是 zzm.css 的真实渲染 · 悬停、按下试试
给 Agent 的一行
在 Cursor、Claude Code 或任何能联网的工具里，把下面这个地址交给它，说「按这个设计系统做」。它会从目录读到每一页的 Markdown 版本，包括令牌、铁律和可以直接粘贴的代码。
Agent 入口
https://ui.zhaozimin.com/llms.txt写静态页时，一行引入全部质感，然后在根节点加上作用域类名：
静态页
<link rel="stylesheet" href="https://ui.zhaozimin.com/zzm.css">
<body class="zzm-v4">
<button class="zzm-btn zzm-btn--primary">墨键 · 主操作</button>
</body>从这里开始
这套系统相信什么
- 一屏一枚朱印。 朱砂红只出现一次，永远标「你在这里 / 下一步」。红是导航信号，不是装饰。
- 圆是徽章，方角是控件。 文字按钮一律圆角矩形；999 胶囊只留给不可点的徽章。看形状就知道能不能点。
- 一个光源。 光从正上方来，每个控件都是一枚真实的键。阴影只从质感类取，组件里不许各写各的光。
- 一把梯子。 间距、高度、行高、圆角都从 4 的倍数里取，不发明数字。整站看起来才像一块材料切出来的。
- 留白即上手。 能收进次级入口的，绝不摆在主动线上。
完整说明见设计原则。
如果你是 Agent
- 先读 llms.txt 拿目录，需要全文时读 llms-full.txt。
- 引入 zzm.css，根节点加
class="zzm-v4"。不加这个类，样式一点都不生效。 - 按钮用
.zzm-btn家族，卡片用.zzm-card/.zzm-cardlink，输入框用.zzm-input；颜色只用var(--zzm-*)。 - 不要自己写
box-shadow，不要把按钮做成胶囊，不要引入网络字体。 - 每个组件页都有
.md版本，里面的 HTML 是构建时渲染出来的真实标记，可以原样粘贴。
本站同步自 edu.zhaozimin v23.5.1（086937d），那是赵子民在线课程站的生产代码。