# @bgord/design 中文文档

规范地址：https://npmcn.com/package/%40bgord/design/

版本：2\.1\.9
npm 元数据更新时间：2026-10-29T10:20:15.034Z
中文译文更新时间：2026-11-09T22:02:59.805Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bgord/design
原文对照：https://npmcn.com/package/%40bgord/design/?lang=original

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

- 包体积（解压后）：552 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2021-07-19T18:36:42.770Z
- 最新版本发布：2026-10-29T10:20:14.802Z
- 近 30 天下载量：1712（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：204（近 12 个月 56 个）

## 中文简介

清除仓库

## 安装

```sh
npm install @bgord/design
```

也可以使用：`pnpm add @bgord/design`、`yarn add @bgord/design`、`bun add @bgord/design`

## README

# bgord 设计

## 配置 :

清除仓库

```
git clone git@github.com:bgord/bgord-design.git --recurse-submodules
```

安装软件包

```
bun i
```

运行测试

```
./bgord-scripts/test.sh
```

## 文件 :

```
src/
├── animations
│   ├── grow-fade-in.css
│   └── shrink-fade-out.css
├── breakpoint-registry.ts
├── css-purge.ts
├── defaults.css
├── generate-css.ts
├── generate-lib.ts
├── generate-types.ts
├── interactions
│   ├── grow.css
│   ├── rotate-into-focus.css
│   └── subtle-scale.css
├── normalize.css
├── rules
│   ├── button-empty-content.css
│   ├── button-icon-title.css
│   ├── focusable-hidden-element.css
│   ├── image-alt.css
│   ├── input-missing-id.css
│   ├── input-missing-name.css
│   ├── invalid-list-element.css
│   ├── link-empty-href.css
│   ├── target-blank-referer.css
│   └── title-truncate.css
├── state-registry.ts
├── tokens
│   ├── alpha-token-generator.ts
│   ├── backdrops-token-generator.ts
│   ├── border-style-token-generator.ts
│   ├── border-width-token-generator.ts
│   ├── brand-token-generator.ts
│   ├── breakpoint-token-generator.ts
│   ├── danger-token-generator.ts
│   ├── focus-ring-token-generator.ts
│   ├── font-family-token-generator.ts
│   ├── font-size-token-generator.ts
│   ├── font-weight-token-generator.ts
│   ├── grayscale-token-generator.ts
│   ├── letter-spacing-token-generator.ts
│   ├── line-height-token-generator.ts
│   ├── motion-token-generator.ts
│   ├── opacity-token-generator.ts
│   ├── positive-token-generator.ts
│   ├── radius-token-generator.ts
│   ├── shadow-token-generator.ts
│   ├── size-token-generator.ts
│   ├── spacing-token-generator.ts
│   ├── template.ts
│   ├── warning-token-generator.ts
│   └── z-index-token-generator.ts
├── ui
│   ├── badge.css
│   ├── button.css
│   ├── card.css
│   ├── checkbox.css
│   ├── field.css
│   ├── input.css
│   ├── link.css
│   ├── progress-bar.css
│   ├── prose.css
│   ├── range.css
│   ├── select.css
│   ├── textarea.css
│   └── visually-hidden.css
└── utilities
    ├── axis-placement-utility-generator.ts
    ├── backdrop-utility-generator.ts
    ├── background-utility-generator.ts
    ├── border-color-utility-generator.ts
    ├── border-style-utility-generator.ts
    ├── border-width-utility-generator.ts
    ├── css-rule.strategy.ts
    ├── cursor-utility-generator.ts
    ├── display-utility-generator.ts
    ├── flex-basis-utility-generator.ts
    ├── flex-direction-utility-generator.ts
    ├── flex-grow-utility-generator.ts
    ├── flex-shrink-utility-generator.ts
    ├── flex-wrap-utility-generator.ts
    ├── focus-ring-offset-utility-generator.ts
    ├── focus-ring-utility-generator.ts
    ├── font-color-utility-generator.ts
    ├── font-family-utility-generator.ts
    ├── font-size-utility-generator.ts
    ├── font-weight-utility-generator.ts
    ├── gap-utility-generator.ts
    ├── height-utility-generator.ts
    ├── letter-spacing-utility-generator.ts
    ├── line-height-utility-generator.ts
    ├── margin-utility-generator.ts
    ├── max-height-utility-generator.ts
    ├── max-width-utility-generator.ts
    ├── min-height-utility-generator.ts
    ├── min-width-utility-generator.ts
    ├── object-fit-utility-generator.ts
    ├── object-position-utility-generator.ts
    ├── opacity-utility-generator.ts
    ├── overflow-utility-generator.ts
    ├── padding-utility-generator.ts
    ├── pointer-event-utility-generator.ts
    ├── position-utility-generator.ts
    ├── positioners-utility-generator.ts
    ├── radius-utility-generator.ts
    ├── rotate-utility-generator.ts
    ├── self-placement-utility-generator.ts
    ├── shadow-utility-generator.ts
    ├── size-utility-generator.ts
    ├── stack-utility-generator.ts
    ├── template.ts
    ├── transform-utility-generator.ts
    ├── width-utility-generator.ts
    └── z-index-utility-generator.ts
```

## 常见问题

### @bgord/design 是什么？

清除仓库

### 如何安装 @bgord/design？

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

### @bgord/design 支持 TypeScript 吗？

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

### @bgord/design 支持 ESM 还是 CommonJS？

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

### @bgord/design 可以商用吗？

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

### @bgord/design 的下载量有多少？

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

### @bgord/design 还在维护吗？

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