Skip to main content
Meta's AstroX design system featuring a command-line interface and MCP server integration, used by companies like Figma and S

Editorial illustration for Meta's Astryx adds CLI and MCP server to design system used by Figma, Snowflake

Meta's Astryx adds CLI and MCP server to design system...

Meta's Astryx adds CLI and MCP server to design system used by Figma, Snowflake

3 min read

Meta dropped Astryx this week, an open‑source React design system that’s finally out of the company’s private monorepo after eight years of internal use. It’s still in beta, but the codebase already shows the scale of Meta’s internal tooling: more than 90 React components, over 150 documented examples, and a suite of templates for dashboards, settings pages and forms. The library runs on StyleX, Meta’s compile‑time CSS engine that was open‑sourced at the end of 2023 and now powers Facebook, Instagram, WhatsApp, Threads and even external tools like Figma and Snowflake.

Here’s the thing: Astryx isn’t just a component dump. All primitives are exported and composable, letting developers stitch together UI at any level. Spacing is handled automatically through what the team calls “context‑aware spacing compensation,” which sidesteps the classic double‑padding problem.

A new CLI and MCP server give AI agents the ability to scaffold and document interfaces, positioning the system as “agent‑ready.” The project ships under an MIT license, with roughly three‑quarters of its code written in TypeScript. While it’s production‑tested inside Meta, it’s still a young public offering.

External companies like Figma and Snowflake also use it.

Two design choices stand out. All primitives are exported and composable, not hidden. It eliminates ‘double padding’ issues without manual fixups.

The ‘Agent Ready’ Part

This is the main difference from other design systems. Astryx ships docs and tooling that AI agents can read. A CLI exposes the same API a developer uses. Agents use it to scaffold, browse, and document.

The CLI is called via astryx or the shorthand xds. The CLI returns a self-describing manifest as JSON. It lists every command, argument, flag, and response type. Compareing it to an OpenAPI spec for the CLI. So an agent need not scrape --help text. They are named default, neutral, daily, butter, chocolate, matcha, stone, gothic, brutalist, and y2k. You change the variables, and every component restyles. Component code stays untouched.

The interactive demo below shows this directly. Pick a theme and watch the tokens update live.

Astryx · interactive explainer
01 · OVERVIEW

What Astryx is

An open-source React design system from Meta -- foundations, components, templates, and themes. Built on React and StyleX, Meta’s compile-time CSS engine. It ships pre-built CSS, so no build plugin is required. Currently in Beta.

8 yrsbuilt inside Meta
13,000+apps it powers
150+components (docs site)
10ready-made themes
github.com/facebook/astryx MIT license CLI + MCP
NoteThe GitHub repo states “over 90 components”; Meta’s docs site counts 150+.

Why this matters

We see Meta pushing Astryx out of its internal monorepo and into the public eye, offering a CLI and MCP server alongside the React‑based design system. Built on StyleX, Meta’s compile‑time CSS engine, the framework promises composable primitives that remain exposed, avoiding the “double padding” pitfalls that often require manual fixes. Figma and Snowflake already rely on it, suggesting early traction beyond Meta’s walls.

For developers, the added CLI could streamline workflow integration, while the MCP server may simplify multi‑client coordination. Founders might view the open‑source Beta as a potential cost‑saving alternative to proprietary UI kits, yet the long‑term support model is still unclear. Researchers interested in AI‑driven design tools can now explore a system where agents can read the design language, but practical examples remain limited.

Ultimately, Astryx adds another option to the React ecosystem; whether it gains broader momentum or stays niche will depend on community uptake and Meta’s continued investment.

Further Reading