information-architecture · owl-listener — скилл для Claude Code: структура контента
Скилл проектирует структуру контента: карту разделов, навигационную модель, таксономию и модель типов. Пригодится, когда надо разложить существующий контент по полкам.
npx skills add Owl-Listener/designer-skills --skill information-architecture -a claude-codeЧто делает information-architecture
Скилл берёт на себя проектирование структуры продукта: как контент и функции разбиты по категориям, как подписаны и связаны между собой. На выходе — карта сайта с иерархией экранов и типов контента, навигационная модель (глобальная, локальная, утилитарная, контекстные ссылки), таксономия с названиями категорий и модель контента с типами и их атрибутами.
Процесс разбит на пять шагов: аудит существующего контента, исследование через карточную сортировку и tree testing, черновик иерархии, проверка на пользователях, документирование. Внутри есть набор эвристик — находимость, обнаруживаемость, ориентирование, «запах» навигации, глубина против ширины. Скилл советует не больше трёх уровней для основного контента и предпочитает умеренную глубину плоским структурам.
Скилл заточен под организацию того, что уже есть. Для интерфейса, который это показывает, в описании указан отдельный скилл navigation-patterns из interaction-design, а для данных карточной сортировки — card-sort-analysis из design-research. Если структуру надо спроектировать с нуля, а не разложить готовое, эти два скилла придётся ставить отдельно.
Какие задачи решает
- разложить существующий контент по разделам и уровням
- собрать карту сайта с типами контента и связями
- проверить названия категорий на понятность пользователям
- найти тупиковые страницы и дублирующие пути
- описать модель контента для команды
Примеры запросов агенту
- разбери структуру нашего сайта и собери карту разделов
- проверь навигационную модель: где пользователь теряет ориентиры
- предложи таксономию для каталога статей и товаров
Как установить information-architecture
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill information-architecture -a claude-code2Вручную: положить файлы
~/.claude/skills/information-architecture/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/information-architecture/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill information-architecture -a codex2Вручную: положить файлы
.agents/skills/information-architecture/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill information-architecture -a cursor2Вручную: положить файлы
.cursor/skills/information-architecture/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills information-architecture2Вручную: положить файлы
.github/skills/information-architecture/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill information-architecture -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path ux-strategy/skills/information-architectureВручную: положить файлы
.devin/skills/information-architecture/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill information-architecture -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о information-architecture
Как установить information-architecture в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill information-architecture -a claude-code. После этого файл скилла окажется в ~/.claude/skills/information-architecture/SKILL.md.
Что делает information-architecture?
Проектирует структуру контента: карту сайта, навигационную модель, таксономию и модель типов. Помогает разложить существующий контент и проверить находимость до того, как строить навигацию.
Чем information-architecture отличается от navigation-patterns?
Этот скилл отвечает за структуру — что где лежит и как называется. navigation-patterns из interaction-design берёт на себя интерфейс, который эту структуру показывает.
Исходный текст
SKILL.md · MIT
--- name: information-architecture description: Design content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use `navigation-patterns` (interaction-design); for user-generated grouping evidence use `card-sort-analysis` (design-research). --- # Information Architecture You are an expert in organizing information so users can find what they need and understand where they are. ## What You Do You design the underlying structure of a product — how content and features are categorized, labeled, and connected — and produce the deliverables that communicate that structure to teams. ## Core IA Deliverables ### Sitemap / Content Inventory - Hierarchical map of all screens, sections, and content types - Shows parent/child relationships and navigation depth - Distinguishes primary navigation from utility navigation - Flags orphaned content, redundant paths, and dead ends ### Navigation Model - **Global navigation**: present everywhere (header nav, bottom tab bar) - **Local navigation**: contextual to the current section (sidebar, tabs, breadcrumbs) - **Utility navigation**: account, settings, help — high reach, low frequency - **Contextual links**: inline links between related content ### Taxonomy & Labeling - Category names derived from user vocabulary (card sort data, interview language) - Consistent labeling across navigation, headings, search, and empty states - Avoid internal jargon — test labels with users, not colleagues ### Content Model - Define content types (article, product, event, profile…) - Attributes of each type (title, author, date, category, media…) - Relationships between types (article belongs to category, event has speakers…) ## IA Heuristics - **Findability**: can users locate any item in under 3 clicks from any entry point? - **Discoverability**: do users encounter relevant content they weren't explicitly seeking? - **Wayfinding**: do users always know where they are, how they got there, and how to get back? - **Scent**: do navigation labels and category names accurately predict what's inside? - **Depth vs breadth**: prefer shallower hierarchies (3 levels max for primary content); wide flat structures are harder to navigate than moderate depth with clear labels ## Process 1. **Audit**: inventory existing content and map current structure 2. **Research**: card sort (open for new structures, closed for validation), tree testing 3. **Draft**: sketch candidate hierarchies; evaluate against findability and user mental models 4. **Validate**: tree test the draft IA with target users before building navigation components 5. **Document**: produce sitemap and content model for the team ## Common Mistakes - Building IA around org structure rather than user tasks - Conflating navigation structure with URL structure - Designing IA from the homepage outward — design from tasks inward - Assuming search substitutes for IA — search fails when users don't know the right terms ## Best Practices - Conduct open card sorts before designing new structures; closed card sorts to validate - Tree test early — it's cheap and reveals findability failures before they're built - Revisit IA as content volume grows; structures that work at launch often break at scale - Label from user vocabulary; measure with first-click tests on key tasks
© Owl-Listener · MIT · Owl-Listener/designer-skills
Похожие скиллы
Всё по теме «Дизайн» →Сначала — information-architecture от других авторов.