Meta Launches Astryx Beta with AI Tools for React Design Systems

This week, Meta revealed Astryx, a new open-source React design system. It’s still in Beta, but it’s already packed with tools for developers and AI agents alike.

Astryx grew inside Meta’s monorepo for eight years before becoming public. It’s built on React and StyleX, Meta’s own compile-time CSS engine open-sourced at the end of 2023. This pairing brings a fresh way to style components, using CSS variables and themes.

The system ships with ten ready-made themes. They include default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. Each theme uses a CSS variable cascade for styling, making it easy to switch looks without rewriting styles.

What sets Astryx apart is its AI-friendly tools. It comes with a CLI and MCP server that help AI agents scaffold and document user interfaces. The CLI exposes a structured JSON manifest, making commands clear and machine-readable.

Meta has production-tested Astryx inside its own projects. Even so, it’s still young as a public project. Its documentation covers more than 90 React components, while Meta’s docs site counts over 150 components in total.

Design Tokens and Documentation with DESIGN.md

Astryx uses design tokens defined in a format called DESIGN.md. This plain-text format combines YAML front matter and markdown prose. It includes exact hex codes, font sizes, and spacing units to keep designs consistent.

Google Labs open-sourced DESIGN.md on April 21, 2026, and released version 0.3.0 on June 15. It supports eight sections: Overview, Colors, Typography, Layout, Elevation, Shapes, Components, and Do’s/Don’ts. Tokens are referenced in code with a simple syntax like {colors.primary}.

Google’s official specification says, “Tokens give agents exact values. Prose tells them why those values exist and how to apply them.” This approach helps AI understand both the what and the why behind design choices.

Google recommends adding DESIGN.md files through tools like Google Stitch or by manual writing. Validation commands such as ‘npx @google/design.md lint DESIGN.md’ ensure token files stay clean. Atlassian tested DESIGN.md with their MCP-based server. They found it consumed 92% more tokens and took 35% longer to generate outputs, showing the detail this system can handle.

AI and Design Systems: Building for the Future

AI is changing how developers build interfaces. According to Stack Overflow’s 2025 Developer Survey, 84% of respondents already use or plan to use AI tools. But 46% of them distrust AI’s accuracy. Projects like Astryx try to bridge that gap by giving AI exact tools and clear documentation.

GeekyAnts, another player in this space, built GeekLego—an open-source AI-native design system on Tailwind CSS v4. GeekLego uses a three-tier token model and supports AI tools like Claude Code and Gemini CLI. GeekyAnts CTO Saurabh Sahu warns that “a single vendor AI is a single point of failure,” stressing the need for open and flexible systems.

GeekLego offers React and TypeScript components, a visual token editor, Storybook support, accessibility patterns, dark mode, internationalization, and governance. Their Pepperfry case study reported an 80% boost in design consistency and saved over 300 design hours.

Meta’s Astryx and Google’s DESIGN.md show the industry is pushing open standards. Google aims for DESIGN.md to become as common as OpenAPI. Together, these tools help developers and AI agents build better, more consistent user interfaces.

With AI tools improving fast, design systems that speak the same language to humans and machines will become essential. Astryx is one step on that path. It’s open source and built to grow with AI-driven workflows.