Astryx Design System

Astryx Design Systemは、再利用可能なコンポーネント、テーマ、テンプレート、docs、CLIを備えたオープンソースのデザインシステム。カスタマイズ性が高く、agent-assisted setupにも対応。

Astryxとは何ですか？

Astryxは、共有コンポーネントライブラリ、テーマ、およびそれを支える開発者向けツールを備えた、ユーザーインターフェース構築用のオープンソースデザインシステムです。サイトでは、完全にカスタマイズ可能で agent ready として紹介されており、人間の開発者とAIコーディングツールの両方を対象にしたセットアップガイドが用意されています。

Getting started の流れは実践的な手順を示しています。まず core パッケージ、テーマ、CLI をインストールし、`npx astryx init` を実行します。その後、特定のエントリポイントからコンポーネントをインポートし、グローバルCSSを通じてテーマを適用します。システムには、コンポーネント、テンプレート、docs を見つけるためのサンプルアプリと CLI も含まれています。

主な機能

幅広いコンポーネントライブラリ

ライブラリは、ボタン、フォーム、ナビゲーション、オーバーレイ、テーブル、レイアウト、フィードバック、データ表示など、多くのコンポーネントカテゴリに整理されており、各バリアント、状態、パターンごとにそのまま使える例が用意されています。

コンポーネントごとのエントリポイント

コンポーネントは `@astryxdesign/core` パッケージからインストールされ、コンポーネントごとのサブパス経由でインポートされるため、import が明示的になり、バンドルも小さく保てます。

テーマベースのトークンシステム

Getting started ガイドでは、テーマパッケージとグローバルCSSのインポートが示されており、テーマは色、間隔、角丸、タイポグラフィなどのデザイン・トークンを CSS カスタムプロパティとして提供します。

複数のスタイリングワークフロー

Astryxは、プレーンCSSや className から Tailwind、CSS-in-JS まで、いくつかのスタイリング手法をサポートしており、`xstyle` を使った StyleX によるスタイル上書きの方法もドキュメント化しています。

docsと探索のためのCLI

CLI は、コンポーネント一覧の表示、docsトピックの閲覧、テンプレートやトークン参照の確認に使えるコマンドを提供し、プロジェクト内での探索や標準化をしやすくします。

参考用アプリセットアップ

Next.js と Vite 向けのサンプルアプリが用意されており、テーマCSS、StyleX、Tailwind、またはソースインポートを組み合わせたセットアップも含まれています。

Astryxのよくある使い方

再利用可能なコンポーネントで製品UIを構築する
製品インターフェース向けの、すぐ使えるUIプリミティブとパターンのセットが欲しいときにコアライブラリを使います。追加する各コンポーネントは明示的にインポートします。
共有のビジュアルシステムを適用する
アプリ全体で一貫したビジュアル言語を適用し、色、間隔、角丸、タイポグラフィなどのトークン値を制御したいときに、テーマパッケージとグローバルCSSインポートを使います。
セットアップとドキュメントを標準化する
チームのオンボーディング、利用可能なコンポーネントの確認、コマンドラインからのテンプレートやトークン参照の発見が必要なときに、CLI と生成された docs を使います。
参照アプリから実装を立ち上げる
Next.js、Vite、または StyleX や Tailwind のようなスタイル固有のセットアップに対する動く参照が欲しいときに、サンプルアプリを出発点として使います。
コンポーネントの挙動と使い方を確認する
特定のバリアント、状態、パターンのそのまま使える例が必要で、プロジェクトに組み込む前に挙動や使い方を確認したいときに、ブラウザで参照できるコンポーネントカタログを使います。

Pros and Cons

Pros

セットアップ手順が明確なオープンソースのデザインシステム。
コンポーネント、テーマ、テンプレート、docs、CLI をひとつのパッケージエコシステムでカバーしています。
テーマが CSS カスタムプロパティとしてデザイントークンを提供するため、グローバルなテーマ適用がシンプルです。
StyleX を含む複数のスタイリング手法をサポートしています。
Next.js と Vite のサンプルアプリがあり、動く参照実装から始めやすくなっています。

Cons

取得したページでは、オープンソースであること以外の価格、プラン、ライセンスの詳細は表示されていません。
収集された証拠におけるドキュメントの範囲は部分的で、実装の詳細の一部は完全なエンドツーエンドガイドではなく、主に例を通じて示されています。

FAQ

Astryxは何のためのものですか？

Astryxは、コンポーネント、テーマ、テンプレート、docs、CLIを備えたオープンソースのデザインシステムとして紹介されています。セットアップの流れでは、npmによるインストールに加えて、agent docsとスターターテンプレートを設定するためのセットアップコマンドが示されています。

Astryxはどのように始めますか？

ソースでは、@astryxdesign/core、@astryxdesign/theme-neutral のようなテーマパッケージ、そして @astryxdesign/cli をインストールし、その後 `npx astryx init` を実行して agent docs を設定し、スターターテンプレートを選択する流れが示されています。

Astryxのコンポーネントはどのようにインポートしますか？

コンポーネントはカテゴリごとのサブパスエントリポイントからインポートされます。たとえば `@astryxdesign/core/Button` や `@astryxdesign/core/Layout` などで、バンドルを小さく保ち、利用箇所を明示することを意図しています。

Astryxは既存のデザインシステムに合わせてカスタマイズできますか？

Astryxは、プレーンCSS、className、Tailwind、CSS-in-JSを含む複数のスタイリング手法をサポートしており、`xstyle` を使って StyleX によるスタイル上書きを行うより深い統合も提供しています。

AstryxにはCLIやサンプルアプリがありますか？

サイトでは、コンポーネント、トークン、テンプレート、docs向けのCLIが強調されており、セットアップガイドでは Next.js と Vite のサンプルアプリも案内されています。これらが、ソースで示されている最も明確な実装パスです。

Quick Facts

カテゴリ: デザインシステム
主な用途: テーマと補助ドキュメントを備えたインターフェースコンポーネントの構築
インストール: npm パッケージと `npx astryx init`
スタイリング: CSS、className、Tailwind、CSS-in-JS、StyleX
パッケージ名前空間: @astryxdesign/core と関連パッケージ
ソースドメイン: astryx.atmeta.com