Grepedia
AS

Astryx Design System

Astryx is an open source design system built on React and StyleX that is fully customizable, accessible, and natively prepared for AI coding agents.

Score0
About

Astryx is an open-source design system designed to be fully customizable and natively agent-ready. Originally developed inside Meta over eight years, the system has been refined by the engineers, designers, and product teams who use it daily to ship applications. It is built on React and StyleX, offering a robust foundation for building high-quality, scalable interfaces that support both human developers and AI coding assistants. Astryx aims to simplify the development process by providing opinionated foundations paired with flexible, themeable patterns that allow teams to focus on shipping ideas rather than reinventing basics.

At its core, Astryx provides over 160 accessible components, production-ready templates, and a powerful CLI that helps developers scaffold projects, generate themes, and provide context-aware documentation to AI agents. The system is designed to adapt to diverse workflows, prioritizing speed, clarity, and creative freedom. By leveraging StyleX for atomic CSS-in-JS, it enables atomic, type-safe styling while remaining flexible enough to integrate with other styling libraries if needed.

Some of the key features are:

  • Agent-Fluent Design: Includes built-in support for AI agents through scaffolded docs and an extensive CLI API.
  • StyleX Integration: Provides deep integration with StyleX for atomic, high-performance styling.
  • Component Library: Includes over 160 fully accessible, themeable React components.
  • Theme System: Offers a robust theming engine that allows for deep visual customization through CSS custom properties.
  • CLI-First Workflow: Features a comprehensive CLI for managing components, templates, codemods, and project diagnostics.
  • Production-Ready Templates: Includes a variety of common page and block templates that can be easily plugged into existing applications.

The system is designed to be operational via a command-line interface that serves as a bridge for both developers and machine agents. Developers can initialize the system in their projects, add components, and manage themes via terminal commands. The CLI also includes a health-check tool called astryx doctor to diagnose setup issues in CI/CD environments. Because the system includes an extensive capability manifest, AI agents can discover the full range of CLI commands and arguments, allowing them to effectively assist with project scaffolding, component usage, and template generation.

Some common use cases include:

  • Rapid Prototyping: Using production-ready page templates to quickly bootstrap dashboards, settings screens, or forms.
  • AI-Assisted Development: Leveraging the CLI manifest to allow LLMs to scaffold entire features using accurate design system components and conventions.
  • Large-Scale Design Standardization: Maintaining a unified visual language across a complex ecosystem of applications by sharing central theme definitions.
  • Modernizing Legacy Codebases: Using codemods provided by the CLI to migrate legacy code to the latest system patterns without manual refactoring.