Meta Opens Astryx So Agents Can Look Up Its Design Rules

What Happened

Meta has put Astryx, the React design system it used internally for eight years, on GitHub under the MIT license. Anyone can use it for free, modify it, and use it commercially. Inside Meta it is the largest and most widely used design system, powering over 13,000 apps. The project is still in Beta (version 0.7), and it already has nearly 15,000 stars on GitHub.

Image from the official project.

According to the project's description, it includes:

• More than 150 React components with accessibility support, covering common needs such as buttons, forms, dialogs, tables, and navigation;
• Seven ready-made themes with dark mode support; changing the brand color only requires overriding a set of CSS variables;
• Page templates such as table pages, detail pages, and multi-step forms;
• A command-line tool and a hosted MCP server, designed specifically for AI coding assistants.

Why It Matters

The most common problem when AI writes interfaces is that "every result looks different": button spacing, colors, and dialog implementations all depend on how the model happens to think at the time. Astryx organizes component documentation, design specs, and templates into a form that machines can query. Agents check the specs before writing code, then write to match them, so the resulting interfaces share a consistent foundation.

Two other design choices are friendly to ordinary projects:

• Not tied to a styling approach: Components use StyleX internally, but users don't need to deal with it and can import the ready-made CSS directly. To override styles, you can use the Tailwind, CSS Modules, or plain CSS your project already has.
• You can take components and modify them: When a ready-made component isn't enough, the CLI can copy the complete source code of a component into your project so you can turn it into your own version.

Two Ways Agents Can Connect

How to Get Your Agent Using It

We have packaged these two approaches into a Skill: Astryx: Building React Interfaces Following Meta's Open-Source Design System Specs. Hand it to Claude Code, Codex, or another Agent, and it will first check your environment, then connect MCP or the CLI as needed, and automatically consult the specs before writing interfaces.

Notes

• Still Beta: The interfaces may change between minor versions, and some components are only available in pre-release (canary) versions. Evaluate before using it in production.
• Requires React 19 or above; older projects need to upgrade React first.
• It is a component library and specification, and it will not make design decisions for you: page structure, copy, and interactions still need your own review.

References

• GitHub: meta/astryx
• Astryx official documentation