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: Сверхбыстрый вывод с GPU-ускорением через NVIDIA NIM (nvidia/llama-3.1-nemotron-70b-instruct, deepseek-ai/deepseek-r1) с временем до первого токена < 2ms.

• 🎯 Автономный AI-планировщик проектов: Пошаговый 4-фазный системный планировщик ("планируйте всё самостоятельно"), который определяет технологические стеки, токены дизайна, схемы и маршруты.

• 🔌 Model Context Protocol (MCP): Официальный MCP-сервер для Claude Desktop, Claude Code и Cursor.

• 🧩 Открытая галерея 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

🔌 Настройка Model Context Protocol (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.