Brand Visual Quality logo

Brand Visual Quality

Organization
devcodex-labs
brand-visual-quality

品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。

Overview

Publisherdevcodex-labs
Repositorydevcodex
Skill namebrand-visual-quality
Stars
433
Forks
44
Bundled files
1
LicenseAGPL-3.0
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 1 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by devcodex-labs on GitHub. Read the source before you install it.

Installation

Install the Brand Visual Quality AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/devcodex-labs/devcodex.git /tmp/devcodex
mkdir -p .claude/skills
cp -r /tmp/devcodex/content/skills/brand-visual-quality .claude/skills/brand-visual-quality
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Brand Visual Quality in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Brand Visual Quality on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Brand Visual Quality is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Brand Visual Quality

本 Skill 负责品牌视觉资产从母版到可验收交付物的生产质量闭环。它不替代设计系统、页面交互或普通文案审查。

触发条件

命中任一条件时使用:

  • 新建或修改 logo、app icon、favicon、品牌图形、主题图标、单色版本或微尺寸变体。
  • 需要证明多个格式、主题或尺寸来自同一母版,而不是各自手工漂移。
  • 视觉复审发现描边、留白、重心、负空间、轮廓、像素贴合或单色退化问题。
  • 需要形成视觉证据包、人工验收结论或 blocker 修复后的重跑记录。

以下场景不单独触发本 Skill:

  • 仅调整 design token、组件主题、Figma-code adoption 或通用组件变体,交给 design-system-architecture。
  • 仅审查页面任务路径、加载/空/错状态或普通交互,交给 UX / frontend Owner。
  • 一次性改文案或不影响品牌资产谱系的普通颜色微调。

Owner 边界

能力本 Skill相邻 Owner
品牌母版、几何谱系、主题/尺寸变体生产质量Ownerdesign-system-architecture 只消费并接入 token/component/runtime
token、theme、component、Figma-code 同步配合design-system-architecture Owner
专家型产物通用品质提供领域证据expert-output-quality 横切门禁
返工率与预防措施长期有效性提供 WorkUnit 数据rework-prevention-engineering Owner

BrandVisualQualityGate

所有品牌视觉 WorkUnit 必须依次执行以下子门禁;任一必需门禁缺证据时状态只能是 verification-pending 或 blocked。

MasterLineageGate

建立 MasterLineageMatrix:

字段必填说明
masterId / digest可复现母版身份
sourceFormatSVG、矢量源或批准的高分辨率母版
derivedAsset每个输出资产路径和用途
transform缩放、裁切、留白、光学校正,不允许只写“导出”
generatedAt / tool生成时间与工具链
lineageVerdictmatched / drifted / unknown

不存在可追溯母版、多个变体无法反查同一谱系或手工覆盖未记录时,禁止标 accepted。

ThemeGeometryParityGate

形成 ThemeGeometryParity,逐主题比较 viewBox/画布、主体边界、留白、重心、轮廓与透明区。主题只允许颜色、明暗或明确批准的光学差异;未经记录的几何变化是 blocker。

MicroOpticalVariantGate

针对 favicon、16/20/24/32px 图标和其他微尺寸输出检查像素贴合、最细笔画、负空间、视觉重心与缩放后可辨识度。微尺寸可存在受控光学校正,但必须记录与母版的差异原因,不能伪装成等比缩放。

MonoMasterGate

形成独立单色母版或证明单色输出来自可复现变换。验证轮廓闭合、透明/实色语义、反白可用性和极端对比背景;彩色资产直接去饱和不自动等于合格单色母版。

VisualEvidencePackGate

生成 VisualEvidencePack,至少包含:

  • 母版与派生资产身份、命令或工具版本。
  • 同画布主题并排、微尺寸像素级预览、单色正反背景预览。
  • 自动几何/文件检查结果与人工视觉结论;两者不能互相替代。
  • 证据生成时间、reviewer、结论和未覆盖项。

文件存在、构建成功或单张截图都不足以证明视觉质量通过。

VisualBlockerResetGate

发现 blocker 后写 VisualBlockerResetRecord:记录 finding、受影响资产、补丁、旧证据失效范围、新母版身份和必须重跑的矩阵。修复单个输出后,至少重跑同母版全部主题、相关微尺寸、单色输出和证据包;不得复用 blocker 前的 accepted 结论。

ComponentTransparencyTopologyGate

复合透明标志(网络球、晶核、徽章、线框核心等)不得只凭整图画布四角透明或全局 opaqueRatio 通过。必须建立组件级透明拓扑:

字段要求
componentTree外环 / 核心 / 节点 / 辉光 / 遮挡层
componentFillContract每组件允许的 fill/stroke/alpha(线框核心默认 fill=none 或 wireframe-holes)
centerRoiOpaqueRatio中央核心 ROI 不透明占比;线框/网格孔洞场景不得 ≥0.99
holePenetration白/暗/棋盘格背景下孔洞应透出背景
occlusionOrder前环遮挡与后环层级
topologyVerdictpass / topology-fail / pending

负向假绿(必须阻断):canvasCornersTransparent=true 且 globalOpaqueRatio<0.5,但 centerRoiOpaqueRatio≥0.99 且合同要求孔洞/线框透明 → topology-fail,WorkUnit 不得 accepted。分类器:classifyComponentTransparencyTopology(V97 / test-brand-visual-quality)。

产物契约

每个 WorkUnit 使用以下五类产物:

  1. MasterLineageMatrix
  2. ThemeGeometryParity
  3. MicroMonoMatrix
  4. VisualEvidencePack
  5. VisualBlockerResetRecord(无 blocker 时写 N/A + no-blocker-observed)
  6. ComponentTransparencyTopology(无复合透明资产时写 N/A + skipReason)

任务状态机:

text
draft → candidate → verification-pending → accepted
                                      ├──→ rejected
                                      └──→ blocked
blocked / rejected → 新 candidate(旧证据失效)

accepted 必须同时满足五类产物、自动检查和人工视觉结论;生命周期 gray/active 是 Skill portfolio 状态,与单个 WorkUnit 的 accepted 分离。

验证路线

层必查
静态格式、尺寸、viewBox/画布、alpha、文件身份、谱系完整性
几何主体边界、留白、重心、轮廓和主题 parity
微尺寸/单色像素贴合、负空间、辨识度、正反背景
渲染同一证据画布上按主题和尺寸并排,不使用不同缩放掩盖差异
人工结论reviewer 明确 accepted / rejected / blocked,写理由与未覆盖项
修复后执行 VisualBlockerResetGate,重新生成受影响全部证据

生命周期与晋升

本 Skill 初始为 gray。结构化探针只证明契约可执行,不证明长期收益。

晋升 active 前必须满足以下任一取样门槛:

  • 至少 3 个可比较品牌视觉 WorkUnit 的前瞻证据;或
  • 至少 2 个独立项目的真实使用证据。

证据还必须说明误触发率、人工修正率、验证成本和 blocker 复发率均在可接受边界。若成本失控、与设计系统 Owner 重叠或持续产生假阳性,保持/回退 gray;无人消费时进入 sunset 评估。

正负样例

  • 正向:同一 SVG 母版导出 light/dark、16~512px 与单色版本,五类产物齐全,自动 parity 通过且人工结论 accepted。
  • 负向:只有导出文件和一张大尺寸截图,缺母版 digest、微尺寸/单色矩阵或人工结论,状态必须是 verification-pending。
  • 阻断:dark 主题轮廓偏移;即使单文件已修,也必须先重跑同母版矩阵和证据包,完成 reset 后才能重新验收。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Brand Visual Quality AI skill do?

品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。

Why use Brand Visual Quality on TypingMind?

Because you install it once and use it with any model. Brand Visual Quality is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Brand Visual Quality in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Brand Visual Quality?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Brand Visual Quality?

As many as you like. As long as a model supports skills, you can use Brand Visual Quality with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Brand Visual Quality AI skill free?

Yes. It is published on GitHub by devcodex-labs under the AGPL-3.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇