claude-design-studio

🌟 Overview

Anthra Studio is an open-source, full-stack web design engine engineered with the signature Claude / Anthropic aesthetic (warm terracotta neutrals, editorial serifs, hairline borders, and asymmetrical bento grids).

Unlike generic AI generators that output robotic templates filled with marketing fluff, Anthra Studio is built by frontend architects to produce high-conviction, human-crafted software interfaces accelerated by NVIDIA NIM H100 Tensor Core GPUs and Claude 3.5 Sonnet.

Related MCP server: RhinoMCP

📸 Visual Showcase

1. Autonomous Agent Control Matrix Dashboard

2. 12-Column Asymmetrical Bento Grid Architecture

3. Full-Stack System Architecture Diagram

🚀 Key Highlights

• 🎨 Human-Crafted Claude Aesthetic: Warm creamy paper (#FAF8F5) or Obsidian slate (#090D16), organic Terracotta accents (#CC6B49), Instrument Serif editorial display headings, and Inter typography.

• ⚡ NVIDIA NIM Acceleration: Ultra-fast GPU-accelerated inference via NVIDIA NIM (nvidia/llama-3.1-nemotron-70b-instruct, deepseek-ai/deepseek-r1) with < 2ms time-to-first-token.

• 🎯 Autonomous AI Project Planner: Step-by-step 4-phase system planner ("plan anything by own") that maps out tech stacks, design tokens, schemas, and routes.

• 🔌 Model Context Protocol (MCP): Official MCP server for Claude Desktop, Claude Code, and Cursor.

• 🧩 Open-Source UI Component Gallery: Production-ready copy-paste React JSX and Tailwind CSS blocks (Heroes, Bento Grids, Telemetry Widgets, Pricing Cards).

• 🌐 12 Standalone Dedicated Pages: Independent, interlinked HTML and React pages with real routing.

• ☁️ 1-Click Cloud Deploy: Zero-config deployment configurations for Vercel, Netlify, Docker, and Docker Compose.

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

📦 Quickstart

1. Instant CLI Runner

# 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. Run with Docker Compose

docker compose up -d

🔌 Model Context Protocol (MCP) Setup

Connect Claude Desktop to Anthra Studio with one configuration block:

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 Map

📄 License

Anthra Studio is open-source software licensed under the Apache License 2.0.