Agent skill

Brand Visual Quality

by devcodex-labs in devcodex-labs/devcodex

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

AGPL-3.0Auto-check passedMedia & Creative

Install Brand Visual Quality

skills CLI
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/content/skills/brand-visual-quality .claude/skills/brand-visual-quality && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
brand-visual-quality
GitHub stars
439
Token cost
~1.1k tokens
SKILL.md length
250 words
Files
2
Skills in repo
70
Repo updated
First seen
Licence
AGPL-3.0

At a glance

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

  • Works in 6 steps: MasterLineageMatrix → ThemeGeometryParity → MicroMonoMatrix → …
  • Tasks that involve Logo and visual identity
  • SKILL.md covers 触发条件, Owner 边界, BrandVisualQualityGate and 产物契约, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Media & Creative, covering Logo and visual identity. The repository describes itself as: Intent-driven AI coding workflow runtime for consistent context, skills, approvals, validation, and handoffs across six AI coding hosts. The licence is AGPL-3.0.

When your agent uses it

  • Tasks that involve Logo and visual identity

Example prompts

  • “/brand-visual-quality”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 1dd4525. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Brand Visual Quality loads about 1.1k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 250 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from devcodex-labs/devcodex at commit 1dd4525, republished under its AGPL-3.0 licence (© devcodex-labs). 250 words, ~1,051 tokens.

Download SKILL.mdSave it as .claude/skills/brand-visual-quality/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
brand-visual-quality
description
品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。

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 后才能重新验收。

© devcodex-labs, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in content/skills/brand-visual-quality of devcodex-labs/devcodex.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 1dd4525

Compare with similar skills

Brand Visual Quality next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Brand Visual Quality compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Brand Visual Quality this skilldevcodex-labs/devcodex439—~1.1kAutomated safety check: PassAGPL-3.0
Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill134k1 repos~3.5kAutomated safety check: PassMIT
Image Prompt ReverseLunarXuan/image-prompt-reverse464—~678Automated safety check: PassGPL-3.0
Brand Style Guiderampstackco/claude-skills935—~2.1kAutomated safety check: PassMIT
Web Visualsglifxyz/glif-mcp-server212—~1.4kAutomated safety check: PassMIT
App Icons And Logosglifxyz/glif-mcp-server212—~1.3kAutomated safety check: PassMIT

Similar skills

  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    134k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed
  • Image Prompt Reverse

    LunarXuan/image-prompt-reverse

    Analyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts.

    464 GitHub stars~678 tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Brand Style Guide

    rampstackco/claude-skills

    Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.

    935 GitHub stars~2.1k tokensUpdated today
    Media & CreativeAuto-check passed
  • Web Visuals

    glifxyz/glif-mcp-server

    Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

    212 GitHub stars~1.4k tokensUpdated today
    Media & CreativeAuto-check passed
  • App Icons And Logos

    glifxyz/glif-mcp-server

    Design a logo, app icon, favicon set, icon set or brand kit with Glif for an app or site you are building, then export every size and wire it into the code.

    212 GitHub stars~1.3k tokensUpdated today
    Media & CreativeAuto-check passed
  • Openclaw Design

    openclaw/clawhub

    Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance.

    9.5k GitHub stars~519 tokensUpdated yesterday
    Media & CreativeAuto-check passed

More from devcodex-labs/devcodex

All 70 skills in this repo
  • Accessibility I18n

    devcodex-labs/devcodex

    无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用;要求把包容性体验和本地化验证绑定到真实用户路径。

    439 GitHub stars~718 tokensUpdated 21 days ago
    Auto-check passed
  • AI Agent System Architecture

    devcodex-labs/devcodex

    AI Agent 系统架构专家 Owner — 当任务涉及 Agent 路由、工具调用、上下文管理、记忆、状态机、权限、人机协作、可观测性、回放验证或模型辅助治理时使用;要求把 Agent 行为设计成可解释、可恢复、可审计。

    439 GitHub stars~2.4k tokensUpdated 21 days ago
    Auto-check passed
  • API Contract Architecture

    devcodex-labs/devcodex

    API 契约架构专家 Owner — 当任务涉及 public API、HTTP/SDK/CLI 契约、版本兼容、错误模型、分页过滤、幂等、Schema、类型、迁移或消费者影响时使用;要求先冻结消费者契约,再设计实现与验证。

    439 GitHub stars~865 tokensUpdated 21 days ago
    Auto-check passed
  • Architecture Design

    devcodex-labs/devcodex

    架构设计文档编排 Owner — 当用户要求架构设计、系统设计、技术架构或可指导开发、Review 与任务拆分的完整方案时使用;要求从业务流程反推节点、状态、数据、一致性、异常补偿、ADR 与实施任务。

    439 GitHub stars~1.1k tokensUpdated 21 days ago
    Auto-check passed
  • Audit Common

    devcodex-labs/devcodex

    审查公共维度 G0~G5 + Profile Freshness Check — 所有 audit 子类型必先执行的基础维度层

    439 GitHub stars~4.1k tokensUpdated 21 days ago
    Auto-check passed
  • Audit Session

    devcodex-labs/devcodex

    审计工作流的跨会话状态机 — 在 <audit-root/.audit-state/<session-id.json 持久化轮次/发现项/收敛状态,支持 Token 中断后精准恢复

    439 GitHub stars~1.8k tokensUpdated 21 days ago
    Auto-check passed

Questions about Brand Visual Quality

What does Brand Visual Quality do?

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

When should I use Brand Visual Quality?

Brand Visual Quality fits situations like: tasks that involve Logo and visual identity.

How do I install Brand Visual Quality in Claude Code?

Run `npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a claude-code`. Or copy the skill folder (content/skills/brand-visual-quality in devcodex-labs/devcodex) into .claude/skills/brand-visual-quality in your project. Claude Code loads it when a task matches its description.

How do I install Brand Visual Quality in Codex?

Run `npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a codex`. Or copy the skill folder (content/skills/brand-visual-quality in devcodex-labs/devcodex) into .agents/skills/brand-visual-quality in your project. Codex loads it when a task matches its description.

Can I use Brand Visual Quality in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/brand-visual-quality, .gemini/skills/brand-visual-quality, .github/skills/brand-visual-quality and .opencode/skills/brand-visual-quality in your project.

What does Brand Visual Quality need to run?

SKILL.md names no scripts, command-line tools or credentials: Brand Visual Quality is instructions for the agent only.

Does Brand Visual Quality access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Brand Visual Quality safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Brand Visual Quality use?

Brand Visual Quality is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Brand Visual Quality use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Brand Visual Quality?

Skills that share tags, products or a category with Brand Visual Quality: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Image Prompt Reverse (LunarXuan/image-prompt-reverse, 464 stars), Brand Style Guide (rampstackco/claude-skills, 935 stars) and Web Visuals (glifxyz/glif-mcp-server, 212 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Brand Visual Quality?

devcodex-labs (a GitHub organization) maintains it in devcodex-labs/devcodex, which has 439 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on September 17, 2026.

Source: devcodex-labs/devcodex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.