The foundations and surface
behind every Zi UI product.

Where this came from

它从哪来

On April 17, 2026, Anthropic launched Claude Design — an AI tool that reads your codebase and brand, and generates a full design system as a browseable folder. No TSX. No framework. Just tokens.css, components.css, and a set of HTML proof pages.

2026 年 4 月 17 日，Anthropic 发布了 Claude Design——一个读你 codebase 和品牌资料、反向生成完整设计系统的 AI 工具。输出是一个可浏览的文件夹：没有 TSX、没有框架，就是 tokens.css、components.css，加一组 HTML 证明页。

Staring at that folder, one thing became obvious: the "design system" a Claude Design project ships is not a React component library. It's a pure-CSS truth source with a documentation site wrapped around it. This repo packages that idea as a reusable, distributable agent skill.

盯着那份文件夹看，有一件事忽然清楚：Claude Design 输出的"设计系统"不是一个 React 组件库，而是一份纯 CSS 真相源加一个包裹它的文档站。这个仓库把这个想法打包成了可复用、可分发的 agent skill。

The architecture in one sentence

一句话讲架构

One truth source, many downstream consumers.

一份真相源，多个下游消费者。

The DNA is assets/tokens.css, organized into two layers: primitives (--palette-blue-500, physical values) and semantics (--color-accent, meaning). Components only consume the semantic layer — never the palette. components.css projects semantic tokens into classes. Everything else is a downstream consumer.

DNA 是 assets/tokens.css，分为两层：primitive（--palette-blue-500，物理值）和 semantic（--color-accent，语义意义）。组件只消费 semantic 层——永远不直接引用 palette。components.css 把 semantic token 投影成类。仓库里其他一切都是下游消费者。

Three orthogonal axes (data-brand, data-theme, data-contrast) compose freely on <html>. Swap the semantic map to rebrand without touching a component; enable high-contrast for WCAG AAA; stack dark mode on top. That's not a convenience — it's the architecture itself.

三个正交轴（data-brand、data-theme、data-contrast）在 <html> 上自由组合。改 semantic 层换品牌而不动组件；开高对比度过 WCAG AAA；叠上 dark mode。这不是"便利"——这就是架构本身。