# @alis-build/design-system 中文文档

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

版本：0\.54\.0
npm 元数据更新时间：2026-11-05T13:57:47.651Z
中文译文更新时间：2026-11-05T23:42:26.827Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40alis-build/design-system
原文对照：https://npmcn.com/package/%40alis-build/design-system/?lang=original
项目主页：https://alisx.com/

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

- 包体积（解压后）：1.1 MB，152 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：stylelint \>=16\.11\.0
- 首次发布：2026-10-07T13:47:25.451Z
- 最新版本发布：2026-11-05T13:57:47.436Z
- 近 30 天下载量：9149（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：74（近 12 个月 74 个）

## 中文简介

AlisX用于编码剂的设计系统:指使,产品CSS,组件标记,能力标记,文字和规则.

## 安装

```sh
npm install @alis-build/design-system
```

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

## README

# @alis-building/design-system (英语)

AlisX 设计系统,为编码代理(Claude Code, Codex)建筑所编写 任意框架中的产品屏幕:Svelte、Vue或平面 HTML.

**探员: 开始于 [规则/README.md](https://npmcn.com/package/%40alis-build/design-system/rules/README.md),则 [规则/快速启动](https://npmcn.com/package/%40alis-build/design-system/rules/quick-start.md)。 。 。 .**

| 路径 | 这是什么 |
| --- | --- |
| `alisx.css` | 作为自定义财产的每个标志,类型(`.text-*`),产品基础(重置) `*` 财务报告和审定财务报表 `body`)和 `.app-*` 组件类. |
| `tokens.css` | 作为定制的地产,每一个地物,光和暗,没有别的: 对于一个拥有自己组件库的应用程序. |
| `themes.json` | 每个产品角色按主题确定为一个字面`light`, (中文(简体) ), `dark`: 对于需要值的代码,例如组件库的主题或图表渲染器. |
| `fonts.css` | 从 Google 字体中装入 Nunito Sans 和 材料符号 。 用于原型;自宿于生产中的字体. |
| `components/` | 每个组件一个指针:写作的标出,你提供的行为,它的类. `components/README.md` 拥有一个完成的屏幕骨架. |
| `rules/` | 要建什么和为什么:每个决定一个文件,加上一个快速的起步和已知的漏洞. |
| `tokens.json` | 每个值的来源:每个被标记的调色板,产品或叙事,每个产品角色,每个主题都有值. 参考文献,例如: `{cyan-600}` 留入; 已读 `tokens.css` 或者说 `themes.json` 而不是解决问题。 对于主题前所写的代码,每个产品角色还保留一个 `value` 每个阴影的光亮 `value` 旁边 `values` 每个主题. |
| `marks.json` | 能力标志(`alis_*`:构造,中风分级按体积,几何,按犬形顺序排列. |
| `words.json` | 每个事物一个名字:每个事物意味着什么,它替换什么,以及它不同的代码词. 只要为人们写出文字,就阅读它,包括大赦国际的指示(见A/CN.9/WG.III/WP.96)`rules/words.md`) (中文(简体) ). |
| `email/` | 电子邮件 shell (`shell.html`),其区块(`blocks.html`)和正文双(`shell.txt`),从出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自出自`rules/email.md`) (中文(简体) ). |
| `assets/Brand/` | Alis的标记,产品锁,应用图标和favion. |
| `stylelint.mjs` | 重复的样式检查 `rules/styling.md`,作为一个风格林特配置你自己的延伸. |
| `classes.json` | 每类和定制财产 `alisx.css` 在此版本中定义. |
| `check.mjs` | `alisx-check`运行下面的三张支票 在您的建筑. |

```bash
pnpm add -E @alis-build/design-system
```

```js
import '@alis-build/design-system/fonts.css' // prototypes only
import '@alis-build/design-system/alisx.css'
import tokens from '@alis-build/design-system/tokens.json' with { type: 'json' }
```

**光阴相克.** 页面很轻, 除非它问: set `data-theme="dark"`,或 `"system"` 跟踪操作系统,打开 `<html>` 或关于任何元素 (单位:千美元)[规则/主题](https://npmcn.com/package/%40alis-build/design-system/rules/themes.md)) (中文(简体) ). 选择主题是你的应用程序的工作.

## 保持应用程序的行进

三件事,设置一次, 所以下一个变化保持 一致谁做它.

**1\. 指示你的代理人遵守规则.** 在你的应用 `CLAUDE.md` 或者说 `AGENTS.md`数字 :

```md
The UI is built from @alis-build/design-system. Before changing a screen, read
node_modules/@alis-build/design-system/rules/README.md and follow its "Where to
start". The rules there are the version this app has installed.
```

写入文件所在位置的路径: 如果您 `package.json` 是在一个 子文件夹,规则在文件夹下面 `node_modules`。永远不要复制 规则输入您的 repo : 副本停止随版本移动.

**2\. 检查你的风格.** 添加 `stylelint` (16.11岁或以后), 与 `postcss-html` 如果您有 Svelte、 Vue、 HTML 或 临时文件( 它读取 他们的 `<style>` 块和静态 `style=""` 属性)和 `postcss-scss` 若为 任何块是 `lang="scss"` (没有它,这些块被悄悄地跳过). 然后进入 `stylelint.config.js`数字 :

```js
export default {
  extends: ['@alis-build/design-system/stylelint'],
  overrides: [{ files: ['**/*.svelte', '**/*.vue', '**/*.html', '**/*.templ'], customSyntax: 'postcss-html' }],
}
```

-   **你在同一名称下设定的规则取代了系统的**: 样式lint 永远 合并两个列表。 加上一个, 携带系统的一部分。 配置 出口其清单`refusedValues`, (中文(简体) ), `allowedValues`, (中文(简体) ), `refusedProperties`, (中文(简体) ), `refusedSelectors`)和两个建造者:
    
    ```js
    import { refuse, refusedValues } from '@alis-build/design-system/stylelint'
    export default {
      extends: ['@alis-build/design-system/stylelint'],
      rules: {
        'declaration-property-value-disallowed-list': refuse([
          ...refusedValues,
          { properties: 'cursor', values: ['wait'], message: 'A busy control shows its own spinner.' },
        ]),
      },
    }
    ```
    
-   **保留规则的一部分的文件按名称选择该部分**数字 : `refused.literalColour`, (中文(简体) ), `refused.blend`, (中文(简体) ), `refused.spacing`, (中文(简体) ), `allowed.radius`, (中文(简体) ), `allowed.shadow`。绝不因其信息或在列表中的位置。 一个名字a 释放更改,然后停止检查,而不是缩小规则.
    
    ```js
    import { refuse, refused } from '@alis-build/design-system/stylelint'
    // in overrides: the one file where a client's theme meets the system
    { files: ['**/theme-bridge.css'], rules: {
      'declaration-property-value-disallowed-list': refuse([refused.literalColour]),
    } }
    ```
    
-   **当什么都没有 `rules/styling.md` 适应,系统有一个漏洞.** 说吧 上面的一行,按规则和理由, 当你交出作品时命名它 回来.
    
    ```css
    /* stylelint-disable-next-line declaration-no-important -- GAP: a hidden element stays hidden */
    [hidden] { display: none !important; }
    ```
    
    禁用本身在它没有命名规则时被报告( 它会逐一沉默) 或沉默无声.
    
-   它读到CSS中的内容. 在 Sass 变量或混音符中持有的值, 或自定财产背后的文字(`--pad: 13px`没有人看见, 也不是有束缚的样式`:style`, (中文(简体) ), `style={ … }`) (中文(简体) ). 一个小精灵 `css` 组件 完全无法阅读,所以 `alisx-check styles` 停止一个.
    

**3\. 检查你的建筑.**

```json
"scripts": {
  "lint:names": "alisx-check names src",
  "lint:styles": "alisx-check styles \"src/**/*.{css,svelte,vue}\"",
  "lint:styles:record": "alisx-check styles \"src/**/*.{css,svelte,vue}\" --update",
  "lint:words": "alisx-check words src",
  "lint:words:record": "alisx-check words src --update"
}
```

-   `alisx-check names` 系统类失败( n)`app-*`, (中文(简体) ), `text-*`)或习惯 属性 此版本没有: 错误拼写或名称 已删除。 过 `--prefix app-` 如果你的应用有 `text-*` 其公用事业. 对于从你来源之外到达的财产,请命名文件 声明: `--declared e2e/fixtures/theme.json` 读取任何文本文件或 文件夹( JSON 内部的样式表, 服务器代码) 并算入已知的名称 以准确的拼写方式 道路必须存在,无论建筑物在哪里运行: 图像构建可能只复制应用程序 。 无文件声明的地方( 库集) 从脚本,通过 `--allow` 有确切名称; 模式, 如 `--allow '--brand-*'` 让一个误打.
-   `alisx-check styles` 是门: 任何违反都失败。 积压的应用程序 记录一次`lint:styles:record`承诺 `alisx-style-baseline.json`从那时起,它就是一个转盘,只有当一个 记录违反规则的所得。 基线是软件包的版本 与记录相反:在升级后,支票是这样说的,因为规则可能 已经改变。 只有在有意改变后才能重新录制,永远不要清除 失败,并在承诺中说为什么数字移动.
-   `alisx-check words` 名称失败 `words.json` 已退休 (“ idea” for a) 项目,“共享的获取和所有权”在文本中写道: 在标签之间,以及引用的文本中,该文本有空格或以大写开头. 在turl文件中,Go是代码,读作脚本是: 在组件外,它的 `if`, (中文(简体) ), `for`, (中文(简体) ), `switch` 财务报告和审定财务报表 `case` 线条和 `@Component(…)` 电话 参数. 其基线, `alisx-words-baseline.json`,工作风格。 A 类 必须保持的用途在其线上或上行标出: `alisx-words-ignore -- the reason`。 。 。 .
-   `alisx-check words --text <file>` 读取一个单词文件而不是标记: 一个终端应用程序的纯文本写出它所说的一切, 以块为标题 `== kind place · area`,然后一个 `field<TAB>text` 每行读取. `code` 财务报告和审定财务报表 `alias` 线条,后接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相相相相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相, 页:1`%s`)和占位符(`<id>`)是代码. 带行 在其上方的字段线上, 加入它, 所以一个名称 包折仍然计算. 基线计数 每一个地方,所以得到一个退休名字的块 是一个失败的. 文件是生成的,所以没有被忽略:改变词源.
-   两者中,用"只读"("只读")写成的已退休名是一个标签,而且 只用其资本计算:"只读重要部分"为英文.
-   每站均使用出站码2,当无法按设置运行时从不通过: a 规则样式林特拒绝, 文件没有解析, 没有匹配的文件 .

键入精确的版本( N)`pnpm add -E`, (中文(简体) ), `npm install -E`因此,规则 课和支票一起移动.

包根没有JavaScript条目:通过路径导入上面的文件. 将 CDN 的精确版本 `https://cdn.jsdelivr.net/npm/@alis-build/design-system@<version>/alisx.css`。 。 。 .

在Apache -2.0的许可。 Alis的名字和标记是Alis的商标 交换和无许可证;见 `NOTICE`。 。 。 .

## 常见问题

### @alis-build/design-system 是什么？

AlisX用于编码剂的设计系统:指使,产品CSS,组件标记,能力标记,文字和规则\.

### 如何安装 @alis-build/design-system？

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

### @alis-build/design-system 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/alis-build\_\_design-system 是否存在。

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

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

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

@alis-build/design-system 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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