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 文件中添加配置即可:

json 复制代码
{
  "mcpServers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

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

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

检查MCP是否连接正常

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

调用MCP

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

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

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

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

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

效果如下:

其他注意

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

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

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

参考文档

相关推荐
不听话坏7 小时前
Ignition篇(下 一) 动态执行前的事情
开发语言·前端·javascript
likeyi077 小时前
require 和 import的区别
开发语言·前端
pany7 小时前
做 AI 友好的开源 Vue3 模板 🌈
前端·vue.js·ai编程
小二·8 小时前
React 19 + Next.js 15 现代前端开发实战:App Router / Server Components / 流式渲染
前端·javascript·react.js
谙忆10249 小时前
前端图片直传对象存储:OSS/S3 预签名 URL、STS 临时凭证与回调校验
前端
CHNE_TAO_EMSM10 小时前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
一孤程11 小时前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest
IT_陈寒11 小时前
SpringBoot自动配置不是你以为的那样的智能
前端·人工智能·后端
yume_sibai12 小时前
大屏数据可视化 - 边框红绿呼吸灯实现详解
前端·信息可视化·typescript
2601_9568657712 小时前
怎么用AI生成带货视频?电商内容创作工具推荐与选择思路
人工智能·aigc·音视频