claude-design-studio

🌟 概要

Anthra Studio は、署名である Claude / Anthropic の美学（温かみのあるテラコッタ系ニュートラル、エディトリアルなセリフ体、ヘアライン境界、非対称のベントーグリッド）を備えた、オープンソースのフルスタックWebデザインエンジンです。

マーケティング用の決まり文句で埋め尽くされたロボット的なテンプレートを出力する一般的なAIジェネレーターとは異なり、Anthra Studio はフロントエンドアーキテクトによって構築され、NVIDIA NIM H100 Tensor Core GPU と Claude 3.5 Sonnet によって加速された、確信度の高い人間が作るようなソフトウェアインターフェースを生成します。

Related MCP server: RhinoMCP

📸 ビジュアルショーケース

1. 自律エージェント制御マトリックスダッシュボード

2. 12カラム非対称ベントーグリッドアーキテクチャ

3. フルスタックシステムアーキテクチャ図

🚀 主なハイライト

• 🎨 人間が作り上げたClaudeの美学: 温かみのあるクリーミーな紙 (#FAF8F5) または黒曜石スレート (#090D16)、有機的なテラコッタのアクセント (#CC6B49)、Instrument Serif のエディトリアル見出し、Inter タイポグラフィ。

• ⚡ NVIDIA NIM アクセラレーション: NVIDIA NIM (nvidia/llama-3.1-nemotron-70b-instruct, deepseek-ai/deepseek-r1) による超高速GPU推論、< 2ms の初回トークン生成時間。

• 🎯 自律AIプロジェクトプランナー: テクノロジースタック、デザイントークン、スキーマ、ルートをマッピングするステップバイステップの4フェーズシステムプランナー（"plan anything by own"）。

• 🔌 Model Context Protocol (MCP): Claude Desktop、Claude Code、Cursor 向けの公式MCPサーバー。

• 🧩 オープンソースUIコンポーネントギャラリー: プロダクション対応のコピペ可能なReact JSXおよびTailwind CSSブロック（ヒーロー、ベントーグリッド、テレメトリーウィジェット、価格カード）。

• 🌐 12のスタンドアロン専用ページ: 実際のルーティングを備えた独立した相互リンクされたHTMLおよびReactページ。

• ☁️ 1クリッククラウドデプロイ: Vercel、Netlify、Docker、Docker Compose 向けのゼロ設定デプロイ構成。

• 🛠️ フルスタックExpress.jsバックエンド: リアルなRESTエンドポイント (/api/dashboard/metrics, /api/generate, /api/mcp/call)。

📦 クイックスタート

1. インスタントCLIランナー

# Clone the repository
git clone https://github.com/anthra-design/claude-design-studio.git
cd claude-design-studio

# Install dependencies
npm install

# Start the Studio in development mode
npm run dev

2. Docker Compose で実行

docker compose up -d

🔌 Model Context Protocol (MCP) セットアップ

Claude Desktop を Anthra Studio に接続するには、以下の設定ブロックを1つ追加するだけです：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "claude-design-studio": {
      "command": "node",
      "args": [
        "/path/to/claude-design-mcp-server.js"
      ],
      "env": {
        "ANTHROPIC_API_KEY": "your-api-key-here"
      }
    }
  }
}

🌐 マルチページスイートマップ

📄 ライセンス

Anthra Studio は Apache License 2.0 の下で提供されるオープンソースソフトウェアです。