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

von-restorff-effect — скилл для Claude Code: суть и установка

Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. Он пригодится, когда одна кнопка или тариф должны сразу бросаться в глаза.

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

Что делает von-restorff-effect

Скилл настраивает работу с эффектом фон Ресторф: элемент, отличающийся от соседних деталей, запоминается быстрее. Ассистент проверяет контраст с окружением. Если в блоке выделено сразу несколько действий, приём теряет смысл. Глаз перестаёт цепляться за разницу.

В правилах собраны приёмы для типовых интерфейсов: акцент на рекомендуемом тарифе в прайс-листе, выделение активного пункта навигации, подсветка ключевой строки в таблице и заливка главной кнопки. Для доступности скилл требует сочетать контрастный цвет с изменением формы или размера шрифта.

Проверяйте читаемость в градациях серого. Если требуется упорядочить всю страницу целиком, а не выделить единственный элемент, правила предписывают использовать visual-hierarchy.

Какие задачи решает

  • выделить рекомендуемый тариф в таблице цен
  • сделать главный CTA заметнее второстепенных кнопок
  • подсветить ключевую запись в таблице данных
  • изолировать активный шаг в мастере онбординга

Примеры запросов агенту

  • Сделай так, чтобы тариф Pro визуально выделялся на фоне остальных планов
  • Оформи блок кнопок: главное действие сделай залитым, а второстепенные контурными
  • Выдели активный шаг онбординга, чтобы внимание не уходило на будущие шаги

Как установить von-restorff-effect

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a claude-code

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

~/.claude/skills/von-restorff-effect/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о von-restorff-effect

Как установить von-restorff-effect в Claude Code?

Выполните команду npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a claude-code. Конфигурация сохранится в файле ~/.claude/skills/von-restorff-effect/SKILL.md.

Что делает скилл von-restorff-effect?

Он задаёт правила визуальной изоляции, помогая модели создавать явный контраст для одного ключевого элемента интерфейса.

Чем von-restorff-effect отличается от visual-hierarchy?

Этот скилл фокусируется на выделении единственного доминирующего действия. Если нужно выстроить общую структуру и порядок чтения всей страницы, автор советует применять visual-hierarchy.

Исходный текст

SKILL.md · MIT
---
name: von-restorff-effect
description: Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use `visual-hierarchy`.
---
# Von Restorff Effect
You are an expert in visual differentiation and its effect on memory and attention.
## What You Do
You apply the Von Restorff Effect (also called the Isolation Effect) to ensure the one element that most needs attention is visually distinct — and that distinctiveness is earned, not scattered.
## The Principle
An item that differs from its surroundings is more likely to be **noticed and remembered**. Visual homogeneity is the baseline; deviation draws the eye. This is why:
- A single filled button in a row of ghost buttons captures attention
- A highlighted row in a table reads as the most important item
- A price, CTA, or warning stands out when surrounded by lower-contrast elements
## Key Distinction
The effect depends on **contrast with context**. If everything is differentiated, nothing is. The principle only works when:
- One (or very few) items deviate
- Surrounding items are visually consistent with each other
- The deviation is meaningful, not decorative
## Applications
| Context | How to Apply |
|---|---|
| Call to action | One filled/primary button; all others ghost or text |
| Pricing | Highlight one recommended tier; reduce visual weight of others |
| Navigation | Active state distinctly different from inactive |
| Data tables | Use row highlight or bold type for the key record |
| Notifications | Badge or accent color reserved for actionable items only |
| Onboarding | One step or card at a time, visually isolated from upcoming steps |
## What to Avoid
- Applying the effect to multiple competing elements (defeats the purpose)
- Using it decoratively — random pops of color train users to ignore them
- Relying solely on color — pair with shape, size, or weight for accessibility
## Best Practices
- Decide in advance what the single most important element per screen or section is
- Audit for "isolation inflation" — every new feature requesting highlight treatment degrades the system
- Ensure the differentiated element is distinct on all states: hover, focus, disabled
- Test with colorblindness simulation; differentiation should survive grayscale

© Owl-Listener · MIT · Owl-Listener/designer-skills

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

Всё по теме «Дизайн» →
ui-design-brain carmahhawwari Скилл помогает создавать интерфейсы по реальным паттернам компонентов и правилам дизайн-систем. Пригодится для страниц, дашбордов, форм и навигации. CX Codex +1 845установок impeccable pbakaus Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна. CX Codex +1 361 300установок uizze-ui UIZZE Направляет агента при вёрстке интерфейсов, исправлении сетки и проверке состояний экрана. Пригодится, когда нужно доработать дизайн компонентов без выдумывания логики бэкенда. CX Codex +1 144 000установок ux-designer szilu Скилл для ревью и сборки интерфейсов: проверяет доступность, состояния экранов и микрокопирайт, подсказывает числа для отступов и контраста. CX Codex +1 1 600установок design-better BuilderOS Скилл для ИИ-агентов, который добавляет к генерации и ревью интерфейса правила UX/UI: иерархия, состояния, доступность, анимация. Пригодится, когда код уже работает, но выглядит сыро. CX Codex +1 1 100установок search aladicf Помогает спроектировать поиск по сайту: подсказки, фильтры, выдачу результатов и выход из пустой выдачи. CX Codex +1 626установок

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

content-strategy Помогает решить, какой контент нужен продукту, где он лежит и кто за него отвечает. Пригодится, когда проблема в самом контенте, а не в вёрстке. CX Codex +1 1 700установок millers-law Разбивает интерфейс на смысловые группы примерно по четыре элемента под ограничения рабочей памяти. Пригодится при структурировании меню, шагов онбординга и длинных форм. CX Codex +1 1 700установок design-system-governance Скилл описывает, как дизайн-система меняется: кто владеет, кто предлагает правки, как версионировать и что выводить из обращения. Нужен, когда над системой работает несколько команд. CX Codex +1 1 700установок design-debt-audit Разбирает накопленные несоответствия в интерфейсе по категориям и выдаёт план правок с приоритетами. Нужен, когда продукт рос годами и дизайн поехал. CX Codex +1 1 700установок hicks-law Скилл применяет закон Хика: время решения растёт с числом одновременных вариантов. Пригодится, когда на экране слишком много кнопок и пунктов. CX Codex +1 1 700установок fitts-law Скилл для ИИ-агента, который подсказывает размеры и расположение кнопок по закону Фиттса. Пригодится при вёрстке интерфейсов и мобильных экранов. CX Codex +1 1 700установок readable-measure Задаёт оптимальную длину строки текста для экранов и брейкпоинтов. Пригодится при вёрстке статей, документации и описаний в интерфейсе. CX Codex +1 1 700установок localization-design Помогает проектировать интерфейсы для разных языков, направлений письма и культурных норм до появления переводов. CX Codex +1 1 700установок

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

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