# @filipgutica/design-system 中文文档

规范地址：https://npmcn.com/package/%40filipgutica/design-system/

版本：1\.0\.15
npm 元数据更新时间：2026-11-13T18:27:36.782Z
中文译文更新时间：2026-11-14T17:56:58.608Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40filipgutica/design-system
原文对照：https://npmcn.com/package/%40filipgutica/design-system/?lang=original
项目主页：https://github.com/filipgutica/design-system#readme
源码仓库：https://github.com/filipgutica/design-system

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

- 包体积（解压后）：777 kB，39 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12
- 运行依赖：0 个
- 首次发布：2026-11-09T19:32:11.267Z
- 最新版本发布：2026-11-13T18:27:36.403Z
- 近 30 天下载量：4450（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 23 个）

## 中文简介

Filip的任何框架的设计语言、标志和组件目录

## 安装

```sh
npm install @filipgutica/design-system
```

也可以使用：`pnpm add @filipgutica/design-system`、`yarn add @filipgutica/design-system`、`bun add @filipgutica/design-system`

## README

# 设计系统

Filip用于任意框架的设计语言: spec,指使,组件目录,以及编辑主题. 它作为npm的包裹 `@filipgutica/design-system`。 。 。 .

-   **探员** 起来 `language/` 时间 `~/design-system` 通过 filip-stack 主机配置,或从软件包复制; 站点 [探员](https://filipgutica.github.io/design-system/#agents) 两者都有.
-   **Vue 应用程序** 可使用 [`@filipgutica/ui`](https://github.com/filipgutica/ui),一个基于这个设计系统的Vue组件库.
-   **站点 :** [https://filipgutica.github.io/design-system/ (中文(简体) )](https://filipgutica.github.io/design-system/) 拥有概览、基础和组件页面,以及 `index.json` 财务报告和审定财务报表 `llms.txt` 对特工.

## 目录

| 路径 | 它所持有的 |
| --- | --- |
| `language/` | 有效载荷: `DESIGN.md`, (中文(简体) ), `components.md`, (中文(简体) ), `decisions.md`, (中文(简体) ), `visualizations.md`, (中文(简体) ), `tokens.css`,目录(`components.html`),示例页面,可视化帮助器,以及Graphite Indigo编辑器主题 |
| `tokens/core.json`, (中文(简体) ), `tokens/themes/*.json` | 象征价值,一个价值存在的唯一地方,以及每个象征的角色. Core 持有每个符;每个主题文件只持有它的名称,一个音符,它的发音对和可选字体 |
| `scripts/build-tokens.mjs` | 符号生成器: 写 `language/tokens.css` 财务报告和审定财务报表 `dist/` |
| `scripts/build-site.mjs` | 网站建设:写道: `site/` gitHub 页面从 `components.html`,标志,和 `package.json` |
| `dist/` | 生成主题文件, JSON, 和 JavaScript |
| `fonts/` | IBM Plex 拉丁语 `woff2` 文档, `fonts.css`及其海外资产管制局许可证 |
| `tests/` | 有效载荷、标志和场地建造的警卫测试、反应烟雾测试以及目录和已建成场地的行为测试 |

要更改一个值, 请编辑 JSON 并运行 `pnpm tokens:build`。 。 。 . `pnpm tokens:check` 当生成的文件 stale 或者一个符号没有作用时失败 .

`pnpm site:build` 将网站写入 `site/`。它从最新版本读取 `ds-v*` 标签,所以它需要 标签在离职.

## 安装

```sh
npm install @filipgutica/design-system
```

| 导入 | 这是什么 |
| --- | --- |
| `@filipgutica/design-system/tokens.css` | 所证相相相. 暗模式随之而来 `prefers-color-scheme`; 设置 `data-theme="light"` 或者说 `"dark"` 打开 `<html>` 以覆盖它. |
| `@filipgutica/design-system/themes/*.css` | 主题的身份输入( 色相和字体) : `graphite-indigo` (默认, 已经存在) `tokens.css`, (中文(简体) ), `mauve`,或 `pine`后装入一个 `tokens.css`打开 `:root`。 。 。 . |
| `@filipgutica/design-system/fonts.css` | IBM Plex Sans和莫诺. |
| `@filipgutica/design-system` | `tokens` (每个主题和模式的解析值)和 `cssVar(name)`,有类型. |
| `@filipgutica/design-system/tokens.json` | 解析值为 JSON . |
| `@filipgutica/design-system/language/*` | 光谱、目录和实例页. |

在反应应用程序中,导入 `tokens.css` 财务报告和审定财务报表 `fonts.css` 在条目中写一次 `var(--color-text)` 样式,或 `cssVar('color-text')` 在类型脚本中. `tests/react-smoke/` 是一个实例.

## 开发

```sh
corepack enable
pnpm install --frozen-lockfile
pnpm verify
```

`pnpm verify` 检查生成的文件,运行测试,反应烟雾测试,以及目录测试(查找、快捷键、位置、抽屉、溢出和轴),然后 `pnpm pack --dry-run` 财务报告和审定财务报表 `publint`。浏览器测试需要铬: `pnpm exec playwright install chromium`。 。 。 .

## 释放

语义出版 `main` 与npm出处。 发布会保持1.0.x,而设计系统没有外部用户([决定d](https://npmcn.com/package/%40filipgutica/design-system/language/decisions.md),版本中:

-   任何释放行为,例如: `fix`, (中文(简体) ), `feat`,或中断更改,释放补丁.
-   释放注释中只在其承诺消息中指定中断更改 `!` 类型或一个类型之后 `BREAKING CHANGE:` 或者说 `BREAKING-CHANGE:` 脚指. 把它放在那里;一个标记只在PR正文中释放出一个补丁,但没有到达注释.
-   `build`, (中文(简体) ), `chore`, (中文(简体) ), `docs`, (中文(简体) ), `test`,类似类型则不释放任何东西,除非该承诺或其公关标志着突破性的变化.
-   释放标签是 `ds-v*`编辑 `v1.0.0`– 说吧 –`v2.4.0` 标记和npm版本是更早的系列.

承诺遵循常规承诺,CI通过承诺进行核查。 不要用手编辑版本 .

## 历史

`language/` 来自 `host-config/design-language/` 内 [纤维堆](https://github.com/filipgutica/filip-stack)及其历史。 JSON, 生成器, 和字体来自 [欧](https://github.com/filipgutica/ui)。 。 。 .

## 许可证

麻省理工学院. IBM Plex 字体在 `fonts/` 正在 SIL 打开字体许可证下;参见 `OFL-*.txt` 旁边的文件。 编辑器主题 : `language/editor-themes/graphite-indigo/` 来源于 Visual Studio 代码的默认主题; 参见其 `LICENSE` 财务报告和审定财务报表 `THIRD_PARTY_NOTICES.md`。 。 。 .

## 常见问题

### @filipgutica/design-system 是什么？

Filip的任何框架的设计语言、标志和组件目录

### 如何安装 @filipgutica/design-system？

在项目目录运行 npm install @filipgutica/design-system，或使用 pnpm add / yarn add / bun add。

### @filipgutica/design-system 支持 TypeScript 吗？

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

### @filipgutica/design-system 支持 ESM 还是 CommonJS？

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

### @filipgutica/design-system 需要什么版本的 Node\.js？

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

### @filipgutica/design-system 可以商用吗？

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

### @filipgutica/design-system 的下载量有多少？

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

### @filipgutica/design-system 还在维护吗？

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