information-architecture

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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"

"在我开始开发前，规划这个应用的IA"
"梳理导航和页面结构"
"我需要为一个文档站点组织内容"
"定义新用户上手体验的用户流"

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.

查找
```
.design/*/DESIGN_BRIEF.md
```
路径下的现有设计需求说明。如果存在多个子文件夹，使用最近修改的版本，或询问用户当前正在开发的功能。如果不存在需求说明，询问用户正在开发的产品及目标用户。
调研现有代码库，了解已有的结构：
- 路由：Next.js
```
app/
```
  或
```
pages/
```
  目录、React Router 配置、Vue Router、SvelteKit 路由，或静态HTML页面文件
- 导航组件：头部、侧边栏、导航栏、面包屑、页脚组件
- 布局组件：根布局、嵌套布局、页面包裹器、容器组件
- 页面目录：文件系统中当前页面的组织方式
- URL规则：现有页面标识、动态片段、查询参数约定
- CMS或数据层：内容模型、API路由、数据获取模式、MDX/内容目录
- 如果已有现有结构，本技能会对其进行扩展和优化，请勿提出忽略已构建内容的全新架构方案。
和用户沟通确认结构相关决策，每个问题都要给出你的建议答案。

至少覆盖以下内容：
- 用户需要查找或完成的核心事项有哪些？按使用频率排序。
- 可接受的导航深度最多为几层？
- 哪些内容会随时间迭代扩充，哪些是固定内容？
- 是否存在需要不同入口的差异化用户类型？
- 用户停留80%时间的页面/视图是哪一个？
双方达成共识后，使用下方模板生成IA文档，并保存到和设计需求说明同路径的
```
.design/<feature-slug>/
```
子文件夹下，命名为
```
INFORMATION_ARCHITECTURE.md
```
。

IA Document Template

IA文档模板

markdown

undefined

markdown

undefined

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
```

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.

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]

[Highest priority content] -- Why this comes first
[Second priority] -- Why this comes second
[Third priority] -- Rationale
[Below the fold / secondary]

[Highest priority content] -- Why this comes first
[Second priority] -- Why this comes second
[Third priority] -- Rationale
[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")

User lands on [page]
User sees [content/prompt]
User takes action: [action]
- If [condition A] -> [outcome]
- If [condition B] -> [outcome]
User arrives at [destination]

User lands on [page]
User sees [content/prompt]
User takes action: [action]
- If [condition A] -> [outcome]
- If [condition B] -> [outcome]
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]

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]

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]

undefined

Rules for URL construction:

Pattern: [e.g.,
```
/section/subsection/item-slug
```
]
Dynamic segments: [what is parameterized]
Query parameters: [filtering, sorting, pagination]

undefined