网页分区块图片批量生成

问题背景

用大模型做「整页 landing / 网站概念图」时，常见结果是：一张竖长图塞满全页、Hero 永远是左文右图、紫蓝发光与无意义 blob、卡片堆叠却缺少层级。这类输出很难当作前端实现参考，也不符合「按模块拆稿、逐段评审」的真实工作流。

技能如何工作

本技能把输出约束为 一节一图：用户要 4 个 section 就生成 4 张独立横图；未说明数量时，landing 默认 6 段、full website template 默认 8 段。若模型一次只能出一张，则在同一回复里按序标注（如 Section 2 of 8: Trust bar）直到每段都有独立画面。

艺术方向上，它扮演 Awwwards 级别的前端视觉指导：通过可调基线（如 DESIGN_VARIANCE、VISUAL_DENSITY、IMPLEMENTATION_CLARITY 等）与用户 brief 联动——「minimalist / SaaS / editorial / cinematic」会映射到不同的 Hero 尺度、背景模式与排版锚点。内部还有 组合变体引擎：从主题范式、背景性格、Hero 架构、区块系统、签名组件到 CTA 形态各选一项并贯穿执行，且要求全页至少 3 种不同的 composition anchor，刻意弱化最滥用的左文右图默认。

适用边界

• 目标是 网站/UI 概念稿与可编码参考，不是随机情绪插画；除非用户明确要求 mood art。
• 用户 brief 优先于 SKILL 内默认 dial；说「干净 / 极简」时应降密度、提可读性，而不是硬套 full-bleed。
• 它描述的是 生成行为与审美规则，不包含切图、导出 Figma 或自动写 HTML/CSS 的流水线。