← Back to Skills Marketplace
111
Downloads
0
Stars
0
Active Installs
2
Versions
Install in OpenClaw
/install huo15-openclaw-brand-protocol
Description
为现有品牌/产品抓取视觉规范并产出 brand-spec.md。5 步硬流程 Ask / Search / Download / Verify+Extract / Codify，输出可被 huo15-openclaw-frontend-design 直接引用的品牌规约。触发词：抓品牌规范、提取品牌、品牌资产、br...
README (SKILL.md)
火一五品牌协议技能 v1.0
品牌视觉规范抓取与 codify — 青岛火一五信息科技有限公司
一、触发场景
当用户要为现有品牌/产品做设计，但没有现成品牌规范文件：
- "给 X 公司做个落地页，先把他们的品牌抓一下"
- "提取 [URL] 的设计规范"
- "做一份 brand spec"
- "复刻这个品牌的视觉系统"
产出：一份 brand-spec.md，内含可机读的色卡、字体、Logo 描述、调性关键词，可被 huo15-openclaw-frontend-design 直接引用。
二、5 步硬流程（顺序不能颠倒）
步骤 1 · Ask（问 5 个问题）
先问用户，不要自己瞎猜：
- 品牌/公司名（全称，中英文）
- 官网或官方渠道 URL（至少一个）
- 重点抓哪部分（全 VI / 只抓色 / 只抓字体 / 只抓 Logo）
- 是否有已有 brand guideline PDF/Figma（有的话直接用，跳过抓取）
- 用途（做落地页 / 做海报 / 做 App，影响深度）
步骤 2 · Search（定位权威源）
按优先级找：
- 官方 brand / press kit 页（大公司通常有
/brand/press/about/brand） - 官方 Figma Community 文件
- 官方 GitHub 组织下的 design-system 仓库
- 官网首页 + 3 个内页（作为 fallback）
禁止：只靠 Google 图片搜 Logo。那通常是粉丝做的，色值不准。
步骤 3 · Download（返回 CLI 命令让用户下载）
按 enhance 插件的"禁 child_process"铁律，返回 CLI 命令：
mkdir -p ~/brand-kits/\x3Cbrand-slug>/raw
curl -fsSL -o ~/brand-kits/\x3Cbrand-slug>/raw/logo.svg "\x3CURL>"
curl -fsSL -o ~/brand-kits/\x3Cbrand-slug>/raw/home.html "\x3CURL>"
# 需要截图时：
npx playwright-core screenshot "\x3CURL>" ~/brand-kits/\x3Cbrand-slug>/raw/home.png --viewport-size=1440,900
步骤 4 · Verify + Extract（本地提取）
拿到用户下载的文件后，用以下方法提取：
| 要素 | 提取方法 |
|---|---|
| 主色 | 打开 SVG Logo，读 \x3Cpath fill="...">；或用 ImageMagick convert logo.png -unique-colors txt: CLI |
| 字体 | 读 HTML \x3Clink rel="stylesheet"> 找 Google Fonts / typekit；或 curl -s \x3CURL> | grep -oE "font-family:[^;]+" |
| 强调色 | 读 CSS variables 或 inline style="color:..." |
| Logo 形态 | 描述：文字 / 图形 / 图文结合 / 几何 / 具象 |
| 调性 | 看首页 hero 文案情绪（理性 / 感性 / 权威 / 亲切） |
Verify 质量门（"5-10-2-8" 简化版）：
- 主色至少验证 2 个不同来源（Logo SVG + 官网 CSS），一致才算
- 字体必须给出 具体家族名，不能"sans-serif"这种级别
步骤 5 · Codify（输出 brand-spec.md）
按下面模板输出，覆盖到 ~/brand-kits/\x3Cbrand-slug>/brand-spec.md：
# Brand Spec: \x3C品牌全称>
> 抓取日期：YYYY-MM-DD
> 抓取来源：\x3CURL 列表>
> 置信度：High / Medium / Low（来自 §Verify 质量门结果）
## 1. 颜色
| 用途 | 名称 | HEX | oklch | 来源 |
|------|------|-----|-------|------|
| 主色 | Primary | #XXX | oklch(...) | Logo SVG |
| 强调色 | Accent | #XXX | oklch(...) | 官网 CTA 按钮 |
| 中性 | Neutral | #XXX | oklch(...) | 官网正文 |
## 2. 字体
| 用途 | 家族 | 回落 | 来源 |
|------|------|------|------|
| 标题 | \x3CName> | \x3Cfallback> | Google Fonts `\x3CURL>` |
| 正文 | \x3CName> | \x3Cfallback> | 同上 |
## 3. Logo
- 形态：[文字 / 图形 / 图文]
- 主版：\x3C路径>
- 最小使用尺寸：XX px
- 保护区：Logo 高度的 X%
## 4. 调性关键词（3-5 个）
- 例：可靠 / 专业 / 克制 / 冷静 / 现代
## 5. 参考素材（已下载到本地）
- `~/brand-kits/\x3Cbrand-slug>/raw/logo.svg`
- `~/brand-kits/\x3Cbrand-slug>/raw/home.png`
- `~/brand-kits/\x3Cbrand-slug>/raw/home.html`
## 6. 使用指引（给 frontend-design 的提示词片段）
设计时严格遵循：
- 主色 #XXX，强调色 #XXX（不许擅自加紫色渐变）
- 标题用 \x3C字体名>，正文用 \x3C字体名>
- 调性：\x3C关键词>
- 参考本地资源：~/brand-kits/\x3Cbrand-slug>/raw/
三、与其他 huo15 技能的分工
| 场景 | 归属 |
|---|---|
| 抓取已有品牌视觉规范 | 本技能 |
| 从零设计品牌标识 | 超出本技能范围，建议用 huo15-openclaw-frontend-design + 大胆流派 |
| 拿到 brand-spec 后做页面 | huo15-openclaw-frontend-design（用 §6 的提示词片段喂给它） |
| 对比多个品牌风格 | huo15-openclaw-design-director |
四、硬红线（违反会让品牌失真）
- ❌ 从 Google 图片搜的 Logo —— 色值一定不准
- ❌ 靠视觉判断颜色（"看起来是深蓝"）—— 必须从 SVG 或 CSS 读精确值
- ❌ 只看首页 —— 首页是宣传，内页才是规范
- ❌ 猜字体（"看起来像 Helvetica"）—— 必须从 CSS 或 font-face 拿到具体名字
- ❌ 跳过 Verify 直接 Codify —— 错一次品牌失真比不抓还糟
五、触发词
- 抓品牌规范 / 抓品牌 / 提取品牌
- 做 brand kit / 做 brand spec / 做品牌规范
- 品牌调研 / VI 规范 / 视觉规范
- 复刻这个品牌 / 提取这个网站的风格
六、版本历史
- v1.0.0（当前 · 2026-04-23）：初始版本。5 步硬流程（Ask / Search / Download / Verify+Extract / Codify）+ 禁 child_process 模式的 CLI 命令返回 + brand-spec.md 结构化模板 + 5 条品牌失真硬红线。
技术支持： 青岛火一五信息科技有限公司
Usage Guidance
This skill is instruction-only and internally coherent, but before using it: (1) verify you trust the skill source and the target URLs you provide; the skill will prompt you to run curl/npx/ImageMagick/grep commands — inspect those commands before running them and run them in a safe account or sandbox if unsure; (2) downloaded assets may be copyrighted or require permission — ensure you have the right to download/use them; (3) the agent will not execute commands itself or ask for credentials, so any network requests or file writes only happen if you run the suggested commands; (4) expect brittle heuristics (SVG fills, CSS grep) and manually review results — the skill provides a verification step and confidence rating for this reason.
Capability Analysis
Type: OpenClaw Skill
Name: huo15-openclaw-brand-protocol
Version: 1.0.1
The skill is a brand asset extraction tool designed to help users gather visual specifications (colors, fonts, logos) from existing websites. It follows a structured 5-step process and provides standard shell commands (mkdir, curl, npx) for the user to execute manually to download assets, explicitly avoiding automated execution (child_process) to maintain security. No evidence of malicious intent, data exfiltration, or harmful prompt injection was found in SKILL.md or _meta.json.
Capability Assessment
Purpose & Capability
Name and description (抓取品牌视觉规范并产出 brand-spec.md) match the SKILL.md instructions. The skill does not request unrelated binaries, credentials, or config paths and only prescribes how to find, download, verify, and codify brand assets — which is proportionate to its purpose.
Instruction Scope
The SKILL.md gives a tight 5-step workflow and explicitly avoids running child processes itself, instead returning CLI commands (curl, npx playwright-core, ImageMagick examples, grep) for the user to run. This is coherent with the stated constraint but means the user (not the agent) will perform network downloads and local file inspection; the document references only user-supplied URLs and local ~/brand-kits paths, not other system secrets. Users should be cautious about running curl/npx commands against untrusted URLs.
Install Mechanism
No install spec and no code files — instruction-only. Nothing is downloaded or written by the skill itself, reducing installation risk.
Credentials
The skill declares no required environment variables, credentials, or special config paths. The SKILL.md does not instruct reading credentials or unrelated system files.
Persistence & Privilege
always is false and the skill is user-invocable; it does not request persistent presence or modification of other skills or system-wide settings. It suggests storing downloaded assets under the user's ~/brand-kits directory if the user runs the provided commands.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install huo15-openclaw-brand-protocol - After installation, invoke the skill by name or use
/huo15-openclaw-brand-protocol - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.1
No changes detected in this version.
- Version bumped to 1.0.1, but no file changes were made.
- Functionality and documentation remain identical to previous release.
v1.0.0
首发 v1.0.0：Ask/Search/Download/Verify+Extract/Codify 5 步硬流程 → brand-spec.md
Metadata
Frequently Asked Questions
What is Huo15 Openclaw Brand Protocol?
为现有品牌/产品抓取视觉规范并产出 brand-spec.md。5 步硬流程 Ask / Search / Download / Verify+Extract / Codify，输出可被 huo15-openclaw-frontend-design 直接引用的品牌规约。触发词：抓品牌规范、提取品牌、品牌资产、br... It is an AI Agent Skill for Claude Code / OpenClaw, with 111 downloads so far.
How do I install Huo15 Openclaw Brand Protocol?
Run "/install huo15-openclaw-brand-protocol" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Huo15 Openclaw Brand Protocol free?
Yes, Huo15 Openclaw Brand Protocol is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Huo15 Openclaw Brand Protocol support?
Huo15 Openclaw Brand Protocol is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Huo15 Openclaw Brand Protocol?
It is built and maintained by Job Zhao (@zhaobod1); the current version is v1.0.1.
More Skills