visual-system-review

@getcrew44 · 收录于昨天 · 上游提交 1 个月前

Use to evaluate visual consistency, hierarchy, and design-system adherence — typography, color, spacing, density, tokens.

适合你，如果你需要确保产品界面视觉统一、符合设计规范。

/ 下载安装

/ 通过 npx 安装 校验哈希

npx oh-my-skill add getcrew44/crew44/visual-system-review

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- getcrew44/crew44/visual-system-review

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify getcrew44/crew44/visual-system-review

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

358GitHub stars

~475上下文体积 · 单文件

索引托管

怎么用

商店整理自技能原文 · 版本 cfcf1e7 · 表述以原文为准

它做什么

当你看一个界面时，Claude会检查它的视觉层次、一致性、信息密度、文案适配、对比度和可交互元素的明确性，然后指出具体问题、提出改进建议，并标记任何不符合设计系统的地方。

什么时候触发

当你要求Claude审查一个界面的视觉设计或评估其与设计系统的符合度时触发。

装好后可以这样说

Claude会分析主次关系。

Claude会对照设计系统规范。

Claude会找出违规项并补充缺失的令牌。

技能原文 SKILL.md作者撰写 · MIT · cfcf1e7

Check that visual choices serve the user and match (or extend, deliberately) the existing design language.

Hierarchy. Does the eye go to the right place first? Does importance match visual weight?
Consistency. Are buttons, inputs, spacing, and typography drawn from the existing system, or invented locally?
Information density. Is the screen too quiet or too noisy for its purpose?
Copy fit. Does the text fit the container at the longest realistic length? At the shortest?
Contrast and readability. Does it work for users with vision impairments and on small screens?
Affordances. Are interactive elements obviously interactive? Are read-only elements clearly not?

Visual choices should resolve to tokens, not magic numbers:

Typography: a defined scale (xs/sm/base/lg/xl…), 2–3 weights max, line-height 1.1–1.3 for headings, 1.5–1.7 for body.
Spacing: a defined scale (4px or 8px base). Component padding 16–24px, section gaps 32–64px, icon-text gap 8px.
Color: semantic roles (primary, success, warning, error, neutral 50–900). Contrast ≥ 4.5:1 for body, ≥ 3:1 for large text and UI components.
Icons: a defined size scale (12/16/20/24/32). One stroke-weight family.

When a token is missing for something that should have one, flag it as a design-system gap, not just a local issue.

For every element, ask: does this earn its pixels? If not, cut it. Most screens improve when something is removed.

Specific issues with the screen as it is.
Suggested changes, ranked by user impact.
Anything that violates the existing design system (new button styles, ad-hoc spacing, custom colors, off-scale type).
Tokens or patterns missing from the design system that this work surfaces.

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…