一个AI 产品经理的私人收藏,
让我们共同面对未来,拥抱AIGC时代。

如何在Cursor中使用Magic MCP生成好看的UI(第二期)


大家好,上一期关于Magic MCP的教程大家反响十分强烈,这一期分享一下我在使用Magic MCP的小技巧。

一、针对上一期《如何在Cursor中使用Magic MCP生成好看的UI》中部分内容的勘误

1、首先,先对上一期文章做个勘误,在测试在Cursor中调用Magic MCP时提示调用出错了,打开里面的调用结果提示502的服务器错误。

2、但是这时在21st.dev的官网API页面查看调用居然是成功的!消耗了2个request,就挺无语。怀疑是输出太长导致的超时,但是目前还没有找到具体配置调用MCP server超时时间的方法。

3、因此上一期的网站实际上是使用了Claude 3.7 thinking原生的设计能力完成的UI设计,在此对上一期中出现的纰漏和大家道个歉。

4、实际上Claude 3.7 thinking设计能力非常强悍,审美也是相当之高,单纯使用Claude3.7去做产品原型设计或者网站UI设计也是几乎可以满足需求的,这里再给大家分享一下做的另外一个测试网站。

二、在Cursor中使用Magic MCP的一些小技巧

1、使用 /ui 快速调用Magic MCP。

2、多次测试发现使用smithery.ai生成的命令在Cursor中调用Magic MCP不稳定,换成官方的mcp.json就正常了。cursor setting的MCP页面中才能看到Magic MCP服务器显示绿色可用状态,可以看到可以使用的tools。

"magic-mcp": {"command": "npx","args": ["-y","@21st-dev/magic@latest",   "--config","API_KEY=\"YOUR-KEY\""]}

3、因此目前我会在使用前先问一下当前这个Magic MCP是否可以正常调用。如果result中可以正常返回代码说明可以调用成功。

4、目前在Cursor中使用Magic MCP问题还比较多,有条件也可以在Claude客户端中使用。

更多关于AI工具、Cursor、MCP相关的教程和资讯请持续关注我后续的分享!

-END-

赞(1) 打赏
未经允许不得转载:AIPMClub » 如何在Cursor中使用Magic MCP生成好看的UI(第二期)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫