@plasma / vibedesign-v6

完整的设计系统生成的原子设计，版本 2.1.1. 令牌、原子、分子、生物体和模板——从包根目录导入； 永远不要在消费者代码中硬编码视觉值。

安装

npm install @plasma/vibedesign-v6

进口

import { Button, Input } from "@plasma/vibedesign-v6";

CSS（设计符号、顺风实用程序和设计系统字体）加载 （from谷歌Fonts）被绑定到包入口点并注入 不需要单独导入CSS。

全局CSS兼容性

包的实用程序类（间距、颜色、边界半径等）是 编译, unlayered CSS规则。因此，它们优于标准重置 作为 * { margin: 0; padding: 0; box-sizing: border-box } 按正常特异性 (类选择器 0-1-0 >通用选择器 0-0-0）. 没有特殊的设置 这是一个典型的Vite / Create-React-App / Next.js项目所需要的。

唯一的例外是 身体的字体． 设计系统注入 body { font-family: var(--font-body) } 内部 @layer base哪一个？ unlayered body { font-family: ... } 在你自己的CSS中的规则将被覆盖。 删除该覆盖，或将其替换为设计系统变量：

body {
  font-family: var(--font-body); /* use the design system's configured font */
}