Caho1/open-claude-ui

概要

open‑claude‑ui は、Anthropic の Claude デスクトップクライアントの外観と操作感を再現するオープンソースの UI コンポーネントライブラリです。著者らは REA リバースエンジニアリングフレームワークを使用して Claude の本番 Electron バンドルを逆コンパイルし、正確なデザイントークン、インタラクション物理、アニメーションパラメータを抽出し、TypeScript で記述され Tailwind CSS でスタイルされた再利用可能な React コンポーネントとして再実装しました。

このリポジトリには以下が含まれます：

• 30 のすぐ使えるコンポーネントとフック（ボタン、セグメントコントロール、チャットバブル、コンポーザー、モデルスイッチャー、オーディオプレーヤーなど）
• Claude のカラーパレット、サーフェスレベル、「クレイ」オレンジ、ヘアライン境界線、モーショントークンを定義する完全な Tailwind テーマ
• 視覚テスト用の軽量でオフラインの Storybook スタイル HTML プレビュー
• 各 UI 定数が元のアプリのどこから取得されたかを説明する詳細なリバースエンジニアリングドキュメント（約 3 000 行）
• アクセシビリティ、レート制限バックオフ、スクロール固定、共有要素トランジションなどのためのヘルパーフック

すべてのコードは標準の React 18 環境で実行されます。独自のバイナリやアセットは含まれていません。

---

主な機能

機能	提供内容
高忠実度 Claude デザインシステム	公式デスクトップクライアントと一致する正確なカラートークン、サーフェスレベル、0.5 px ヘアライン境界線、4 ステップスプリング物理。
30 のプロダクショングレードコンポーネント	ボタン、セグメントコントロール、ステータスインジケーター、ダイアログ、チャットバブル、CJK IME ガード付きコンポーザー、トークンゲージ付きモデルスイッチャー、オーディオ合成、メディアライトボックス、分割ペインリサイザー、コラボレーションキャンバスなど。
モーションエンジン	プリビルドの Framer‑Motion スプリングプリセットとカスタムキーフレームシェーダー（アンビエントグロー、スクロールフェードマスク、非線形アルファマスク）。
Web‑Audio ベースのサウンドエフェクト	ネイティブ Web Audio API で生成されたゼロレイテンシーの合成プロンプト。外部 MP3 ファイルは不要。
デスクトップ固有の統合	macOS のバイブランシー、ドラッグ可能なタイトルバー、隠しインセットウィンドウ、BroadcastChannel によるマルチウィンドウコラボレーション。
アクセシビリティ	ARIA 準拠のフォーカスロービングフック、キーボードナビゲーショングリッド、RTL サポート。
オフライン Storybook	開発サーバーなしですべてのコンポーネントを表示する単一の HTML ファイル（claude-components-storybook.html）。
エージェントフレンドリーなガイドライン	AGENTS.md および関連ファイルは、AI コーディングアシスタント（Copilot、Claude Code、Cursor など）にライブラリの設計制約に従うよう明示的な指示を与えます。

---

クイックスタート

# パッケージをインストール
npm i open-claude-ui

import { ChatComposer, CdsButton, ModelSwitcherWithTokenGauge, ScrollFadeContainer } from 'open-claude-ui';

export function App() {
  const [model, setModel] = React.useState('sonnet-3.5');
  const [thinking, setThinking] = React.useState(true);

  return (
    <div className="flex h-screen bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer className="flex-1 p-6">
        <ModelSwitcherWithTokenGauge
          currentModel={model}
         
          extendedThinking={thinking}
         
          tokenBudget={{ inputTokens: 12400, outputTokens: 3200, cacheReadTokens: 48000, cacheWriteTokens: 16000, maxContextWindow: 200000 }}
        />
        <ChatComposer => console.log(msg)} />
        <CdsButton variant="primary">送信</CdsButton>
      </ScrollFadeContainer>
    </div>
  );
}

パッケージから Tailwind テーマを追加し（code-examples/tailwind.config.js を参照）、グローバル CSS cds-theme.css をインポートして、正確な Claude の色とモーショントークンを取得します。

---

誰が使うべきか？

• フロントエンドエンジニア：Claude スタイルのチャット UI や、同じ洗練されたインタラクション物理を必要とする AI アシスタントインターフェースを構築する方。
• デザインシステムチーム：サーフェスレベル、トークンベースのスペーシング、スプリングベースのモーションをエンコードする方法の具体的な例を探している方。
• 研究者や愛好家：本番 Electron アプリが UI をどのように実装しているかに興味があり、完全に文書化されたリバースエンジニアリングリファレンスを希望する方。
• AI コーディングエージェント（Copilot、Claude Code、Cursor など）— リポジトリには明確な AGENTS.md ルールが含まれており、エージェントがライブラリと一貫性のあるコードを生成できるようにします。

---

ライセンス

MIT — 個人、教育、商用利用は無料です。