Claude 配置使用墨刀MCP（modao-proto-mcp）

Claude 配置墨刀MCP

通过 claude 来控制墨刀生成原型图，可以点击查看墨刀mcp，我使用这个MCP配置在claude中来进行设计，当前MCP提供的工具方法主要有3个：

• gen_html：根据用户描述生成完整的HTML代码，支持现代化设计和响应式布局。
• gen_description：基于用户简短的设计需求生成详细的设计说明文档。
• import_html：将通过gen_html工具生成的HTML导入到用户的个人空间中。

这里可能会有小伙伴疑惑MCP是什么东西，点击这里链接 来了解什么是MCP。

配置MCP

可以直接在项目目录.mcp.json 文件中添加配置即可：

{
  "mcpServers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url="
      ]
    }
  }
}

token需要去墨刀网站登录后的左下角用户头像地方点击「令牌设置」

将令牌token放到上面token的地方即可：

检查MCP是否连接正常

在claude控制台输入 /mcp 会出现当前安装的mcp列表，可以查看到，如果显示connected就可以。

调用MCP

1. 调用墨刀mcp设计一个PC端的课程列表网站

由于文件没有保存，可以让帮忙保存下html文件

2. 生成html之后，可以继续使用墨刀mcp导入到个人空间中

然后在个人空间中就可以进行查看了

3.可以让墨刀mcp生成详细的设计描述

效果如下：

其他注意

• 在使用过程中会遇到报错403的情况

可能是积分不足导致的，因为墨刀AI使用时是需要积分的，如下图所示：

我在充值积分之后依然报错403，可以加入墨刀官方讨论微信群寻找解决方案，在提供用户ID后已解决，可以正常调用了。

参考文档

• modao-proto-mcp
• 墨刀AI-MCP