Ts Floyd@ts_floyd

Follow

Meta Astryx design system for AI agents

Astryx is the name to know here. Meta has put the design system that powers 13,000+ of its own applications out as open source, and the whole thing has been reworked so AI agents can work with it directly. The result: an agent that can assemble interfaces without that telltale machine-made look. What ships in the release: • 150+ accessible React components, covering buttons, forms, dialogs and tables, with dark mode support built in • seven ready-made themes: matcha, y2k, gothic, stone, butter, chocolate and neutral • a CLI and an MCP server made for AI, so an agent pulls from the actual documentation instead of guessing at props Getting it into Claude Code assumes a React 19+ project. Install astryxdesign/cli, then run astryx init --features agents to set up your Astryx context, and read the generated file. Rules land in your CLAUDE.md: a component index, a CLI reference, and the hard constraints, which rule out raw divs, inline styles and magic values. Page generation then follows one sequence. A build command picks a template, that template scaffolds the structure, and only after that are props read. For live doc querying from Claude, drop the MCP server into.mcp.json at astryx.atmeta.com/mcp. On GrokBot or any other agent, the same MCP link goes into whatever client handles remote MCP, or an init command produces a universal AGENTS.md. To confirm it loaded, ask your AI "what's the import path for Button and how do you make a Dialog non-dismissible?" A wrong answer means the setup never took.

5d

Ts Floyd@ts_floyd

Follow

Meta Astryx design system for AI agents

Astryx is the name to know here. Meta has put the design system that powers 13,000+ of its own applications out as open source, and the whole thing has been reworked so AI agents can work with it directly. The result: an agent that can assemble interfaces without that telltale machine-made look. What ships in the release: • 150+ accessible React components, covering buttons, forms, dialogs and tables, with dark mode support built in • seven ready-made themes: matcha, y2k, gothic, stone, butter, chocolate and neutral • a CLI and an MCP server made for AI, so an agent pulls from the actual documentation instead of guessing at props Getting it into Claude Code assumes a React 19+ project. Install astryxdesign/cli, then run astryx init --features agents to set up your Astryx context, and read the generated file. Rules land in your CLAUDE.md: a component index, a CLI reference, and the hard constraints, which rule out raw divs, inline styles and magic values. Page generation then follows one sequence. A build command picks a template, that template scaffolds the structure, and only after that are props read. For live doc querying from Claude, drop the MCP server into.mcp.json at astryx.atmeta.com/mcp. On GrokBot or any other agent, the same MCP link goes into whatever client handles remote MCP, or an init command produces a universal AGENTS.md. To confirm it loaded, ask your AI "what's the import path for Button and how do you make a Dialog non-dismissible?" A wrong answer means the setup never took.

5d