poster-page-designer

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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 节：<小标题>

From pipixia-labs/creative-claw, MIT.

More from pipixia-labs/creative-claw