claude-design-studio

🌟 Descripción general

Anthra Studio es un motor de diseño web de pila completa y código abierto, diseñado con la estética característica Claude / Anthropic (tonos neutros terracota cálidos, serifas editoriales, bordes finos y rejillas bento asimétricas).

A diferencia de los generadores genéricos de IA que producen plantillas robóticas llenas de contenido publicitario vacío, Anthra Studio está construido por arquitectos frontend para generar interfaces de software de alta convicción y elaboración humana, aceleradas por NVIDIA NIM H100 Tensor Core GPUs y Claude 3.5 Sonnet.

Related MCP server: RhinoMCP

📸 Galería visual

1. Panel de control de matriz de agente autónomo

2. Arquitectura de rejilla bento asimétrica de 12 columnas

3. Diagrama de arquitectura del sistema de pila completa

🚀 Aspectos destacados

• 🎨 Estética Claude de elaboración humana: Papel crema cálido (#FAF8F5) o pizarra obsidiana (#090D16), acentos terracota orgánicos (#CC6B49), encabezados editoriales Instrument Serif y tipografía Inter.

• ⚡ Aceleración NVIDIA NIM: Inferencia ultrarrápida acelerada por GPU mediante NVIDIA NIM (nvidia/llama-3.1-nemotron-70b-instruct, deepseek-ai/deepseek-r1) con tiempo hasta el primer token < 2ms.

• 🎯 Planificador de proyectos de IA autónomo: Planificador de sistema en 4 fases paso a paso ("planificar cualquier cosa por sí mismo") que traza pilas tecnológicas, tokens de diseño, esquemas y rutas.

• 🔌 Protocolo de Contexto de Modelo (MCP): Servidor MCP oficial para Claude Desktop, Claude Code y Cursor.

• 🧩 Galería de componentes de interfaz de usuario de código abierto: Bloques de React JSX y Tailwind CSS listos para copiar y pegar (Héroes, Rejillas Bento, Widgets de Telemetría, Tarjetas de Precios).

• 🌐 12 páginas dedicadas independientes: Páginas HTML y React independientes e interconectadas con enrutamiento real.

• ☁️ Despliegue en la nube con 1 clic: Configuraciones de despliegue sin configuración para Vercel, Netlify, Docker y Docker Compose.

• 🛠️ Backend Express.js de pila completa: Puntos finales REST reales (/api/dashboard/metrics, /api/generate, /api/mcp/call).

📦 Inicio rápido

1. Ejecutor CLI instantáneo

# 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. Ejecutar con Docker Compose

docker compose up -d

🔌 Configuración del Protocolo de Contexto de Modelo (MCP)

Conecta Claude Desktop a Anthra Studio con un bloque de configuración:

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

🌐 Mapa de la suite multipágina

📄 Licencia

Anthra Studio es software de código abierto bajo la Licencia Apache 2.0.