Meta、AI対応デザインシステム「Astryx」を公開

Meta は、人間と AI エージェントの両者が協働して運用できるフルカスタマイズ可能なオープンソース・デザインシステム「Astryx」をベータ版として公開しました。これは新規の実験プロジェクトではなく、過去 8 年間に Meta 内部で育まれてきたものです。同社によると、毎日エンジニアやデザイナー、プロダクトチームに支えられ続けられた結果、現在では最も利用頻度が高く、規模も最大のデザインシステムへと成長したとのことです。

Astryx は、150 以上のアクセシビリティ対応コンポーネント（ドキュメントサイト上では 160 以上）、ブランドレベルのテーマ設定、ダークモード、すぐに使えるテンプレート、そして CLI を一つのまとまったパッケージとして提供します。基盤には React と StyleX が採用されており、事前にビルドされた CSS をインポートして、型安全な React コンポーネントを使用できます。接続用のビルドプラグインを導入する必要もあれば、独自のスタイリングライブラリを採用する必要もありません。

Astryx が解決しようとしている課題

多くのデザインシステムでは、どちらか一方を選ばざるを得ないジレンマがあります。大企業のシステムを採用すれば、自社のアプリが他社製品そっくりの見た目になってしまうリスクがあります。逆に、コピー＆ペーストでコンポーネントを流用すれば、各プロジェクトが独自のコードスニペットにフォークし、共通の整合性が失われ、外部からの修正も受け入れられず、アクセシビリティの問題は後回しになりがちです。

Astryx はこの 2 つの課題を分離して解決します。システム側で動作やアクセシビリティ、品質基準を管理し、見た目についてはテーマが担当します。色、フォント、角丸、モーションなどのトークンレベルでカスタマイズできるため、書き換えを行わずともアプリに独自性を持たせることが可能です。テーマは単なる CSS カスタムプロパティのオーバーライドの集合体であるため、デザイナーはコンポーネントソースをフォークしたりラップしたりすることなく、Astryx の見た目を自由に再設計できます。

Astryx の設計原則は、強制ではなくガイダンスを重視し、文書化された明確な規約に基づき、人間と AI が共通で利用する単一のシステムを実現すること、そして測定によってその価値を検証するという点にあります。つまり、規約は主張されるものではなく、実際にテストされて確立されるものです。

アーキテクチャは「基盤」「コンポーネント」「パターン」の 3 レイヤーで構成されています。基盤（Foundations）は、一貫性がありアクセシビリティに配慮したインターフェースを構築するための基本要素であり、タイポグラフィ、カラー、レイアウト、そしてアクセシビリティが含まれます。コンポーネントは、TypeScript のフルサポートを持つ 150 以上の再利用可能なビルディングブロックです。パターンは、テーブルページや詳細画面のレイアウト、フォームウィザード、ナビゲーション、データ入力フローなど、一般的なワークフローに対する実戦で検証された解決策を提供します。

このシステムが特にオープンである理由は、2 つの設計思想にあります。まず、コンポーネントは特定のトップレベル API に閉じ込められるのではなく、あらゆるレベルで組み合わせ可能である点です。また、必要に応じてコンポーネントのソースコードをプロジェクト内に直接取り込む「スウィズル（swizzle）」機能も用意されています。

スタイリングには StyleX が採用されていますが、これは利用者からは見えません。そのため、既存のプロジェクトに合わせて Tailwind、CSS Modules、あるいは通常の CSS を className で上書きすることが可能です。以下の解説では、トークンを変更するだけで Astryx の 7 つのテーマ間でコンポーネント群がどのように再スタイルされるかを示しています。

Astryx Explainer — Marktechpost

/* ===== Marktechpost · Astryx インタラクティブ解説 (ライトテーマ) ===== */

#mtp-ax-explainer{

--ink:#16181D; --ink-2:#5A6270; --ink-3:#8A9099;

--line:#E6E8EC; --paper:#FFFFFF; --tint:#F6F7F9;

--brand:#1657E0; --brand-ink:#0B3AA8; --ok:#16A34A;

--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

--sans:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

font-family:var(--sans); color:var(--ink); background:var(--paper);

line-height:1.5; -webkit-font-smoothing:antialiased;

border:1px solid var(--line); border-radius:16px; overflow:hidden;

max-width:900px; margin:0 auto;

}

#mtp-ax-explainer .ax-head{padding:22px 24px 18px;border-bottom:1px solid var(--line);background:

linear-gradient(180deg,#FBFCFE,#FFFFFF)}

#mtp-ax-explainer .ax-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;

text-transform:uppercase;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:8px}

/* ステータスバー */

#mtp-ax-explainer .ax-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);

border-bottom:1px solid var(--line)}

#mtp-ax-explainer .ax-stat span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;

text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* コントロール用スタイル */

#mtp-ax-explainer .ax-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;

background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s}

/* トークンの読み出し */

#mtp-ax-explainer .ax-tokenbtn{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--brand);

background:none;border:none;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}

#mtp-ax-explainer .ax-tokens{margin-top:10px;background:#0E1116;border-radius:10px;padding:12px 14px;

font-family:var(--mono);font-size:12px;line-height:1.7;color:#C9D3E0;display:none;overflow-x:auto}

/* live preview device */

#mtp-ax-explainer .ax-device{border:1px solid var(--pv-line,#E6E8EC);border-radius:calc(var(--pv-radius,10px) + 6px);

background:var(--pv-bg,#fff);padding:16px;transition:background .25s,border-color .25s,border-radius .25s;

box-shadow:0 10px 30px -18px rgba(16,24,40,.35)}

#mtp-ax-explainer .ax-card{background:var(--pv-surface,#F4F4F5);border:1px solid var(--pv-line,#E6E8EC);

border-radius:var(--pv-radius,10px);overflow:hidden;transition:all .25s}

#mtp-ax-explainer .ax-thumb{height:96px;background:

linear-gradient(135deg,var(--pv-primary,#18181B),color-mix(in srgb,var(--pv-primary,#18181B) 55%,#ffffff));

position:relative}

#mtp-ax-explainer .ax-badge{position:absolute;top:10px;left:10px;background:var(--pv-bg,#fff);color:var(--pv-primary,#18181B);

font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px}

#mtp-ax-explainer .ax-input{flex:1;border:1px solid var(--pv-line,#E6E8EC);background:var(--pv-bg,#fff);

border-radius:calc(var(--pv-radius,10px) - 2px);padding:8px 10px;font-size:12.5px;color:var(--pv-text,#18181B);min-width:0}

#mtp-ax-explainer .ax-btn{background:var(--pv-primary,#18181B);color:var(--pv-onprimary,#fff);border:none;

border-radius:calc(var(--pv-radius,10px) - 2px);padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;

font-family:var(--sans);white-space:nowrap;transition:filter .15s}

#mtp-ax-explainer .ax-btn.ghost{background:transparent;color:var(--pv-primary,#18181B);

box-shadow:inset 0 0 0 1px var(--pv-primary,#18181B)}

/* architecture */

#mtp-ax-explainer .ax-layer{cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--tint);

transition:border-color .15s,background .15s;text-align:left}

/* フッター */

#mtp-ax-explainer .ax-foot{margin-top:16px;border-top:1px solid var(--line);padding:12px 24px;

display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--tint);flex-wrap:wrap}

@media (max-width:680px){

}

@media (prefers-reduced-motion:reduce){#mtp-ax-explainer *{transition:none!important}}

インタラクティブな解説

システムは一つ、デザインは多彩：Astryx が行動とブランドを分離する仕組み

以下のコンポーネント自体は不変です。変化するのはトークンだけです。テーマを選択し、スライダーを操作すれば、同じアクセシビリティ対応の React UI がコードを書き換えずにリスタイルされる様子を確認できます。

8 年間

本番環境で稼働中

Meta で 13,000 以上のアプリで使用

コンポーネント数 150+

テーマ 7 つ

MIT ライセンス

React 19+ StyleX

1 · テーマを選択

2 · トークンを調整

コーナー半径 10px

デンシティ（パディング）14px

ダークモード（標準搭載）

▸ このテーマが設定するトークンを表示

テーマ：ニュートラル

New

ミニマリストウォッチ

シンプルで洗練されたデザイン、日常使いに耐える耐久性。

$248

在庫あり

Apply

カートに入れる

マークアップも動作も同じ。スタイル変更は CSS カスタムプロパティのみで行っています。

仕組みの解説 · 3 つのレイヤー

01 ファウンデーション（基盤）

02 コンポーネント

03 パターン

実際のテーマを探索する →

インタラクティブな解説（表示されるカラーパレットは代表例です）· Marktechpost

Astryx は、150 以上のアクセシブルなコンポーネント、7 つのテーマ、そして CLI を備えたエージェント対応の React デザインシステムとしてオープンソース化されました。

このデザインシステムのカラーパレットには、「stone」「gothic」「y2k」などの特徴的なテーマが含まれています。例えば「stone」は落ち着いたグレーを基調とし、「gothic」はモノクロームで洗練された印象を与え、「y2k」は鮮やかなパープルとピンクでレトロフューチャーな雰囲気を演出します。

システム内部では、これらのテーマが変数として定義され、ユーザーのデバイス設定や開発環境に応じて動的に切り替えることができます。また、角丸（radius）やパディング（pad）などのデザイントークンも個別に制御可能で、一貫性のある UI 体験を実現しています。

Astryx は、開発者が迅速かつ効率的に高品質な Web アプリケーションを構築できるよう支援する、包括的な設計基盤です。

// テーマ用チップの構築

var wrap=document.getElementById('axThemes');

order.forEach(function(key){

var t=THEMES[key];

var b=document.createElement('button');

b.className='ax-chip'; b.type='button';

b.setAttribute('aria-pressed', key===current?'true':'false');

b.innerHTML=''+t.label;

b.addEventListener('click',function(){ current=key; radius.value=t.radius; sync(); });

wrap.appendChild(b);

});

function darken(hex,amt){ // mix hex toward black

var c=hex.replace('#',''); var n=parseInt(c,16);

var r=(n>>16)&255,g=(n>>8)&255,bl=n&255;

r=Math.round(r*(1-amt)); g=Math.round(g*(1-amt)); bl=Math.round(bl*(1-amt));

return 'rgb('+r+','+g+','+bl+')';

}

function sync(){

var t=THEMES[current];

radiusV.textContent=radius.value; padV.textContent=pad.value;

var s=device.style;

var bg = dark? '#15171C' : t.bg;

var surface = dark? '#20242C' : t.surface;

var text = dark? '#F4F5F7' : t.text;

var muted = dark? '#A2AAB6' : t.muted;

var line = dark? '#2C313B' : t.line;

s.setProperty('--pv-bg',bg);

s.setProperty('--pv-surface',surface);

s.setProperty('--pv-text',text);

s.setProperty('--pv-muted',muted);

s.setProperty('--pv-line',line);

s.setProperty('--pv-primary',t.primary);

s.setProperty('--pv-onprimary',t.onp);

s.setProperty('--pv-radius',radius.value+'px');

s.setProperty('--pv-pad',pad.value+'px');

devtag.textContent='theme: '+t.label+(dark?' · dark':'');

// chips

Array.prototype.forEach.call(wrap.children,function(ch,i){

ch.setAttribute('aria-pressed', order[i]===current?'true':'false');

});

// tokens readout

tokensEl.innerHTML=

'--color-primary: '+t.primary+';\n'+

'--color-background: '+bg+';\n'+

'--color-surface: '+surface+';\n'+

'--color-text-primary: '+text+';\n'+

'--radius-container: '+radius.value+'px;\n'+

'--spacing-pad: '+pad.value+'px;\n'+

'--color-scheme: '+(dark?'dark':'light')+';';

}

radius.addEventListener('input',sync);

pad.addEventListener('input',sync);

var darkBtn=document.getElementById('axDark');

darkBtn.addEventListener('click',function(){ dark=!dark; darkBtn.setAttribute('aria-pressed',dark?'true':'false'); sync(); });

var tokBtn=document.getElementById('axTokBtn');

tokBtn.addEventListener('click',function(){

var open=tokensEl.classList.toggle('show');

tokBtn.setAttribute('aria-expanded',open?'true':'false');

tokBtn.textContent=(open?'▾':'▸')+' '+(open?'Hide the tokens this theme sets':'Show the tokens this theme sets');

})

// アコーディオンのアーキテクチャ

var layers=document.querySelectorAll('#axLayers .ax-layer');

layers.forEach(function(l){

l.querySelector('.desc').textContent=l.getAttribute('data-desc');

l.addEventListener('click',function(){

var open=l.getAttribute('aria-expanded')==='true';

layers.forEach(function(x){x.setAttribute('aria-expanded','false');});

l.setAttribute('aria-expanded', open?'false':'true');

});

});

// カウントアップ統計表示

var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;

function countUp(el){

var target=+el.getAttribute('data-count'), suffix=el.getAttribute('data-suffix')||'';

if(reduce){ el.textContent=target.toLocaleString()+suffix; return; }

var start=null,dur=900;

function step(ts){ if(!start)start=ts; var p=Math.min((ts-start)/dur,1);

var val=Math.floor((1-Math.pow(1-p,3))*target);

el.textContent=val.toLocaleString()+suffix; if(p>=1){ counted=true;

document.querySelectorAll('#axStats b[data-count]').forEach(countUp); } }

window.addEventListener('scroll',maybeCount,{passive:true}); maybeCount();

sync();

// WordPress の自動リサイズ：このコンポーネントの高さ（documentElement の scrollHeight ではなく）をポストする

function postHeight(){

var h=root.offsetHeight+40;

if(window.parent){ window.parent.postMessage({type:'astryx-explainer-height',height:h},'*'); }

}

window.addEventListener('load',postHeight);

window.addEventListener('resize',postHeight);

new (window.ResizeObserver||function(){this.observe=function(){};})(postHeight).observe(root);

setTimeout(postHeight,300);

})();

エージェント向けに設計され、後付けされたものではない

Meta は Astryx を以下のように位置付けています