claude-design-studio

<div align="center"> <img src="./logo.svg" width="64" height="64" alt="Anthra Studio Logo" /> <h1>Anthra Studio</h1> <p><strong>The Open-Source AI Web Design Engine, Multi-Page Suite & Model Context Protocol (MCP) Server</strong></p>

<p> <a href="https://opensource.org/licenses/Apache-2.0"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License: Apache 2.0" /></a> <a href="https://build.nvidia.com"><img src="https://img.shields.io/badge/NVIDIA%20NIM-Accelerated%20(H100)-76B900.svg" alt="NVIDIA NIM Ready" /></a> <a href="https://modelcontextprotocol.io"><img src="https://img.shields.io/badge/MCP-Compatible%20v1.0-purple.svg" alt="Model Context Protocol" /></a> <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-5.5-blue.svg" alt="TypeScript" /></a> <a href="https://nodejs.org/"><img src="https://img.shields.io/badge/Node.js-%3E%3D20.0-green.svg" alt="Node.js" /></a> </p>

<p> <a href="#-quickstart">Quickstart</a> • <a href="#-features">Features</a> • <a href="#-multi-page-suite">Multi-Page Suite</a> • <a href="#-model-context-protocol-mcp">Claude Desktop MCP</a> • <a href="#-cloud-deployment">1-Click Deploy</a> • <a href="#-license">License</a> </p> </div>

---

<div align="center"> <img src="./images/hero-banner.png" width="100%" alt="Anthra Studio Hero Showcase" /> </div>

---

🌟 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.

---

📸 Visual Showcase

1. Autonomous Agent Control Matrix Dashboard

<div align="center"> <img src="./images/dashboard-preview.png" width="100%" alt="Anthra Studio Dashboard" /> </div>

2. 12-Column Asymmetrical Bento Grid Architecture

<div align="center"> <img src="./images/bento-showcase.png" width="100%" alt="Bento Grid Showcase" /> </div>

3. Full-Stack System Architecture Diagram

<div align="center"> <img src="./images/architecture-diagram.svg" width="100%" alt="System Architecture Diagram" /> </div>

---

🚀 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

Standalone File	Purpose	Key Features
index.html	Homepage	Hero, CLI Quickstart (npx, pnpm, docker), ★ 14.8k Stars counter
signup.html	Sign Up	Enterprise registration with focus selector & 1-Click Demo Signup
auth.html	Sign In	Minimalist login with 1-Click Lead Architect demo authentication
api-setup.html	API Onboarding	Step 2 connection for NVIDIA NIM (nvapi-...) or Claude 3.5
planner.html	AI Planner	Autonomous System Architect & 4-Phase Roadmap
dashboard.html	Control Matrix	Live cluster telemetry (48,210 TPS, 1.84ms p99 latency)
components.html	UI Gallery	Curated Component Library with 1-Click copyable React JSX blocks
features.html	Capabilities	12-Column Asymmetrical Bento Grid, formal logic proofs
playground.html	Live Sandbox	Multi-step reasoning trace simulator with execution token tickers
docs.html	Docs & API	TypeScript SDK, Python, cURL SDKs, and REST/MCP endpoint specs
pricing.html	Pricing & ROI	Volume sliders (5M–500M tokens) with automatic 75% prompt caching discount
research.html	Research	Constitutional AI & Safety Whitepapers with PDF download cards
settings.html	Settings	Organization profile, VPC peering, and Zero-Data Retention status

---

📄 License

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