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

heuristic — скилл для Claude Code: оценка UI по эвристикам

Прогоняет интерфейс по 10 эвристикам Нильсена и 6 законам дизайна, выдаёт таблицу находок и балл UsabilityScore от 0 до 100.

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

Что делает heuristic

Скилл берёт путь к UI из аргументов и оценивает его по методике из references/heuristics.md. Каждую из 10 эвристик Нильсена он разбирает по шкале 1–5, где 1 — блокирует пользователя, а 5 — образец для подражания. К каждому пункту нужна конкретная находка: цитата текста, подсчёт элементов, название сломанного сценария. Размытые формулировки отбрасываются.

Дальше идёт аудит 6 законов дизайна с вердиктом PASS или FAIL: закон Фиттса, закон Хика, порог Доэрти, кодирование графиков по Кливленду-Макгиллу, закон Миллера и закон Теслера. Если в аргументах есть --persona=<name>, подгружается references/personas.md и прогоняется чек-лист выбранной персоны — доступны priya, jordan, adaeze, kwame, margo и all. Без этого флага шаг пропускается.

Итог — таблицы в markdown, которые можно построить в трекере построчно, и балл UsabilityScore по формуле из рубрики. Он всегда помечен как (judged): это оценка, а не детерминированный результат, поэтому в CI её ставить нельзя. Рядом можно положить детерминированный UICraftScore — усреднять их не нужно. Скилл ничего не правит в коде, это только критика.

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

  • оценить интерфейс по эвристикам Нильсена и получить балл
  • найти, какие законы дизайна нарушены на конкретном экране
  • пройти по UI глазами заданной персоны и собрать чек-лист
  • разложить находки по влиянию на конверсию и доверие
  • выдать PM разбираемый scorecard для тикетов

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

  • прогони heuristic по src/pages/checkout.tsx
  • сделай эвристическую оценку UI с --persona=priya
  • оцени экран онбординга и покажи UsabilityScore

Как установить heuristic

1Через Skills CLI (Vercel)

npx skills add educlopez/ui-craft --skill heuristic -a claude-code

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

~/.claude/skills/heuristic/SKILL.md

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

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

Вопросы о heuristic

Как установить heuristic в Claude?

Выполните npx skills add educlopez/ui-craft --skill heuristic -a claude-code. После этого файл скилла лежит в ~/.claude/skills/heuristic/SKILL.md.

Что делает heuristic?

Считает оценку интерфейса по 10 эвристикам Нильсена и 6 законам дизайна, при желании добавляет проход по персоне. На выходе таблицы находок и балл UsabilityScore от 0 до 100.

Можно ли использовать UsabilityScore в CI?

Нет. Балл помечен как (judged) — он не детерминированный, поэтому не должен служить гейтом сборки. Для гейта рядом считают UICraftScore, но два числа не усредняют.

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

SKILL.md · MIT
---
name: heuristic
description: "Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard plus a 0-100 UsabilityScore (the judged companion to the deterministic UICraftScore). Invoke when the user asks for heuristic on their UI, or mentions 'heuristic' alongside design / UI / frontend work."
---

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Score the UI at `$ARGUMENTS` against Nielsen's 10 + 6 design laws. Load the `ui-craft` skill.

**Step 1 — Load the methodology.** Read `references/heuristics.md` for the full rubric, scoring definitions, design law details, and the required output format. Do NOT invent a new format or a new scale.

**Step 2 — Walk Nielsen's 10 heuristics.** Score each 1-5 per the rubric:
- **1** blocks users · **2** severe friction · **3** works but confusing · **4** works, minor polish · **5** best-in-class

For every heuristic, write a concrete finding — quote text, count elements, name the broken flow. Vague findings are rejected.

**Step 3 — Audit the 6 design laws.** PASS / FAIL each with a specific detail:
- Fitts's Law — touch target sizing, CTA placement
- Hick's Law — choice density, nav + select sizing
- Doherty Threshold — perceived latency, optimistic UI
- Cleveland-McGill — chart encoding choice
- Miller's Law — nav depth, form section counts
- Tesler's Law — where complexity lives

**Step 4 — Persona walkthrough (if `--persona=` present).** If the args include `--persona=<name>`, load `references/personas.md` and run the matching walkthrough checklist. Supported: `priya`, `jordan`, `adaeze`, `kwame`, `margo`, `all`. Output the walkthrough as a `| Checklist item | Pass/Fail | Finding | Impact |` table. Without the flag, skip this step.

**Step 5 — Rank findings by impact tag.** Impact order: `blocks-conversion > adds-friction > reduces-trust > minor-polish`. Include at most 5 findings in the ranked list; cut anything at `minor-polish` unless there are no higher-impact findings.

**Step 6 — Compute the UsabilityScore.** Roll the scorecard into a 0-100 number + grade per the **UsabilityScore** formula in `references/heuristics.md`: `heuristic_base = round(((mean(nielsen_scores) − 1) / 4) × 100)`, minus `5 × (failed design laws)`, clamped [0,100]. Same A/B/C/D/F bands as UICraftScore. Always label it `(judged)` — it is **not** deterministic and must never gate CI. If the args include `--json`, also emit the machine-readable block. If the user asks for the full picture, build the **Extended quality report** by fetching the deterministic UICraftScore (`node scripts/eval.mjs <path> --json` or the `score_ui` MCP tool) and placing both side by side — never average them.

**Step 7 — Output.** Use the exact scorecard format in `references/heuristics.md`:

1. `## Heuristic Scorecard` table
2. `## Design Law Audit` table
3. `## Persona Walkthrough` table (only if `--persona=` was passed)
4. `## Top findings (ranked by impact)` — numbered list, 3-5 items
5. `## UsabilityScore` block — the 0-100 score + grade + component breakdown

**Knob awareness:** knob-agnostic. Usability is not a knob — a 2 is a 2 whether `CRAFT_LEVEL` is 3 or 9. Do not soften scores based on `CRAFT_LEVEL`.

**Output contract:**
- This command produces a **critique artifact**, not code. No edits unless the user explicitly asks in a follow-up.
- The scorecard is machine-parseable markdown. A PM can paste it into any issue tracker and file tickets row-by-row. Frame it that way in any preamble.
- No "First Impressions" paragraph, no hedging, no praise padding. Tables + ranked list only.

Do NOT edit code. This is a scored critique.

**Next step:** Fix the findings, then `/finalize` — the scorecard is the input to a gated ship (rung 3).

© educlopez · MIT · educlopez/ui-craft

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

Всё по теме «Дизайн» →
nielsen-usability-heuristics dembrandt Оценивает интерфейсы и текст ошибок по 10 эвристикам Нильсена. Скилл помогает выявить проблемы юзабилити прямо в коде компонентов до релиза. CX Codex +1 976установок heuristic-evaluation Owl-Listener Скилл проверяет интерфейс по эвристикам Nielsen и критериям домена, а затем расставляет найденным проблемам оценки серьёзности. Подходит для аудита до пользовательского тестирования. CX Codex +1 2 400установок design-review Seth Hobson Проверяет готовый интерфейс на проблемы вёрстки, юзабилити и кода, а потом складывает отчёт с рекомендациями в файл. CX Codex ★ 41 729звёзд репо impeccable pbakaus Скилл для ИИ-агента: проектирует и переделывает интерфейсы — лендинги, дашборды, формы, экраны iOS и Android. Пригодится, когда вёрстку пора привести в порядок по правилам дизайна. CX Codex +1 361 300установок hallmark Nutlope Скилл для ИИ-кодинга, который заставляет сгенерированные интерфейсы выглядеть сделанными, а не сгенерированными. Пригодится, когда просишь агента собрать новую страницу или сайт. CX Codex +1 70 800установок mies deeflect Скилл для ИИ-кодинга, который заставляет агента убирать лишнее в интерфейсах и доводить детали до аккуратности. Пригодится, когда верстаете UI, дашборд или онбординг. CX Codex +1 9 600установок

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

ui-craft-dense-dashboard Задаёт агенту стиль для админок и аналитических панелей: плотная сетка, моноширинные числа, семантические цвета. Пригодится, когда интерфейс делают для оператора, а не для лендинга. CX Codex +1 1 200установок ui-craft-minimal Настраивает агента на вёрстку минималистичных интерфейсов в духе Linear, Notion и Vercel. Фиксирует монохромную гамму, крупный воздух и запрещает лишнюю анимацию. CX Codex +1 897установок ui-craft-editorial Скилл настраивает журнальную типографику для блогов, лонгридов и медиа. Он фиксирует параметры чтения, ограничивает палитру и запрещает продуктовые шрифты. CX Codex +1 896установок colorize Скилл добавляет один акцент в 3–5 местах интерфейса или убирает лишний цвет, возвращая экран к нейтральной основе. CX Codex +1 888установок shape Скилл прогоняет экран через вайрфрейм-проход: ASCII-раскладка, список состояний, инвентарь контента и открытые вопросы — до первой строки кода. CX Codex +1 865установок tokens Проверяет, как в проекте устроены дизайн-токены, и помогает собрать трёхслойную систему с нуля. Пригодится, когда цвета и отступы расползлись по файлам. CX Codex +1 853установок finalize Прогоняет интерфейс через детектор, токены и 10 проходов планки качества, а потом выдаёт вердикт: READY, NOT READY или BLOCKED. CX Codex +1 850установок brief Создаёт или обновляет дизайн-бриф проекта в файле .ui-craft/brief.md. Помогает зафиксировать назначение интерфейса, принципы и границы продукта перед генерацией UI. CX Codex +1 849установок

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

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