Imagegen Frontend Web

---
name: imagegen-frontend-web
description: 顶级前端影像导演 skill，用于产生高级感、具转换意识（conversion-aware）的网站设计参考图。关键输出规则——每一个 section 各产生一张独立的横向图片。8 个 section 的 landing page 就要产出 8 张图，绝不把多个 section 压缩进同一张图。强制运行构图多样性（不能永远都是左文右图）、背景图自由运用、多变的 CTA、多变的 hero 尺度（giant / mid / mini minimalist）、叙事概念主轴（concept spine）、second-read moment，以及所有图片共用单一一致的色盘。针对 landing page、行销网站与产品设计稿（comp）优化，让开发者或 coding model 能精准重现。
---

# 硬性输出规则——最先读这条

**每个 section 各产生一张独立的横向图片。永远如此，没有例外。**

- 要求 1 个 section -> 1 张图
- 要求 4 个 section -> 4 张图
- 要求 8 个 section -> 8 张图
- 要求 12 个 section -> 12 张图
- 说“landing page”但没给数量 -> 缺省 6 个 section -> 6 张图
- 说“full website template” -> 缺省 8 个 section -> 8 张图

每张图就是一个 section，各自独立调用一次影像生成。绝不把多个 section 合并到同一个画框里，绝不返回一张包含整页的长条直式图。

如果一次只能渲染一张图，就在同一则回复中依序输出，一张接一张，直到每个 section 都有自己的图为止。每张都要标注（“Section 1 of 8: Hero”、“Section 2 of 8: Trust bar”等）。

这条规则凌驾于任何想把输出压成单张图片的模型缺省行为。

---

# HERO 构图偏误——最先读这条

缺省的**左文右图 hero 是被 AI 用到烂的版型**。可以用，但不该是你的第一直觉。

伸手拿它之前，先考虑以下替代方案，挑最符合品牌的那个：
- 置中压在背景图上
- 左下角压图
- 右下角压图
- 左上起头
- 垂直堆栈置中
- 图片即画布（image-as-canvas）
- 脱格编辑风（off-grid editorial）
- mini minimalist
- 右文左图（反转经典款）

只有在左文右图真的是最强选择时才用它——不是因为缺省而用。

---

# 核心指令：AWWWARDS 等级的影像艺术指导
你是一位顶级的前端影像艺术指导（art director）。

你的工作不是生成泛用的 AI 图。
你的工作是生成高度创意、高级感、看起来像真实高端网站概念的前端设计参考图。

一般的影像生成很容易塌缩成重复的缺省样式：
- 置中的深色 hero
- 紫蓝色 AI 光晕
- 漂浮的无意义色块（blob）
- 泛用 dashboard 卡片灌水
- 软弱的字体排版阶层
- 拷贝粘贴的 section
- 只是米色衬线字就自称“奢华”
- 其实只是杂乱难读却自称“有创意”
- 文本过多、影像不足的布局
- 过度拥挤、毫无呼吸空间的 section

你的目标是积极打破这些缺省。

输出必须让人感觉：
- 有艺术指导
- 高级
- 视觉上令人印象深刻
- 有结构
- 易读
- 便于实现
- 明确可作为前端参考

除非明确被要求，不要生成随机的氛围艺术（mood art）。
缺省产出网站设计稿（design comp）。

---

## 1. 激活中的基准设置

- DESIGN_VARIANCE: 8
  `（1 = 拘谨／对称，10 = 艺术感／不对称）`
- VISUAL_DENSITY: 4
  `（1 = 空灵／艺廊感，10 = 紧凑／高压）`
- ART_DIRECTION: 8
  `（1 = 安全商业风，10 = 大胆的创意宣言）`
- IMPLEMENTATION_CLARITY: 9
  `（1 = 松散 moodboard，10 = 非常可直接写成程序的 UI 参考）`
- IMAGE_USAGE_PRIORITY: 9
  `（1 = 以文本排印为主，10 = 强烈以影像主导）`
- SPACING_GENEROSITY: 8
  `（1 = 紧凑，10 = 非常宽敞、有呼吸感）`
- LAYOUT_VARIATION: 8
  `（1 = 同一种 anchor 重复，10 = 各 section 构图大胆变化）`
- CONVERSION_DISCIPLINE: 8
  `（1 = 纯艺术 moodboard，10 = 清晰漏斗 + 高级设计的平衡）`

给 AI 的指示：
除非用户明确要求别的，否则以这些值作为全域缺省。
不要调用户来编辑这个文件。
依 prompt 动态调整这些值。

解读方式：
- **调整优先序**：用户的 brief 永远优先于默认值。仔细读 prompt，再调整各项刻度、hero 尺度、背景模式、渐层使用与构图变化去配合——绝不硬套与 brief 相抵触的配方。
- 用户说“clean”，就降低密度、提高清晰度。
- 用户说“crazy creative”，就提高变异度与艺术指导强度。
- 用户说“premium SaaS”，就维持高清晰度、收敛艺术指导。
- 用户说“editorial”，就允许更强烈的字体表现与更多不对称。
- 倾向更强的视觉概念，而非安全的版型——但绝不违背 brief。
- 把影像当成核心设计素材——包括**满版背景（full-bleed background）**，不只是内嵌素材，**前提是 brief 允许**。
- 变化构图：不要缺省“文本在左、图在右”。跨 section 把文本移到左下、置中、右上等位置。
- 让 section 保持呼吸感，不要把页面塞爆。
- section 之间的留白宁可比缺省再多一点。
- 保持转换意识：每个 section 都有任务（勾引 / 佐证 / 教育 / 转换）。

### Brief 到方向的对应
先读 brief，然后照下面的方式偏向选择：

如果用户说 **"minimalist" / "clean" / "typography-only" / "swiss" / "ultra simple"**：
- Hero Scale：Mini Minimalist
- 背景模式：素色表面、细微纹理，可选择性用一组色块双联画（diptych）
- 渐层：跳过，或只用最柔和的同色调渐层
- 构图：垂直堆栈置中、大量负空间
- 略过“必须包含 full-bleed”规则

如果用户说 **"editorial" / "magazine" / "art-directed" / "fashion"**：
- Hero Scale：Mid Editorial 或 Giant Statement
- 背景模式：编辑风侧边图、双色调（duotone）处理影像、氛围感照片调色
- 渐层：仅限细微的同色调过渡
- 构图：脱格编辑风偏移、不对称拉扯
- 强烈的字体排版对比

如果用户说 **"cinematic" / "atmospheric" / "premium" / "luxury" / "bold"**：
- Hero Scale：Giant Statement
- 背景模式：满版影像加色调叠层、柔和放射状晕影（vignette）+ 产品、微噪点渐层
- 渐层：欢迎使用与色盘匹配的电影感渐层
- 构图：左下压在背景图上、置中偏低、图片即画布

如果用户说 **"SaaS" / "product" / "dashboard" / "fintech" / "infra"**：
- Hero Scale：Mid Editorial
- 背景模式：素色 + 内嵌素材、平面色块 + 细节裁切，偶尔用编辑风侧边图
- 渐层：非常细微、只用色盘匹配的
- 构图：清晰的产品取景、以信任感为导向的 anchor
- 实现清晰度略微调高

如果用户说 **"agency" / "creative studio" / "portfolio"**：
- Hero Scale：Giant Statement 或 Mini Minimalist（果断二选一）
- 背景模式：大胆变化（满版影像、色块双联画、duotone）
- 渐层：可接受编辑风的色彩渲染（color wash）
- 构图：脱格、海报感

如果用户说 **"e-commerce" / "shop" / "store" / "product page"**：
- Hero Scale：Mid Editorial，强烈聚焦产品
- 背景模式：满版产品照、柔和放射状晕影 + 裁切、平面色块 + 细节
- 渐层：细微，绝不与产品抢戏
- 构图：以产品主导；CTA 必须一目了然

如果 brief 没有提到风格：
- 使用 §1 + §2 的默认值，背景运用要有自信、有变化
- 果断选定一种 Hero Scale，不要骑墙

brief 要求克制时，绝不硬塞背景、渐层或 full-bleed 处理；brief 要求氛围时，也绝不把它们拔掉。

---

## 2. 组合式变化引擎
为了避免输出一看就是重复的 AI 风格，内部要根据 prompt 从每个类别各选一个选项，并贯彻到底。

不要把所有东西搅在一起变成混乱。
挑一组强力组合，清楚运行。

### 主题典范（Theme Paradigm）
选 1：
1. Pristine Light Mode（纯净亮色模式）
   米白／奶油／纸张色调，锐利的深色文本，编辑风的自信。
2. Deep Dark Mode（深邃暗色模式）
   炭黑／石墨／锌灰，只在有理由时才用优雅的光晕。
3. Bold Studio Solid（大胆工作室纯色）
   强烈但受控的色面，如牛血红、宝蓝、森林绿、朱红或祖母绿，搭配俐落的对比 UI。
4. Quiet Premium Neutral（安静高级中性色）
   骨白、沙色、灰褐、石灰、烟灰，柔和对比，克制的奢华。

### 背景性格（Background Character）
选 1：
1. 细微的技术感 grid／点阵场
2. 纯色面搭配柔和的环境渐层深度
3. 满版电影感影像，并妥善控制对比
4. 安静的纸张／材质／触感表面质地

### 字体排版性格（Typography Character）
选 1：
1. Satoshi 风格的干净 grotesk
2. Neue Montreal 风格的精致 grotesk
3. Cabinet / Clash 风格的表现性 display 字体
4. Monument 风格的压缩宣言式字体排版
5. 优雅的编辑风衬线 + 无衬线配对
6. 瑞士理性无衬线，阶层极度分明

绝不滑向无聊的缺省网页字体气质。

### Hero 架构（Hero Architecture）
选 1：
1. 电影感置中极简（Cinematic Centered Minimalist）
2. 不对称分割 Hero（Asymmetric Split Hero）
3. 漂浮拍立得散落（Floating Polaroid Scatter）
4. 行内巨型字体（Inline Typography Behemoth）
5. 编辑风偏移构图（Editorial Offset Composition）
6. 巨幅影像优先 Hero，文本克制（Massive Image-First Hero）

### Section 系统（Section System）
选 1 种主导结构：
1. 严谨的模块化 bento 节奏
2. 交替式编辑风区块
3. 海报式堆栈叙事
4. 艺廊主导的视觉节奏
5. 瑞士 grid 纪律
6. 不对称高级行销流

### 招牌组件组（Signature Component Set）
精选恰好 4 个独特组件：
- 对角交错方格 Masonry（Diagonal Staggered Square Masonry）
- 3D 层叠卡片牌组（3D Cascading Card Deck）
- Hover 手风琴切片布局（Hover-Accordion Slice Layout）
- 纯净无缝 Bento Grid（Pristine Gapless Bento Grid）
- 无限品牌跑马灯条（Infinite Brand Marquee Strip）
- 旋转拍立得弧列（Turning Polaroid Arc）
- 垂直节奏线（Vertical Rhythm Lines）
- 脱格编辑风布局（Off-Grid Editorial Layout）
- 产品 UI 面板堆栈（Product UI Panel Stack）
- 分割见证引言墙（Split Testimonial Quote Wall）
- 超大指标数字条（Oversized Metrics Strip）
- 层叠影像裁切框（Layered Image Crop Frames）

### 隐含动态语言（Motion-Implied Language）
精选恰好 2 个：
- 逐字滚动显露（scrubbing text reveal）的能量
- 钉住式叙事 section（pinned narrative）的能量
- 交错上浮（staggered float-up）的能量
- 视差影像漂移（parallax drift）的能量
- 滑顺手风琴展开的能量
- 电影感淡入淡出（fade-through）的能量

### 构图 Anchor（每个 section 各选）
**左文右图**版型可以用，但它是被 AI 用到最烂的版型——不要当缺省。只有在它真的是最佳选择时才伸手拿。

每个 section 挑 1 个 anchor；整个网站至少要出现 3 种不同 anchor；hero 要变化构图，别让页面一开场就是 AI 缺省款。
- 置中宣言
- 左上起头，右下辅助
- 左下文本压在背景图上
- 右下 CTA 群组
- 左三分之一说明文本 + 右三分之二视觉（经典款——省着用，绝不连用两次）
- 右三分之一说明文本 + 左三分之二视觉（反转经典款）
- 置中偏低（文本位于 hero 图下方 40% 区域）
- 脱格编辑风偏移（不对称拉扯）
- 垂直堆栈置中（标签 / 标题 / 副标 / CTA 全置中，极致极简）
- 图片即画布，文本叠放在干净的安全区域

### 背景模式（每个 section 各选）
每个 section 挑 1 种；整页要有变化，绝不能全部同一种模式。用背景要**有自信**——背景是主要工具，不是风险。
- 素色表面 + 内嵌素材
- 细微纹理／纸张／grid 作为背景
- 满版影像背景 + 色调叠层（文本保持高度易读）
- 编辑风侧边图（50/50、60/40、40/60——可左右翻转）
- 影像即整个视觉 + 文本叠放在干净的安全区域
- 平面色块 + 小型产品／细节裁切作为点缀
- 电影感同色调渐层（与色盘匹配、低彩度、专业）
- 强烈调色的氛围照片（单色调调色，呼应品牌氛围）
- Duotone 处理影像（双色照片处理，锁定色盘）
- 柔和放射状晕影 + 产品裁切（奢华／编辑风质感）
- 素色上的微噪点渐层（高级触感深度，不浮夸）
- 色块双联画（两个平面色域相接，现代主义感）

### CTA 变化
为每个 section 挑合适的 CTA 样式，不要每次都是缺省胶囊按钮：
- 经典主要胶囊按钮
- Outline / ghost 按钮
- 带箭头的底线行内链接
- 横幅式全宽 CTA
- 超大标题 + 极小 CTA 提示
- CTA 作为强视觉下方的图说

整个网站的 CTA 样式至少要变化一次。页面的主要行动仍须一目了然。

### Hero 尺度（整页选一次）
选 1——必须符合品牌氛围：
- Giant Statement Hero（巨型字体、大幅影像、主宰第一屏）
- Mid Editorial Hero（字图均衡、有电影感但不占满屏幕）
- Mini Minimalist Hero（小 logo + 短宣言 + 纤细 CTA，几乎没有影像，大量负空间）

Mini 不代表软弱——它代表有自信的克制。

### 叙事／概念主轴（Narrative / Concept Spine）
选 1，让它贯穿整页的视觉与短文案。
- 文物／收藏品——证物、标本、珍藏对象的框架
- 旅程／朝圣——方向性流动、路标式 section、roadmap 的感觉
- 工具／精密仪器——机械加工细节、校准过的 UI、有触感的控件
- 生命系统／花园——有机生长隐喻、分枝式布局、被照料的语气
- 舞台／聚光灯——剧场式对比、表演者与观众的框架
- 文件库／卷宗——索引式列表、图说、低调的权威感

### Second-Read Moment
精选恰好 1 个不落俗套但仍清晰易读的母题（motif），刻意地放置，整页只出现一次：
- 仍尊重阶层的不对称出血（bleed）
- 一个承担结构功能的超大标点或数字
- 单一一次出人意料的材质切换（纸张 vs 光泽 vs 金属点缀）
- 窄幅垂直侧栏的编辑风注记样式
- 自然带出品牌色的微距裁切
避免为了噱头而噱头：这个 moment 必须有助于扫视顺序或品牌记忆。

重要：
这些不是 coding 指令。
它们是生成的设计应该暗示出来的视觉方向线索。

---

## 3. 前端参考规则
每张生成的图片都必须清楚传达：
- 布局
- section 阶层
- 间距（spacing）
- 字体排版尺度
- 视觉节奏
- CTA 优先序
- 组件样式
- 影像处理方式
- 整体 design system

开发者或 coding model 看着这张图，就应该知道怎么把它做出来。

当需求是前端时，不要产出模糊的抽象艺术。

---

## 4. HERO 极简规则
Hero 必须有电影感、清晰且有意图。

### Hero 构图偏误
**左文右图 hero 是被 AI 用到最烂的 hero 版型**。可以用，但不该是你的缺省起手式。

除非左文右图真的是最强选择，否则优先从这些里面挑：
- 置中宣言压在满版影像上（文本位于下方 40%）
- 左下文本压在背景图上
- 右下文本压在背景图上
- 左上起头，右下辅助
- 垂直堆栈置中（标签 / 标题 / 副标 / CTA 全置中）
- 图片即画布，文本叠放在干净的安全区域
- 右文左图（反转经典款）
- 脱格编辑风偏移
- Mini Minimalist Hero（小 logo + 短宣言 + 纤细 CTA，大部分是负空间）

### 输出前自检
渲染 hero 图之前先问自己：“我是不是又习惯性地在画缺省的左文右图版型？”如果是，除非 brief 或品牌真的需要经典款，否则改从上面清单挑别的 anchor。

### Hero 绝对规则
- hero 必须像一场强而有力的开场戏
- 保持 hero 构图干净
- 不要把第一屏塞爆
- 主标题必须简短有力
- 标题通常应该像 5-10 个有力的字词，而不是一段话
- 辅助文本保持精简
- 优先考虑负空间与对比
- 避免在 hero 里塞满胶囊标签、假数据、徽章、迷你 logo 和无意义的细节

### 标题规则
H1 在视觉上要读起来像一句高级宣言。
不要让它显得冗长、软弱或换行过多。

### 字体排版运行
优先：
- medium / normal / light 的优雅字重
- 紧凑字距（tight tracking）
- 受控的行数
- 强烈的尺度对比

避免：
- 到处乱用 extra-bold 大声嚷嚷
- 把渐层文本当成偷懒的高级感特效
- 6 行长的新创公司式标题
- 一看就是生成出来的文本处理

### 图形克制
不要缺省使用：
- 巨大而无意义的空心数字
- 看起来廉价的 SVG 填充图形
- 泛用 AI blob
- 随机的光球杂物

改用：
- 字体排版
- 影像裁切
- 真实的布局张力
- 高级材质
- 有力的取景
来取代。

---

## 5. 图片数量与页面切分

### 这是最重要的输出规则
**每个 section 各产生一张独立的横向图片**。永远如此。

- 绝不把多个 section 合并进单一图片
- 绝不返回一张包含整页的长条直式切片
- 绝不只返回一张“最好的”图然后跳过其余的
- 绝不用一张拼贴取代多个 section

如果需求对 section 数量语焉不详，**缺省往多的抓**：
- “hero” -> 1 张图
- “landing page”／“site template” -> 缺省 6 个 section -> 6 张图
- “full website” -> 缺省 8 个 section -> 8 张图
- “marketing site” -> 缺省 8 个 section -> 8 张图
- “product page” -> 缺省 6 个 section -> 6 张图
- “portfolio” -> 缺省 6 个 section -> 6 张图

如果模型一次调用只能渲染一张图，就**在同一则回复中依序生成**，一张接一张，标注“Section X of N: <名称>”，直到整组交付完成。

### 格式
- 一律横向（16:9、16:10 或 21:9，视密度而定）
- 每张图以高拟真度渲染一个聚焦的 section
- Hero 通常用 16:9 或 21:9；较窄的内容 section 可用 16:10

### 计数规则
- 1 个 section -> 1 张横向图
- 4 个 section -> 4 张横向图
- 8 个 section -> 8 张横向图
- 12 个 section -> 12 张横向图

不要把多个 section 压成一张长条直式切片。section 的大小与密度仍可变化，但画布保持横向，且**一个画框只放一个 section**。

### Section 大小变化
整个网站要刻意混搭 section 的企图心：
- 有些 section 大幅、内容丰富、有艺术指导
- 有些 section 迷你、极致极简、大部分是负空间
- 有些 section 是中等的编辑风区块

这种节奏创造出高级的滚动景观（scrollscape），而不是一块块均一的厚板。

### 连续性规则
所有逐 section 图片必须维持同一个品牌世界：
- 同一套色盘与点缀色逻辑
- 同一个字体家族与尺度
- 同一个 CTA 家族（样式可变化，识别不可变）
- 同一套圆角（border radius）语言
- 同一种影像处理（调色、材质、取景）
- 任何短文案都用同一种语气

观看者滑过所有画框时，必须读起来像同一个网站。

---

## 6. 创意升级规则
设计必须展现真正的创意企图心。

不要满足于第一个想到的显而易见的布局解法。
把作品推到 generic SaaS 版型之外。

主动强化以下至少 3 项：
- 更强的构图
- 更有辨识度的字体排版
- 更有自信的尺度对比
- 更令人印象深刻的 hero 概念
- 更有趣的影像处理
- 更有表现力的 section 节奏
- 更原创的取景／裁切
- 更有艺术指导感的视觉张力
- 更出人意料但依然清晰的布局结构

创意必须让人感觉是有意为之，不是混乱。

要做：
- 做大胆但受控的设计决策
- 在能让页面更好时使用不对称
- 创造有高级感、令人记住的视觉时刻
- 让页面看起来是被设计出来的，不是自动生成的

不要做：
- 缺省套用安全的模板布局
- 太频繁重复同一种区块结构
- 把创意跟杂乱混为一谈
- 让页面过度拥挤

---

## 7. 影像优先的艺术指导
这个 skill 必须主动使用影像。

影像不是可有可无的装饰。
影像是前端设计语言的核心部分。

强烈优先：
- 有艺术指导的摄影
- 产品影像
- 编辑风影像
- 影像裁切
- 带框的影像面板
- 层叠的影像构图
- 以影像主导的 hero section
- 以影像辅助的叙事区块

用影像来：
- 创建视觉阶层
- 打散文本过多的布局
- 营造氛围与品牌性格
- 支撑 section 之间的转场
- 让设计更容易解读与实现

重要：
- 除非用户明确要求，设计不应沦为纯文本或纯卡片
- 如果页面有多个 section，其中几个 section 应该有实质意义地包含影像
- 如果有 hero，它通常应该包含一个强视觉影像、产品视觉或有艺术指导的媒体元素
- 影像要有高级感和意图，不能像 stock 图充数

避免：
- 小到没用的缩略图
- 没有结构角色的随机装饰图
- 只放一张图，然后整页其余全是文本
- 滥用假 UI 面板来取代真正的视觉变化

---

## 8. 反 AI 垃圾（Anti-AI-Slop）规则
除非明确被要求，严格避免以下模式。

### 布局垃圾
- 没完没了的置中 section
- 一个 section 接一个 section 重复的相同卡片列
- 拷贝粘贴的左文右图区块
- 到处都是工整但死气沉沉的对称
- 没有阶层的假复杂度
- 没有目的的空洞装饰性空间

### 视觉垃圾
- 缺省的紫蓝色 AI 渐层
- 太多发光边缘
- 到处漂浮的球体／blob
- 毫无理由堆栈的 glassmorphism
- 没有结构的随机未来感细节
- 过度渲染、盖住布局的噪音

### 字体排版垃圾
- 巨大标题 + 软弱的小字副标
- 一页里塞太多种字体情绪
- 别扭的断行
- 偷懒地到处用全大写
- 把渐层标题当成“高级感”的捷径

### 内容垃圾
禁用这类 generic 文案调调：
- unleash
- elevate
- revolutionize
- next-gen
- seamless
- powerful solution
- transformative platform

避免假品牌垃圾：
- Acme
- Nexus
- Flowbit
- Quantumly
- NovaCore
- 一看就是瞎掰的字标（wordmark）

使用简短、可信、对设计友善的文案。

### 密度垃圾
- 不要过度拥挤的 section
- 不要每个区块都卡片轰炸
- 主要 section 之间不要间距过小
- 不要试图填满每一块空白
- 不要视觉上令人疲乏的内容墙布局

### 跑马灯／Marquee 垃圾（布局）
- 重复同样 6 个色块的无限 logo 条
- 小到像蚊子、根本读不清的“trusted by”跑马 logo
- 没有语意目的、仿自动轮播的 hero 圆点

### 数据／KPI 垃圾
- 三栏一模一样的统计数字（99% 满意度、省下 $10、∞ 扩展性），除非用户要求 KPI
- 用无意义图表屏蔽真实布局的假 dashboard

---

## 9. 字体排版优先的纪律
字体排版不是填充物。
字体排版是主要的设计素材。

永远确保：
- 清晰的尺寸对比
- 一目了然的阅读顺序
- 强而有力的 display 时刻
- 易读且精简的辅助文本
- 能强化结构的标签、图说与 section 标题

编辑风方向：
- 让字体排版塑造构图

科技／产品方向：
- 让字体排版传达信任与精准

---

## 10. SECTION 节奏规则
高端网站不会让人觉得是一个个重复的盒子。

通过改变以下要素，让整页的 section 节奏有变化：
- 密度
- 图文比例
- 对齐方式
- 尺度
- 留白
- 卡片群组方式
- 背景强度
- 视觉节拍

不要让每个 section 都像从同一个模板生出来的。

重要：
- 节奏变化不应破坏整体的干净感
- 让页面从头到尾保持视觉平衡
- section 高度可以变化，但 section 之间的间距要有控制、大致均匀
- 避免非常小的 section 和非常大的 section 之间毫无缓冲地突兀跳接
- 整个页面要让人感觉经过策展、流畅且一致

---

## 11. 组件运行准则

### 对角交错方格 Masonry
使用方形影像或内容区块，带有强烈的交错垂直节奏。
要有策展感和图像感，不能杂乱。

### 3D 层叠卡片牌组
卡片像实体牌堆一样层叠，带有深度逻辑。
要有高级感和触感，不能像噱头。

### Hover 手风琴切片布局
一排压缩的视觉切片，看起来可以展开。
在静态图中，通过比例与强调清楚暗示交互性。

### 纯净无缝 Bento Grid
数学般干净的 grid。
不能有意外的缝隙。
大型视觉区块与较小的密集信息面板混搭。

### 旋转拍立得弧列
群聚、带旋转角度的影像，构图优雅。
要有造型感和意图，不能像随手乱贴的剪贴板。

### 脱格编辑风布局
在控制之下运用不对称与张力。
必须保持易读且结构清晰。

### 产品 UI 面板堆栈
层叠 UI 界面或接口裁切，暗示产品故事。
避免 generic 的假 dashboard。

### 垂直节奏线
用细线和间距系统强化秩序与优雅。
绝不让它们沦为装饰性杂物。

---

## 12. 密度与间距纪律
不要把所有东西做得太密。

页面要能呼吸。
section 之间的空白要比缺省 AI 生成设计再多留一点。

规则：
- 主要 section 之间使用更均匀的垂直间距
- 除非有强烈的设计理由，section 到 section 的间距保持一致
- 避免一个 section 非常拥挤、下一个却空荡荡
- 整页优先采用干净、平衡的节奏
- 让负空间创造节奏与强调
- 用较平静的 section 隔开较密集的 section
- 避免把太多卡片、标签和内容区块叠得太紧
- 较小的 section 周围也要有足够空间，让页面显得精致、有意图

高级的页面应该让人感觉：
- 开阔
- 沉着
- 平衡
- 自信
- 有呼吸感

而不是：
- 拥挤
- 嘈杂
- 失衡
- 塞满
- 视觉疲乏

section 节奏应在控制下交替：
- 有些 section 可以内容较丰富
- 有些 section 可以较小、较平静
- 但整体的间距节奏仍应均匀、干净且刻意

留白（whitespace）是设计工具。
刻意地使用它。
不要让间距沦为随机。

---

## 13. 色彩与材质规则

### 色盘纪律
整个网站使用一套受控的色盘：
- 1 个主色（品牌锚点）
- 1 个次色（辅助色调）
- 1 个点缀色（节制地用于 CTA／重点）
- 一组中性色阶（背景、表面、文本、发丝线）

section 层级的氛围转换必须重用同一套色盘——不准每个 section 换一整套主题。

### 背景图的和谐
使用满版影像背景时：
- 影像的色调必须与色盘相合（不能打架）
- 使用叠层（深色、浅色或色彩染色）确保文本完全易读
- 无论背景图为何，品牌点缀色保持一致

### 渐层纪律
渐层在专业且细微的前提下**允许且鼓励使用**。它们和 AI 垃圾渐层不是同一回事。

允许（放心使用）：
- 低彩度、与色盘匹配的同色调渐层（例如墨黑到石墨、奶油到沙色、象牙白到暖灰）
- hero 摄影后方的单色氛围调色
- 引导视线的柔和晕影与放射状深度
- 增添触感深度而不带色彩噪音的噪点纹理渐层
- 呼应品牌氛围的编辑风色彩渲染

禁止（AI 垃圾渐层）：
- 彩虹／mesh blob 渐层
- 紫到蓝的“AI”缺省款
- 粉到橘的“创作者”缺省款
- 毫无目的的霓虹边缘与光晕
- 把渐层文本当成“高级感”的捷径
- 与影像抢戏而非辅助影像的渐层

### 背景自信规则
不要缺省退回纯白表面。当 brief、品牌氛围或 section 的任务需要氛围时，使用：
- 满版影像、
- duotone 或调色照片、
- 同色调渐层、
- 有触感的材质、
或一块有自信的平面色域——刻意挑选，而不是当装饰。

### 强力指引
- 避免彩虹式的随机用色
- 除非被要求，避免过度霓虹
- 对比要有意图
- 点缀色要配合选定的主题典范
- 渐层永远必须读起来专业且有意图，绝不能是视觉噪音

### 材质感（Materiality）
适当时加入：
- 纸张质感
- 玻璃质感
- 拉丝金属质感
- 柔和的模糊深度
- 有触感的雾面表面
- 编辑风照片处理

但永远保持前端结构清晰可读。

---

## 14. 影像／媒体指导
如果有影像，它必须支撑布局。

允许：
- 有艺术指导的产品视觉
- 精致的编辑风摄影
- UI 裁切
- 具结构目的的抽象形体
- 带框的对象
- 高级纹理运用
- campaign 风格的视觉

避免：
- 不相干的风景
- stock 照片的陈腔滥调
- 装饰性垃圾
- 压过页面阶层的视觉

---

## 15. 缺省网站组合包

### 4 个 section 的组合包
1. Hero
2. 功能特色（Features）
3. 社会证明／见证（Social proof / testimonial）
4. CTA

### 8 个 section 的组合包
1. Hero
2. 信任条（Trust bar）
3. 功能特色
4. 产品展示
5. 效益／使用情境
6. 见证
7. 定价
8. CTA

### 12 个 section 的组合包
1. Hero
2. 信任条
3. 功能格（Feature grid）
4. 产品预览
5. 问题／解方
6. 效益
7. 工作流程
8. 指标／证明／集成
9. 见证
10. 定价
11. FAQ
12. CTA + footer

---

## 16. 多图一致性规则
因为每个 section 都是独立的一张图，一致性至关重要。所有逐 section 画框必须贯彻：
- 同一个品牌世界
- 同一套字级尺度逻辑
- 同一套间距纪律
- 同一个 CTA 家族（样式可变化，识别不可变）
- 同一种 icon 或插画情绪
- 同一种影像处理（调色、取景、材质语汇）
- 任何文案都用同一种语气

允许变化的部分：
- 构图 anchor（每个 section 各异）
- 背景模式（每个 section 各异）
- section 的大小与密度
- second-read moment 出现在哪里

观看者翻阅每一张逐 section 画框时，仍必须认得出这是同一个品牌。任何破坏品牌记忆的东西都是过度变化。

---

## 17. 清晰度检查
定稿前，在内部逐项确认：

1. 阶层是否一目了然？
2. hero 够不够干净？
3. 设计在视觉上是否有辨识度？
4. 是否没有明显的 AI 痕迹？
5. 是高级感而非模板感吗？
6. 有人能照着这个写出代码吗？
7. 如果有多张图，它们是否明显属于同一组？
8. 影像用得够不够有力（有变化，不是同一张裁切重复用）？
9. 页面能呼吸吗，还是太密了？
10. section 之间的间距够吗？
11. 创意是否让人感觉有意图且高级（看得到概念主轴、不杂乱）？
12. section 之间的间距是否均匀、受控？
13. 较小的 section 周围是否仍有足够空间、显得干净？
14. 是否恰好有一个有纪律的 second-read moment 在支撑扫视顺序？
15. 各 section 的构图是否有变化（anchor 与背景模式有混搭）？
16. hero 尺度（giant / mid / mini）是否选定并干净地运行？
17. 即使是艺术性网站，是否仍有清晰的转换路径（勾引 -> 佐证 -> 行动）？
18. 所有逐 section 图片的色盘是否一致？
19. 每张图是否都是横向、且只含一个 section？
20. **图片总数是否等于 section 数量**（绝不能少）？
21. hero 是否用了有变化的构图（没有习惯性地缺省左文右图）？

如果没过，就在内部修正后再输出。如果数量不对，就补生成缺少的 section。如果 hero 感觉像反射性的左文右图缺省款，就改用别的构图 anchor。

---

## 18. 额外创意与实现优势

除非用户主动退出，否则一律套用：

### 跨 section 对比
在整个页面切片中，刻意让前景／背景强度至少变化两次（较亮 → 较浓 → 较平静），让滚动有节奏感，而不是单调的厚板。

### CTA 明确性
每个主要窗口层级只留一个不会认错的主要行动；次要行动必须看起来就是次要的（尺度、outline、ghost），不能是主要行动的拷贝品。

### 单一设计稿内的影像多样性
有多个 section 时，至少混用**两种截然不同的影像裁切**——例如微距产品 + 情境环境，或直式编辑风 + 宽幅对象——避免同一个 stock 剪影重复出现。

### 数据可视化克制
图表、sparkline 与统计图只在网站类型逻辑上需要时出现（分析、定价、infra、可观测性品牌）。否则证明就保持人味（引言、实据、时间轴、真实工作流程的截屏）。

### 文化／语调对齐
brief 点名产业或地区时，色盘与字体排版的气质要跟着调整——除非 brief 刻意就是 generic SaaS，否则不要发布缺省的“中性旧金山新创风”。

### 隐含移动设备拟真度（即使是桌面设计稿）
视觉上维持适合点按的触摸尺寸与可读的图说字级；堆栈顺序应暗示一个合理的单栏叙事。

### 转换焦点
每个 section 都有任务。就算设计很艺术，页面仍必须读起来像真实的产品或品牌网站：
- hero 在数秒内传达价值，并提供一个明显的下一步行动
- 证明类 section（logo、引言、指标）要让人觉得实至名归，不是硬塞
- 定价或 CTA section 要果断，不能被埋没
- 最后一个 section 收尾：一个强力 CTA + 辅助的信任线索
避免毫无漏斗逻辑的纯氛围视频式页面。

### 构图多样性检查
在所有逐 section 图片中，内部记录每个 section 选用的构图 anchor 与背景模式。出现以下情况就整组打掉重来：
- 同一个构图 anchor 连续重复超过 2 个 section
- 同一种背景模式连续重复超过 3 个 section
- 每个 section 都是内嵌素材（从头到尾没有出现任何满版背景）**且** brief 并未要求极简／纯字体排版／swiss／极度简约

非极简 brief：任何多 section 网站都要争取至少一个满版（或 duotone／氛围感）背景，以及至少一个 mini minimalist section。

极简 brief：本规则暂停。克制本身就是设计。

---

## 19. 回应行为
用户要求前端设计时：
1. 推断网站类型与主要转换目标
2. 推断 section 数量（不明确时，用 §5 的默认值：landing page = 6，full website = 8）
3. **明确承诺** section 数量并声明出来（“Generating N horizontal images, one per section”）
4. 规划每个 section 一张横向图——永远分开生成，绝不合并
5. 为整个网站选定 Hero Scale（giant / mid / mini）
5. 选一组强力的视觉组合（主题、字体、hero 架构、section 系统、动态、叙事主轴、second-read moment）
7. 为每个 section 挑选构图 Anchor、背景模式与 CTA 变化——跨 section 要有变化
8. 选 4 个招牌组件，在各 section 中适当运用
9. 落实 hero 极简 + section 大小变化（有的巨大、有的迷你）
10. 落实强力的影像运用，包括在合适之处使用满版背景
11. 锁定一套贯穿所有图片的一致色盘
12. 套用 §18 额外创意与实现优势
13. 保持间距宽裕、均匀、干净
14. 移除 AI 垃圾（包括跑马灯／假 KPI 陈腔滥调，除非被要求）
15. 运行 §17 清晰度检查
16. **生成每一张逐 section 横向图，标注“Section X of N: <名称>”**，直到整组交付完成。不要提早停。不要摘要。不要只返回一张图。

如果已能做出有力的诠释，就不要问不必要的追问。

---

## 20. 诠释范例

### 范例 1
用户：“make a hero section for an AI startup”

诠释：
- 1 张横向图
- Hero Scale：Mid Editorial 或 Giant Statement
- 构图 Anchor：左下文本压在满版产品／氛围图上
- 背景模式：满版影像 + 深色色调叠层
- CTA 变化：outline 行内式 + 小标签提示
- 色盘：Deep Dark 或 Bold Studio Solid，一个一致的点缀色
- 不要陈腔滥调的 dashboard 轰炸，不要紫色 AI 光晕

### 范例 2
用户：“design 8 sections for a fintech website”

诠释：
- 8 张独立横向图（每个 section 一张）
- Hero Scale：Mid Editorial（以信任感为导向）
- 跨 section 变化构图 Anchor（置中偏低、右三分之一说明文本、左下压在图表视觉上、收尾 CTA 用垂直堆栈置中）
- 背景模式混搭：素色表面、满版影像背景用一次、使用情境处用编辑风侧边图
- 一套一致的色盘（例如墨黑 + 纸白 + 单一品牌点缀色）
- 转换路径：勾引 -> 证明条 -> 功能 -> 使用情境 -> 见证 -> 定价 -> FAQ -> 最终 CTA

### 范例 3
用户：“creative agency landing page, 12 sections”

诠释：
- 12 张横向图（每个 section 一张）
- Hero Scale：Giant Statement 或 Mini Minimalist（果断选择，不要中庸）
- 编辑风／海报式方向；脱格构图出现 2-3 次
- 多种背景模式（hero 与作品展示用满版影像、案例研究用编辑风侧边图、流程用素色 + 点缀）
- 色盘全程一致，一个大胆的点缀色反复出现
- 收尾 CTA section：mini minimalist、强力字体、单一主要行动

---

## 21. 最终目标
生成的前端参考图必须让人感觉：
- 有艺术性
- 高级
- 清晰
- 有结构
- 以影像主导
- 有呼吸感
- 令人记住
- 反 generic
- 便于实现

成果应该看起来像顶级的网站概念——有强力影像、有自信的创意、宽裕的间距，而不是一个密集、重复的 AI 布局。