Astryx 是 Meta 内部用了 8 年的设计系统，150 多个组件、7 套主题、深色模式，还有一个能搜组件、搭模板、跑检查的 CLI。仓库近 2.7 万星、MIT 协议，目前还是 Beta。它的卖点是人和 AI 智能体用同一套工具：CLI 能给 Claude Code 写一份 agent 指令，照着组件文档搭界面、最后再跑一遍 doctor 检查。AI Parabellum 在 11 月 13 日实测了一回：同一份订单看板需求（汇总数字、可排序表格、状态筛选、搜索、空状态和报错、手机适配、亮暗切换），让 Claude Code（Opus 5.5）做两遍，一遍纯 CSS、一遍装 Astryx。
Astryx 版只写了 503 行代码，纯 CSS 版是 1661 行，用了 14 个现成组件，doctor 检查 20 项通过、0 失败。代价也实在：耗时翻倍（6 分 05 秒对 3 分 12 秒）、对话 51 轮对 14 轮，gzip 后 JS 约 300KB 对 73KB。390px 手机上最能看出差别：纯 CSS 版把表格自动变成卡片，Astryx 版还留着表格，横向滚动、长名字被截断。两版无障碍都过关，但 Astryx 版的报错信息没放进 live region，读屏器可能漏报。
想自己试：React 19 项目里装三个包（@astryxdesign/core、@astryxdesign/theme-neutral、@stylexjs/stylex），再跑 npx astryx theme add neutral 和 npx astryx init –agent claude，后者会在项目里写一份 .claude/CLAUDE.md，告诉 Claude 用组件、不用裸 div、做完跑检查。做完别忘了跑 npx astryx doctor –built . 验一遍。结论也简单：多屏团队要的是统一视觉，Astryx 值得；就一个小页面，纯 CSS 更快更轻；手机布局记得在提示词里点名 600px 以下改卡片，它不会自己帮你换。相关阅读：Astryx 工具介绍、Claude Code 的 11 个 AI 与机器学习插件。
来源：AI Parabellum，原文
没有回复内容