claude-design-studio

🌟 개요

Anthra Studio는 시그니처 Claude / Anthropic 미학(따뜻한 테라코타 중성색, 에디토리얼 세리프, 헤어라인 테두리, 비대칭 벤토 그리드)으로 설계된 오픈소스 풀스택 웹 디자인 엔진입니다.

마케팅 허풍으로 가득 찬 로봇 템플릿을 출력하는 일반적인 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").

• 🔌 모델 컨텍스트 프로토콜(MCP): Claude Desktop, Claude Code, Cursor용 공식 MCP 서버.

• 🧩 오픈소스 UI 컴포넌트 갤러리: 프로덕션 준비 완료된 복사-붙여넣기 React JSX 및 Tailwind CSS 블록(히어로, 벤토 그리드, 텔레메트리 위젯, 가격 카드).

• 🌐 12개의 독립 전용 페이지: 실제 라우팅이 있는 독립적이고 상호 연결된 HTML 및 React 페이지.

• ☁️ 원클릭 클라우드 배포: 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

🔌 모델 컨텍스트 프로토콜(MCP) 설정

하나의 구성 블록으로 Claude Desktop을 Anthra Studio에 연결하세요:

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에 따라 라이선스가 부여된 오픈소스 소프트웨어입니다.