Astryx入门指南5分钟搞懂这个为人类和AI共同设计的设计系统【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个完全开源、可定制的设计系统Design System由 Meta 内部使用 8 年的大型设计系统孵化而来现已服务 13,000 应用。它提供 150 无障碍组件、品牌级主题、暗色模式和一套让人类开发者与 AI 助手用同一套工具链构建界面的 CLI。对新手来说它最大的优点是无需构建插件、无需额外样式库装完即用。为什么值得了解 Astryx 设计系统大多数 UI 组件库是给人用的文档写得再好AI 助手也只能靠猜。Astryx 走了一条不同的路——它的 API、文档、CLI 三件套是一起设计的让人类和 AI 用完全相同的方式查资料、写代码。四个核心差异点特性说明 开放的内部结构组件可在任意层级组合需要深度定制时swizzle命令直接把组件源码弹出到你的项目里 不锁定样式方案你可以继续用 Tailwind、CSS Modules 或纯 CSS 覆盖样式零迁移成本 不包裹也能定制主题就是一组 CSS 变量覆盖设计师改色不用 fork 组件源码 为人类和 AI 共同设计同一个 CLI 命令人敲一遍AI 也能敲一遍结果一致3 步上手最快安装步骤Astryx 基于 React 19 构建安装过程非常轻。以 Next.js 项目为例第 1 步安装核心包和一个主题npm install astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex npm install -D astryxdesign/cli第 2 步按顺序引入三个样式表reset → 组件样式 → 主题变量import astryxdesign/core/reset.css; import astryxdesign/core/astryx.css; import astryxdesign/theme-neutral/theme.css;第 3 步包一层主题 Provider开始用组件import {Theme} from astryxdesign/core/theme; import {neutralTheme} from astryxdesign/theme-neutral/built; Theme theme{neutralTheme}{/* 你的应用 */}/Theme 没有构建插件、没有 PostCSS/Babel 配置——Astryx 直接提供预编译好的 CSS。Vite、Tailwind、甚至 CDN 免构建场景都有一步到位的官方方案详见 Quick Start 完整指南。150 组件从按钮到整页模板组件库覆盖完整的产品界面场景按三大层级组织组件Components按钮、表格、日历、滑块、Toast、命令面板等 150 个可复用积木全部支持 TypeScript 类型模式Patterns表格页、详情页、表单向导、导航结构等经过实战检验的页面方案模板Templatesastryx template dashboard一条命令就能输出完整的仪表板页面源码所有组件遵循同一套命名、属性和组合约定——学会 3 个组件剩下的都能猜个八九不离十。这正是 AI 也能快速上手的原因。每个组件的完整文档属性、变体、示例、最佳实践、主题化方式都可以随时查询源码位置参见 packages/core/src/。7 套主题不改代码换一套皮肤Astryx 内置 7 套官方主题每套都是完全可定制的neutral低调极简·butter·chocolate·matcha·stone·gothic·y2k主题的本质是CSS 自定义属性覆盖颜色、圆角、字体、间距、阴影全部通过语义化 Token如--color-text-primary、--radius-container驱动。想做出 unmistakably 你的品牌只需要覆盖 Token而不是 fork 组件。想深入理解 Token 体系直接读这份架构文档theme-tokens.md或者用 CLI 随时调出速查表npx astryxdesign/cli docs tokens # 间距/颜色/圆角/字体 Token 速查 npx astryxdesign/cli docs theme # 主题化完整指南主题包源码位于 packages/themes/以 neutral 主题 作为参考实现包含完整的色板生成规范。AI-readyAI 助手如何用同一套方式构建这是 Astryx 最有特色的部分。官方用一张图概括了理念——People ✓ 与 AI agents ✓ 打的是同一个勾核心机制是init命令。装好 CLI 后运行一次npx astryxdesign/cli init它会把 Astryx 组件索引写入项目的AGENTS.md/CLAUDE.mdAI 助手从此可以直接发现组件、模板和设计 Token不再靠猜测。日常使用场景astryx component Button # 查询 Button 完整文档 相关模板 astryx component --list # 列出全部组件 astryx template settings --skeleton # 输出带空间注释的布局骨架官方原则很直白Every change that made Astryx easier for AI made it easier for people too.让 AI 更好用的每一次改进都同时让人类更好用。社区已经用它做出了什么开源后的第一个月社区就贡献了 47 模板、52 个品类的应用——从个人作品集、待办应用到数据分析面板接下来去哪里资源路径项目总览与包结构README.md核心包快速上手packages/core/README.mdCLI 全部命令packages/cli/README.md主题 Token 体系docs/architecture/theme-tokens.md设计规范与约定docs/design/参与贡献指南CONTRIBUTING.md仓库示例应用位于 apps/example-nextjs/ 和 apps/example-vite/可以直接对照阅读 5 分钟上手流程。Astryx 目前处于 Beta 阶段MIT 协议开源PRs welcome——如果你正在找一个 AI 时代依然好用的 React 设计系统它值得放进你的工具箱试试。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/15 17:47:40 · 阅读 1.2k Astryx入门指南：5分钟搞懂这个为人类和AI共同设计的设计系统
Astryx入门指南5分钟搞懂这个为人类和AI共同设计的设计系统【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个完全开源、可定制的设计系统Design System由 Meta 内部使用 8 年的大型设计系统孵化而来现已服务 13,000 应用。它提供 150 无障碍组件、品牌级主题、暗色模式和一套让人类开发者与 AI 助手用同一套工具链构建界面的 CLI。对新手来说它最大的优点是无需构建插件、无需额外样式库装完即用。为什么值得了解 Astryx 设计系统大多数 UI 组件库是给人用的文档写得再好AI 助手也只能靠猜。Astryx 走了一条不同的路——它的 API、文档、CLI 三件套是一起设计的让人类和 AI 用完全相同的方式查资料、写代码。四个核心差异点特性说明 开放的内部结构组件可在任意层级组合需要深度定制时swizzle命令直接把组件源码弹出到你的项目里 不锁定样式方案你可以继续用 Tailwind、CSS Modules 或纯 CSS 覆盖样式零迁移成本 不包裹也能定制主题就是一组 CSS 变量覆盖设计师改色不用 fork 组件源码 为人类和 AI 共同设计同一个 CLI 命令人敲一遍AI 也能敲一遍结果一致3 步上手最快安装步骤Astryx 基于 React 19 构建安装过程非常轻。以 Next.js 项目为例第 1 步安装核心包和一个主题npm install astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex npm install -D astryxdesign/cli第 2 步按顺序引入三个样式表reset → 组件样式 → 主题变量import astryxdesign/core/reset.css; import astryxdesign/core/astryx.css; import astryxdesign/theme-neutral/theme.css;第 3 步包一层主题 Provider开始用组件import {Theme} from astryxdesign/core/theme; import {neutralTheme} from astryxdesign/theme-neutral/built; Theme theme{neutralTheme}{/* 你的应用 */}/Theme 没有构建插件、没有 PostCSS/Babel 配置——Astryx 直接提供预编译好的 CSS。Vite、Tailwind、甚至 CDN 免构建场景都有一步到位的官方方案详见 Quick Start 完整指南。150 组件从按钮到整页模板组件库覆盖完整的产品界面场景按三大层级组织组件Components按钮、表格、日历、滑块、Toast、命令面板等 150 个可复用积木全部支持 TypeScript 类型模式Patterns表格页、详情页、表单向导、导航结构等经过实战检验的页面方案模板Templatesastryx template dashboard一条命令就能输出完整的仪表板页面源码所有组件遵循同一套命名、属性和组合约定——学会 3 个组件剩下的都能猜个八九不离十。这正是 AI 也能快速上手的原因。每个组件的完整文档属性、变体、示例、最佳实践、主题化方式都可以随时查询源码位置参见 packages/core/src/。7 套主题不改代码换一套皮肤Astryx 内置 7 套官方主题每套都是完全可定制的neutral低调极简·butter·chocolate·matcha·stone·gothic·y2k主题的本质是CSS 自定义属性覆盖颜色、圆角、字体、间距、阴影全部通过语义化 Token如--color-text-primary、--radius-container驱动。想做出 unmistakably 你的品牌只需要覆盖 Token而不是 fork 组件。想深入理解 Token 体系直接读这份架构文档theme-tokens.md或者用 CLI 随时调出速查表npx astryxdesign/cli docs tokens # 间距/颜色/圆角/字体 Token 速查 npx astryxdesign/cli docs theme # 主题化完整指南主题包源码位于 packages/themes/以 neutral 主题 作为参考实现包含完整的色板生成规范。AI-readyAI 助手如何用同一套方式构建这是 Astryx 最有特色的部分。官方用一张图概括了理念——People ✓ 与 AI agents ✓ 打的是同一个勾核心机制是init命令。装好 CLI 后运行一次npx astryxdesign/cli init它会把 Astryx 组件索引写入项目的AGENTS.md/CLAUDE.mdAI 助手从此可以直接发现组件、模板和设计 Token不再靠猜测。日常使用场景astryx component Button # 查询 Button 完整文档 相关模板 astryx component --list # 列出全部组件 astryx template settings --skeleton # 输出带空间注释的布局骨架官方原则很直白Every change that made Astryx easier for AI made it easier for people too.让 AI 更好用的每一次改进都同时让人类更好用。社区已经用它做出了什么开源后的第一个月社区就贡献了 47 模板、52 个品类的应用——从个人作品集、待办应用到数据分析面板接下来去哪里资源路径项目总览与包结构README.md核心包快速上手packages/core/README.mdCLI 全部命令packages/cli/README.md主题 Token 体系docs/architecture/theme-tokens.md设计规范与约定docs/design/参与贡献指南CONTRIBUTING.md仓库示例应用位于 apps/example-nextjs/ 和 apps/example-vite/可以直接对照阅读 5 分钟上手流程。Astryx 目前处于 Beta 阶段MIT 协议开源PRs welcome——如果你正在找一个 AI 时代依然好用的 React 设计系统它值得放进你的工具箱试试。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考