critique-visual-hierarchy — скилл для Claude Code: разбор визуальной
Скилл разбирает готовый экран по четырём измерениям и говорит, куда на самом деле падает взгляд. Пригодится, когда внимание уходит не туда.
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a claude-codeЧто делает critique-visual-hierarchy
Скилл берёт отрендеренный экран и проверяет, насколько иерархия ясная и совпадает с целями пользователя. Разбор идёт по четырём измерениям: точка входа, движение взгляда, вес элементов и акценты. По каждому он выдаёт наблюдение, проблему и конкретную правку, а затем ставит оценку pass, minor issue или major issue.
Внутри — набор вопросов для проверки. Есть ли один доминирующий элемент или внимание размазано? Ведёт ли поток к главному действию? Хватает ли разницы в размере между уровнями? Не спорят ли заливка, обводка и иконки с иерархией? Отдельно перечислены типовые провалы: несколько конкурирующих главных элементов, сплющенная иерархия, ложный акцент, погребённый призыв к действию.
Это именно критика готового макета, а не построение иерархии с нуля. Для новой работы в описании указан другой скилл — visual-hierarchy из набора ui-design. Если у вас как раз случай «внимание садится не на тот блок», берите этот.
Какие задачи решает
- найти, куда на экране падает взгляд первым
- проверить, ведёт ли поток к главному действию
- поймать сплющенную иерархию по размеру и весу
- отличить настоящий акцент от декоративного
- сформулировать правки по каждому измерению с оценкой
Примеры запросов агенту
- разбери иерархию этого экрана: точка входа, движение взгляда, вес, акценты
- посмотри на скриншот и скажи, почему внимание уходит не на кнопку
- оцени иерархию по четырём измерениям и дай правки
Как установить critique-visual-hierarchy
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a claude-code2Вручную: положить файлы
~/.claude/skills/critique-visual-hierarchy/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/critique-visual-hierarchy/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a codex2Вручную: положить файлы
.agents/skills/critique-visual-hierarchy/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a cursor2Вручную: положить файлы
.cursor/skills/critique-visual-hierarchy/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills critique-visual-hierarchy2Вручную: положить файлы
.github/skills/critique-visual-hierarchy/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path visual-critique/skills/critique-visual-hierarchyВручную: положить файлы
.devin/skills/critique-visual-hierarchy/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о critique-visual-hierarchy
Как установить critique-visual-hierarchy в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a claude-code. Скилл окажется в ~/.claude/skills/critique-visual-hierarchy/SKILL.md.
Что делает critique-visual-hierarchy?
Разбирает отрендеренный экран по точке входа, движению взгляда, весу и акцентам. По каждому измерению даёт наблюдение, проблему и правку.
Чем это отличается от visual-hierarchy?
Этот скилл критикует уже готовый экран. Для построения иерархии в новой работе в описании указан visual-hierarchy из набора ui-design.
Исходный текст
SKILL.md · MIT
--- name: critique-visual-hierarchy description: Critique a rendered screen's hierarchy — entry point, eye flow, weight distribution, and emphasis. Use when attention lands in the wrong place. For establishing hierarchy in new work, use `visual-hierarchy` (ui-design). --- # Critique Visual Hierarchy You are an expert in visual hierarchy and screen-level design critique. ## What You Do You analyse a screen to identify whether hierarchy is clear, intentional, and aligned with user goals. You flag problems and suggest targeted fixes. ## Critique Dimensions ### Entry Point The first element that captures the eye. Evaluate whether it is the *most important* thing on screen. - Is there a single dominant element, or does attention scatter? - Does size, contrast, or position establish the entry point clearly? - Does the entry point match the primary user goal for this screen? ### Eye Flow The path a user's eye travels after landing. Evaluate whether the path is deliberate and efficient. - Does the layout follow an F-pattern, Z-pattern, or intentional reading order? - Are there dead ends, loops, or confusing jumps? - Does flow lead naturally to the primary call-to-action? ### Weight The relative visual importance of each element. Evaluate whether weight is distributed purposefully. - Are size differentials at least 1.5× between hierarchy levels? - Is bold/heavy type used sparingly so it retains signal value? - Do background fill, stroke weight, and iconography add or fight the hierarchy? ### Emphasis Specific elements that demand extra attention. Evaluate whether emphasis is earned and singular. - Is there exactly one primary emphasis zone per view? - Are colour, contrast, or motion used to emphasise — or overused so they cancel out? - Does the highest-emphasis element match stakeholder and user priority? ## Output Format For each dimension — Entry Point, Eye Flow, Weight, Emphasis — provide: 1. **Observation** — what you see (neutral, factual) 2. **Problem** — what is broken and why it matters 3. **Fix** — a specific, actionable change Rate each dimension: `pass` / `minor issue` / `major issue`. ## Common Failure Patterns - Multiple competing primaries — nothing reads as most important - Hierarchy flattening — too similar in size, weight, or colour across levels - False emphasis — decorative elements outweigh functional ones - Buried CTA — the action is visually quieter than surrounding content
© Owl-Listener · MIT · Owl-Listener/designer-skills