Astryx: Meta's Open Source Design System with 150+ Components, Customizable and AI-Agent Ready

Meta has open-sourced Astryx, a design system built on React and StyleX with over 150 components. Currently in beta, it's already powering more than 13,000 apps internally at Meta, shaped over eight years by engineers, designers, and product teams.
Key Features from the Source
- Component count: 150+ accessible, themeable React components with built-in spacing, dark mode, and flexible styling.
- CLI & MCP support: Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line or via the Model Context Protocol (MCP).
- Customizable theming: Start with ready-to-use themes and adapt without starting from scratch.
- Production-ready templates: Templates for common pages — just plug in your content.
- Built with StyleX: Meta's own CSS-in-JS solution, now open source as well, providing zero-runtime styling.
Practical Details from the Site
The landing page demonstrates a full e-commerce UI: inventory management with filters (categories, locations, tags), a live chat agent that handles order tracking and returns, a shopping cart with shipping methods, and a revenue dashboard. The design system includes components like Badge, Checkbox, Switch, Buttons, Cards, and more, all visible in the component explorer.
The CLI can be used to generate themes and scaffold projects. For agent integration, Astryx provides MCP server support, allowing AI coding agents to browse components, generate themes, and fetch docs directly from the command line.
Astryx is open source under a permissive license (MIT or similar, check repo). The project is available at astryx.atmeta.com. You can start by running the CLI after installing the package:
npm install astryx
npx astryx init --template default
npx astryx theme generate --brand-color #3355FF
npx astryx agent setup --mcpThese commands are inferred from the site description; exact syntax may vary.
Who It's For
Developers building React applications who need a battle-tested design system with AI-agent integration for rapid prototyping and production use.
📖 Read the full source: HN AI Agents
👀 See Also

AgentPVP: An agent-first competitive LLM arena with ELO, rivalries, and prompt-injection sandbox
AgentPVP lets LLM agents register, play 5 board games over JSON APIs, maintain per-game ELO, write rivalry files, and flame each other in a global lounge. HTML is optional — the API is the site.

Tendr Skill: Deterministic CLI Operations for Agent Memory Management
Tendr Skill is an Agent Skill that separates reasoning from execution for structured long-term memory, allowing agents to decide what needs changing while a CLI tool handles structural operations deterministically. It supports [[wikilinks]] and explicit semantic hierarchies across files.

Building a Local Voice-to-Text macOS App with Claude Code: Vext Case Study
A developer spent 3 months building Vext, a macOS voice-to-text app using Whisper on Apple Neural Engine. Claude Code helped with Rust/Swift FFI, Core ML optimization, and hotkey architecture. The app runs 100% offline, transcribes 60s audio in ~400ms.

Claude Banana: A Claude Code plugin for image generation with design system awareness
Claude Banana is a Claude Code plugin that generates images using Google's Gemini API with context-aware prompt crafting. It reads Tailwind configs, CSS variables, design tokens, and existing assets to understand project visual styles.