page-decomposition

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Page Decomposition

页面分解

Analyze content sequences within a section and provide neutral descriptions without assigning block names.

分析区块内的内容序列，提供中立描述，不指定组件（block）名称。

When to Use This Skill

何时使用此Skill

This skill is called by identify-page-structure for EACH section to:

Identify content sequences within that section
Provide neutral descriptions (NO block names yet)
Identify breaking points between sequences
Enable authoring-focused decisions later

IMPORTANT: This skill analyzes ONE section at a time, not the whole page.

此Skill由identify-page-structure针对每个区块调用，用于：

识别该区块内的内容序列
提供中立描述（暂不指定组件名称）
识别序列之间的分界点
为后续面向编辑的决策提供支持

重要提示： 此Skill每次仅分析一个区块，而非整个页面。

Input Required

所需输入

From the calling skill (identify-page-structure), you need:

Section visual description and boundaries
Screenshot showing the section
Cleaned HTML content for the section

来自调用Skill（identify-page-structure）的以下信息：

区块的视觉描述与边界范围
显示该区块的截图
该区块的清理后HTML内容

Related Skills

Key Concepts

核心概念

Content Hierarchy:

DOCUMENT
├── SECTION (top-level, analyzed by identify-page-structure Step 2a)
│   ├── Content Sequence 1 ← THIS SKILL IDENTIFIES THESE
│   ├── Content Sequence 2 ← THIS SKILL IDENTIFIES THESE
│   └── ...
└── SECTION
    └── Content Sequence 1

What is a "content sequence"? A vertical flow of related content that will eventually become:

Default content (headings, paragraphs, lists, inline images), OR
A block (structured, repeating, or interactive component)

Breaking points between sequences:

Visual/semantic shift in content type
Change from prose → structured pattern
Change from one pattern → different pattern

Philosophy:

Describe WHAT you see, not WHAT it should be
"Two images side-by-side" not "Columns block"
"Grid of 8 items with icons" not "Cards block"
Stay neutral - authoring decisions come later

内容层级：

DOCUMENT
├── SECTION (top-level, analyzed by identify-page-structure Step 2a)
│   ├── Content Sequence 1 ← THIS SKILL IDENTIFIES THESE
│   ├── Content Sequence 2 ← THIS SKILL IDENTIFIES THESE
│   └── ...
└── SECTION
    └── Content Sequence 1

什么是"内容序列"？ 一组垂直排列的相关内容，最终会成为：

默认内容（标题、段落、列表、内嵌图片），或
组件（结构化、重复或交互式组件）

序列之间的分界点：

内容类型的视觉/语义转变
从散文内容变为结构化模式
从一种模式变为另一种模式

理念：

描述你所看到的内容，而非它应该是什么
用"两张并排的图片"而非"Columns组件"
用"包含8个带图标的项目网格"而非"Cards组件"
保持中立——编辑决策留到后续阶段

Decomposition Workflow

分解工作流

Context: identify-page-structure has already identified section boundaries (Step 2a). This skill is invoked FOR ONE SECTION to analyze its internal content sequences.

背景： identify-page-structure已识别区块边界（步骤2a）。此Skill针对单个区块调用，以分析其内部内容序列。

Step 1: Examine the Section

步骤1：检查区块

Look at the screenshot and HTML for THIS section only.

What to observe:

Vertical flow of content from top to bottom
Where content changes type or pattern
Visual groupings or breaks

Ignore:

Other sections (out of scope)
Section styling (already identified by page-import)
Block names (stay neutral)

Output: Mental model of content flow within this section

仅查看该区块的截图与HTML内容。

需要观察的内容：

从上到下的内容垂直流向
内容类型或模式发生变化的位置
视觉分组或分界

需要忽略的内容：

其他区块（超出范围）
区块样式（已由page-import识别）
组件名称（保持中立）

输出： 该区块内内容流向的思维模型

Step 2: Identify Breaking Points

步骤2：识别分界点

Find where content shifts from one type/pattern to another.

Breaking point indicators:

Prose text → Structured grid
Heading/paragraph → Side-by-side images
One repeating pattern → Different repeating pattern
Structured content → Prose text

Example within a section:

Content flows top to bottom:
- Large heading
- Paragraph
- Two buttons
[BREAK] ← Visual/semantic shift
- Two images displayed side-by-side

Output: List of breaking points

找到内容从一种类型/模式转变为另一种的位置。

分界点指标：

散文文本 → 结构化网格
标题/段落 → 并排图片
一种重复模式 → 另一种重复模式
结构化内容 → 散文文本

区块内示例：

内容从上到下流动：
- 大标题
- 段落
- 两个按钮
[分界] ← 视觉/语义转变
- 两张并排显示的图片

输出： 分界点列表

Step 3: Define Content Sequences

步骤3：定义内容序列

Between each breaking point is a content sequence.

For each sequence, describe:

What elements it contains (heading, paragraph, images, etc.)
How they're arranged (stacked, side-by-side, in a grid)
Quantity (one heading, two images, grid of 8 items)

Use neutral language:

✅ "Two images displayed side-by-side"
❌ "Columns block with two images"
✅ "Grid of 8 items, each with icon and short text"
❌ "Cards block"
✅ "Large centered heading, paragraph, two buttons stacked vertically"
❌ "Hero block"

Output: Neutral descriptions for each sequence

每个分界点之间的部分即为一个内容序列。

针对每个序列，描述：

包含的元素（标题、段落、图片等）
排列方式（堆叠、并排、网格状）
数量（一个标题、两张图片、8个项目的网格）

使用中立语言：

✅ "两张并排显示的图片"
❌ "包含两张图片的Columns组件"
✅ "8个项目的网格，每个项目包含图标和短文本"
❌ "Cards组件"
✅ "居中的大标题、段落、两个垂直堆叠的按钮"
❌ "Hero组件"

输出： 每个序列的中立描述

Step 4: Return Structured Output

步骤4：返回结构化输出

Provide content sequences for this section in structured format.

Output format:

javascript

{
  sectionNumber: 1,  // From identify-page-structure
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two images displayed side-by-side"
    }
  ]
}

This enables:

Clear understanding of section's internal structure
Neutral foundation for authoring decisions
Separation of description from implementation

以结构化格式提供该区块的内容序列。

输出格式：

javascript

{
  sectionNumber: 1,  // From identify-page-structure
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two images displayed side-by-side"
    }
  ]
}

此输出可实现：

清晰理解区块的内部结构
为编辑决策提供中立基础
将描述与实现分离

Section Metadata Format

区块元数据格式

Table format:

markdown

+------------------------------+
| Section Metadata             |
+------------------+-----------+
| style            | light     |
+------------------+-----------+

Placement: At the start of each section, before content

Usage: Applied by generate-import-html skill when generating final HTML

表格格式：

markdown

+------------------------------+
| Section Metadata             |
+------------------+-----------+
| style            | light     |
+------------------+-----------+

放置位置： 每个区块的开头，内容之前

用途： 由generate-import-html Skill在生成最终HTML时应用

Examples

示例

Example 1: Hero Section

示例1：Hero区块

Input: "Section 1 (light background): Large prominent content at top of page"

Visual observation:

Large centered heading
Paragraph text below it
Two call-to-action buttons [BREAK - visual shift]
Two large images displayed next to each other

Output:

javascript

{
  sectionNumber: 1,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two call-to-action buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two large images displayed side-by-side"
    }
  ]
}

输入： "Section 1 (light background): Large prominent content at top of page"

视觉观察：

居中的大标题
下方的段落文本
两个号召性按钮 [分界 - 视觉转变]
两张并排显示的大图片

输出：

javascript

{
  sectionNumber: 1,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Large centered heading, paragraph, two call-to-action buttons stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Two large images displayed side-by-side"
    }
  ]
}

Example 2: Features Section

示例2：功能区块

Input: "Section 2 (light background): Grid of feature items"

Visual observation:

Centered heading [BREAK - shift to structured pattern]
Grid of 8 items
Each item has: small icon, short text description [BREAK - shift back to simple elements]
Two centered buttons

Output:

javascript

{
  sectionNumber: 2,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Single centered heading"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 8 items, each with small icon and short text description"
    },
    {
      sequenceNumber: 3,
      description: "Two centered buttons"
    }
  ]
}

输入： "Section 2 (light background): Grid of feature items"

视觉观察：

居中的标题 [分界 - 转变为结构化模式]
8个项目的网格
每个项目包含：小图标、短文本描述 [分界 - 转回简单元素]
两个居中的按钮

输出：

javascript

{
  sectionNumber: 2,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Single centered heading"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 8 items, each with small icon and short text description"
    },
    {
      sequenceNumber: 3,
      description: "Two centered buttons"
    }
  ]
}

Example 3: Article Cards Section

示例3：文章卡片区块

Input: "Section 3 (grey background): Blog articles"

Visual observation:

Eyebrow text "Latest Articles"
Large heading
Paragraph description
Browse button [BREAK - shift to repeating pattern]
4 items in grid
Each item: image, category tag, heading, short description, read link

Output:

javascript

{
  sectionNumber: 3,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Eyebrow text, large heading, paragraph description, browse button - all stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 4 items, each with image, category tag, heading, description, and read link"
    }
  ]
}

输入： "Section 3 (grey background): Blog articles"

视觉观察：

眉文本"Latest Articles"
大标题
段落描述
浏览按钮 [分界 - 转变为重复模式]
4个项目的网格
每个项目包含：图片、类别标签、标题、短描述、阅读链接

输出：

javascript

{
  sectionNumber: 3,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Eyebrow text, large heading, paragraph description, browse button - all stacked vertically"
    },
    {
      sequenceNumber: 2,
      description: "Grid of 4 items, each with image, category tag, heading, description, and read link"
    }
  ]
}

Example 4: Simple Content Section

示例4：简单内容区块

Input: "Section 4 (light background): Body content"

Visual observation:

Multiple paragraphs of text
Some inline images within the text
Headings interspersed (H2, H3)
No clear breaking points - content flows naturally

Output:

javascript

{
  sectionNumber: 4,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Flowing prose content: multiple paragraphs with inline images and headings (H2, H3)"
    }
  ]
}

Note: This entire section is one sequence because content flows naturally without structural breaks.

输入： "Section 4 (light background): Body content"

视觉观察：

多个文本段落
文本中的一些内嵌图片
穿插的标题（H2、H3）
无明确分界点 - 内容自然流动

输出：

javascript

{
  sectionNumber: 4,
  sequences: [
    {
      sequenceNumber: 1,
      description: "Flowing prose content: multiple paragraphs with inline images and headings (H2, H3)"
    }
  ]
}

注意： 整个区块为一个序列，因为内容自然流动，无结构性分界。

Common Mistakes to Avoid

需避免的常见错误

Using block names in descriptions: ❌ "Hero block with heading and buttons" ✓ "Large centered heading, paragraph, two buttons stacked vertically"

Not identifying breaking points: ❌ Describing entire section as one sequence when there are clear shifts ✓ Identifying where content type changes and breaking into sequences

Being too granular: ❌ Each element as separate sequence: "Heading", "Paragraph", "Button" ✓ Related elements together: "Heading, paragraph, two buttons stacked vertically"

Mixing analysis levels: ❌ Analyzing multiple sections at once ✓ Focus on ONE section at a time (per invocation)

Making authoring decisions: ❌ "This should be a cards block because..." ✓ "Grid of 4 items with images and text" (neutral description)

在描述中使用组件名称： ❌ "包含标题和按钮的Hero组件" ✓ "居中的大标题、段落、两个垂直堆叠的按钮"

未识别分界点： ❌ 当存在明显转变时，将整个区块描述为一个序列 ✓ 识别内容类型变化的位置并拆分为序列

过于细化： ❌ 将每个元素作为单独序列："标题"、"段落"、"按钮" ✓ 相关元素组合在一起："标题、段落、两个垂直堆叠的按钮"

混淆分析层级： ❌ 同时分析多个区块 ✓ 每次仅关注一个区块（每次调用）

做出编辑决策： ❌ "这应该是Cards组件，因为..." ✓ "包含4个带图片和文本的项目网格"（中立描述）

page-decomposition

Original

Translation

Page Decomposition

页面分解

When to Use This Skill

何时使用此Skill

Input Required

所需输入

Related Skills

相关Skills

Key Concepts

核心概念

Decomposition Workflow

分解工作流

Step 1: Examine the Section

步骤1：检查区块

Step 2: Identify Breaking Points

步骤2：识别分界点

Step 3: Define Content Sequences

步骤3：定义内容序列

Step 4: Return Structured Output

步骤4：返回结构化输出

Section Metadata Format

区块元数据格式

Examples

示例

Example 1: Hero Section

示例1：Hero区块

Example 2: Features Section

示例2：功能区块

Example 3: Article Cards Section

示例3：文章卡片区块

Example 4: Simple Content Section

示例4：简单内容区块

Common Mistakes to Avoid

需避免的常见错误