设计系统packages/design

design 能力面

把品牌、tokens、icons、theme、UI primitive 和设计同步组织成一条供应链。

打开文档

稳定性: 稳定
作用域: 全局
边界: packages/design
归属: @nebutra/design

designpackages/design

设计系统

neutral-2

neutral-7

neutral-12

blue-9

cyan-9

brand-gradient

Aa Heading

Body copy renders the rhythm.

Small body for secondary context.

Caption · the smallest step

Tokens 数

242

组件

27

覆盖率

93%

同步状态

OK

packages/design设计供应链

使用方式theme.css

css

theme.css

1@import "@nebutra/tokens/styles.css";
2
3.cta {
4  background: var(--brand-gradient);
5  color: var(--neutral-1);
6  border-radius: var(--radius-md);
7  padding: var(--space-3) var(--space-5);
8}

brand · tokensdesign

blue
cyan
grad
ok
warn
err

AaAaAa

oklch · DTCG · Style Dictionary

brand能力包

brand

品牌原语 — 颜色定义、渐变 token、动效语言;为源数据,不被 app 运行时直接引用。

pull1.2s · 47 tokens updated

12m ago

pushdry-run · 3 token diffs

1h ago

provider-agnostic · CI workflow

design-sync能力包

design-sync

Provider 无关的设计工具同步 — Figma / Penpot / 仅 Git;双向同步 token,默认 dry-run 安全。

查看

tokens.jsonDTCG v0.7

{
  "color.brand.primary": {
    "$value": "#0033FE",
    "$type": "color"
  }
}

brand.primary
brand.accent
status.success

Style Dictionary 4multi-platform output

design-tokens能力包

design-tokens

W3C DTCG $value/$type 规范的 token 文件 + Style Dictionary 4 流水线;输出 CSS 变量、JS module、Figma 同步源。

查看

541 icons · tree-shakable

@nebutra/icons · Geist source

icons能力包

icons

541 个 Geist icon,以 tree-shakable TSX 组件分发;单字重 + 光学尺寸,与 Vercel / v0 视觉对齐。

查看

theme能力包

theme

纯 CSS 多 theme 引擎 — 六套 oklch preset,通过 data-theme 切换;关键路径无 JS。

runtime CSS vars · @import "@nebutra/tokens/styles.css"

tokens能力包

tokens

运行时 CSS 变量 + ThemeProvider — 所有 app 颜色 / 间距 / radius 的单一数据源;在 globals.css 中 @import。

Primitives + framer-motion, themed by tokens.

@nebutra/ui · Storybook covered

ui能力包

ui

主组件库 — Lobe UI 重导出 + 自研原语 + layout + framer-motion;唯一推荐 import 来源。

查看

同能力域 · 设计系统查看能力域