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.
品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .claude/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-qualityType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/content/skills/brand-visual-quality .agents/skills/brand-visual-quality && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .agents/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/content/skills/brand-visual-quality .cursor/skills/brand-visual-quality && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .cursor/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/devcodex-labs/devcodex.git --path content/skills/brand-visual-quality--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/content/skills/brand-visual-quality .gemini/skills/brand-visual-quality && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .gemini/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install devcodex-labs/devcodex brand-visual-qualityInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .github/skills && cp -r skills-src/content/skills/brand-visual-quality .github/skills/brand-visual-quality && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .github/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill brand-visual-quality -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install devcodex-labs/devcodex brand-visual-quality --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/content/skills/brand-visual-quality .opencode/skills/brand-visual-quality && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "brand-visual-quality" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/brand-visual-quality into .opencode/skills/brand-visual-quality/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "brand-visual-quality", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
brand-visual-quality品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。
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.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 1dd4525. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from devcodex-labs/devcodex at commit 1dd4525, republished under its AGPL-3.0 licence (© devcodex-labs). 250 words, ~1,051 tokens.
.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.本 Skill 负责品牌视觉资产从母版到可验收交付物的生产质量闭环。它不替代设计系统、页面交互或普通文案审查。
命中任一条件时使用:
以下场景不单独触发本 Skill:
design-system-architecture。| 能力 | 本 Skill | 相邻 Owner |
|---|---|---|
| 品牌母版、几何谱系、主题/尺寸变体生产质量 | Owner | design-system-architecture 只消费并接入 token/component/runtime |
| token、theme、component、Figma-code 同步 | 配合 | design-system-architecture Owner |
| 专家型产物通用品质 | 提供领域证据 | expert-output-quality 横切门禁 |
| 返工率与预防措施长期有效性 | 提供 WorkUnit 数据 | rework-prevention-engineering Owner |
所有品牌视觉 WorkUnit 必须依次执行以下子门禁;任一必需门禁缺证据时状态只能是 verification-pending 或 blocked。
建立 MasterLineageMatrix:
| 字段 | 必填说明 |
|---|---|
| masterId / digest | 可复现母版身份 |
| sourceFormat | SVG、矢量源或批准的高分辨率母版 |
| derivedAsset | 每个输出资产路径和用途 |
| transform | 缩放、裁切、留白、光学校正,不允许只写“导出” |
| generatedAt / tool | 生成时间与工具链 |
| lineageVerdict | matched / drifted / unknown |
不存在可追溯母版、多个变体无法反查同一谱系或手工覆盖未记录时,禁止标 accepted。
形成 ThemeGeometryParity,逐主题比较 viewBox/画布、主体边界、留白、重心、轮廓与透明区。主题只允许颜色、明暗或明确批准的光学差异;未经记录的几何变化是 blocker。
针对 favicon、16/20/24/32px 图标和其他微尺寸输出检查像素贴合、最细笔画、负空间、视觉重心与缩放后可辨识度。微尺寸可存在受控光学校正,但必须记录与母版的差异原因,不能伪装成等比缩放。
形成独立单色母版或证明单色输出来自可复现变换。验证轮廓闭合、透明/实色语义、反白可用性和极端对比背景;彩色资产直接去饱和不自动等于合格单色母版。
生成 VisualEvidencePack,至少包含:
文件存在、构建成功或单张截图都不足以证明视觉质量通过。
发现 blocker 后写 VisualBlockerResetRecord:记录 finding、受影响资产、补丁、旧证据失效范围、新母版身份和必须重跑的矩阵。修复单个输出后,至少重跑同母版全部主题、相关微尺寸、单色输出和证据包;不得复用 blocker 前的 accepted 结论。
复合透明标志(网络球、晶核、徽章、线框核心等)不得只凭整图画布四角透明或全局 opaqueRatio 通过。必须建立组件级透明拓扑:
| 字段 | 要求 |
|---|---|
componentTree | 外环 / 核心 / 节点 / 辉光 / 遮挡层 |
componentFillContract | 每组件允许的 fill/stroke/alpha(线框核心默认 fill=none 或 wireframe-holes) |
centerRoiOpaqueRatio | 中央核心 ROI 不透明占比;线框/网格孔洞场景不得 ≥0.99 |
holePenetration | 白/暗/棋盘格背景下孔洞应透出背景 |
occlusionOrder | 前环遮挡与后环层级 |
topologyVerdict | pass / topology-fail / pending |
负向假绿(必须阻断):canvasCornersTransparent=true 且 globalOpaqueRatio<0.5,但 centerRoiOpaqueRatio≥0.99 且合同要求孔洞/线框透明 → topology-fail,WorkUnit 不得 accepted。分类器:classifyComponentTransparencyTopology(V97 / test-brand-visual-quality)。
每个 WorkUnit 使用以下五类产物:
MasterLineageMatrixThemeGeometryParityMicroMonoMatrixVisualEvidencePackVisualBlockerResetRecord(无 blocker 时写 N/A + no-blocker-observed)ComponentTransparencyTopology(无复合透明资产时写 N/A + skipReason)任务状态机:
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 前必须满足以下任一取样门槛:
证据还必须说明误触发率、人工修正率、验证成本和 blocker 复发率均在可接受边界。若成本失控、与设计系统 Owner 重叠或持续产生假阳性,保持/回退 gray;无人消费时进入 sunset 评估。
verification-pending。© 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
SKILL.md and 1 other file in content/skills/brand-visual-quality of devcodex-labs/devcodex.
Open the folder on GitHubat commit 1dd4525
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Brand Visual Quality this skilldevcodex-labs/devcodex | 439 | — | ~1.1k | Automated safety check: Pass | AGPL-3.0 | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Image Prompt ReverseLunarXuan/image-prompt-reverse | 464 | — | ~678 | Automated safety check: Pass | GPL-3.0 | |
| Brand Style Guiderampstackco/claude-skills | 935 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Web Visualsglifxyz/glif-mcp-server | 212 | — | ~1.4k | Automated safety check: Pass | MIT | |
| App Icons And Logosglifxyz/glif-mcp-server | 212 | — | ~1.3k | Automated safety check: Pass | MIT |
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.
LunarXuan/image-prompt-reverse
Analyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts.
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.
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.
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.
openclaw/clawhub
Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance.
devcodex-labs/devcodex
无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用;要求把包容性体验和本地化验证绑定到真实用户路径。
devcodex-labs/devcodex
AI Agent 系统架构专家 Owner — 当任务涉及 Agent 路由、工具调用、上下文管理、记忆、状态机、权限、人机协作、可观测性、回放验证或模型辅助治理时使用;要求把 Agent 行为设计成可解释、可恢复、可审计。
devcodex-labs/devcodex
API 契约架构专家 Owner — 当任务涉及 public API、HTTP/SDK/CLI 契约、版本兼容、错误模型、分页过滤、幂等、Schema、类型、迁移或消费者影响时使用;要求先冻结消费者契约,再设计实现与验证。
devcodex-labs/devcodex
架构设计文档编排 Owner — 当用户要求架构设计、系统设计、技术架构或可指导开发、Review 与任务拆分的完整方案时使用;要求从业务流程反推节点、状态、数据、一致性、异常补偿、ADR 与实施任务。
devcodex-labs/devcodex
审查公共维度 G0~G5 + Profile Freshness Check — 所有 audit 子类型必先执行的基础维度层
devcodex-labs/devcodex
审计工作流的跨会话状态机 — 在 <audit-root/.audit-state/<session-id.json 持久化轮次/发现项/收敛状态,支持 Token 中断后精准恢复
Categories
品牌视觉资产生产质量 Owner — 当任务涉及品牌标志、图标、主题变体、微尺寸光学校正、单色母版、主资产谱系或视觉验收证据时使用;要求把几何一致性、变体关系和人工视觉结论绑定到可重放证据,避免只凭文件存在或单次截图宣告完成。. Brand Visual Quality is an agent skill from devcodex-labs/devcodex.
Brand Visual Quality fits situations like: tasks that involve Logo and visual identity.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Brand Visual Quality is instructions for the agent only.
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.
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.
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.
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.
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.
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.