# Poster Page Designer

> 用于带文字的 poster、长图页面、视觉文章、社交媒体图文、小红书/公众号文章、营销单页等内容优先的 HTML 页面。这个 skill 要求 PageProductManager 先写文案草稿和图像期望，再通过搜索或图像生成补齐素材，最后生成一个独立 HTML 页面。用这个 skill 做 poster 是为了解决直接基于图像生成 poster 时文字模糊、不准的问题；它更侧重内容准确可控、排版精美，以及图文相对位置清晰。

- Skill: `pipixia-labs/poster-page-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pipixia-labs/poster-page-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pipixia-labs/poster-page-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: pipixia-labs (https://skillmd.com/u/pipixia-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pipixia-labs/poster-page-designer

---


# Poster/Page Designer

当用户想要一个内容驱动的视觉页面时，使用这个 PageProductManager 私有 skill。典型任务包括 poster、长图、视觉文章、小红书图文、公众号文章、社交公告、活动营销单页、营销海报等。

这个任务不是 UI 探索。核心是：在生成代码之前，先把内容、图像计划和视觉阅读顺序想清楚。

## 核心流程

1. 先做草稿。
   在生成最终 HTML 之前，先创建一个具体的 Markdown 草稿。草稿必须包含要展示的文字内容，以及期望使用的图像信息。

2. 补充图像素材。
   如果需要事实信息、视觉参考或平台案例，可以使用搜索；如果需要最终对外使用的视觉素材，可以使用图像生成。素材确定后，把 workspace-relative 的素材路径补充到草稿或 HTML 生成交接信息里。

3. 生成 HTML。
   只有当草稿和素材列表已经足够清楚，HTML 生成器可以有意识地摆放文字和图片之后，才调用 `invoke_page_code_generation`。

4. 校验并交付。
   校验 HTML，然后注册最终 HTML。如果草稿对理解结果有帮助，也把草稿作为 supporting file 一起交付。

## 成品交付模式

- 默认最终交付必须是一个可直接发布的成品页面，而不是设计方向稿、样式对比板、素材拼贴板或多方案评审画布。
- 如果用户明确要求“多版”“多方案”“给我几个方向”，可以制作多方案预览，但它应该作为 supporting file 或阶段性评审产物；最终仍应额外选出一个主推方向并精修成单个成品，除非用户只要求方案比较。
- Poster 类任务默认输出一个固定画布内的完整成品。常用选择：`1080 x 1920`（9:16 手机海报）、`1080 x 1350`（4:5 社媒海报）、`1080 x 1528`（通用竖版海报/A 系列近似比例）。用户指定尺寸时优先使用用户尺寸。
- 长图、公众号文章和视觉文章可以是连续纵向页面；但第一屏必须有明确 hook 和视觉重心，不能像普通网页首页或 UI 模板。
- 交付前检查最终 HTML 的首屏是否已经像发布图，而不是像“这里有几张卡片供选择”。

## 判断制作重点

对 poster 来说，排版就是产品：
- 先确定 poster 画布，通常优先竖版。
- 明确主图放在哪里，标题放在哪里，辅助文案放在哪里，CTA/时间/地点/二维码区域放在哪里。
- 只要文字准确性重要，最终文字就应该放在 HTML/CSS 里，而不是烘焙进生成图片里。
- 除非用户明确要求图片里有艺术字，否则背景图或主视觉图不要包含文字。
- 第一版优先使用一个强主视觉，不要一开始就生成很多小装饰素材。
- 一个 poster 只能有一个第一视觉主角。主标题、主视觉、CTA 三者要形成清楚的阅读路径：第一眼看到什么，第二眼理解什么，最后去哪里行动。
- 安全边距要提前规划。竖版 1080 宽海报通常左右保留 60-90px，顶部和底部重要信息不要贴边。
- 标题、正文、注释、CTA 的字号层级必须明显拉开。不要把所有文字都做成同等大小的信息卡。
- 信息太多时，不要硬塞进单张海报；应改成长图结构，或把次要信息压缩成 2-4 个短点。

对小红书、公众号文章、长图和视觉文章来说，内容结构就是产品：
- 先确定章节、阅读顺序、段落长度、配图说明和转场节奏。
- 每个章节都应该明确是否需要图片、图解、产品图、截图、引用卡片，或者不需要图片。
- 图片要支撑章节表达，而不是单纯装饰。
- 保持平台阅读习惯：小红书要适合快速扫读，公众号文章要有更清楚的叙事深度，长图要有连续的纵向阅读流。

## 文案吸引力要求

草稿阶段先把文案拆成四层，再决定排版：

- Value Proposition：一句话说清楚给谁、带来什么结果或情绪。
- Reason Why：为什么可信，可以是时间、地点、主办方、产品卖点、稀缺性、专业背书或使用场景。
- Details：必要细节，只保留会影响读者判断的信息。
- CTA：明确行动，避免“了解更多”这类弱指令；优先写成“扫码预约”“添加微信领取清单”“立即报名”等具体动作。

主标题必须先服务传播，再服务装饰。它应该短、具体、有对象感，能单独成立。副标题负责降低理解成本，正文负责补充证据，CTA 负责收口。

## 版式和精致度要求

- 先做黑白线框判断阅读顺序，再上颜色、图片和装饰。
- 默认使用一个主网格系统：海报可用 12 列或统一左边线，长图可用单列模块化宽度。相关元素必须有共同对齐线。
- 留白要有节奏：标题附近留白最大，模块内部和模块之间使用统一间距，不要让信息漂浮。
- 颜色控制在一个主色、一个辅助色、一个强调色附近；不要堆叠廉价渐变、发光卡片和无意义装饰。
- 视觉细节要支持主题：纹理、线条、边框、编号、标签、分割线都要有功能，不能只是填空。
- 主视觉图要承担构图任务。图像 prompt 需要说明主体、视角、光线、色彩、裁切比例，以及给 HTML 标题或 CTA 预留的干净区域。
- 文字不能压住图像主体。需要压图时，用光影、遮罩、渐变或局部暗化处理可读性，而不是给正文套明显的大色块背景。
- 二维码、价格、时间地点等行动信息应放在稳定、安全、可扫读的位置，不能被装饰或图片边缘干扰。

## 负面清单

避免以下输出：

- 把 2-4 个设计方向并排放在同一个最终 HTML 里，然后当作最终海报交付。
- 像 dashboard、landing page、组件库 demo、PPT 缩略图墙或设计系统展示页。
- 大量同质卡片堆叠，主标题和主视觉没有第一眼冲击。
- 背景图有不可控文字，导致与 HTML 文案冲突。
- 图像只提供风格氛围，和具体主题、产品、活动或读者动作无关。
- 文字过密、字号层级不明显、CTA 不明确、重要信息贴边。

## Markdown 草稿要求

草稿是对齐产物。它要足够具体，让最终 HTML 生成阶段不需要临时发明缺失的文案、图片角色或布局位置。

建议使用这个结构：

```markdown
# Page Draft: <工作标题>

## 任务简述
- 平台：
- 交付物：
- 成品交付模式：单个最终成品 / 多方案预览 + 主推成品 / 长图文章
- 目标读者：
- 核心信息：
- 希望读者采取的行动：
- 目标格式：
- 语言：
- 已确认约束：
- 暂定假设：

## 内容草稿
### 标题

### 开头 / Hook

### 文案层级
- Value Proposition：
- Reason Why：
- Details：
- CTA：

### 正文章节
#### 第 1 节：<小标题>
- 正文：
- 重点句 / Callout：
- 图像期望：

#### 第 2 节：<小标题>
- 正文：
- 重点句 / Callout：
- 图像期望：

### CTA / 页脚

## 视觉阅读顺序
- 读者第一眼应该看到：
- 第二个注意点：
- 最后的行动点或记忆点：

## 排版计划
- 画布：
- 安全边距：
- 文字区域：
- 图像区域：
- 第一视觉主角：
- 字号层级：
- 间距节奏：
- 对齐方式：
- 移动端 / 长图行为：

## 图像期望
| id | 角色 | 用于哪里 | 来源策略 | 搜索 query 或生成 prompt | 构图和摆放 | 图中是否有文字 | 状态 | 已解析路径 |
|----|------|----------|----------|--------------------------|------------|----------------|------|------------|
| hero-bg | 主视觉 / 背景 | poster 开屏 | generated_final | ... | 顶部 60% 通栏，左上角留干净标题区 | 否 | planned | |
| section-1-img | 章节插图 | 第 1 节 | search_reference | ... | 放在章节标题下方，16:9 裁切 | 否 | planned | |

## 已解析素材
- `asset-id`: `workspace/relative/path` - 摆放方式和 alt text

## HTML 生成交接
- 最终文案：
- 章节顺序：
- 素材路径：
- Poster 排版计划或文章章节流：
- 必要尺寸 / 比例：
- 成品模式：必须输出单个可发布成品，还是用户明确要求的多方案预览
- 视觉质量要求：第一眼焦点、主视觉裁切、标题/CTA 安全区、字号层级
- 可访问性说明：
- 校验预期：
```

## 草稿示例

Poster 草稿示例：

```markdown
## 内容草稿
### 标题
春日新品发布会

### 开头 / Hook
轻盈、明亮、适合通勤的春季系列正式上线。

### CTA / 页脚
3月28日 19:30｜线上直播｜扫码预约

## 视觉阅读顺序
- 读者第一眼应该看到：居中的大产品主视觉。
- 第二个注意点：左上角有足够对比度的主标题。
- 最后的行动点或记忆点：底部固定时间和预约 CTA。

## 排版计划
- 画布：竖版 poster，1080 x 1528。
- 文字区域：标题左上，副标题在标题下方，CTA 位于底部安全区。
- 图像区域：产品 / 人物主视觉居中，背景覆盖整个 poster。
- 间距节奏：顶部大标题区，中部开放主视觉区，底部信息密集但可读。

## 图像期望
| id | 角色 | 用于哪里 | 来源策略 | 搜索 query 或生成 prompt | 构图和摆放 | 图中是否有文字 | 状态 | 已解析路径 |
| hero-bg | poster 主视觉 | 中央产品氛围 | generated_final | spring fashion product hero visual, soft daylight, clean background, centered subject, blank space upper-left and bottom, no text | 整张 poster 背景，主体居中 | 否 | planned | |
```

文章 / 长图草稿示例：

```markdown
## 内容草稿
### 标题
AI 写作不是替你写，而是帮你想清楚

### 开头 / Hook
很多人用 AI 写作失败，不是工具不行，而是没有把“写给谁”和“想让读者做什么”说清楚。

### 正文章节
#### 第 1 节：先定读者
- 正文：写作前先定义读者角色、已有认知和最关心的问题。
- 重点句 / Callout：写给所有人，往往等于谁也没写到。
- 图像期望：一张清晰图解，展示读者、痛点和期望行动之间的关系。

#### 第 2 节：再定结构
- 正文：把文章拆成开头、论点、例子、行动建议四段。
- 重点句 / Callout：好文章不是堆信息，而是安排阅读路径。
- 图像期望：章节流程卡片，编辑感风格，图中不要嵌入文字。

### CTA / 页脚
把你的文章主题写下来，先让 AI 帮你整理一个结构。
```

## 素材策略

- 当主题需要事实背景、当前案例、产品/品类参考或平台视觉参考时，使用 `SearchAgent`。
- 搜索得到的图片默认只作为参考，不直接嵌入最终 HTML。除非用户提供了可安全使用的素材，或明确允许直接使用搜索图片。
- 对最终公开使用的视觉素材，使用 `ImageGenerationAgent`。除非用户要求其他 provider，或任务明显需要其他图像模型，否则优先使用 `provider="nano_banana"`。
- 当用户提供了产品图、参考 poster、截图，或者需要先理解图片内容/风格再做草稿和素材生成时，使用 `ImageUnderstandingAgent`。
- 当用户提供文档、网页、PDF 或长资料，需要先转成 Markdown 再做内容草稿时，使用 `AnythingToMD`。
- 如果输出里的产品、人物或参考图风格必须保持一致，应该使用支持参考图/编辑的路径，不要只用纯文本生成图。
- 对 HTML poster 和长图来说，生成视觉素材通常应避免带文字。准确的标题、日期、价格、标签和正文应该由 HTML/CSS 放置。
- 对 poster 素材来说，第一版通常只需要一个强背景图或强主视觉图。额外的透明装饰素材容易带来摆放风险，只在确实需要时再加。

## 图像生成 Prompt 要点

这个流程里的图像 prompt 应该包含：
- 图像主体，以及它在页面中的角色
- 构图，以及为 HTML 文字预留的空白区域
- 色彩和光线
- 期望裁切 / 画面比例
- 它是背景图、主视觉、章节插图还是产品视觉
- 如果文字会由 HTML 放置，要明确写 no text

示例：

```json
{
  "prompt": [
    "Vertical poster background for a spring product launch, clean editorial composition, centered product hero area, soft daylight, fresh green and white palette, blank upper-left space for title, blank bottom area for event details, premium commercial photography style, no text"
  ],
  "provider": "nano_banana",
  "aspect_ratio": "4:5",
  "resolution": "2K"
}
```

## HTML 生成交接

调用 `invoke_page_code_generation` 时，应包含：
- 已保存的 Markdown 草稿路径
- 最终文案和章节顺序
- 已解析素材表，包含 workspace-relative 路径
- poster 排版计划或文章章节流
- 哪些素材是最终素材，哪些只是参考素材
- 已知的精确画布约束或响应式约束
- 明确要求只生成一个独立 HTML 文件
- 明确要求最终文字使用 HTML/CSS，避免本机绝对路径

对 poster，要明确告诉 HTML 生成器：
- 画布尺寸 / 比例
- 主图位置和裁切方式
- 标题位置、辅助文案位置、CTA/页脚位置
- 文字字号层级
- 安全边距和对比度要求
- 最终 HTML 是否必须是单个发布成品；如果不是，说明用户明确要求多方案比较

对文章 / 长图，要明确告诉 HTML 生成器：
- 章节顺序
- 每张图出现在对应章节的什么位置
- 图片说明 / callout 的表现方式
- 纵向长图阅读节奏
- 是否适合移动端截图

## 质量标准

- Markdown 草稿不是可选项。
- 每个期望作为最终成品使用的图像，都应该有 workspace-relative 路径；如果某个图不再需要，要说明原因。
- 最终 HTML 应该像一个可以发布的 poster / 文章页面，而不是普通 UI mockup。
- 如果用户要 poster，最终 HTML 默认应该是一个精修成品，而不是多方案评审画布。
- Poster 质量取决于位置、层级、对齐、对比度和留白。
- 精致度取决于明确画布、统一网格、主视觉冲击、字号层级、信息密度控制、CTA 清晰度和最后一轮自检。
- 文章 / 长图质量取决于章节清晰度、阅读节奏、内容深度和配图相关性。
- 不要使用本机绝对路径。