# @digdir/designsystemet 中文文档

规范地址：https://npmcn.com/package/%40digdir/designsystemet/

版本：1\.24\.0
npm 元数据更新时间：2026-11-09T12:15:58.702Z
中文译文更新时间：2026-11-12T07:57:26.728Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40digdir/designsystemet
原文对照：https://npmcn.com/package/%40digdir/designsystemet/?lang=original
项目主页：https://github.com/digdir/designsystemet/tree/main/packages/cli
源码仓库：https://github.com/digdir/designsystemet

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：487 kB，160 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：17 个
- 首次发布：2024-05-21T12:33:11.647Z
- 最新版本发布：2026-11-09T12:15:58.255Z
- 近 30 天下载量：14940（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：259（近 12 个月 103 个）

## 中文简介

用于设计系统的 CLI

## 安装

```sh
npm install @digdir/designsystemet
```

也可以使用：`pnpm add @digdir/designsystemet`、`yarn add @digdir/designsystemet`、`bun add @digdir/designsystemet`

## README

# @ digdir/ 设计系统

CLI 和用于设计系统的工具

使用 `--help` 用于可用命令和选项

读取设计系统 [读取](https://github.com/digdir/designsystemet) 要开始.

## 使用量

使用 `npx @digdir/designsystemet` 以 Designsystemet 为基础创建 CSS 供使用 [配置文件](https://npmcn.com/package/%40digdir/designsystemet/#readme-using-a-config-file)。它也可以创建类型声明和设计符号.

这使得您可以定义主题,包括自定义的颜色,字体家庭,以及边框辐射等. 我们建议使用 [设计系统主题构建器](https://theme.designsystemet.no/) 用于生成有效的配置.

| 选项 | 说明 |
| --- | --- |
| `-c, --config <path>` | 配置文件的路径( 自动检测) `designsystemet.config.json` 或者说 `designsystemet.config.jsonc`(中文(简体) ) |
| `--dry` | 干运行 - 没有写入文件 |
| `--verbose` | 启用动词输出 |
| `--skip-check` | 跳过迁移检查 |
| `-y, --yes` | 跳过用户提示 |

> ⚠️ **被否决** ⚠️  
> 这个 `tokens create` 财务报告和审定财务报表 `tokens build` 命令被贬低,并将在未来释放中被删除. 使用 `designsystemet` 带有配置文件.

#### 更新令牌和 CSS

当发布新版本的 CLI 时, 或您已经做了更改, 重新运行 `npx @digdir/designsystemet`。 。 。 . 设定 `cleanDir: true` 在创建新目录之前删除其目录中的文件,从而删除已贬值或不需要的文件。 没错 `false` 默认。 由( ) 创建的已清理目录内的目录`tokensDir`)),或属于输出 `cleanDir: false`,保留。 在删除任何内容之前,如果目录会清理包含配置文件,是其中之一,是同义链接,或者在通往其中一个或另一个输出的路上有同义链接,则CLI会以出错而停止. 共通链接被删除,从未被跟踪.

> ⚠️ **警告** ⚠️  
> 本工具创建的设计符号被视为执行细节,是主题 随时改变,而不被视为突破性的改变。 使您的自定义通过 在那里,你可以配置。 您可以直接编辑设计符号, 以改变配置中没有的内容 支持,请参见 [与 Tokens 工作室同步设计托肯斯](https://designsystemet.no/en/fundamentals/figma/tokens-studio), (中文(简体) ), 但您要冒着风险这样做:您的编辑可能需要被重编或者在升级时进行调整.
> 
> 该工具所创建的CSS文件被视作构建文物. 他们应该 **没有** 为: 直接编辑。 虽然CSS不会出乎意料地改变,但任何变量都可能会被添加 时间.
> 
> 因此,在更新库时,必须经常重新运行此命令. 创建设计符再次取代任何直接编辑符,并再次创建 CSS 替换任何直接编辑.

### 使用配置文件

CLI会自动发现 a `designsystemet.config.json` 或者说 `designsystemet.config.jsonc` 当前目录中的文件。 你也可以使用这个 `--config <path>` 选项,以提供不同的配置名称和位置.

两者 `.json` 财务报告和审定财务报表 `.jsonc` 文件可能包含注释和后缀逗号(JSONC).

要启动,请使用此模板作为 `designsystemet.config.json` 文件 :

```jsonc
{
  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
}
```

在支持JSON Schema的编辑中 `$schema` 然后会给您的编辑器提示文件的结构.

#### 最小配置示例

```jsonc
{
  "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
  "themes": {
    "theme": {
      "colors": {
        "accent": "#1E98F5",
        "neutral": "#1E2B3C",
      },
      "borderRadius": 4
    }
  }
}
```

要生成 CSS, 您可以运行 :

```
npx @digdir/designsystemet
```

创建 CSS 在 `designsystemet`,相对于配置文件,直接来自主题。 添加 `"types"` 改为 `output` 还创建类型声明,以及 `"design-tokens"` 同时保存设计符号.

#### 产出

使用 `output` 选择创建的内容和地点。 每个项目都是一种输出类型(`"design-tokens"`, (中文(简体) ), `"css"` 或者说 `"types"`使用默认设置,或对象:

```jsonc
{
  "output": [
    // defaults: dir "designsystemet/design-tokens", cleanDir false
    { "type": "design-tokens", "dir": "../path/to/design-tokens" },
    // defaults: dir "designsystemet", tokensDir from the design-tokens output, cleanDir false, tailwind false
    { "type": "css", "dir": "../path/to/css", "tokensDir": "../path/to/design-tokens" },
    // defaults: dir "designsystemet", tokensDir from the design-tokens output, cleanDir false
    { "type": "types", "dir": "../path/to/types", "tokensDir": "../path/to/design-tokens" },
  ],
}
```

设计符号总是先被创建,再被CSS创建,再被打入类型. 若为 `tokensDir` 未设置, CSS 和类型由 `dir` 会 议 日 程 和 议 程 `design-tokens` 输出.

这个 `types` 输出写入 `types.d.ts` (和被堕落者) `colors.d.ts`),增加 `@digdir/designsystemet-types` 带有主题的颜色名称.

没有 `design-tokens` 输出或 `tokensDir`, CSS和类型直接由主题创建,不写任何设计符号. 默认, `"output": ["css"]`,只创建 CSS 这样.

`themes` 需要的只是根据主题产生的产出。 要从现有设计符号中构建 CSS 和类型, 请省去 `themes` 设置 `tokensDir`数字 :

```jsonc
{
  "output": [
    { "type": "css", "tokensDir": "./design-tokens" },
    { "type": "types", "tokensDir": "./design-tokens" },
  ],
}
```

设定 `tailwind` 编辑 `css` 输出到 `"v4"` 或者说 `"v3"` 同时创建 `<theme>.tailwind.css` 尾风版本。 默认`false`) 没有创建 Tailwind 文件 .

这个 `outDir` 财务报告和审定财务报表 `clean` 字段为 `output`。 CLI 将自动迁移您的配置文件 .

#### 复杂配置示例

看看这个 `*.config.json` 下方的文件 `packages/cli` 在 Github repo 中,用于更复杂的示例.

#### 从已存在的令牌创建配置

您可以获得一个最小的配置文件, 意思是没有覆盖, 使用以下命令从现有的设计符中生成 :

```sh
npx @digdir/designsystemet generate-config-from-tokens --dir <path to design tokens> --out <path to config file>
```

`--out` 默认为 `designsystemet.config.json`。生成的配置用途 `output`,与配置文件相对的被写入设计符目录。 CSS 和类型保存于 `design-tokens-build` 在目录中,命令从何处运行 `tokens build` 救了他们.

## 常见问题

### @digdir/designsystemet 是什么？

用于设计系统的 CLI

### 如何安装 @digdir/designsystemet？

在项目目录运行 npm install @digdir/designsystemet，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 designsystemet，可以用 npx designsystemet 直接运行。

### @digdir/designsystemet 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @digdir/designsystemet 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @digdir/designsystemet 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @digdir/designsystemet 可以商用吗？

@digdir/designsystemet 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @digdir/designsystemet 的下载量有多少？

根据 npm 官方下载统计，@digdir/designsystemet 在 2026/10/12 – 2026/11/10 这 30 天内被下载 14,940 次，日均约 498 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @digdir/designsystemet 还在维护吗？

最新版本 1\.24\.0 发布于 2026/11/09（2 天前）；至今共发布 259 个版本，其中过去 12 个月发布了 103 个；首次发布于 2024/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。