@alis-building/design-system (英语)
AlisX 设计系统,为编码代理(Claude Code, Codex)建筑所编写 任意框架中的产品屏幕:Svelte、Vue或平面 HTML.
探员: 开始于 规则/README.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运行下面的三张支票 在您的建筑. |
pnpm add -E @alis-build/design-system
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> 或关于任何元素
(单位:千美元)规则/主题) (中文(简体) ). 选择主题是你的应用程序的工作.
保持应用程序的行进
三件事,设置一次, 所以下一个变化保持 一致谁做它.
1. 指示你的代理人遵守规则. 在你的应用 CLAUDE.md 或者说 AGENTS.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数字 :
export default {
extends: ['@alis-build/design-system/stylelint'],
overrides: [{ files: ['**/*.svelte', '**/*.vue', '**/*.html', '**/*.templ'], customSyntax: 'postcss-html' }],
}
-
你在同一名称下设定的规则取代了系统的: 样式lint 永远 合并两个列表。 加上一个, 携带系统的一部分。 配置 出口其清单
refusedValues, (中文(简体) ),allowedValues, (中文(简体) ),refusedProperties, (中文(简体) ),refusedSelectors)和两个建造者: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 释放更改,然后停止检查,而不是缩小规则.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适应,系统有一个漏洞. 说吧 上面的一行,按规则和理由, 当你交出作品时命名它 回来./* 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. 检查你的建筑.
"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。 。 。 .