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

prototype · plugin87 — скилл для Claude Code: что делает и как установить

Ведёт проектирование интерфейса по лестнице детализации от структуры контента до кода. Помогает собирать вайрфреймы, карты путей пользователей и сценарии тестов.

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

Что делает 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-code

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

~/.claude/skills/prototype/SKILL.md

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

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

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

design-component Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. Пригодится при проектировании контролов в дизайн-системе до написания кода. CX Codex +1 522установок ux-writing Пишет и проверяет тексты интерфейса: кнопки, ошибки, пустые состояния и уведомления. Пригодится, когда нужен единый тон без обвинений и тупиковых сообщений. CX Codex +1 517установок design-qa Настраивает проверки интерфейса перед слиянием: токены, контраст, доступность и визуальные снимки. Нужен для контроля состояний компонентов и регрессий. CX Codex +1 516установок brandkit Создаёт систему бренд-токенов и theme.css по брифу, включая светлую и тёмную темы. Нужен для новой палитры, типографики и единой основы интерфейса. CX Codex +1 510установок migrate-design-system Скилл сопоставляет ваши дизайн-токены с внешней системой: Material 3, Apple HIG, Fluent, Carbon, shadcn/ui. Пригодится при миграции или переходе на чужой стек. CX Codex +1 487установок token-build Превращает DTCG-токены в артефакты для платформ: CSS-переменные, Tailwind @theme, JS/TS, iOS и Android. Нужен, когда тема задаётся один раз, а собирается под каждый стек. CX Codex +1 480установок figma-integration Синхронизирует токены и компоненты между кодом и Figma в обе стороны. Пригодится для настройки Variables, MCP-связи и проверки расхождений. CX Codex +1 478установок governance Скилл ведёт правила развития дизайн-системы: SemVer для токенов и компонентов, порядок приёма правок, депрекация и оповещение о изменениях. CX Codex +1 474установок

Другие версии prototype

Похожие

wireframe-prototyping aj-geddes Скилл помогает набросать каркас интерфейса и собрать прототип до того, как начнётся разработка. Пригодится, когда нужно показать идею команде или заказчику. CX Codex +1 1 400установок wireframing manutej Скилл для проектирования интерфейсов: помогает пройти путь от набросков и структуры экранов до макета, близкого к финальному дизайну. CX Codex +1 566установок html-wireframe plannotator Скилл собирает низкодетальные HTML-каркасы экранов, чтобы проверить иерархию информации, навигацию и ход задачи ещё до визуального дизайна. CX Codex +1 1 800установок prototype-strategy Owl-Listener Помогает решить, какой прототип строить и с какой детализацией, до того как вы начнёте его собирать. CX Codex +1 2 100установок om-mockup-prototype open-mercato Скилл собирает кликабельный низкодетализированный прототип из продуктового брифа. Он генерирует локальный HTML со статикой и проверяет сценарий в браузере до передачи задачи в бэклог. CX Codex +1 1 500установок baoyu-design JimLiu Скилл генерирует макеты интерфейсов, интерактивные прототипы и презентации в виде автономного HTML. Подходит для вёрстки экранов, дизайн-систем и схем. CX Codex +1 6 300установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о 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

Смотрите также

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

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