网页分区概念图助手

网页分区概念图助手

这个 Skill 能做什么

为落地页的每个区块分别生成高质量横向设计参考，并保持整站构图、字体、颜色和转化节奏一致。

完成任务时重点处理：

• 每个区块的单独横向画面
• 首屏构图、内容层级和转化顺序
• 跨区块的视觉系统与图片策略

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要在写代码前为完整网页建立逐区块视觉方向和可分析参考图。
• 用户需要为落地页的每个区块分别生成高质量横向设计参考，并保持整站构图、字体、颜色和转化节奏一致。
• 任务需要同时控制每个区块的单独横向画面、首屏构图、内容层级和转化顺序。

如果文案未完成时先确认页面结构并使用明确占位内容，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标受众与使用场景 2. 画布尺寸、数量和输出格式 3. 原始内容与可用素材 4. 品牌规范、风格偏好和禁用项 5. 页面文案、区块列表、目标宽度和主要行动 6. 品牌、参考方向、图片资产和禁用视觉模式

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 建立页面顺序

为每个区块写清信息任务、证据和行动。

2. 定义共同系统

确定网格、字体、色板、图片处理和组件表面。

3. 设计首屏

优先解决标题、主体、产品或情绪图像与行动关系。

4. 逐区块生成

每个区块单独生成横向参考，不把整页压成拼贴。

5. 整组校正

并排检查密度、构图重复、色彩漂移和叙事节奏。

6. 准备实现交接

标注尺寸、间距、素材、组件和响应式推断。

输出格式

至少交付以下内容：

• **页面结构**：区块、内容任务、行动和证据
• **分区概念图**：每个页面区块一张独立横向参考
• **设计交接**：令牌、构图、素材和实现注意事项

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

一个八区块 SaaS 首页需要视觉参考；分别生成首屏、问题、流程、案例、集成、定价、FAQ 和结尾行动。

合理处理顺序：

1. 建立页面顺序 2. 定义共同系统 3. 设计首屏 4. 逐区块生成 5. 整组校正 6. 准备实现交接

交付时应重点展示页面结构、分区概念图、设计交接，并说明尚未验证的部分。

质量检查清单

• [ ] 信息层级在目标尺寸下清楚
• [ ] 色彩、字体、间距和素材处理保持一致
• [ ] 输出规格正确且没有素材拉伸或误裁
• [ ] 视觉选择服务于内容，不依赖无意义装饰
• [ ] 概念图数量与页面区块一一对应
• [ ] 不同区块保持系统一致但不会重复同一构图

信息不足时怎么处理

• 缺少风格方向时，根据主题提供一套克制方案并标明假设。
• 素材不足时优先使用排版、图形和结构化表达，不伪造关键事实。
• 文案未完成时先确认页面结构并使用明确占位内容。