facebook/astryx

# Astryx 一个完全可定制的开源设计系统，专为当下的开发方式而构建 —— 由人类及与他们并肩工作的 agent 共同驱动。 ## 概述 Astryx 是一个开源设计系统，在过去八年中于 Meta 内部孕育成长，并已成为该公司内使用最广泛、规模最大的设计系统 —— 支持 13,000 多个应用，并由每天依赖它的工程师、设计师和产品团队共同塑造。 它作为一个完整的系统，提供了 150 多个无障碍组件、品牌级主题、深色模式、即用模板和 CLI。你可以导入预构建的 CSS 并使用带有类型定义的 React 组件 —— 无需 build 插件，也无需引入样式库 —— 人类和 AI 助手可以使用同一套工具进行构建。 **Astryx 的独特之处：** - **开放的内部实现。** 组件在各个层级都可组合，而不是被锁定在封闭的顶层 API 之后。你会用到的基础构建块被直接导出，当你需要深入时，swizzle 会将组件的完整源码提取到你的项目中，交由你完全掌控。 - **无样式锁定。** Astryx 使用 StyleX 编写样式，但这对于使用者是透明的。你可以使用 Tailwind、CSS modules 或原生 CSS 通过 `className` 进行覆盖 —— 无论你的项目已经在使用什么。 - **无需包装即可自定义。** 主题本质上是一组 CSS 自定义属性的覆盖集合，因此设计师可以打造出极具辨识度的专属 Astryx，而无需 fork 或包装组件源码。 - **专为人类和 agent 打造。** API、文档和 CLI 是一体化设计的，因此人类和 AI 助手能够基于相同的参考标准，以同样的方式进行构建。 ## 快速开始 安装 Astryx 和主题： ``` # npm npm install @astryxdesign/core @astryxdesign/theme-neutral npm install -D @astryxdesign/cli # pnpm pnpm add @astryxdesign/core @astryxdesign/theme-neutral pnpm add -D @astryxdesign/cli # yarn yarn add @astryxdesign/core @astryxdesign/theme-neutral yarn add -D @astryxdesign/cli ``` 最简单的设置只需几行 CSS 导入加上一个 theme provider —— 不需要 build 插件，也不需要 PostCSS 或 Babel 配置。请参阅 **[@astryxdesign/core README](packages/core/README.md#quick-start)** 获取完整指南（涵盖 Next.js、Tailwind、Vite 和 CDN）。 为了确保可靠地访问 CLI，请在你的 `package.json` 中添加一个脚本： ``` "scripts": { "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs" } ``` 然后使用 `npm run astryx -- component --list` 来运行。这可以避免 AI 助手或新开发者直接调用 CLI 时出现路径错误。 ## 包 | 包 | 描述 | README | | ------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------- | | [`@astryxdesign/core`](packages/core) | 组件、主题系统和实用工具 | [README](packages/core/README.md) | | [`@astryxdesign/cli`](packages/cli) | CLI 工具：组件文档、模板、脚手架、主题和 codemods | [README](packages/cli/README.md) | | [`@astryxdesign/build`](packages/build) | 用于 StyleX 源码构建的 build 插件 | [README](packages/build/README.md) | | [`@astryxdesign/theme-*`](packages/themes) | 七款即用型、完全可定制的主题 (neutral, butter, chocolate, matcha, stone, gothic, y2k) | [README](packages/themes) | ## 设计原则 这些是 Astryx 向基于它进行构建的人们作出的承诺。 - **引导而非强制。** 组件为你提供的是能力，而不是束缚你的护栏。设计主张存在于文档和示例中 —— 只要你传入一个值，组件就会渲染它。 - **强大且有据可查的规范。** 每个组件都遵循相同的命名、prop 和组合规则，并且每一个都有详尽的文档说明 —— 因此，一旦你了解了其中几个，其余的也会让你感到熟悉；无论是人还是 AI，都能预测未知组件的行为。 - **服务于人类和 AI 的统一系统。** API、规范、文档和 CLI 是一体化设计的，因此人类和 AI 助手可以使用相同的方式进行构建。每一次让 Astryx 更易于 AI 使用的改进，也同样让人类受益。 - **基于实测验证。** 我们对规范进行测试而非凭空断言，不拘泥于既定结果，并在新场景证明其有误时重新审视。 ## 架构 ### 基础 用于构建视觉统一且无障碍界面的基础构建块：排版、颜色、布局和无障碍支持。 ### 组件 包含 150 多个可复用 UI 构建块的库，提供完整的 TypeScript 支持。 ### 模式 针对常见交互和工作流久经考验的设计解决方案：表格页面、详情页布局、表单向导、导航模式以及数据录入流程。 ## 项目结构 | 目录 | 用途 | | ----------- | ----------------------------------------------------------- | | `apps/` | 示例应用、文档站点和 Storybook | | `packages/` | 发布的包：core、cli、build、themes | | `internal/` | 内部工具：测试实用程序、eslint 插件、vibe 测试 | ## 许可证 MIT

标签：AI辅助开发, CSS样式, MITM代理, React组件, UI组件库, 文档结构分析, 自动化攻击, 设计系统