prototype · plugin87 — скилл для Claude Code: что делает и как установить
Ведёт проектирование интерфейса по лестнице детализации от структуры контента до кода. Помогает собирать вайрфреймы, карты путей пользователей и сценарии тестов.
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a claude-codeЧто делает prototype
Скилл структурирует работу над UX по строгой лестнице детализации: контент, вайрфреймы, низкая детализация, высокая детализация и рабочий код. Перескакивать ступени запрещено. На каждом шаге агент выбирает минимально достаточную детализацию под текущий вопрос и формулирует конкретный план проверки вместо абстрактного тестирования когда-нибудь потом.
Для пользовательских путей инструмент строит подробную карту с развилками решений, экранами ошибок и краевыми случаями: пустое состояние, индикаторы загрузки, переполнение текстом. При переходе к коду он сверяет интерфейс с токенами дизайн-системы, компонентами и правилами контрастности.
Скилл требует локальных файлов набора и сломается без них. Если поставить только папку навыка, проверка выдаст ошибку KIT_MISSING, поэтому проект нужно развернуть целиком через npx ux-ui-agent-skills init. Модель не запускает этот сценарий сама: параметр disable-model-invocation: true требует прямого вызова от разработчика.
Какие задачи решает
- составить карту пути пользователя с развилками и экранами ошибок
- выбрать минимальный уровень детализации макета под текущую задачу
- подготовить скрипт юзабилити-тестирования по правилу пяти пользователей
- проверить верстку интерфейса на дизайн-токены и доступность
Примеры запросов агенту
- Собери вайрфрейм экрана оформления заказа и пропиши состояния для пустой корзины и ошибки оплаты
- Сделай карту пути пользователя для сценария смены тарифного плана
- Подготовь сценарий тестирования юзабилити новой формы регистрации с критериями успеха
Как установить prototype
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a claude-code2Вручную: положить файлы
~/.claude/skills/prototype/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/prototype/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a codex2Вручную: положить файлы
.agents/skills/prototype/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a cursor2Вручную: положить файлы
.cursor/skills/prototype/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills prototype2Вручную: положить файлы
.github/skills/prototype/SKILL.md1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a gemini-cli2Командой платформы
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/prototypeВручную: положить файлы
.devin/skills/prototype/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill prototype -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора16
Другие версии prototype
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о prototype
Как установить prototype в Claude Code?
Выполните npx skills add plugin87/ux-ui-agent-skills --skill prototype -a claude-code. Если окружение ставится с нуля, инициализируйте файлы набора через npx ux-ui-agent-skills init.
Что делает скилл prototype?
Он направляет проектирование от контентных требований к вайрфреймам и коду, запрещая пропускать этапы. Для каждого артефакта он сразу формирует план валидации.
Почему при запуске появляется KIT_MISSING?
Скилл ищет токены и шаблоны воркфлоу тремя уровнями выше своей папки. При частичной установке их нет, поэтому требуется запустить npx ux-ui-agent-skills init.
Исходный текст
SKILL.md · MIT
---
name: prototype
description: Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.
# `invocation:` was not a field Claude Code reads - unknown frontmatter keys are
# ignored without an error, so these six were auto-invocable the whole time they
# were marked user-only. This is the field that actually does it.
disable-model-invocation: true
---
# Skill: Prototype & Research
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Guide work through the right fidelity level with validation.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/prototyping.md` (5-level fidelity ladder, journey mapping template, usability-testing script, sample data).
2. Identify the current need and pick the **lowest** fidelity that answers it. Never skip levels:
- Content-first (info needs) → Wireframe (layout/nav) → Low-fi (task completion) → High-fi (visual/a11y) → Code (feasibility/perf).
3. For flows: produce a user-journey map with decision points, error paths, and edge cases.
4. For validation: define the usability test (tasks, success criteria, 5-user rule) using the script.
5. High-fi/code steps pull tokens (`${CLAUDE_SKILL_DIR}/../../../tokens/*`), components (`${CLAUDE_SKILL_DIR}/../../../components/*`), taste (`${CLAUDE_SKILL_DIR}/../../../taste/*`), and a11y (`${CLAUDE_SKILL_DIR}/../../../accessibility/*`).
## Output
The artifact at the chosen fidelity + an explicit "what we validate next" plan.
## Verification (before declaring done)
- The fidelity matches the question being answered; no level skipped.
- Flows include decision points, **error paths, and edge cases** (empty/loading/overflow), not just the happy path.
- A concrete validation step is named (tasks + success criteria), not "test later".
- High-fi/code artifacts pass the same token + a11y bar as `design-code` (no hardcoded values, contrast, states).
© plugin87 · MIT · plugin87/ux-ui-agent-skills