скилл CX Codex

wireframe-spec — скилл для Claude Code: что делает и как установить

Q: Как установить wireframe-spec в Claude Code?

Запустите команду `npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code` в терминале.

Составляет текстовые спецификации вайрфреймов с приоритетами контента и заметками о поведении элементов. Пригодится при проектировании структуры интерфейса до начала работы с визуалом.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code

Открыть на GitHub

Что делает wireframe-spec

Скилл формирует требования к каркасу страницы до работы с цветом и типографикой. В спецификацию входят блоки навигации, промо-зоны, карточки, формы ввода и подвалы. Для каждого элемента задаётся очерёдность загрузки, примерный объём текста, пропорции изображений и источник данных из CMS или API.

Спецификация фиксирует состояния интерфейса: пустое, загрузку, наполненный экран и ошибки. Правила запрещают выбор палитры — разметка строится в чёрно-белой гамме с серыми плашками. Для расчёта сеток скилл не подходит. Если нужны точные параметры колонок и отступов, автор рекомендует использовать layout-grid.

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

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

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

Составь wireframe-spec для страницы оформления заказа с учётом состояний ошибки
Опиши каркас личного кабинета с приоритетами контента и поведением кнопок
Подготовь аннотированную спецификацию дашборда для мобильной и десктопной версий

Как установить wireframe-spec

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code

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

~/.claude/skills/wireframe-spec/SKILL.md

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

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a codex

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

.agents/skills/wireframe-spec/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a cursor

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

.cursor/skills/wireframe-spec/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install Owl-Listener/designer-skills wireframe-spec

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

.github/skills/wireframe-spec/SKILL.md

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a gemini-cli

2Командой платформы

gemini skills install https://github.com/Owl-Listener/designer-skills --path prototyping-testing/skills/wireframe-spec

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

.devin/skills/wireframe-spec/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a opencode

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

Вопросы о wireframe-spec

Как установить wireframe-spec в Claude Code?

Запустите команду npx skills add Owl-Listener/designer-skills --skill wireframe-spec -a claude-code в терминале.

Что делает скилл wireframe-spec?

Он создаёт аннотированные спецификации каркаса страниц с иерархией заголовков, поведением компонентов и адаптивными версиями.

Учитывает ли wireframe-spec параметры сеток?

Нет, скилл отвечает за иерархию контента и состояния интерфейса. Механику колонок и сеток автор вынес в скилл layout-grid.

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

SKILL.md · MIT

---
name: wireframe-spec
description: Specify wireframe layout — content priority, component placement, and annotation. Use when defining structure before visual design. For grid mechanics, use `layout-grid` (ui-design).
---
# Wireframe Spec
You are an expert in creating annotated wireframe specifications.
## What You Do
You specify wireframe layouts defining content priority, component placement, behavior annotations, and responsive considerations.
## Wireframe Components
### Content Blocks
- Headers and navigation
- Hero/feature areas
- Content sections (text, media, cards)
- Forms and input areas
- Footers and secondary navigation
### Annotations
- Content priority numbers (what loads/appears first)
- Interaction notes (what happens on click/hover)
- Dynamic content indicators (personalized, data-driven)
- Responsive behavior notes
- Accessibility notes
### Content Specifications
- Heading hierarchy (H1, H2, H3)
- Approximate text length/character counts
- Image aspect ratios and sizing
- Required vs optional content
- Content source (static, CMS, API)
## Fidelity Levels
- **Sketch**: Hand-drawn boxes and labels
- **Low-fi**: Gray boxes with content labels
- **Mid-fi**: Realistic layout with placeholder content
- **Annotated**: Mid-fi plus detailed behavior specs
## Wireframe Conventions
- Use gray/black/white only (no color decisions)
- X-box for images
- Wavy lines for text blocks
- Real labels for navigation and buttons
- Consistent component representation
## Best Practices
- Focus on content hierarchy, not visual design
- Annotate behavior, not just layout
- Show multiple states (empty, loading, populated, error)
- Include responsive breakpoint versions
- Get content strategy input early

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