Astryx

160 種類以上のアクセシブルなコンポーネント、柔軟なテーマ設定、テンプレート、Agent 対応ツールを備えたオープンソースの React デザインシステム。

コミュニティ:

AI開発者ツール UI＆UXデザイン AIアプリビルダー

ウェブサイトを訪問

Atoms - AIで簡単にサイト・アプリを構築

StoreClaw

Sponsor

オンライン販売者向けの自律的なコマースエンジンで、すべての主要なEコマースプラットフォームでストアを24時間365日監視、実行、成長させます。手動介入は不要です。

概要
代替品
分析

Atoms - AIで簡単にサイト・アプリを構築

製品概要

Astryxとは？

Astryx は、本番運用に耐える React インターフェースを構築するための Meta のオープンソースデザインシステムです。React 19+ と StyleX の上に構築されており、アクセシブルなコンポーネント、トークンベースのテーマ設定、ダークモード対応、再利用可能なページテンプレートを 1 つのツールキットにまとめています。チームは、手早くセットアップできるプリコンパイル済み CSS を採用することも、より細かなスタイル制御のためにソースからビルドすることもできます。CLI と MCP サーバーは、コーディング Agent がコンポーネントドキュメント、サンプル、テンプレート、デザインシステムの規約に構造的にアクセスできるようにします。

主な機能

アクセシブルな React コンポーネント
一貫した API、組み込みの spacing、ダークモード対応、再利用可能なインタラクションパターンを備えた、160 種類以上のテーマ対応 React コンポーネントを提供します。
ブランドレベルのテーマ設定
コンポーネントの実装を書き直すことなく、トークンを通じて色、タイポグラフィ、spacing、モーション、コンポーネントのオーバーライドをチームで定義できます。
柔軟なカスタマイズパス
コンポーネントをそのまま使うことから、カスタム CSS の適用、バリアントの拡張、コンポーネントのソースコード全体の eject まで、段階的なカスタマイズをサポートします。
本番運用に耐えるテンプレート
白紙のキャンバスではなく構造化されたレイアウトで、よくある製品インターフェースをすぐ始められるページパターンを用意しています。
Agent 対応ドキュメント
コンパクトな Agent 用コンテキストファイルを生成する CLI と、対応ツールがコンポーネントドキュメントを検索し使用例を取得できる MCP サーバーを提供します。
2 通りの配布形式
手早く導入できるプリコンパイル済み CSS としてインストールするか、コンポーネント単位のスタイル最適化のために TypeScript と StyleX のソースから利用できます。

ユースケース

社内向けプロダクトツール : 一貫したコントロール、フォーム、テーブル、ナビゲーションパターンで、ダッシュボード、管理画面、ワークフローツール、データ中心のインターフェースを構築します。
ブランド化された Web アプリケーション : 共通の挙動とアクセシビリティを維持しながら、カスタムテーマとコンポーネントのオーバーライドを適用して独自のプロダクトアイデンティティを作り出します。
高速なプロダクトプロトタイピング : コンポーネントとページテンプレートを使い、よくある UI パターンを一から作り直すことなく、プロダクトの構想を動作する React インターフェースへ変換します。
デザインシステムの標準化 : 複数のプロダクトチームに共通の UI 基盤を提供し、フロントエンドの重複作業を減らしてアプリケーション間の一貫性を高めます。
AI 支援によるフロントエンド開発 : コーディング Agent にバージョンに対応したコンポーネントリファレンス、ルール、サンプルを与え、生成される UI コードが Astryx の規約に従うようにします。
カスタマイズ可能なエンタープライズ向けインターフェース : 基盤となるシステムを恒久的に fork することなく、複雑なアプリケーションインターフェースを組織固有のデザイン要件に適応させます。