ダブルクリックで英日反転
Applied Sciences · Design
Adopting ElevenLabs' Official OSS UI Components
ElevenLabs publishes the same UI primitives used on its own site under MIT via @elevenlabs/agents-cli. Pairing these components with a DESIGN.md spec layer closes the gap between a text spec and an actual shader.
Repository & Install
- Repo: github.com/elevenlabs/ui (MIT, built on shadcn/ui)
- CLI: pnpm dlx @elevenlabs/agents-cli@latest components add orb
- Code lands in your own repo (shadcn-style copy), fully editable
- Note: eleven-labs/design-system is a Paris consultancy — different org
What You Get
- Orb — voice-state sphere (listening/thinking/talking) via Three.js + WebGL shader
- Waveform — audio input/output visualiser
- Messages & Transcript — conversation log and real-time transcription primitives
- Same source as the live ElevenLabs site; visual tone matches instantly
Layer Division (with DESIGN.md)
- Tokens (colour/type/shadow): DESIGN-elevenlabs-io.md via DesignMD
- General primitives (Button/Card/Input): shadcn/ui + Tailwind
- ElevenLabs-specific (Orb/Waveform/Messages): @elevenlabs/agents-cli
- DESIGN.md alone cannot express a shader; agents-cli alone drifts from the colour spec
Key Failure Patterns
- Vague AI prompt like 'copy elevenlabs.io' — unstructured, low-fidelity result
- Hand-rolling the Orb shader — multi-day effort; fork the official source instead
- Skipping DESIGN.md token overrides — colours revert to shadcn defaults
- Ignoring prefers-reduced-motion — Orb animation must have a static fallback for a11y
→ Use agents-cli for voice/agent UIs where the Orb is a differentiator; for landing pages DESIGN.md + shadcn/ui is enough.
Applied Sciences · Design
ElevenLabs 公式 OSS UI コンポーネントの導入
ElevenLabs は自社サイトで使っている UI プリミティブ（＝再利用可能な最小 UI 部品）を MIT ライセンスで @elevenlabs/agents-cli として公開している。DESIGN.md による仕様層と組み合わせることで、テキスト仕様だけでは再現できないシェーダーまで忠実に移植できる。
リポジトリとインストール
- リポジトリ: github.com/elevenlabs/ui（MIT・shadcn/ui ベース）
- CLI: pnpm dlx @elevenlabs/agents-cli@latest components add orb
- コードは自プロジェクト内にコピーされ（shadcn 方式）、自由に編集可能
- eleven-labs/design-system（パリの別会社）と混同しないこと
取得できるコンポーネント
- Orb — 音声状態（待機/思考/発話）に応じて変形する球体。Three.js + WebGL シェーダー製
- Waveform（ウェーブフォーム）— 音声入出力の波形ビジュアライザー
- Messages / Transcript — 会話ログとリアルタイム文字起こし表示のプリミティブ
- ElevenLabs 本番サイトと同一ソースのため、コピー直後からトーンが一致する
DESIGN.md との役割分担
- トークン（色・書体・影・余白）: DesignMD で抽出した DESIGN-elevenlabs-io.md が担当
- 汎用プリミティブ（Button/Card/Input）: shadcn/ui + Tailwind
- ElevenLabs 固有（Orb/Waveform/Messages）: @elevenlabs/agents-cli
- DESIGN.md だけではシェーダーを表現できず、agents-cli だけでは色仕様がずれる
よくある失敗パターン
- 「elevenlabs.io を見て真似て」という曖昧な AI 指示 — 品質にばらつきが出る
- Orb シェーダーを自作しようとする — ノイズ周波数や音声反応の調整に数日かかる
- DESIGN.md のトークンを上書きしない — 色が shadcn のデフォルトに戻る
- prefers-reduced-motion（動き軽減設定）を無視する — a11y 上、静止フォールバックが必須
→ Orb が差別化になる音声／エージェント UI には agents-cli を使い、LP やコーポレートサイトは DESIGN.md + shadcn/ui で十分。
Applied Sciences · Design
Adopting ElevenLabs' Official OSS UI Components
ElevenLabs publishes the same UI primitives used on its own site under MIT via @elevenlabs/agents-cli. Pairing these components with a DESIGN.md spec layer closes the gap between a text spec and an actual shader.
Repository & Install
- Repo: github.com/elevenlabs/ui (MIT, built on shadcn/ui)
- CLI: pnpm dlx @elevenlabs/agents-cli@latest components add orb
- Code lands in your own repo (shadcn-style copy), fully editable
- Note: eleven-labs/design-system is a Paris consultancy — different org
What You Get
- Orb — voice-state sphere (listening/thinking/talking) via Three.js + WebGL shader
- Waveform — audio input/output visualiser
- Messages & Transcript — conversation log and real-time transcription primitives
- Same source as the live ElevenLabs site; visual tone matches instantly
Layer Division (with DESIGN.md)
- Tokens (colour/type/shadow): DESIGN-elevenlabs-io.md via DesignMD
- General primitives (Button/Card/Input): shadcn/ui + Tailwind
- ElevenLabs-specific (Orb/Waveform/Messages): @elevenlabs/agents-cli
- DESIGN.md alone cannot express a shader; agents-cli alone drifts from the colour spec
Key Failure Patterns
- Vague AI prompt like 'copy elevenlabs.io' — unstructured, low-fidelity result
- Hand-rolling the Orb shader — multi-day effort; fork the official source instead
- Skipping DESIGN.md token overrides — colours revert to shadcn defaults
- Ignoring prefers-reduced-motion — Orb animation must have a static fallback for a11y
→ Use agents-cli for voice/agent UIs where the Orb is a differentiator; for landing pages DESIGN.md + shadcn/ui is enough.
Applied Sciences · Design
ElevenLabs 公式 OSS UI コンポーネントの導入
ElevenLabs は自社サイトで使っている UI プリミティブ（＝再利用可能な最小 UI 部品）を MIT ライセンスで @elevenlabs/agents-cli として公開している。DESIGN.md による仕様層と組み合わせることで、テキスト仕様だけでは再現できないシェーダーまで忠実に移植できる。
リポジトリとインストール
- リポジトリ: github.com/elevenlabs/ui（MIT・shadcn/ui ベース）
- CLI: pnpm dlx @elevenlabs/agents-cli@latest components add orb
- コードは自プロジェクト内にコピーされ（shadcn 方式）、自由に編集可能
- eleven-labs/design-system（パリの別会社）と混同しないこと
取得できるコンポーネント
- Orb — 音声状態（待機/思考/発話）に応じて変形する球体。Three.js + WebGL シェーダー製
- Waveform（ウェーブフォーム）— 音声入出力の波形ビジュアライザー
- Messages / Transcript — 会話ログとリアルタイム文字起こし表示のプリミティブ
- ElevenLabs 本番サイトと同一ソースのため、コピー直後からトーンが一致する
DESIGN.md との役割分担
- トークン（色・書体・影・余白）: DesignMD で抽出した DESIGN-elevenlabs-io.md が担当
- 汎用プリミティブ（Button/Card/Input）: shadcn/ui + Tailwind
- ElevenLabs 固有（Orb/Waveform/Messages）: @elevenlabs/agents-cli
- DESIGN.md だけではシェーダーを表現できず、agents-cli だけでは色仕様がずれる
よくある失敗パターン
- 「elevenlabs.io を見て真似て」という曖昧な AI 指示 — 品質にばらつきが出る
- Orb シェーダーを自作しようとする — ノイズ周波数や音声反応の調整に数日かかる
- DESIGN.md のトークンを上書きしない — 色が shadcn のデフォルトに戻る
- prefers-reduced-motion（動き軽減設定）を無視する — a11y 上、静止フォールバックが必須
→ Orb が差別化になる音声／エージェント UI には agents-cli を使い、LP やコーポレートサイトは DESIGN.md + shadcn/ui で十分。