Information Architecture

作者 julianoczkowskic259656c76d9無授權條款577 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 個月前更新

Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information architecture".

僅含說明Design & Creative

AI 產生的概覽

規劃產品或網站的資訊架構：導覽、內容層級、頁面結構、URL 模式與使用者流程。

功能: 這個技能在視覺設計與開發開始之前，產出一份定義產品或網站結構骨架的資訊架構文件。它會檢視既有的設計簡報，以及程式碼庫中的路由、導覽、版面與內容模式，就結構決策訪談使用者，並寫出 INFORMATION_ARCHITECTURE.md 檔案。文件涵蓋網站地圖、導覽模型、內容層級、使用者流程、命名慣例、元件重複使用、內容成長與 URL 策略。
適用情境: 當使用者想要規劃網站結構、定義導覽、梳理使用者流程、組織內容，或明確提到資訊架構或 IA 時使用。它適合在設計簡報完成之後、實作任務建立之前執行。
執行需求: 不隨附指令碼，僅為指示。它需要存取專案程式碼庫以及位於 .design/*/DESIGN_BRIEF.md 的設計簡報，並將 INFORMATION_ARCHITECTURE.md 寫入對應的 .design/ / 資料夾。

This skill defines the structural skeleton of a product or site. It sits between the design brief and the build. Run this after the brief is written and before tasks are created.

Example prompts

"Plan the IA for this app before I start building"
"Map out the navigation and page structure"
"I need to organize the content for a documentation site"
"Define user flows for the onboarding experience"

Process

Look for an existing design brief at .design/*/DESIGN_BRIEF.md. If multiple subfolders exist, use the most recently modified one, or ask the user which feature they are working on. If no brief exists, ask the user what they are building and for whom.
Explore the existing codebase to understand what structure already exists:
- Routing: Next.js app/ or pages/ directory, React Router config, Vue Router, SvelteKit routes, or static HTML page files
- Navigation components: header, sidebar, navbar, breadcrumb, footer components
- Layout components: root layouts, nested layouts, page wrappers, container components
- Page directories: how pages are currently organized in the file system
- URL patterns: existing slugs, dynamic segments, query parameter conventions
- CMS or data layer: content models, API routes, data fetching patterns, MDX/content directories
- If structure exists, this skill extends and improves it. Do not propose a new architecture that ignores what is already built.
Interview the user about structural decisions. For each question, provide your recommended answer.

Cover at minimum:
- What are the primary things a user needs to find or do? Rank by frequency.
- How many levels of navigation depth are acceptable?
- What content will grow over time vs. what is fixed?
- Are there distinct user types who need different entry points?
- What is the one page/view where the user spends 80% of their time?
Once you have a shared understanding, produce the IA document using the template below and save it as INFORMATION_ARCHITECTURE.md in the same .design/<feature-slug>/ subfolder as the design brief.

IA Document Template

markdown

# Information Architecture: [Product/Site Name]
## Site Map
A hierarchical map of every page or view. Use indentation to show nesting. Include the URL pattern for each.
- Home `/`  - Feature A `/feature-a`    - Sub-page `/feature-a/detail`  - Feature B `/feature-b`- Settings `/settings`  - Profile `/settings/profile`
## Navigation Model
Describe the navigation system:- **Primary navigation**: What appears in the main nav? Maximum items.- **Secondary navigation**: Sidebar, tabs, or contextual links within sections.- **Utility navigation**: Account, settings, help, and anything outside the main content hierarchy.- **Mobile navigation**: How navigation adapts. Hamburger, bottom tabs, or something else.
## Content Hierarchy
For each major page or view, define the content priority:
### [Page Name]1. [Highest priority content] -- Why this comes first2. [Second priority] -- Why this comes second3. [Third priority] -- Rationale4. [Below the fold / secondary]
## User Flows
The critical paths through the product. Each flow is a sequence of steps with decision points noted.
### [Flow Name] (e.g., "New user onboarding" or "Create a project")1. User lands on [page]2. User sees [content/prompt]3. User takes action: [action]   - If [condition A] -> [outcome]   - If [condition B] -> [outcome]4. User arrives at [destination]
## Naming Conventions
A glossary of terms used in the interface. Consistency matters. Pick one word and use it everywhere.
| Concept | Label in UI | Notes ||---------|-------------|-------|| [thing] | [what we call it] | [why this word] |
## Component Reuse Map
Which structural components (layouts, containers, navigation elements) are shared across pages.
| Component | Used on | Behavior differences ||-----------|---------|---------------------|| [layout/component] | [pages] | [any variations] |
## Content Growth Plan
Which sections of the site will accumulate content over time and how the IA accommodates that growth (pagination, filtering, search, archive patterns).
## URL Strategy
Rules for URL construction:- Pattern: [e.g., `/section/subsection/item-slug`]- Dynamic segments: [what is parameterized]- Query parameters: [filtering, sorting, pagination]

# Information Architecture: [Product/Site Name]
## Site Map
A hierarchical map of every page or view. Use indentation to show nesting. Include the URL pattern for each.
- Home `/`  - Feature A `/feature-a`    - Sub-page `/feature-a/detail`  - Feature B `/feature-b`- Settings `/settings`  - Profile `/settings/profile`
## Navigation Model
Describe the navigation system:- **Primary navigation**: What appears in the main nav? Maximum items.- **Secondary navigation**: Sidebar, tabs, or contextual links within sections.- **Utility navigation**: Account, settings, help, and anything outside the main content hierarchy.- **Mobile navigation**: How navigation adapts. Hamburger, bottom tabs, or something else.
## Content Hierarchy
For each major page or view, define the content priority:
### [Page Name]1. [Highest priority content] -- Why this comes first2. [Second priority] -- Why this comes second3. [Third priority] -- Rationale4. [Below the fold / secondary]
## User Flows
The critical paths through the product. Each flow is a sequence of steps with decision points noted.
### [Flow Name] (e.g., "New user onboarding" or "Create a project")1. User lands on [page]2. User sees [content/prompt]3. User takes action: [action]   - If [condition A] -> [outcome]   - If [condition B] -> [outcome]4. User arrives at [destination]
## Naming Conventions
A glossary of terms used in the interface. Consistency matters. Pick one word and use it everywhere.
| Concept | Label in UI | Notes ||---------|-------------|-------|| [thing] | [what we call it] | [why this word] |
## Component Reuse Map
Which structural components (layouts, containers, navigation elements) are shared across pages.
| Component | Used on | Behavior differences ||-----------|---------|---------------------|| [layout/component] | [pages] | [any variations] |
## Content Growth Plan
Which sections of the site will accumulate content over time and how the IA accommodates that growth (pagination, filtering, search, archive patterns).
## URL Strategy
Rules for URL construction:- Pattern: [e.g., `/section/subsection/item-slug`]- Dynamic segments: [what is parameterized]- Query parameters: [filtering, sorting, pagination]

來源與署名

來源：julianoczkowski/designer-skills位於information-architecture提交c259656

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Information Architecture

Example prompts

Process

IA Document Template

來源與署名

更多來自 julianoczkowski/designer-skills 的技能

Brief To Tasks

Design Brief

Grill Me

Frontend Design

Design Tokens

Design Flow

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design