ia

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Information Architecture Generator

信息架构生成工具

Generate a complete Information Architecture (IA) for a product based on a service plan, PRD, or startup idea.

根据服务方案、PRD（产品需求文档）或创业想法，为产品生成完整的信息架构（IA）。

When to Use This Skill

何时使用该Skill

Use this skill when the user provides:

A service planning document
A PRD (Product Requirements Document)
A startup or product idea description

Trigger phrases: "IA 작성", "정보구조도 만들어줘", "화면 위계 정리해줘", "create IA", "generate IA", "make information architecture"

当用户提供以下内容时，可使用本Skill：

服务规划文档
PRD（产品需求文档）
创业或产品想法描述

触发短语："IA 작성"、"정보구조도 만들어줘"、"화면 위계 정리해줘"、"create IA"、"generate IA"、"make information architecture"

Knowledge Base: Navigation Flow Design Principles

知识库：导航流程设计原则

An app or service is fundamentally the automation of user data manipulation. The goal of screen design: translate the user's mental model and task flow into DB operations (CRUD).

Scope: This skill generates frontend routes (browser URLs). API endpoint design is a separate concern.

应用或服务从本质上来说是用户数据操作的自动化。屏幕设计的目标：将用户的心智模型和任务流程转化为数据库操作（CRUD）。

范围说明：本Skill生成前端路由（浏览器URL）。API端点设计属于独立范畴。

Step 1: Define Entities

步骤1：定义实体

Identify the core concepts (entities) the service handles, then map each user action to a CRUD operation.

User Action	DB Operation	Example (E-commerce)
Create	Create	Sign up, add product, place order
View	Read	View profile, search/view product, order history
Edit	Update	Change password, update price, change order status
Remove	Delete	Delete account, remove product

识别服务处理的核心概念（实体），然后将每个用户操作映射到CRUD操作。

用户操作	数据库操作	示例（电商场景）
创建	Create	注册、添加商品、下单
查看	Read	查看个人资料、搜索/查看商品、订单历史
编辑	Update	修改密码、更新价格、变更订单状态
删除	Delete	删除账户、移除商品

Step 2: Design Screen Hierarchy

步骤2：设计屏幕层级

Naming Rules:

Plural nouns for collections —
```
/posts
```
,
```
/users
```
,
```
/fields
```
(not
```
/post
```
,
```
/field
```
)
Entity-based naming — use data model names (
```
/tasks
```
), not UI labels (
```
/warehouse
```
,
```
/feed
```
)
Minimize action segments — when a separate page is unavoidable, use a fixed set:
```
create
```
,
```
edit
```
,
```
settings
```

1-Depth: Top-Level — Entity Collections

URL pattern:
```
/{entities}
```
(e.g.
```
/posts
```
,
```
/users
```
,
```
/tasks
```
)
Non-resource pages:
```
/{static-page}
```
(e.g.
```
/about
```
,
```
/pricing
```
)

2-Depth: Record Detail & Entry Points

Rule: A single page handles only one entity unless absolutely necessary
```
/{entities}/:id
```
— Dynamic route, specific resource detail (e.g.
```
/posts/123
```
)
```
/{entities}/create
```
— Creation form (prefer modal when the form is simple)

3-Depth: Sub-pages of a Parent Record

/{entities}/:id/{sub-entities}

— Parent owns child records (e.g.

/farms/5/members

)

```
/{entities}/:id/settings
```
— Configuration page for the parent
```
/{entities}/:id/edit
```
— Edit form that needs its own page
Modal: simple action; preserve current page context
Inline: page handles view + edit together (e.g. settings with save button)
Separate page: multi-step form or independent flow
Modals and inline editing reduce the need for action routes

Query Parameters: Reflect Page State in URL

URL pattern:
```
...?key=value
```
Filtering (
```
?category=tops
```
), sorting (
```
?sort=price
```
), pagination (
```
?page=2
```
), search (
```
?q=keyword
```
)
Status view (
```
?status=backlog
```
), UI mode (
```
?mode=edit
```
)
Use query params for view state instead of separate routes (e.g.
```
?status=backlog
```
not
```
/warehouse
```
)

命名规则：

集合使用复数名词 —
```
/posts
```
、
```
/users
```
、
```
/fields
```
（而非
```
/post
```
、
```
/field
```
）
基于实体命名 — 使用数据模型名称（如
```
/tasks
```
），而非UI标签（如
```
/warehouse
```
、
```
/feed
```
）
最小化操作分段 — 当必须使用独立页面时，使用固定的操作词：
```
create
```
、
```
edit
```
、
```
settings
```

1级深度：顶层——实体集合

URL格式：
```
/{entities}
```
（例如
```
/posts
```
、
```
/users
```
、
```
/tasks
```
）
非资源页面：
```
/{static-page}
```
（例如
```
/about
```
、
```
/pricing
```
）

2级深度：记录详情与入口

规则：单个页面仅处理一个实体，除非绝对必要
```
/{entities}/:id
```
— 动态路由，特定资源详情（例如
```
/posts/123
```
）
```
/{entities}/create
```
— 创建表单（表单简单时优先使用模态框）

3级深度：父记录的子页面

/{entities}/:id/{sub-entities}

— 父记录包含子记录（例如

/farms/5/members

）

```
/{entities}/:id/settings
```
— 父记录的配置页面
```
/{entities}/:id/edit
```
— 需独立页面的编辑表单
模态框（Modal）：用于简单操作；保留当前页面上下文
内联（Inline）：页面同时处理查看与编辑（例如带保存按钮的设置页面）
独立页面：多步骤表单或独立流程
模态框和内联编辑可减少操作路由的使用

查询参数：在URL中反映页面状态

URL格式：
```
...?key=value
```
筛选（
```
?category=tops
```
）、排序（
```
?sort=price
```
）、分页（
```
?page=2
```
）、搜索（
```
?q=keyword
```
）
状态视图（
```
?status=backlog
```
）、UI模式（
```
?mode=edit
```
）
使用查询参数表示视图状态，而非独立路由（例如使用
```
?status=backlog
```
而非
```
/warehouse
```
）

Step 3: Design Page Structure

步骤3：设计页面结构

Global Layout (areas shared across most pages):

Header: brand, logged-in user info, notifications
Sidebar: navigation aid / feature drawer (desktop & dashboards)
Footer: legal info, copyright, support, sitemap
Global Navigation: branches top-level paths; mobile → bottom tab bar or drawer

Content Area Types:

Collection: a set of records for one entity — list, table, menu (e.g.
```
/posts
```
)
Single Item: one element from a collection — detail view (e.g.
```
/posts/123
```
)
Sub-page: child records, settings, or edit form of a parent (e.g.
```
/posts/123/settings
```
)

全局布局（大多数页面共享的区域）：

页眉（Header）：品牌标识、登录用户信息、通知
侧边栏（Sidebar）：导航辅助/功能抽屉（桌面端与仪表盘场景）
页脚（Footer）：法律信息、版权、支持、站点地图
全局导航（Global Navigation）：关联顶层路径；移动端→底部标签栏或抽屉菜单

内容区域类型：

集合：单个实体的一组记录——列表、表格、菜单（例如
```
/posts
```
）
单个条目：集合中的一个元素——详情视图（例如
```
/posts/123
```
）
子页面：父记录的子记录、设置或编辑表单（例如
```
/posts/123/settings
```
）

How to Generate the IA

如何生成IA

Step 1: Analyze the Input

步骤1：分析输入内容

Read the provided service plan, PRD, or product idea. Extract:

Core entities (what data does this service manage?)
User roles (who uses this service? any admin/user separation?)
Key features per entity (what CRUD operations are needed?)
Navigation structure (what are the top-level sections?)

阅读提供的服务方案、PRD或产品想法，提取以下信息：

核心实体（该服务管理哪些数据？）
用户角色（谁使用该服务？是否区分管理员/普通用户？）
各实体的关键功能（需要哪些CRUD操作？）
导航结构（顶层板块有哪些？）

Step 2: Map Entities to CRUD

步骤2：将实体映射到CRUD操作

For each entity, list the screens required:

Collection screen (list of all records)
Single Item screen (detail of one record)
Action screens (create, edit, delete flows)

针对每个实体，列出所需的屏幕：

集合屏幕（所有记录的列表）
单个条目屏幕（单条记录的详情）
操作屏幕（创建、编辑、删除流程）

Step 3: Build the Nested List

步骤3：构建嵌套列表

Output the IA as a Markdown nested list following this structure:

- /{entities}
  - Collection Screen (`/{entities}`)
    - Query params: `?status=`, `?sort=`, `?q=`
  - Single Item Screen (`/{entities}/:id`)
    - Sub-page (`/{entities}/:id/settings`) (modal, inline, or page)
    - Sub-page (`/{entities}/:id/edit`) (modal or page)
    - Child records (`/{entities}/:id/{sub-entities}`)
  - Create Screen (`/{entities}/create`) (modal or page)
- /{static-page}

Rules:

1-depth items = top-level navigation sections (plural entity names or standalone pages)
2-depth items = main screens within each section
3-depth items = sub-pages, child records, or action forms of a parent
Resource paths use plural nouns and entity-based naming
Allowed action segments:
```
create
```
,
```
edit
```
,
```
settings
```
— prefer modals/inline to reduce these
Mark presentation format: append
```
(modal)
```
,
```
(inline)
```
, or
```
(page)
```
where relevant
Mark dynamic routes: use
```
/:id
```
for record-specific screens
Use query parameters for view state (filtering, status) instead of separate routes
Include Global Layout section at the top (Header, GNB, Footer)
Include Auth flow if the service requires login

按照以下结构，以Markdown嵌套列表形式输出IA：

- /{entities}
  - 集合屏幕 (`/{entities}`)
    - 查询参数: `?status=`, `?sort=`, `?q=`
  - 单个条目屏幕 (`/{entities}/:id`)
    - 子页面 (`/{entities}/:id/settings`)（模态框、内联或独立页面）
    - 子页面 (`/{entities}/:id/edit`)（模态框或独立页面）
    - 子记录 (`/{entities}/:id/{sub-entities}`)
  - 创建屏幕 (`/{entities}/create`)（模态框或独立页面）
- /{static-page}

规则：

1级深度条目 = 顶层导航板块（复数实体名称或独立页面）
2级深度条目 = 各板块内的主屏幕
3级深度条目 = 父页面的子页面、子记录或操作表单
资源路径使用复数名词和基于实体的命名
允许使用的操作分段：
```
create
```
、
```
edit
```
、
```
settings
```
— 优先使用模态框/内联方式以减少此类路由
标注呈现格式：在相关位置追加
```
(modal)
```
、
```
(inline)
```
或
```
(page)
```
标注动态路由：对记录专属屏幕使用
```
/:id
```
使用查询参数表示视图状态（筛选、状态）而非独立路由
在顶部包含全局布局板块（页眉、全局导航栏、页脚）
如果服务需要登录，包含认证流程

Step 4: Add Screen Metadata

步骤4：添加屏幕元数据

After the nested list, include a table summarizing each screen:

Screen	Type	URL Pattern	Description
...	Collection / Single Item / Action / Auth	`/...`	...

在嵌套列表之后，添加一个表格汇总每个屏幕的信息：

屏幕	类型	URL格式	描述
...	集合 / 单个条目 / 操作 / 认证	`/...`	...

Output Format

输出格式

Always output:

Service Summary — 1–2 sentences summarizing the product
Entities & CRUD Map — bullet list of entities with their operations
Information Architecture — full nested list
Screen Summary Table — metadata table

始终输出以下内容：

服务摘要 — 1-2句话总结产品
实体与CRUD映射表 — 实体及其操作的项目符号列表
信息架构 — 完整的嵌套列表
屏幕摘要表格 — 元数据表格

Save Instructions

保存说明

When the task is complete, save the output to

SCREENS.md

in the current working directory unless the user specifies a different filename or location.

Use this format for the saved file:

markdown

undefined

任务完成后，将输出内容保存至当前工作目录下的

SCREENS.md

，除非用户指定其他文件名或位置。

保存文件时使用以下格式：

markdown

undefined

[Service Name] — Information Architecture

[服务名称] — 信息架构

Generated: [date]

生成时间: [日期]

Entities & CRUD Map

实体与CRUD映射表

...

Screen Hierarchy

屏幕层级

...

Screen Summary

屏幕摘要

...

undefined

...

undefined