Astryx 开源设计系统高度可定制契合当下开发模式Astryx 是一款开源设计系统由开发者及其协作的智能助手共同打造高度可定制适配当下的开发方式。目前该系统处于测试版基于 React 和 StyleX 构建。概述Astryx 是过去八年间在 Meta 内部发展起来的开源设计系统现已成为公司内使用最广泛、规模最大的设计系统为 13000 多个应用提供支持。其发展离不开每天依赖它的工程师、设计师和产品团队。作为一个集成系统它提供了 150 多个可访问的组件、品牌级主题、暗黑模式、可直接使用的模板以及一个命令行界面CLI。你只需引入预构建的 CSS 并使用类型化的 React 组件无需使用构建插件也不必引入样式库人类开发者和 AI 助手都能使用相同的工具进行开发。Astryx 的独特之处开放的内部结构组件设计灵活可在任何层级进行组合不会被封闭的顶层 API 所限制。常用的构建块会直接导出若需要深入定制可通过 swizzle 将组件的完整源代码导出到项目中。无样式锁定Astryx 使用 StyleX 编写样式但对使用者透明。你可以使用 Tailwind、CSS 模块或纯 CSS 等项目中已使用的方式通过 className 覆盖样式。无需包装即可定制主题是一组 CSS 自定义属性的覆盖设计师无需分叉或包装组件源代码就能让 Astryx 具有独特风格。为人类和智能助手设计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 文件并添加一个主题提供程序无需构建插件也无需配置 PostCSS 或 Babel。完整指南请参阅 astryxdesign/core 的 README适用于 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 时出现路径错误。相关包包名描述READMEastryxdesign/core包含组件、主题系统和实用工具READMEastryxdesign/cliCLI 工具用于组件文档、模板、脚手架、主题和代码转换READMEastryxdesign/buildStyleX 源代码构建的构建插件READMEastryxdesign/theme - *七个预制的、完全可定制的主题中性、黄油、巧克力、抹茶、石头、哥特、千禧READMEastryxdesign/lab实验性组件和 astryxdesign/vegaVega/Vega - Lite 图表包装器目前仅在内部用于 Storybook 和沙盒环境尚未发布到 npm。设计原则引导而非强制组件提供功能而非设置限制。设计建议体现在文档和示例中只要传入有效值组件就能正常渲染。强大且文档完善的约定每个组件遵循相同的命名、属性和组合规则且文档详尽。掌握几个组件后就能轻松理解其他组件人类和 AI 都能预测不熟悉组件的行为。人类和 AI 共用一套系统API、约定、文档和 CLI 协同设计人类开发者和 AI 助手采用相同的开发方式。对 AI 友好的改进同样也让人类开发更便捷。基于实践验证我们通过测试而非主观断言来确定约定灵活对待测试结果在新情况证明约定不适用时及时调整。架构基础基础构建块为视觉上连贯且可访问的界面提供基础包括排版、颜色、布局和可访问性。组件库拥有 150 多个可复用的 UI 构建块全面支持 TypeScript。设计模式针对常见交互和工作流程提供经过实践检验的设计解决方案如表格页面、详情页布局、表单向导、导航模式和数据输入流程。项目结构目录用途apps/示例应用、文档网站和 Storybookpackages/已发布的包包括 core、cli、build、themesinternal/内部工具如测试实用工具、ESLint 插件、氛围测试贡献代码我们欢迎大家贡献代码完整指南请参阅 CONTRIBUTING.md。贡献者的快速入门此仓库通过 Corepack 使用 pnpm 10。只需启用一次正确的 pnpm 版本将自动安装corepack enable pnpm install许可证本项目采用 MIT 许可证。