纯 utility 堆 class
每个按钮、卡片、表单都要写十几段 class；页面一多，HTML 又丑又难维护。
痛点
一行输入框
能写 22 个 class
零构建中文 CSS 底子 — 用语义化 pvs-* 写组件，不必每次堆 utility，也不必背一层又一层的栅格口诀。
元舟开源 · MIT · 44 组件 · 中文文档
Why PivCSS
每个按钮、卡片、表单都要写十几段 class；页面一多，HTML 又丑又难维护。
一行输入框
能写 22 个 class
后台、门户、落地页 — 同样的按钮样式、栅格口诀、暗色变量，反复复制粘贴。
换项目
又从 btn 样式抄起
pvs-btn pvs-btn--primary 可读、可主题、可 recipe 裁剪 — 写更少，建更快。
同样 UI
11 个 class 搞定
Compare
右边 UI 不变 — 只换写法：纯 utility 堆 class，还是 pvs-* 语义组件。
点开关对比生成物
改 --pvs-primary 即可 — 明暗模式同一套令牌，recipe 可再裁剪体积。
点色盘即时预览右侧组件（仅本页演示，不写入全局主题）。
主题色已切换
Explore
快速开始
<link rel="stylesheet" href="/assets/pivcss.css" />
<script src="/assets/pivcss.min.js" defer></script>
<style>:root { --pvs-primary: #2563eb; }</style>44 组件 · 令牌换肤 · 中文文档。下一步打开 文档站。