AI生图前端 Web 端

要解决什么问题

用大模型做落地页或营销站「整页效果图」时，常见输出是一整张竖长图：Hero、信任条、功能区全挤在一帧里。后续切图、对齐栅格、按区块迭代都很痛苦，也和真实前端「一节一块 DOM」的交付方式对不上。

本技能把约束写死在生成流程里：每个页面区块对应一次独立的横版出图，禁止多段合并成单帧，也禁止用一张超长图冒充整站。

技能如何工作

• 按区块计数：用户明确 section 数量时，出图数量与之一致（例如 4 个 section → 4 张图）。
• 默认分段：只说「landing page」且未给数量时，默认 6 段；「full website template」默认 8 段。
• 单次一帧：每次调用只渲染一个 section 的横版画面，不把 Hero、Trust bar 等叠在同一张里。
• 串行补全：若环境一次只能出一张图，在同一次回复里按顺序输出，并标注进度（如 Section 2 of 8: Trust bar），直到所有 section 都有独立成图。

该规则优先级高于模型「省事合并成一张图」的默认倾向。

适用边界与注意点

• 适合需要分区块视觉稿的 Web 落地页、模板页构思，而不是一次性长图预览。
• 区块语义（Hero、定价、页脚等）仍需你在提示里说明；技能负责的是出图粒度与数量，不替代信息架构设计。
• 若你期望「一屏看全站」，与本技能的硬规则冲突，应改用未强制分段的生图流程。