wireframing — скилл для Claude Code: вайрфреймы и юзер-флоу
Скилл для проектирования интерфейсов: помогает пройти путь от набросков и структуры экранов до макета, близкого к финальному дизайну.
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-codeЧто делает wireframing
Скилл описывает, как строить вайрфреймы разной степени детализации: от бумажных набросков до макетов с точными отступами и состояниями компонентов. Внутри — разделы про информационную архитектуру, пользовательские сценарии, элементы вайрфрейма, аннотации и спецификации, а также про итерации и типовые ошибки.
Материал разбит по этапам работы. Сначала сбор требований и проверка концепций, потом структура контента и навигации, затем макеты и передача разработчикам. Отдельно разобрано, чем low-fi отличается от high-fi и когда какой уровень детализации уместен: ранние фазы требуют быстрых набросков, а перед передачей в разработку нужны точные спецификации.
Скилл распространяется через маркетплейс luxor-claude-marketplace и ставится командой npx skills add. Файл скилла кладётся в ~/.claude/skills/wireframing/SKILL.md. Это текстовое руководство, а не генератор макетов: готовые картинки он не рисует, поэтому результат зависит от того, насколько конкретно вы опишете экран и сценарий.
Какие задачи решает
- разложить требования заказчика по экранам и блокам
- сравнить несколько вариантов компоновки до отрисовки дизайна
- описать путь пользователя от входа до целевого действия
- зафиксировать структуру навигации и иерархию разделов
- подготовить спецификацию макета к передаче разработчикам
Примеры запросов агенту
- помоги набросать low-fi вайрфрейм экрана регистрации по этому описанию
- разложи пользовательский сценарий оформления заказа на шаги и экраны
- предложи структуру навигации для личного кабинета и обоснуй иерархию
Как установить wireframing
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-code2Вручную: положить файлы
~/.claude/skills/wireframing/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/wireframing/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a codex2Вручную: положить файлы
.agents/skills/wireframing/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a cursor2Вручную: положить файлы
.cursor/skills/wireframing/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace wireframing2Вручную: положить файлы
.github/skills/wireframing/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-design-toolkit/skills/wireframingВручную: положить файлы
.devin/skills/wireframing/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill wireframing -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о wireframing
Как установить wireframing в Claude?
Выполните npx skills add manutej/luxor-claude-marketplace --skill wireframing -a claude-code. После этого файл скилла окажется в ~/.claude/skills/wireframing/SKILL.md.
Что делает скилл wireframing?
Разбирает процесс проектирования интерфейсов: типы вайрфреймов, информационную архитектуру, пользовательские сценарии, аннотации и итерации. Помогает выбрать уровень детализации под текущий этап работы.
Для каких платформ подходит этот скилл?
Кроме Claude есть варианты установки для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждого используется своя команда и свой путь к файлу скилла.
