Your Storybook is a Museum nobody walks through anymore. "Astryx by Meta" skips the Building entirely

Let me say the provocative part first, because the rest of this piece does not work if I bury it.

The design system documentation site is dying. Not the design system. The site. The Storybook you maintain, the Zeroheight subscription your team pays for, the beautifully rendered component explorer with the little theme toggle in the corner. That entire layer exists for one reason: so a human can browse a system and understand it. And the human is quietly being removed as the primary reader.

Here is how I know. In the last few months, both incumbents scrambled to bolt an MCP server onto their product. Storybook shipped an official MCP addon, roughly two million installs a week already. Zeroheight shipped a hosted remote MCP that pipes your guidelines into Claude, Cursor, and Copilot. Read that sequence carefully, because it is an admission dressed as a feature. The tools built to make a design system legible to people are racing to make it legible to agents instead. When the workshop starts shipping an API for the machine, the workshop is telling you who the customer is now.

Meta’s Astryx, open sourced in June and still in Beta, is what happens when you stop retrofitting and start over. It was built agent first. Not “AI friendly,” not “with an MCP option.” The agent is the primary reader, and the human docs are the afterthought. This is a tutorial for wiring it up, start to finish, in about ten minutes. But I want you to install it while holding the uncomfortable question in your head: if the agent is the one reading, what exactly is your Storybook for?

The retrofit tell

Before the commands, sit with the difference, because it is the whole argument.

Storybook is a workshop. Its reason to exist is to let a person render a component in isolation and look at it. You write stories by hand. You maintain them. The new MCP addon exposes those stories to an agent, and its own recommended agent instructions include, in all caps, a plea to never hallucinate component properties. Sit with that. The most advanced version of the most popular UI documentation tool on earth now spends its system prompt begging the model not to make things up. That is not a criticism of Storybook. It is a description of the problem everyone is trapped in.

Zeroheight is a documentation platform. Its reason to exist is a polished microsite where designers and engineers read the rules. Its pitch now is that most docs are written for humans and ignored by coding agents, so it will deliver machine ready docs over MCP too. It even markets the gap plainly: Figma’s MCP surfaces design properties, Storybook’s surfaces code, and neither surfaces your actual guidelines, so Zeroheight aggregates all of it into one source of truth. Fair. But notice what is being sold. A place to keep the truth, separate from the code, that then has to be kept in sync with the code.

Astryx does not have that seam, because the docs are generated from the installed package. There is no story file to author, no microsite to keep aligned, no drift between the rendered guidelines and the real props, because the CLI reads the version you actually have on disk. The truth is not a site you maintain next to the code. The truth is the code, and the code explains itself. That is the shift. Everything below is how you turn it on.

What you are actually installing

Quick context so the commands land. Astryx is Meta’s open source design system, in Beta as of June 2026, built on React and StyleX (Meta’s compile time CSS engine, the same one behind Facebook, Instagram, WhatsApp, and Threads). It matured inside Meta’s monorepo for eight years and reportedly powers more than 13,000 apps before it ever saw daylight. The docs site counts 150 plus components; the GitHub repo says over 90. Both numbers come from official sources, so file that discrepancy away and we will come back to it.

The part that matters: it ships a CLI, a self describing JSON manifest, and an MCP server whose entire job is to feed correct, structured documentation into an agent’s context window. The components are almost the side dish.

Before you start

Nothing here is exotic, but if you are missing a piece it is better to know now than halfway through.

• Node and npm, recent enough to run npx.
• A React project. Next.js with Tailwind is the smoothest path because Astryx ships prebuilt CSS, so there is no build plugin to configure. Vite works too.
• An AI coding tool. This tutorial covers Claude Code, Cursor, and the Copilot/Codex family, since the setup differs slightly per tool.
• Ten minutes and a willingness to let the agent run a command or two on your behalf.

Sorted Pixels is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.

Step one: install the packages

Core, a theme, and the CLI as a dev dependency.

bash

npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli

Then wrap your app once in the Theme provider. In Next.js that looks like this:

tsx

'use client';
import type {ReactNode} from 'react';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';

export function Providers({children}: {children: ReactNode}) {
  return {children};
}

And you can already render something:

tsx

import {Button} from '@astryxdesign/core/Button';

export default function Page() {
  return ;
}

If you stop here you have a normal, competent component library. Fine. But you have not touched the reason Astryx exists. Keep going.

Step two: teach your agent to read the system

Here is the move. You do not write the setup instructions for your agent. You tell your agent to write them for itself. Paste this into whatever tool you use:

Install @astryxdesign/cli and run npx astryx init --features agents to set up your Astryx context. Read the generated file.

That is it. The init --features agents command generates a context file pulled from your installed version: a component index, a set of behavioral rules, and a CLI reference. After a version bump you run it again and it updates in place, which means the agent’s knowledge never drifts away from the code you actually have. Compare that to a Zeroheight page someone forgot to update after the last release.

If you want to target a specific tool’s file format, be explicit:

bash

npx astryx init --features agents --agent claude    # CLAUDE.md
npx astryx init --features agents --agent cursor    # .cursorrules
npx astryx init --features agents --agent codex     # AGENTS.md (Copilot, Codex, etc.)

The generated file does not just dump a list of components. It teaches the agent a three step workflow to run before it writes a single line of UI:

1. npx astryx template --list to find a page pattern to use as a reference.
2. npx astryx template --skeleton to study the layout structure.
3. npx astryx component to read the real props and examples for every component it is about to use.

On top of that it ships rules that kill the usual agent nonsense: no raw divs, no inline style={{}}, use tokens instead of magic pixel values. You stop being the person who corrects the model’s conventions in every review. Those corrections now live at the system level, where they belong.

Step three: verify it actually took

This is my favorite part, and it is the bit most people will skip. Astryx ships a self test. Before you trust the agent with real work, paste it these three questions:

1. What is the correct import path for Button?
2. How do you make a Dialog non dismissible?
3. What prop does Selector use for its items?

The docs claim a zero percent pass rate on these without the agent docs installed. I believe it, because I tried it cold on a fresh session and the model answered all three with total confidence and got all three wrong. That is the entire problem with agents and design systems in one demo, and it is the same problem Storybook’s caps lock warning is fighting and Zeroheight’s whole product is priced around. They do not say “I don’t know.” They invent a plausible prop name and move on, and you find out in review at 9pm. If your tool cannot answer all three, it knows to run the init command first. A design system that can detect its own absence in the model’s memory is a new idea, and it is the one everyone else is trying to reverse engineer.

The two setup traps

Two things bit me, so learn from my wasted twenty minutes.

Cursor does not reliably load project rules. Cursor decides which rules to apply based on relevance, which means your carefully generated context sometimes just does not show up. The fix is to install it as a User Rule instead, which applies across every project:

bash

mkdir -p ~/.cursor/rules
npx astryx init --features agents --agent-docs-path ~/.cursor/rules/xds.mdc

Agents guess the CLI binary path and fail silently. Left alone, a model will try to call something like node_modules/@astryxdesign/cli/bin/docs.mjs, which is the wrong file, and the command fails quietly. Nail it down with an npm script alias in package.json:

json

"scripts": {
  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}

Now the agent runs npx astryx component --list against a known good path instead of playing the guessing game.

If you live in a chat window instead of an editor

Not everyone runs an agent in the terminal. If you are pasting into web Claude or ChatGPT, every command supports a --dense flag that strips the output down to a token efficient format built for context windows:

bash

npx astryx component Dialog --dense
npx astryx docs styling --dense
npx astryx docs tokens --dense

Paste that in and you get the same knowledge without the agent needing shell access.

The MCP server, which is where the argument closes

Everything above is the paste driven path. The cleaner version is the MCP server, and it works with any MCP compatible tool: Claude Desktop, Cursor, Windsurf, Cline, and the rest. Add this to your MCP config:

json

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

The server exposes exactly two tools, and the restraint is the point. search(query) finds components, doc topics, and templates from natural language (”dropdown menu”, “success message”). get(name) pulls the full documentation with props, usage, and examples.

And this is where it clicks against the incumbents. Storybook’s MCP requires you to run a Storybook dev server and hand author the stories it reads from. Zeroheight’s MCP requires you to maintain a Zeroheight, and it is gated behind their paid plans. Astryx’s MCP is a URL. There is no site to run, no stories to write, no source of truth to keep in sync, because the source of truth is the package. One more command underlines it. The CLI returns a self describing JSON manifest of every command, argument, flag, and response type:

bash

npx astryx manifest --json

Think of it as an OpenAPI spec for the CLI. The agent does not scrape --help and hope. It reads one structured payload and knows the entire surface. That is the quiet, unglamorous decision that separates “we support agents” from “we were built for agents.”

The honest counterargument, because I am not writing an obituary I cannot defend

Now the stress test, and this is where I pump the brakes on my own thesis.

Astryx gives you Meta’s opinions. Storybook and Zeroheight document your opinions. That difference is not small. When you run Astryx’s CLI, the agent learns the Astryx Button, with Astryx’s props, in Astryx’s brand neutral shell. Useful, fast, correct. But if your company has a bespoke system, a specific token scale, a legal team that owns the disclaimer copy, a decade of hard won usage rules about when the destructive variant is allowed, none of that lives in a package you npm install. It lives in the museum. Zeroheight’s actual pitch is that Figma surfaces properties and Storybook surfaces code but neither surfaces your validated decisions, and they are not wrong that those decisions have to live somewhere. Astryx does not solve that for a team with its own house style. It solves it for the greenfield, the internal dashboard, the prototype, the startup that would otherwise be reinventing a Selector at midnight.

And the human did not leave the room. Someone still decides what enters the agent’s context. Someone still reviews the pull request. Zeroheight’s own 2026 report is telling on this: only about 12 percent of teams currently deliver docs to agents, while 57 percent say they wish they did. The direction is obvious. The arrival is not here yet.

So the honest version of my provocation is this. The documentation site as a destination, a place a person opens in a browser to learn the system, is on its way out, and the incumbents adding MCP servers is the loudest proof. But the documentation site as a source of truth, a reviewed place where a team’s decisions are pinned down before an agent reads them, is not dying. It is being turned inside out. It stops being a website and becomes a payload. Storybook and Zeroheight are betting they can be the payload for your system. Astryx is a bet that for a huge slice of what people build, they will just take Meta’s.

What is left when the museum closes

Here is where I land, and I have said versions of this until people are tired of it, so I will keep it tight.

For a decade we poured craft into making design systems beautiful for humans to look at. The Storybook, the Zeroheight, the annotated Figma library. Astryx is the first mainstream system to treat that entire layer as overhead for a reader who no longer reliably shows up. It might be early. It might be wrong for your bespoke system. But the direction it points is not in question, and you can feel it in the fact that everyone you already pay is quietly building the same road.

When the system explains itself to the machine, the last job in the room is the one that was always the real job. Not writing the story. Not maintaining the microsite. Knowing what good looks like, and refusing to ship anything less. Astryx handles the props. It will never handle the taste. That part is still yours, and it is the only part that was ever the point.

Wire it up. Run the three questions. Then go make the decision the agent cannot.

Thanks for reading Sorted Pixels! This post is public so feel free to share it.