Meta Astryx v0.6.0 Just Made It Possible for AI Agents to Build Your Entire UI From a Prompt

Meta just dropped Astryx v0.6.0, and if you build anything on the web, this is the design system that changes how you work with AI. Responsive themes that adapt in pure CSS, an MCP server so your AI coding agent can query components directly, and 150+ accessible React components that an AI can actually use correctly. Here is what it does and why it matters.

What Astryx Actually Is

Astryx is Meta’s open-source React design system. It has been powering Facebook, Instagram, and WhatsApp internally for eight years. In June 2026, Meta released it to the public under the MIT license.

It is built on React 19 and StyleX, Meta’s build-time CSS compiler. It ships 150+ accessible UI components, customizable design tokens, and a CLI that ejects component source code into your project so you can override anything.

But the part that makes it different from every other design system is the AI integration. Astryx was built from the ground up to be agent-ready.

The MCP Server: Your AI Can Now Read the Design System

This is the big unlock. Astryx ships a Model Context Protocol (MCP) server that any MCP-compatible AI tool can connect to. Claude Desktop, Cursor, Windsurf, Cline, Codex, they all support MCP.

Once connected, your AI can do two things:

1. search(query): Discover components, doc topics, and templates by natural language. Type “dropdown menu” or “success message” and it finds the right component.
2. get(name): Pull full documentation with props, usage examples, and code snippets.

No more pasting documentation into your AI’s context window. No more hallucinated props. The AI queries the design system directly and writes correct component code every time.

Add this to your MCP config:

{
"mcpServers": {
"xds": {
"type": "url",
"url": "https://astryx.atmeta.com/mcp"
}
}
}

That is it. One URL and your AI agent can search and read every component in the system.

The CLI Agent Docs: A Three-Step Workflow for AI

Even without the MCP server, Astryx has a built-in system for teaching AI tools how to write correct code. Run one command:

npx @astryxdesign/cli init --features agents

This generates an AGENTS.md file with everything your AI needs: component index, behavioral rules, CLI reference, and integration guidance. It targets Claude, Cursor, Codex, and Muse out of the box.

The generated context teaches your AI a three-step workflow before writing any UI code:

1. astryx template --list: Find a related page pattern to use as a starting point
2. astryx template --skeleton: Study the layout structure
3. astryx component : Read props and examples for every component used

This prevents the most common AI mistakes: using raw divs instead of Astryx components, inventing props that do not exist, and writing inline styles instead of using design tokens.

What Is New in v0.6.0

Responsive Themes That Adapt in CSS

This is the headline feature. Themes can now adapt tokens, component styles, typography, color, radius, and motion to named viewport widths, pointer precision, contrast preference, and reduced-motion preference. All in CSS.

defineTheme({
name: 'acme',
adaptations: {
widthBreakpoints: {sm: 640, md: 768, lg: 1024},
rules: [
{
when: {width: {below: 'md'}, pointer: 'coarse'},
value: {
tokens: {'--size-element-md': '44px'},
components: {
button: {base: {fontWeight: 'var(--font-weight-bold)'}},
},
},
},
{
when: {motion: 'reduce'},
value: {tokens: {'--duration-medium': '0ms'}}},
},
],
},
});

A theme can respond to multiple conditions at once. Small screen with a touch pointer? Bigger touch targets and bolder text. User prefers reduced motion? All animations stop. The browser adapts immediately without waiting for a JavaScript layout loop.

Adaptive Selector

Selector and MultiSelector now ship an presentation="adaptive" prop. On a compact surface, the same component renders as a modal bottom sheet with touch-sized rows. On a wider surface, it stays as an anchored popover. Same options, same values, same component. It just adapts.

Six New Templates

Astryx 0.6 adds five wizard templates and a work-item detail page:

1. Checkout Wizard: Stepped checkout with a live order summary
2. Form Wizard: Full-page flow giving each step the full content width
3. Dialog Wizard: Short guided flow keeping the underlying page in context
4. Inline Wizard: Accordion flow where completed steps collapse around the active one
5. Vertical Wizard: Long-form flow with persistent progress and contextual guidance
6. Work Item Detail: Tracked-item view with subtasks, properties, attachments, and activity

Each template can be previewed in the Playground or added with astryx template .

Neutral Palette Rebuild

Neutral has been rebuilt around a reproducible, theme-owned OKLCH palette. Light-mode foregrounds use darker stops. Dark chromatic ramps have calmer low tones. Destructive buttons use palette-backed red. Info banners use a quieter blue tint. Theme authors get an OKLCH palette generator with terminal and HTML previews, typed output, custom stops, and deterministic generation records.

Specification-Backed Path to v1

Behind the scenes, Meta is writing durable specifications for every component and shared system as Astryx moves toward v1. These specs define public API, behavior, accessibility requirements, anatomy, theme targets, state representation, and allowed variation. This gives AI agents something concrete to verify against, catching drift in tests or docs before it ships.

What This Unlocks

For small teams and solo builders, Astryx v0.6.0 is the first design system that actually works with your AI coding agent instead of fighting it. You do not need a design system maintainer on staff. You do not need to paste component docs into ChatGPT. You connect the MCP server, describe what you want, and your AI writes code that uses the right components with the right props.

For teams already using React, the responsive theme system means your design tokens now respond to viewport, pointer type, contrast preference, and motion preference without a single line of JavaScript. The browser handles it. This is how design systems should have worked all along.

The MCP server is the real unlock. Every AI agent that supports MCP can now query a production-grade design system with 150+ components, read the docs, and write correct code. No hallucinated props. No guessing at API surfaces. No copying and pasting from Stack Overflow.

How to Get Started

1. Install Astryx: npm i @astryxdesign/[email protected] @astryxdesign/[email protected] @astryxdesign/[email protected]
2. Set up agent docs: npx @astryxdesign/cli init --features agents
3. Add the MCP server to your AI tool config
4. Start building with components: astryx component --list to see everything available

Astryx is MIT-licensed, requires React 19 or later, and the source is on GitHub at facebook/astryx.

Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.