サンプル

5 つの代表的なスタックで zudo-design-token-panel を組み込むためのリファレンス実装です。各サンプルでは、ホストが提供する tabs: TabConfig[] 配列にパネルを接続し、変更をソースへ反映するための bin サーバーも併用しています。すべてのサンプルに、デモ固有のトークン名前空間を使って Markdown 由来の HTML 要素を一通り確認できる /prose ページがあります。

試す

• Astro — ライブデモ · GitHub ソース — Astro サイトへパネルを組み込みます。Astro 開発サーバーでのホスト設定と bin の apply パイプラインを示します。 Prose ページ では、--astro-* トークン名前空間に対してすべての prose 要素を確認できます。

• Vite + React — ライブデモ · GitHub ソース — Vite + React アプリからパネルを使います。compat shim により Preact ランタイムと React が共存する構成を示します。 Prose ページ では、--vr-* トークン名前空間に対してすべての prose 要素を確認できます。

• Next.js — ライブデモ · GitHub ソース — Next.js App Router プロジェクトへパネルを組み込み、Next 開発サーバーと bin サーバーを並行実行します。 Prose ページ では、--nx-* トークン名前空間に対してすべての prose 要素を確認できます。

• zfb — ライブデモ · GitHub ソース — zfb プロジェクトへパネルを組み込みます。Vite 組み込みのプロキシ機構ではなく、devMiddleware プラグインフックを apply プロキシに使います。apply エンドポイント URL には base プレフィックス全体が必要です。経緯は PROBE-REPORT.md を参照してください。 Prose ページ では、--zfb-* トークン名前空間に対してすべての prose 要素を確認できます。

• zfb + Tailwind v4 — ライブデモ · GitHub ソース — zfb サンプルを Tailwind v4 対応に拡張します。@theme ブロックで Tailwind のデザインシステム名前空間にトークンを登録するため、text-body や p-hsp-md のようなユーティリティクラスがビルド時にパネルのカスタムプロパティへ解決されます。 Prose ページ では、@layer components 経由でユーティリティクラスを適用し、--zfbtw-* トークン名前空間に対してすべての prose 要素を確認できます。