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

click-test-plan — скилл для Claude Code: клик-тесты юзабилити

Помогает спланировать клик-тесты: где люди кликают первым делом и находят ли нужное в навигации. Пригодится, когда макет уже есть, а проверить его нечем.

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

Что делает click-test-plan

Скилл превращает вопрос «найдут ли пользователи эту кнопку» в готовый план теста. Он разбирает четыре вида проверок: первый клик, полный путь кликов, навигация и пятисекундный тест на запоминание. Под каждый вид вы получаете структуру: цель, стимулы, задачи, критерии успеха и выборку участников.

Задачи формулируются без подсказок в интерфейсе. Целевые зоны клика задаются до запуска, а не после. Для количественных тестов скилл советует набрать от 20 до 50 человек, а успешным первым кликом считает попадание выше 65%. Это ориентир, а не жёсткий порог, но если ваши цифры заметно ниже, повод переделать навигацию.

Для полного наблюдения за задачами в репозитории есть отдельный скилл test-scenario — этот покрывает только клики. Установка идёт через npx skills add, нужен Node.js.

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

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

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

  • составь план клик-теста для новой страницы настроек
  • проверь, найдут ли пользователи смену email — нужен тест первого клика
  • сравни два варианта навигации одними и теми же задачами

Как установить click-test-plan

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill click-test-plan -a claude-code

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

~/.claude/skills/click-test-plan/SKILL.md

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

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

Вопросы о click-test-plan

Как установить click-test-plan в Claude?

Выполните npx skills add Owl-Listener/designer-skills --skill click-test-plan -a claude-code. Скилл появится в ~/.claude/skills/click-test-plan/SKILL.md.

Что делает click-test-plan?

Проектирует тесты первого клика, пути кликов, навигации и пятисекундные тесты. На выходе — цель, стимулы, задачи, критерии успеха и требования к участникам.

Чем отличается от test-scenario?

click-test-plan работает только с кликами и находимостью элементов. Для полного наблюдения за выполнением задач нужен test-scenario.

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

SKILL.md · MIT
---
name: click-test-plan
description: Design first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.
---
# Click Test Plan
You are an expert in designing click tests that evaluate findability and navigation clarity.
## What You Do
You design first-click and click tests that measure whether users can find information and features.
## Test Types
- **First-click test**: Where do users click first for a given task?
- **Click-path test**: Full sequence of clicks to complete a task
- **Navigation test**: Can users find items using the nav structure?
- **Five-second test**: What do users remember after 5 seconds?
## Test Plan Structure
### 1. Objective
What navigation or findability question are you answering?
### 2. Stimuli
Screen designs or prototypes to test. Identify which pages/states to show.
### 3. Tasks
Clear, goal-oriented tasks without UI hints. Example: 'Where would you click to change your email address?'
### 4. Success Criteria
- Correct first click (target area defined)
- Time to first click
- Confidence rating
- Click distribution heat map
### 5. Participants
Number needed (typically 20-50 for quantitative), recruitment criteria, any segmentation.
## Analysis
- First-click success rate (above 65% generally indicates good findability)
- Click distribution patterns
- Time analysis (hesitation indicates confusion)
- Confidence correlation with accuracy
## Best Practices
- Test one task per screen
- Define click target areas before testing
- Use realistic content, not lorem ipsum
- Don't give hints in task wording
- Compare alternative designs with same tasks

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

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

Всё по теме «Дизайн» →
nielsen-heuristics-audit mastepanoski Скилл прогоняет интерфейс по 10 эвристикам Якоба Нильсена и выдаёт отчёт с оценкой серьёзности каждой находки. Пригодится, когда нужно найти проблемы юзабилити до тестов с людьми. CX Codex +1 739установок cognitive-walkthrough mastepanoski Прогоняет конкретный пользовательский сценарий по методу когнитивного обхода и показывает, где новичок застрянет. Пригодится до юзабилити-теста. CX Codex +1 458установок ux-heuristics wondelai Скилл проводит эвристический аудит интерфейса: находит места, где пользователь тормозит, ставит оценку серьёзности каждой находке и говорит, что править. CX Codex +1 9 400установок design-everyday-things wondelai Скилл разбирает интерфейс по принципам из «Дизайна привычных вещей»: аффордансы, сигнификаторы, ограничения, обратная связь. Пригодится, когда пользователи путаются, а вы не понимаете почему. CX Codex +1 5 600установок nielsen-usability-heuristics dembrandt Оценивает интерфейсы и текст ошибок по 10 эвристикам Нильсена. Скилл помогает выявить проблемы юзабилити прямо в коде компонентов до релиза. CX Codex +1 976установок ux-principles manutej Подключает к агенту эвристики юзабилити, методы юзер-ресёрча и проверки доступности, чтобы интерфейсы проектировались по правилам, а не на глаз. CX Codex +1 836установок

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

ux-writing Пишет микротексты, сообщения об ошибках, пустые состояния и кнопки. Пригодится, когда слова и есть результат работы. CX Codex +1 2 200установок critique-typography Проверяет типографику отрендеренного экрана: шкалу, читаемость, единообразие и использование токенов. Пригодится на ревью интерфейса. CX Codex +1 2 000установок version-control-strategy Задаёт правила версионирования макетов, библиотек компонентов и дизайн-токенов. Скилл пригодится, когда история правок в файлах запуталась и мешает командной работе. CX Codex +1 2 000установок critique-visual-hierarchy Скилл разбирает готовый экран по четырём измерениям и говорит, куда на самом деле падает взгляд. Пригодится, когда внимание уходит не туда. 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установок opportunity-framework Помогает разложить идеи по матрице impact-effort и RICE, когда задач больше, чем рук. Полезен на этапе планирования. CX Codex +1 2 000установок

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

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