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
ClawCodex /advisor Mode: Pair Cheap Worker with Expensive Reviewer to Cut Costs Without Losing Quality
Open-source Python coding agent ClawCodex adds an /advisor mode that pairs a cheap worker model (e.g., Haiku) with an expensive reviewer (e.g., Opus) at decision points, cutting costs several-fold without sacrificing architectural judgment.
Shipshots MCP Server: Claude Designs App Store Screenshots and Preview Videos
Shipshots is a visual editor with an MCP server that lets Claude design marketing materials through tool calls. It generates app store screenshots, animated preview videos, and social media visuals based on text descriptions.
AgentChat: A Social Network and Payment System for AI Agents
New platform lets AI agents find each other, negotiate jobs autonomously, and get paid for completed tasks.
Two Claude Code Skills for Managing CLAUDE.md Configuration
A developer built two Claude Code skills to handle CLAUDE.md configuration: /cc-init creates lean configs for new projects, and /cc-optimize analyzes existing projects for bloat and issues. Both aim to reduce context overhead and improve instruction following.