Astryx 开源 Meta 设计系统,AI 生成 UI 不再像 AI 做的
这也太猛了……Meta 刚刚把支撑其 13,000 多款应用的设计系统开源了,而且是专门为 AI 智能体适配的版本。
你的 AI 智能体终于能做出不像 AI 做出来的 UI 了。下面是把 Astryx 接入 Claude 和 GrokBot 智能体的方法:
首先搞清楚你能拿到什么:
• 150+ 个无障碍 React 组件:按钮、表单、对话框、表格,自带深色模式
• 7 套现成主题:neutral、butter、chocolate、matcha、stone、gothic、y2k
• 专为 AI 打造的 CLI + MCP 服务器,让你的智能体读取真实文档,而不是自己瞎编 props
下面是为 Claude 和 Grok 设置的步骤:
1 → 在你的项目文件夹(React 19+)中打开 Claude Code
2 → 输入:“Install @astryxdesign/cli and run astryx init --features agents to set up your Astryx context. Read the generated file.”
3 → 它会把规则直接写进你的 CLAUDE.md:组件索引、CLI 参考,以及绝对不能做的事(不要用原生 div、不要内联样式、不要魔法数字)
4 → 现在每个页面都按同样的方式开始:astryx build “<你的想法>” 选一个模板 → astryx template 搭建脚手架 → astryx component 读取 props
5 → 想让 Claude 实时查询文档?把 MCP 服务器添加到 .mcp.json:
6 → 对于 Grok 或其他任何智能体:把同一个 MCP 链接接入任何支持远程 MCP 的客户端,或者用 --agent codex 运行 init,它会生成通用的 AGENTS.md
7 → 快速测试:问你的 AI “Button 的导入路径是什么,怎么让 Dialog 不可关闭?” 如果它答不上来,说明设置没生效
仓库链接见下方 ↓
本文由 AI 翻译自英文原帖,技术名词保留英文。
查看 X 原帖