Match Brand

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install match-brand
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 match-brand。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

Match Brand 帮助 AI 编码代理创建反映现有网站视觉语言的 UI。给定一个 URL，它就可以识别精选的品牌颜色、浅色或深色主题、排版、Logo 资产和置信度信号，或者返回更完整的设计 Token 清单，例如字体大小、圆角、阴影、行高和 z-index 值。
作为面向前端工作的实用 Openclaw Skills 之一，它会在可用时连接 MiroMiro 工具或调用 MiroMiro REST API。选择简洁的品牌摘要以获取设计方向，或选择详尽的 Token 以进行实现，并在颜色是推断得出而非官方声明时进行清晰的沟通。

应用场景

以参考网站的风格构建新页面或产品界面。
在实现主题之前，识别网站的主要色、强调色、背景色和文本色。
生成 CSS 自定义属性、Tailwind 配置片段或 W3C Design Tokens 文件。
在回答排版问题时检查网站的字体族和字体文件。
使用 Token 值和使用次数重建更广泛的设计系统。
调查初始静态提取中缺少样式的客户端渲染网站。
解释提取的品牌颜色是由网站声明的还是从样式表使用中推断出来的。

工作原理

接收参考 URL 并确定任务需要简洁的品牌标识、详尽的设计 Token 还是仅需排版。
在可用时使用已连接的 MiroMiro 工具；否则调用匹配的 REST 端点：/v1/brand 对应 extract_brand，/v1/extract 对应 extract_design_tokens，或 /v1/fonts 对应 extract_fonts。
对于品牌方向，检查解析出的颜色角色、主题、字体、Logo、社交媒体图像、置信度分数和 signals 字段。
对于可用于实现的 Token，直接请求所需的格式：JSON、CSS、Tailwind 或 DTCG。
解释结果的来源。特别是，当 signals.primarySource 为 usage 时应予披露，因为调色板是推断得出的，而不是官方声明的。
如果静态 HTML 和 CSS 在客户端渲染的页面上产生的结果较少，请使用 render: true 重试，这会增加 5 个积分。
在项目的设计工作流程中呈现提取的值，并指出识别商业字体并不授予使用它的许可。

配置指南

在 Claude、ChatGPT、Cursor 或 Codex 等受支持的客户端中连接 MiroMiro 工具，或者从没有这些工具的代理使用 REST API。
在 https://miromiro.app/api/onboarding 获取 MiroMiro API key。文档记录的免费额度为每月 300 个积分，无需信用卡。向用户索取他们的 key；绝不凭空捏造。
在环境中将 key 设置为 MIROMIRO_API_KEY。
调用与任务匹配的端点。请求示例：
export MIROMIRO_API_KEY="your-user-provided-key"
curl -s "https://miromiro.app/api/v1/brand?url=linear.app"
-H "Authorization: Bearer $MIROMIRO_API_KEY" curl -s "https://miromiro.app/api/v1/extract?url=linear.app&format=css"
-H "Authorization: Bearer $MIROMIRO_API_KEY" 需要该输出时请求 format=css、format=tailwind 或 format=dtcg，而不是手动转换 JSON。默认的 Token 格式为 JSON。
为记录的端点成本做好预算：品牌提取成本为 15 个积分，设计 Token 提取成本为 10 个积分，字体提取成本为 5 个积分。使用 render: true 渲染页面会增加 5 个积分。

数据架构

该技能依赖于 API 结果，而不是定义本地文件存储约定。其主要结果组包括：
端点 / 操作 返回的数据 最适合
/v1/brand — extract_brand 带有十六进制值和名称的颜色角色（primary、accent、background、text）；浅色/深色主题检测；基于角色的字体；Logo 和社交媒体图像；confidence；以及 signals 简洁、可操作的视觉方向
/v1/extract — extract_design_tokens 颜色、字体族和大小、边框圆角、盒阴影、行高和 z-index 值，包括使用次数 详细的主题或设计系统实现
/v1/fonts — extract_fonts 带有字体族、粗细、样式和格式的 Font-face 文件；Google Fonts 链接和预加载 排版检查
设计 Token 输出格式为 json（默认）、css（一个 :root {} 块）、tailwind（配置片段）和 dtcg（独立的 W3C Design Tokens 文件）。对于字体提取，fields: "families" 返回按字体族分组的摘要，而不是单独的文件 URL。
通过 signals.primarySource 解读品牌来源：css-var 意味着网站声明了自定义属性；theme-color 来自主题颜色 meta 标签；logo 采样自鲜艳的 SVG Logo 颜色；usage 意味着颜色是从样式表频率中推断出来的。相关信号包括 declaredBackground、declaredText、declaredLogo、fontsFound 以及可直接使用的 signals.explanation。单色 Logo 可以与 primarySource: "usage" 和 declaredLogo: true 共存。

高级特性

选择正确的提取深度：使用
extract_brand
获取高层级设计方向，使用
extract_design_tokens
获取完整性；切勿本能地同时调用两者。
直接从 Token 端点生成可用于实现的 CSS、Tailwind 或 DTCG 输出。
confidence
signals
结合使用；依靠
signals.explanation
以人类可读的术语传达结果。
primarySource: "usage"
视为显式的推断警告，而不是官方品牌声明。
提取完整的字体层叠，包括单个
@font-face
元数据、Google Fonts 链接和预加载；使用
fields: "families"
获取紧凑的摘要。
当客户端渲染阻止有用的静态页面提取时，使用
render: true
重试，同时考虑额外的 5 个积分成本。
关注许可问题：字体发现可识别网站加载的内容，但不提供使用商业的权限。

name: match-brand description: Build new UI in the visual style of an existing site. Use when the user says "in the style of ", "match our brand", "use their colors and fonts", asks what fonts or colors a website uses, or wants a theme, palette, tailwind config, CSS variables or design tokens derived from a real website rather than a section's markup. homepage: https://miromiro.app/api/website-color-palette-api