page-decomposition

页面分解

分析一个区段中的内容序列，并提供中性描述，不要为内容块命名。

何时使用此技能

identify-page-structure 会对每个区段调用此技能，以便：

• 识别该区段中的内容序列
• 提供中性描述（暂不命名内容块）
• 识别序列之间的分界点
• 为之后以创作为重点的决策提供依据

重要： 此技能一次分析一个区段，而不是整个页面。

所需输入

需要从调用技能（identify-page-structure）获取：

• 区段的视觉描述和边界
• 显示该区段的截图
• 该区段的清理后 HTML 内容

相关技能

• page-import - 顶层协调器
• identify-page-structure - 为每个区段调用此技能（步骤 2b）
• block-inventory - 分解完成后提供可用内容块
• content-modeling - 分解完成后制定创作决策
• content-driven-development - 在 html-structure.md 中引用区段结构

关键概念

内容层级：

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 内容块”
• 保持中性——创作决策留待之后处理

分解工作流

背景： identify-page-structure 已经识别出区段边界（步骤 2a）。调用此技能是为了分析单个区段内部的内容序列。

---

步骤 1：检查区段

仅查看此区段的截图和 HTML。

观察内容：

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

忽略：

• 其他区段（不在范围内）
• 区段样式（已由 page-import 识别）
• 内容块名称（保持中性）

输出： 对此区段内内容流向的整体理解

---

步骤 2：识别分界点

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

分界点指示：

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

区段内的示例：

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

输出： 分界点列表

---

步骤 3：定义内容序列

每个分界点之间都是一个内容序列。

描述每个序列时，说明：

• 包含哪些元素（标题、段落、图片等）
• 元素如何排列（上下堆叠、并排、网格排列）
• 数量（一个标题、两张图片、由 8 个项目组成的网格）

使用中性措辞：

• ✅ “两张并排显示的图片”
• ❌ “包含两张图片的 Columns 内容块”
• ✅ “由 8 个项目组成的网格，每个项目都包含图标和简短文本”
• ❌ “Cards 内容块”
• ✅ “居中的大标题、一个段落、两个垂直堆叠的按钮”
• ❌ “Hero 内容块”

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

---

步骤 4：返回结构化输出

以结构化格式提供此区段的内容序列。

输出格式：

{
  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             |
+------------------+-----------+
| style            | light     |
+------------------+-----------+

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

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

---

示例

示例 1：首屏区域

输入：“第 1 个区域（浅色背景）：页面顶部的大型醒目内容”

视觉观察：

• 居中的大型标题
• 下方的段落文本
• 两个行动号召按钮 [BREAK - visual shift]
• 两张并排显示的大图

输出：

{
  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"
    }
  ]
}

---

示例 2：功能区域

输入：“第 2 个区域（浅色背景）：功能项网格”

视觉观察：

• 居中的标题 [BREAK - shift to structured pattern]
• 由 8 个项组成的网格
• 每个项包含：小图标、简短的文字说明 [BREAK - shift back to simple elements]
• 两个居中的按钮

输出：

{
  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"
    }
  ]
}

---

示例 3：文章卡片区域

输入：“第 3 个区域（灰色背景）：博客文章”

视觉观察：

• 眉题文字“最新文章”
• 大型标题
• 段落描述
• 浏览按钮 [BREAK - shift to repeating pattern]
• 网格中的 4 个项
• 每个项包含：图片、类别标签、标题、简短描述、阅读链接

输出：

{
  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"
    }
  ]
}

---

示例 4：简单内容区域

输入：“第 4 个区域（浅色背景）：正文内容”

视觉观察：

• 多个段落
• 文本中穿插一些图片
• 其间穿插标题（H2、H3）
• 没有明显的分隔点——内容自然连贯

输出：

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

**注意：**整个区域属于一个序列，因为内容自然连贯，没有结构性分隔。

---

应避免的常见错误

在描述中使用区块名称： ❌“带有标题和按钮的首屏区块” ✓“居中的大型标题、段落、两个垂直排列的按钮”

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

过于细分： ❌将每个元素单独作为一个序列：“标题”“段落”“按钮” ✓将相关元素放在一起：“标题、段落、两个垂直排列的按钮”

混淆分析层级： ❌一次分析多个区域 ✓每次只关注一个区域（每次调用一个）

做出创作决策： ❌“这应该是一个卡片区块，因为……” ✓“由 4 个包含图片和文本的项组成的网格”（中性描述）