von-restorff-effect — скилл для Claude Code: суть и установка
Скилл учит агента выделять главное целевое действие в интерфейсе за счёт эффекта изоляции. Он пригодится, когда одна кнопка или тариф должны сразу бросаться в глаза.
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/von-restorff-effect/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/von-restorff-effect/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a codex2Вручную: положить файлы
.agents/skills/von-restorff-effect/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a cursor2Вручную: положить файлы
.cursor/skills/von-restorff-effect/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills von-restorff-effect2Вручную: положить файлы
.github/skills/von-restorff-effect/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/von-restorff-effectВручную: положить файлы
.devin/skills/von-restorff-effect/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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