VisualSpec 是什么？

Structured, constraint-aware visual generation and deterministic layout for AI agents VisualSpec 是一个MCP Server，收录自官方 MCP Registry。支持 stdio 传输。本页提供产品介绍、配置教程、安装命令与适用场景，可复制到 Cursor、Claude Code、VS Code。

如何安装 VisualSpec？

推荐在 Claude Code（本地）中安装：1. 确保已安装 Claude Code CLI 2. 复制下方命令，将替换为真实环境变量值后，在终端执行 3. 若下方列出了环境变量，请对照填写命令示例：claude mcp add visualspec -- npx -y @utkarshx27/visualspec

VisualSpec 适用于哪些场景？

VisualSpec 适用于：代码审查与 GitHub、Cursor 开发必备。也可在 AgentHub 场景页查看配套 MCP 与 Skill。

VisualSpec MCP配置与使用教程

Q: 如何安装 VisualSpec？

推荐在 Claude Code（本地） 中安装：1. 确保已安装 Claude Code CLI 2. 复制下方命令，将 替换为真实环境变量值后，在终端执行 3. 若下方列出了环境变量，请对照填写 命令示例：claude mcp add visualspec -- npx -y @utkarshx27/visualspec

AgentHubMCP · Skill

VisualSpec MCP配置与使用教程 - AgentHub

按平台快速复制

选择你的平台查看安装方式

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

配置教程

打开 VisualSpec 详情页，确认这是你需要的 MCP Server（来源官方 MCP Registry）。
按客户端选择 Cursor、Claude Code 或 VS Code，复制 JSON 配置或 CLI 命令。
将配置合并进 mcpServers，并把环境变量占位符替换为真实密钥。
重载窗口后，在 Agent 对话中调用该 MCP 提供的工具。

安装命令

以下安装命令与配置步骤已写入页面 HTML，搜索引擎与未启用 JavaScript 的浏览器均可直接读取。

Claude Code（本地）

确保已安装 Claude Code CLI
复制下方命令，将 <占位符> 替换为真实环境变量值后，在终端执行
若下方列出了环境变量，请对照填写

claude mcp add visualspec -- npx -y @utkarshx27/visualspec

Cursor — .cursor/mcp.json（本地）

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

VS Code — .vscode/mcp.json（本地）

环境变量

OPENAI_API_KEY可选secret

Optional API key for OpenAI image generation

GEMINI_API_KEY可选secret

Optional API key for Google Gemini image generation

统一 Manifest

{
  "id": "io.github.utkarshx27/visualspec",
  "type": "mcp-server",
  "version": "0.1.0",
  "displayName": "VisualSpec",
  "description": "Structured, constraint-aware visual generation and deterministic layout for AI agents",
  "repository": {
    "url": "https://github.com/utkarshx27/visualspec",
    "source": "github"
  },
  "distribution": {
    "packages": [
      {
        "registryType": "npm",
        "identifier": "@utkarshx27/visualspec",
        "version": "0.1.0",
        "transport": "stdio",
        "environmentVariables": [
          {
            "name": "OPENAI_API_KEY",
            "description": "Optional API key for OpenAI image generation",
            "isSecret": true
          },
          {
            "name": "GEMINI_API_KEY",
            "description": "Optional API key for Google Gemini image generation",
            "isSecret": true
          }
        ]
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "vscode",
    "trae",
    "cherry-studio",
    "lingma",
    "windsurf",
    "cline",
    "workbuddy"
  ],
  "keywords": [],
  "provenance": {
    "origin": "official-mcp-registry",
    "originalId": "io.github.utkarshx27/visualspec",
    "originalUrl": "https://registry.modelcontextprotocol.io/v0.1/servers/io.github.utkarshx27%2Fvisualspec/versions/latest",
    "isOfficial": true,
    "status": "active"
  }
}

Claude Desktop — claude_desktop_config.json（本地）

打开 Claude Desktop 的 claude_desktop_config.json（路径见远程指引）
点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥
完全退出并重启 Claude Desktop

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

Trae — .trae/mcp.json（本地）

打开 Trae → 设置 → MCP，或编辑 .trae/mcp.json / 全局 mcp.json
点击「复制配置」粘贴并合并 mcpServers
将 env 中的 <占位符> 替换为真实密钥
保存后重载 Trae 窗口

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

Cherry Studio — MCP 设置（本地）

打开 Cherry Studio → 设置 → MCP 服务器 → 添加（STDIO）
也可直接导入下方 JSON：点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥，并确保本机已安装 Node.js / uv（npx、uvx）
启用服务并查看工具列表是否加载成功

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

通义灵码 — MCP 配置（本地）

通义灵码：个人设置 → MCP 服务 → 「+」→ 手工添加（STDIO）或配置文件添加
点击「复制配置」合并 mcpServers；命令/参数/环境变量与 JSON 一致
将 env 中的 <占位符> 替换为真实密钥；本机需 Node.js 18+（npx）或已安装 uv（uvx）
确认服务状态为已连接后再在智能体对话中调用

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

Windsurf — mcp_config.json（本地）

编辑 ~/.codeium/windsurf/mcp_config.json
点击「复制配置」合并 mcpServers（本地 stdio 与 Cursor 格式相同）
将 env 中的 <占位符> 替换为真实密钥后保存并刷新 Cascade

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

Cline — MCP Servers（本地）

Cline 面板 → 设置 → MCP Servers
点击「复制配置」粘贴并合并
将 env 中的 <占位符> 替换为真实密钥后保存

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

WorkBuddy — .workbuddy/mcp.json（本地）

编辑 ~/.workbuddy/mcp.json（用户级）或项目目录 .workbuddy/mcp.json
也可在界面：插件 → MCP 服务器 → 配置 MCP，粘贴下方 JSON
将 env 中的 <占位符> 替换为真实密钥；Windows 下 command/脚本路径建议用绝对路径
保存并重启 WorkBuddy，确认连接器状态为绿色

{
  "mcpServers": {
    "visualspec": {
      "command": "npx",
      "args": [
        "-y",
        "@utkarshx27/visualspec"
      ]
    }
  }
}

VisualSpec MCP配置与使用教程

产品介绍

适用场景

安全与质量评测A+ 级 · 官方认证推荐

按平台快速复制

配置教程

环境变量

相关资源

MarkItDown MCP Server

飞书文档

高德地图

Bilibili

Puppeteer

Playwright

常搭配使用

polymarket-weather-trader

Tavily Search

API Gateway

Planning with files

继续逛 AgentHub