miromiro

miromiro-mcp

用于 MiroMiro 设计提取 API 的 MCP 服务。让你的 AI Agent 获取任意在线网站的真实设计——品牌色、字体、设计令牌、SVG、图片、Lottie 动画，以及可直接粘贴使用的组件代码——以便它基于实际值构建，而不是根据截图猜测。

支持 Claude（网页、桌面应用、Claude Code）、ChatGPT、Cursor、Windsurf、Codex 以及任何 MCP 客户端。

Claude Code 插件

安装为插件，即可使用这些工具和五个技能，帮助 Claude 了解何时调用 每个工具：

• elementor-section - 将任意网站的版块转换为 Elementor 模板，以便导入 WordPress
• shopify-section - 将任意网站的版块转换为 Shopify 主题版块（.liquid）
• clone-section - 将版块转换为 Tailwind、HTML+CSS、React 或 Vue
• match-brand - 提取网站的颜色、字体和设计令牌，以其风格进行构建
• extract-assets - 提取图片、SVG 图标、视频、音频和 Lottie 文件

claude plugin marketplace add SoraiaBarroso/miromiro-mcp
claude plugin install miromiro@miromiro

该插件使用远程服务，因此无需安装，也无需粘贴密钥——首次使用时会打开 MiroMiro 一键登录，将免费账户关联起来（每月 300 个点数，无需信用卡）。

适用于 OpenClaw 和其他 Agent 的技能

相同的技能位于 skills/ 中。连接后，每个技能都会使用 MiroMiro MCP 工具；否则会使用 MIROMIRO_API_KEY 调用 REST API（免费密钥，每月 300 个点数：https://miromiro.app/api/onboarding）。

快速开始：远程服务（无需安装）

托管服务地址：

https://miromiro.app/mcp

将该 URL 粘贴到任何支持远程 MCP 服务的客户端中。首次使用时会打开 MiroMiro 一键登录，将免费账户关联起来（每月 300 个点数，无需信用卡）。

• Claude（网页或桌面应用）：“设置” →“连接器” →“添加自定义连接器” →粘贴 URL。也可以使用一键安装。
• ChatGPT：“设置” →“安全与登录” →启用开发者模式，然后前往“设置” →“插件” →“新建插件”，并填写 URL（身份验证：OAuth）。
• **Cursor（远程）：**将 { "mcpServers": { "miromiro": { "url": "https://miromiro.app/mcp" } } } 添加到 ~/.cursor/mcp.json。
• **Claude Code：**运行 claude mcp add --transport http miromiro https://miromiro.app/mcp，然后在会话中运行 /mcp 进行登录。
• **Codex：**将 [mcp_servers.miromiro] 和 url = "https://miromiro.app/mcp" 添加到 ~/.codex/config.toml，然后运行 codex mcp login miromiro。
• **Grok Bot：**让机器人“添加一个名为 miromiro、地址为 https://miromiro.app/mcp 的自定义 MCP 服务”，然后点击授权。
• Muse：“设置” →“连接器” →“添加自定义连接器” →粘贴 URL。
• 各 Agent 的分步指南：https://miromiro.app/api/agents/chatgpt（将末尾部分替换为 claude、claude-code、codex、cursor、grok-bot、muse 或 openai-dots）。
• **使用原始 API 密钥代替 OAuth：**在 URL 后追加 ?access_key=mm_live_...，或通过 Authorization: Bearer 请求头发送密钥。

本地服务（npm）

更倾向于使用将密钥存放在环境变量中的本地 stdio 进程？在 miromiro.app/api/dashboard 获取免费密钥，然后：

Cursor（~/.cursor/mcp.json）/ Windsurf（“设置” →“MCP”）：

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Claude Code（在终端中运行，不要在 claude 会话内运行）：

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

工具

工具	返回内容	积分
extract_code	实时页面中的一个区块，作为可直接粘贴的组件（Tailwind、HTML+CSS、JSX 或 Vue），或可导入的 Elementor 模板 / Shopify 区块，并附带其使用的设计令牌——从这里开始重建真实 UI	25
extract_brand	命名颜色角色（主色 / 强调色 / 背景 / 文本）、调色板、按角色区分的字体、徽标、社交媒体资料、0-1 置信度评分，以及说明颜色来源（声明的设计令牌与推断结果）的 signals	10
extract_design_tokens	完整的设计令牌系统及其使用次数；format: css 或 tailwind 可生成可直接粘贴的输出，dtcg 可生成 W3C Design Tokens 文件（Style Dictionary / Figma 变量）	10
extract_fonts	网站加载的所有字体文件和字体系列，以及字重、格式和文件 URL	5
extract_videos	视频文件、og:video 和播放器嵌入内容（YouTube、Vimeo、Wistia、Loom），并标注来源；直接视频文件 URL 会作为唯一结果返回，YouTube/Vimeo/TikTok/Dailymotion/Loom 视频 URL 则直接返回其播放器嵌入内容，不会发起抓取	1
extract_audio	音频文件、og:audio 和播客附件，并标注来源；直接音频文件 URL 会作为唯一结果返回	1
extract_lottie	页面中声明的 Lottie 动画 JSON 文件	3
extract_svgs	内联 SVG 代码（已清理，可直接粘贴）及外部 SVG 文件 URL	1
extract_assets	页面上的所有图片 URL，并标注来源及替代文本；直接图片文件 URL 会作为唯一结果返回	1

所有工具均为只读，且可安全重试。24 小时内的相同调用会从缓存中免费提供，失败的调用永不收费。

按名称请求页面的一部分

extract_code 接受 section 参数，可选值为 hero、header、footer、pricing、features、testimonials、faq、cta，因此 Agent 无需为无法查看的页面臆造 CSS 选择器。每个结果还会列出页面中的其他 sections，并提供可用于后续调用的现成选择器。如果选择器或区块未匹配到任何内容，则会回退到 hero 区块，并通过 note 说明页面实际包含的内容，而不是返回无法继续操作的 404。

每个 extract_code 结果都包含 previewUrl：用于展示返回代码渲染效果的页面，因此即使 Agent 调整了代码，也能将其与实时网站进行比较；downloadUrl：按原样返回的代码文件，格式为你请求的格式（.jsx、.vue、.html、.elementor.json、.liquid）；以及 pagePreviewUrl：截至目前提取的该页面所有区块，按顺序组装而成。系统会告知 Agent 以返回的代码为基础进行构建，而不是重新生成代码：在保证渲染效果相同的前提下，尽可能提升代码的可用性（使用清晰的名称、带 props 的可复用组件、更短且不含冗余包装元素或重复类名的代码，以及你的主题设计令牌），将整洁的代码原样交付，并且绝不重新输入真实的布局和样式。超过 2 KB 的内联 SVG（如徽标墙、插图）会作为永久托管的 .svg 文件返回，并通过保留其类名、尺寸和颜色的 <img> 引用，以确保代码足够精简，Agent 可以直接使用（astro.build 的 hero 区块从 73 KB 缩减至 14 KB）。传入 inline_svg: true 可生成完全自包含的代码。

提示词（斜杠命令）

服务会公开三个 MCP 提示词，客户端会在首次调用前显示这些提示词——Claude Code 中为 /mcp__miromiro__clone_section、/mcp__miromiro__brand_kit 和 /mcp__miromiro__design_tokens；VS Code 中为 /miromiro.<name>；Cursor 中则位于其提示词菜单中：

提示词	参数	功能
clone_section	url、section?、framework?	将实时网站的一个区块重建为可直接粘贴的代码，使用真实数值，并列出其他区块
brand_kit	url	品牌颜色、字体、徽标和社交媒体资料，并说明其来源（声明的或推断的）
design_tokens	url、format?	将完整的设计令牌系统生成为 CSS、Tailwind、DTCG 或 JSON，并附上简短摘要

控制输出大小（远程服务）

远程结果默认会经过裁剪，避免大页面占满聊天上下文；每个经过裁剪的响应都会明确说明删去了哪些内容。两个可选参数可放宽单次调用的限制：

• response_format: 'concise' | 'detailed' —— 一个词即可调整：concise 会将聊天回答中的列表限制为 10 项，detailed 则返回工具提供的全部内容
• limit（最高为 200）—— 提高条目上限：“给我 80 个 SVG，而不是 20 个”
• full_output: true —— 返回完整的长字符串，例如整个内联 SVG 标记

生成的代码不会被裁剪。结果会在大约 20k 个 token 处停止（extract_code 为 25k），以符合 Claude Code、Claude Desktop 和 Cursor 的工具结果上限；truncation_note 会说明裁剪了多少个 token，以及通过哪个参数可以恢复这些内容。

REST API 和此本地 npm 服务始终返回未经裁剪的全部内容，因此 limit 和 full_output 仅适用于远程服务。两个服务上的每个工具都接受 render: true（强制使用真实浏览器，每次调用增加 5 个积分，适用于所有套餐；通常不需要，因为服务会自行在浏览器中重新运行仅含 JavaScript 或遭拒的页面——参见备注），还接受另外两个通用参数：

• fresh: true —— 跳过 24 小时缓存，重新提取实时页面（按正常标准计费）；适用于网站刚刚发生变更的情况
• screenshot: true（需要 render: true）—— 结果中会增加一个 screenshot 字段：页面的公开 URL 截图，尺寸为 1440x900，有效期为 7 天，不额外消耗积分——将其展示给用户，以便验证提取结果。传入 'full' 代替 true 可获取整页高度的截图。

示例

“用 React 重建 stripe.com 的定价部分”

Agent 会使用 URL 调用 extract_code，获取该部分的真实标记、颜色、字体和间距，并根据实际数值进行调整，而不是猜测。

默认情况下，提取结果会返回页面的浅色样式，因此如果你熟悉的网站采用深色主题，返回的结果也会是浅色，除非你另行指定：

“用深色主题重建 linear.app 的定价卡片”

Agent 会传入 theme: "dark"，页面的 prefers-color-scheme: dark 规则和自定义属性将成为组件本身。每个结果还会带有一个 theme 字段，说明实际获取的是哪种主题。通过 JavaScript 类切换主题的网站无法通过这种方式选择主题——你会获得页面默认主题，并收到相应提示。

“按照 linear.app 的风格构建一个仪表板”

Agent 会调用 extract_brand 和 extract_design_tokens，获取 Linear 的真实颜色、字体和间距比例，并据此构建。

“apple.com 使用了哪些字体？”

Agent 会调用 extract_fonts，返回每个字体系列及其字体文件 URL 和字重。

注意事项

• extract_code 始终会在真实浏览器中加载页面，并读取页面实际显示的内容（所有套餐均如此，不额外消耗额度），因此始终不需要 render: true。其他工具会读取静态 HTML，并先解析完整的 CSS 层叠样式。如果返回的是 JavaScript 应用外壳、样式由脚本注入，或网站拒绝访问（401、403 或 406，或请求超时——即使是公开页面，发布方也常会拒绝数据中心 IP），服务会自行在真实浏览器中重新运行调用，所有套餐均不额外收费，结果中会包含 usage.autoRender（需向用户朗读的一句话）。
• 传入 render: true 可强制使用浏览器（所有套餐均额外消耗 5 个额度）：适用于仅在滚动时加载的图像、视频或 Lottie，或自动处理后结果仍然不够丰富的情况。如果 403 错误表明浏览器也遭到拒绝，则无法提取该网站的内容。对于 extract_design_tokens，render: true 仅允许使用浏览器：仍会先进行普通读取，只有实际需要使用浏览器时才会扣除 5 个额度。
• 每个结果都包含 usage，其中列出本月剩余额度。如果账户持有额度包（一次性购买且永不过期的额度，购买地址为 https://miromiro.app/api/pricing），`usage.packCredits` 表示额度包剩余余额；额度包会在月度额度用完后使用，因此持有额度包的免费账户即使超过 300 个额度仍可继续使用。
• 请尊重你提取内容的网站：在将资源用于商业用途前，先查看网站的条款。

链接

API 文档 · Playground（无需账户） · 定价 · 更新日志 · 连接页面

MIT © MiroMiro