Adda 设计系统@addaab/ads(中文(简体) )
设计代号,Stencil网络组件,生成了React包装,以及CSS——作为可安装的包被运出.
对于AI代理(Claude Code, Claude Design, Lovebable, v0, Cursor.)
在用这个软件包生成代码之前读取这些代码( 内有它们) :
AGENTS.md: 需要设置( CSS, Avenir Next 字体), 反应模式, 服务器发送的页面( 标记合同), 组件目录, 主机页面 CSS 和规则UPGRADING.md:用于断开放行的迁移指南,并带有编码器. 1.0.0 重新命名为ads-前缀为dsa-docs/components.md: 每个组件的道具、事件、插槽以及 HTML 和 React 示例docs/tokens.md: 设计符号和要使用的符号llms.txt:上述指数;docs/custom-elements.json是自定义元素表达式
安装
npm install @addaab/ads
对于 React 包装符, 也安装它们的对等依赖性 :
npm install @stencil/react-output-target react react-dom
@stencil/react-output-target 标记为可选的对等依赖( CSS 和自定义元素消费者不需要), 但 React 包装导入 @stencil/react-output-target/runtime 在运行时间。 React Apps 必须明确安装它; 没有它, 您可以得到 Cannot find module '@stencil/react-output-target/runtime'。 。 。 .
前缀
| 仁爱 | 公约 | 示例 |
|---|---|---|
| 自定义元素 | dsa- 标签 | <dsa-button> |
| CSS课程 | dsa- 贝姆 | .dsa-button, (中文(简体) ), .dsa-button--primary |
| 键入 CSS 变量 | 图片导出名称( 未更改) | --component-color-…, (中文(简体) ), --alias-… |
消费模式
1. 虚拟+自定义要素(首选)
可树动:只导入您使用的东西,然后注册该元素.
import { defineCustomElement } from '@addaab/ads/components/dsa-button';
import '@addaab/ads/css'; // or `@addaab/ads/css/dsa-button` + `@addaab/ads/tokens/css`
defineCustomElement();
<dsa-button variant="primary">Open account</dsa-button>
反应包装器呼叫 defineCustomElement 给你的.
2. 反应(生成的包装)
反应约束由 @stencil/react-output-target 在斯通西尔建造期间 不要用手保护他们.
import { DsaButton } from '@addaab/ads/react';
import '@addaab/ads/css';
<DsaButton variant="primary">Open account</DsaButton>
每个组件 : import { DsaButton } from '@addaab/ads/react/dsa-button'。 。 。 .
3. 仅限CSS(vanilla HTML)
<button class="dsa-button dsa-button--primary dsa-button--medium" type="button">Open account</button>
import '@addaab/ads/css/dsa-button';
import '@addaab/ads/tokens/css';
4. 懒散装货机(无捆绑)
import { defineCustomElements } from '@addaab/ads/loader';
defineCustomElements();
优先模式1与Vite.
软件包出口
| 导入 | 目的 |
|---|---|
@addaab/ads/components/<name> | 自定义元素模块( 自动定义) |
@addaab/ads/react | 生成重现包装 |
@addaab/ads/css | 键+全部组件 CSS |
@addaab/ads/css/<name> | 单一构成部分 |
@addaab/ads/tokens | 托肯・杰森 |
@addaab/ads/tokens/css | 键入 CSS 变量 |
@addaab/ads/tokens/typography | .dsa-type-* 印刷课(包括在 @addaab/ads/css(中文(简体) ) |
@addaab/ads/tokens/js | Token作为联合来文人名单tokens 数组:路径、 CSS 变量、 值) |
@addaab/ads/AGENTS.md | AI代理商和开发商的消费者指南 |
@addaab/ads/UPGRADING.md | 打破释放的移徙指南(1.0: ads- → dsa-(中文(简体) ) |
@addaab/ads/codemods/migrate-to-dsa.mjs | 1.0.0重命名的编码(node … <dir> --write(中文(简体) ) |
@addaab/ads/docs/* | 生成的 API 引用( O)components.md, (中文(简体) ), tokens.md, (中文(简体) ), custom-elements.json(中文(简体) ) |
@addaab/ads/loader | 装入器 |
轻度 DOM 策略
组件使用 默认淡出 DOM (单位:千美元)shadow: false(e) 机会均等和无障碍环境。 仅在组件需要强烈隔离时使用阴影 DOM;该组件的读取会记录原因.
来源贡献( F)
来源、问题跟踪和捐款文件 Adda 设计系统 Azure DevOps 重播( 重播 )packages/ads) (中文(简体) ). 见 文件/检索 这是如何切断释放.