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加速推理，首 token 延迟 < 2ms。

• 🎯 自主AI项目规划器：逐步四阶段系统规划器（“自主规划一切”），可映射技术栈、设计令牌、模式和路由。

• 🔌 模型上下文协议（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 许可的开源软件。