claude查看和管理mcp
claude mcp list 查看mcp
claude mcp add <name> # 添加MCP服务器
claude mcp remove <name> #删除mcp
chrome-devtools-mcp
Chrome DevTools 则是Chrome浏览器内置的开发者调试工具, 其核心协议(CDP)主要用于实时调试、性能分析和问题诊断。它提供对DOM、CSS、JavaScript执行的深度访问能力,允许开发者检查元素样式、监控网络活动、调试代码错误等。Chrome DevTools 的功能更偏向于开发阶段的交互式操作,例如实时修改页面内容或分析性能瓶颈,但其功能严格局限于 Chrome/Chromium 浏览器
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest --scope user
`scope user 是对当前电脑所有项目生效,否则只对当前项目生效`
playwright是什么?
Playwright 是一个跨浏览器自动化框架, 专注于端到端测试、网页抓取和CI/CD集成等场景,支持Chromium、Firefox和WebKit等多个浏览器引擎。它提供了一套统一的高级API,用于模拟用户操作(如页面导航、元素点击、表单填写)以及处理网络请求、移动端仿真等复杂任务。Playwright 的设计强调生产环境的稳定性和跨平台兼容性,适合需要覆盖多种浏览器的自动化测试或大规模网页操作
claude mcp add playwright npx @playwright/mcp@latest
figma
claude mcp add figma npx figma-developer-mcp --scope user
添加成功后,会显示配置文件在哪个位置, C:\Users\Administrator\.claude.json,这样 会创建初始化配置,在配置中在添加你的appkey
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}

全部勾选,然后生成。复制替换,重新开窗口查看mcp是否链接
2.接下来在fiama我们随便找个 登录页,然后复制链接

然后在claude中让他读取生成
请使用 tailwindcss制作一个登录页,严格遵照这个figma设计稿 https://www.figma.com/design/sRvJ2HtDEQ7VIypmpez7v7/LoginUIConcept--Community-?node-id=11-2&t=AEaQ1TiygxEXItQX-4

content7是什么?
最新文档
open-websearch是什么?
Open-WebSearch是一个基于Model Context Protocol (MCP)的多引擎网络搜索服务,提供免费的网页搜索功能,无需API密钥。 该项目支持多种搜索引擎和内容抓取功能,旨在为AI助手提供强大的网络信息检索能力
spec-workflow是什么?
mcp-deepwiki是什么?
https://docs.devin.ai/zh/work-with-devin/deepwiki-mcp
claude mcp add -s user -t http deepwiki https://mcp.deepwiki.com/mcp
DeepWiki MCP 服务器提供三个主要工具:
read_wiki_structure- 获取 GitHub 仓库的文档主题列表read_wiki_contents- 查看 GitHub 仓库的文档内容ask_question- 就 GitHub 仓库提出任意问题,并获得结合上下文的 AI 解答
exa是什么?
Exa MCP Server 是一个模型上下文协议(Model Context Protocol)服务,允许Claude 等AI 助手通过Exa AI Search API 执行网页搜索。 该服务为AI 模型提供安全可控的实时网络信息获取能力
next-ai-drawio
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
使用参考 https://www.puxiaoshuai.top/?p=195
非特殊说明,本博所有文章均为博主原创。
如若转载,请注明出处:https://www.puxiaoshuai.top/?p=215
