К основному содержанию
скилл CX Codex

critique-visual-hierarchy — скилл для Claude Code: разбор визуальной

Скилл разбирает готовый экран по четырём измерениям и говорит, куда на самом деле падает взгляд. Пригодится, когда внимание уходит не туда.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Owl-Listener/designer-skills --skill critique-visual-hierarchy -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/critique-visual-hierarchy/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/critique-visual-hierarchy/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
visual-emphasis-and-hierarchy dembrandt Задаёт правила визуальной иерархии в интерфейсе: акценты на кнопках, контраст, отступы и выделение текста. Пригодится при вёрстке дашбордов, карточек и баннеров. CX Codex +1 874установок hierarchy aladicf Скилл разбирает интерфейс по визуальной иерархии: где главное действие теряется, что спорит за внимание и какие подписи мешают читать. CX Codex +1 606установок brand-visual-language dembrandt Скилл помогает выбрать радиусы, шрифты и стиль иконок так, чтобы интерфейс читался как одна марка. Пригодится, когда начинаете дизайн-систему или ловите разнобой в визуале. CX Codex +1 907установок hallmark Nutlope Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт. CX Codex +1 70 800установок visual-regression-tester patricio0312rev Скилл настраивает визуальное регрессионное тестирование: снимает скриншоты, сравнивает их с базовыми и ловит случайные изменения интерфейса. CX Codex +1 330установок mies deeflect Скилл для ИИ-кодинга, который заставляет агента убирать лишнее в интерфейсах и доводить детали до аккуратности. Пригодится, когда верстаете UI, дашборд или онбординг. CX Codex +1 9 600установок

Из того же набора109

accessibility-audit Проверяет готовый интерфейс по WCAG и выдаёт проблемы с уровнем серьёзности, влиянием и шагами исправления. CX Codex +1 2 100установок ux-writing Пишет микротексты, сообщения об ошибках, пустые состояния и кнопки. Пригодится, когда слова и есть результат работы. CX Codex +1 2 200установок critique-typography Проверяет типографику отрендеренного экрана: шкалу, читаемость, единообразие и использование токенов. Пригодится на ревью интерфейса. CX Codex +1 2 000установок version-control-strategy Задаёт правила версионирования макетов, библиотек компонентов и дизайн-токенов. Скилл пригодится, когда история правок в файлах запуталась и мешает командной работе. CX Codex +1 2 000установок click-test-plan Помогает спланировать клик-тесты: где люди кликают первым делом и находят ли нужное в навигации. Пригодится, когда макет уже есть, а проверить его нечем. CX Codex +1 2 000установок design-sprint-plan Планирует пятидневный спринт для проверки продуктовых идей: от постановки задачи до тестирования прототипа. Помогает сжать этап исследований в одну рабочую неделю. CX Codex +1 2 000установок design-system-adoption Создаёт стратегию внедрения дизайн-системы и материалы для команд, которые ею не пользуются. Нужен, когда компоненты уже есть, но их обходят. CX Codex +1 2 000установок team-workflow Скилл помогает выстроить операционные процессы дизайн-команды: управление задачами, ритуалы синхронизации и передачу макетов в разработку. Пригодится, когда хаос в задачах мешает работе. CX Codex +1 2 000установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой