claude-design-studio

🌟 Überblick

Anthra Studio ist eine Open-Source-, Full-Stack-Webdesign-Engine, die mit der charakteristischen Claude / Anthropic-Ästhetik (warme terrakottafarbene Neutrale, editoriale Serifen, haardünne Ränder und asymmetrische Bento-Grids) entwickelt wurde.

Im Gegensatz zu generischen KI-Generatoren, die robotische Vorlagen voller Marketing-Floskeln ausgeben, wird Anthra Studio von Frontend-Architekten entwickelt, um überzeugende, handgefertigte Software-Oberflächen zu erstellen, die durch NVIDIA NIM H100 Tensor Core GPUs und Claude 3.5 Sonnet beschleunigt werden.

Related MCP server: RhinoMCP

📸 Visuelles Showcase

1. Autonomes Agenten-Kontrollmatrix-Dashboard

2. 12-Spaltige asymmetrische Bento-Grid-Architektur

3. Full-Stack-Systemarchitektur-Diagramm

🚀 Hauptmerkmale

• 🎨 Handgefertigte Claude-Ästhetik: Warmes cremiges Papier (#FAF8F5) oder Obsidianschiefer (#090D16), organische Terrakotta-Akzente (#CC6B49), Instrument Serif editoriale Überschriften und Inter-Typografie.

• ⚡ NVIDIA NIM-Beschleunigung: Ultraschnelle GPU-beschleunigte Inferenz über NVIDIA NIM (nvidia/llama-3.1-nemotron-70b-instruct, deepseek-ai/deepseek-r1) mit < 2ms Zeit bis zum ersten Token.

• 🎯 Autonomer KI-Projektplaner: Schrittweiser 4-Phasen-Systemplaner („alles selbst planen"), der Tech-Stacks, Design-Tokens, Schemata und Routen kartiert.

• 🔌 Model Context Protocol (MCP): Offizieller MCP-Server für Claude Desktop, Claude Code und Cursor.

• 🧩 Open-Source-UI-Komponentengalerie: Produktionsreife, kopierbare React JSX- und Tailwind CSS-Blöcke (Helden, Bento-Grids, Telemetrie-Widgets, Preiskarten).

• 🌐 12 eigenständige dedizierte Seiten: Unabhängige, verlinkte HTML- und React-Seiten mit echtem Routing.

• ☁️ 1-Klick-Cloud-Bereitstellung: Konfigurationsfreie Bereitstellungskonfigurationen für Vercel, Netlify, Docker und Docker Compose.

• 🛠️ Full-Stack Express.js-Backend: Echte REST-Endpunkte (/api/dashboard/metrics, /api/generate, /api/mcp/call).

📦 Schnellstart

1. Sofortiger CLI-Ausführer

# 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. Mit Docker Compose ausführen

docker compose up -d

🔌 Model Context Protocol (MCP)-Einrichtung

Verbinden Sie Claude Desktop mit Anthra Studio mit einem Konfigurationsblock:

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"
      }
    }
  }
}

🌐 Multi-Page-Suite-Karte

📄 Lizenz

Anthra Studio ist Open-Source-Software, lizenziert unter der Apache License 2.0.