Loui DS
一个黑暗的，最小的，功能性的React设计系统，用于内部工具，仪表板和应用程序。设计令牌，构建可访问的组件 React Aria组件，以及AI-ready文档，在一个包中： loui-ds。
生活故事书: https://xrazai.github.io/loUI/ · 对于AI代理： llms.txt， llms-full.txt， manifest.json， tokens.json
状态：1.0之前版本，在MIT许可下发布在npm上。所有组件都是
experimental;api仍然可以改变。
突出了
- 默认情况下可访问。 WCAG 2.2 AA目标，键盘合同，每个楼层都有斧头。
- 令牌。 每个颜色、空间、半径和持续时间都是一个
--ds-*从DTCG JSON构建的CSS变量。组件中没有原始值。 - React 19，安全的， 命名级联层中的CSS模块，没有运行时样式库。
- 它是内置的。 默认为英语，
pt-BR包括，每个字符串都可通过重写DSProvider。 - 也是为特工设计的。 生成的组件清单、令牌清单和
llms.txt保持AI工具的准确性。
安装
pnpm add loui-ds react react-dom
npm install loui-ds 和 yarn add loui-ds 工作太。要升级，请运行 pnpm update loui-ds 然后阅读 发布说明 首先：1.0之前的小版本可能会中断。如果您需要通过URL安装一个版本，每个版本还附加了包tarball。
需要React 19和Node 24或更高版本的工具。
快速启动
import 'loui-ds/styles.css';
import { Alert, Button, DSProvider } from 'loui-ds';
export function App() {
return (
<DSProvider locale="en-US">
<Alert tone="warning" title="Low stock">
3 rolls of linen are left. Reorder to avoid delays.
</Alert>
<Button variant="primary" onPress={() => console.log('created')}>
Create order
</Button>
</DSProvider>
);
}
更多的 开始：样式表； DSProvider、字体、主题和服务器端呈现。
文档
| 在 | 什么 |
|---|---|
故事书(pnpm storybook） | 组件、令牌、指南和实例 |
| 介绍 | 包中包含什么以及它是如何构建的 |
| 原则 | 三个规则，清晰和专注，代理原则，视觉基础 |
| 内容指南 | 缩微本规则 |
| 可访问性 | 一致性目标，键盘模型，我们如何测试 |
| 与AI一起使用 | 清单, llms.txt，内容规则，故事书MCP |
| 体系结构决策 | 为什么事情是这样的（ADR-0001到ADR-0010） |
| AGENTS.md | 用于处理此存储库的人员和代理的约定 |
对于人工智能工具
生成，始终与源同步，在 docs/ 然后运来 dist/：
docs/llms.txt和docs/llms-full.txt：索引和完整文档。docs/manifest.json：每个组件、钩子和实用程序，包括道具、变量、消息、故事和使用说明。docs/tokens.json：允许文本和面对的所有标记。docs/ai/content-rules.json：将规则作为数据复制。docs/ai/components/：每个组件一个Markdown页面。
快速入门（Windows）
双击 start.cmd 在repo根目录下（或从终端运行）。它会安装pnpm和依赖项（如果缺少的话），启动Storybook并在浏览器中打开http://localhost:6006。在任何操作系统上， pnpm install 然后 pnpm start 也一样。
脚本
| 命令 | 目的 |
|---|---|
pnpm start | 在端口6006上启动Storybook，并在浏览器中打开它 |
pnpm storybook | 端口6006上的Storybook（也为MCP端点提供服务） /mcp） |
pnpm build | 图书馆建到 dist/，那么人工智能就显现出来了 |
pnpm build-storybook | 静态的故事书 |
pnpm lint / pnpm typecheck | ESLint和样式/ TypeScript |
pnpm test | 所有Vitest项目（单元、浏览器、可视化、故事书） |
pnpm test:unit / pnpm test:browser | Chromium中的仅节点测试/组件测试 |
pnpm test:a11y | 故事11检查和浏览器斧测试 |
pnpm test:visual / pnpm test:visual:update | 视觉回归/回顾基线更新 |
pnpm tokens:build / pnpm tokens:check | 构建令牌/验证提交的输出是否是当前的 |
pnpm manifest:build / pnpm manifest:check | 重新生成/验证舱单； llms.txt 以及组件页面 |
pnpm check | 闸门：令牌、lint、类型检查、测试和构建 |
pnpm changeset | 记录放行通知 |
贡献
阅读 AGENTS.md 首先，它是传统真理的唯一来源。工作来自 TODO.md;完成的工作记录在 CHANGELOG.md． 组件遵循 组件的工作流． 提交遵循常规提交。此存储库中的所有内容都是用英语编写的。
添加或更改组件后，重新生成面向ai的文档并提交：
pnpm manifest:build
项目布局
src/
components/<Name>/ component, CSS Module, messages, stories, tests, <Name>.md
tokens/ DTCG JSON sources and generated output
styles/ layered base CSS and fonts
hooks/ utils/ i18n/ hooks, locale-aware utilities, message catalogs
docs/ Storybook guide pages
patterns/ domain patterns (second entry point)
docs/ guides, ADRs, architecture notes, generated AI docs
schemas/ JSON Schemas for the manifests and content rules
scripts/ token and manifest tooling
许可证
麻省理工学院． 捆绑的Geist字体是在SIL开放字体许可证(src /风格/字体/ LICENSE.txt）.