AI生图前端Web端

解决页面生成中的“合并输出”痛点

在使用大模型进行 Web 页面或长图设计时，开发者常遇到一个棘手问题：模型倾向于将整个页面的所有区块（Section）压缩进一张巨大的纵向长图中。这不仅破坏了响应式布局的视觉逻辑，也给后续的前端切片和拼接带来极大的解析负担。本技能的核心目标，就是通过严格的输出协议，强制模型打破这种“合并输出”的默认倾向。

核心机制与执行步骤

该技能通过 HARD OUTPUT RULE 规范了图像生成的粒度，其工作原理如下：

• 一对一映射：始终遵循“一个区块一张横向图片”的原则。请求 4 个区块，必须严格返回 4 张独立图像。
• 智能默认值：当用户指令缺乏具体数量时，提供合理的默认基准。例如，输入 landing page 会自动默认为 6 个区块（6 张图），而 full website template 则默认拆解为 8 个区块（8 张图）。
• 顺序渲染与状态播报：如果底层生图引擎仅支持单次单图渲染，技能会在单次响应内按顺序逐个触发图像生成，并输出明确的进度提示（如 Section 1 of 8: Hero），确保开发者清晰掌握生成进度。

适用边界与注意事项

该规则具有最高优先级，会覆盖模型自身试图合并输出的默认行为。开发者需注意，该技能专注于 Web 端前端的区块级图像生成控制，不涉及具体的后端渲染管线或 UI 组件库实现。在对接时，请确保提示词中明确包含区块数量或使用内置的默认关键词，以触发标准化的拆解逻辑。