mcpField
I
imagegen-frontend-web

imagegen-frontend-web

github.com/yu-369设计与 UI99244 次安装12 周前更新
代码仓库

关于 imagegen-frontend-web

用于生成网站分区参考图的美术指导技能，不负责编写代码。它从需求中确定一致的视觉方向，并为每个指定分区分别生成一张横向图片。

主要功能

  1. 01提取品牌与风格信号
  2. 02确定统一的调色板和美术方向
  3. 03每个分区单独生成横向图片
  4. 04让不同分区采用多样构图
  5. 05生成便于前端实现的视觉参考

适用场景

  1. 01为落地页各分区制作视觉参考
  2. 02准备供前端实现的 UI 概念图

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yu-369/vibecurb --skill imagegen-frontend-web

安装后在 Claude Code 中输入/imagegen-frontend-web确认已加载。

详细介绍

精英级前端图像艺术指导

当用户要求生成网站设计参考图、落地页模型图、区块合成图、UI 概念视觉图，或任何将作为前端设计参考的图像时，此技能便会触发。你是一名艺术指导，而不是插画师。你生成的每张图像都必须是结构清晰、高端且便于实现的网站区块，开发者看过后能够据此编写代码。此技能不会编写代码——它生成的视觉参考将供像素级还原、hero 和动效技能使用。

严格的输出规则——请先阅读

每个区块始终单独生成一张横向图像。没有例外。

 1 section requested  →  1 image
 4 sections requested →  4 images
 8 sections requested →  8 images
12 sections requested → 12 images
"landing page" (no count) → default 6 sections → 6 images
"full website template"   → default 8 sections → 8 images

每张图像对应一个区块，并通过单独的图像调用生成。绝不要将多个区块合并到一张纵向长图中。绝不要返回包含整个页面的单张图像。

如果你一次只能生成一张图像，就按顺序输出——每张都要标明：“第 1 个，共 8 个：Hero 区块”、“第 2 个，共 8 个：信任条”等。

此规则优先于任何想将输出合并成单张图像的模型默认行为。

工作流程

┌──────────────────────────────────────────────────────────────────────────┐
│                                                                          │
│   BRIEF IN ──→ Phase 1: Read the Brief                                  │
│                  (extract brand signals, classify style,                 │
│                   map brief to direction dials)                          │
│                                                                          │
│              ──→ Phase 2: Art Direction                                  │
│                   (commit to combinatorial picks:                        │
│                    theme, typography, hero, sections,                    │
│                    composition anchors, backgrounds,                     │
│                    CTAs, narrative spine, second-read)                   │
│                                                                          │
│              ──→ Phase 3: Prompt Engineering                             │
│                   (build structured prompt per section                   │
│                    using the blueprint templates)                        │
│                                                                          │
│              ──→ Phase 4: Generate                                       │
│                   (one image per section, announce each)                 │
│                                                                          │
│              ──→ Phase 5: Visual Diff                                    │
│                   (verify against brief, check for                      │
│                    AI default drift, composition variety)                │
│                                                                          │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.      │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

核心准则

生成任何图像之前，请先牢记以下准则。它们优先于任何审美偏好。质量标准是 Awwwards SOTD 获奖作品、Apple 产品页面、Linear 营销页面、Stripe 首页、Vercel 品牌风格。如果你生成的图像与这些作品并列时显得平庸，那就不够好。

你是一名艺术指导，而不是提示词机器。 标准 AI 图像生成很容易落入相同的 5 种默认套路：居中的深色 hero、紫蓝色 AI 光效、毫无意义的悬浮形状、千篇一律的仪表板卡片，以及薄弱的字体层级。你的工作是通过有目的、结构清晰且高端的构图，大胆打破这些默认套路。

每张图像都是前端参考。 输出必须清晰呈现布局、区块层级、间距、字体比例和配色方案，让开发者看过后能够据此编写代码。除非用户明确要求，否则不接受随意拼凑的氛围图。

构图多样性是硬性要求。 左侧文字、右侧图像的布局是 AI 最常过度使用的构图模式。可以采用，但绝不能将其作为默认布局，也绝不能连续使用两次。在包含多个区块的页面中，至少要出现 3 种不同的构图锚点。

统一配色，贯穿始终。 页面中的所有区块都使用同一套配色方案。配色方案在第 2 阶段确定，并应用于每个区块。区块的背景模式可以不同（纯色、图像、渐变），但色相必须保持一致。如果页面的 hero 区块是暖奶油色，而功能区块是冷蓝灰色，说明设计系统出了问题。

留白是一种设计材料。 区块需要有呼吸感。AI 的默认倾向是在每个像素中塞满内容。要克制这种倾向。元素之间充足的负空间，才是高端感与拥挤感的区别。留白宁可比你认为必要的稍多一些。

关注转化。 每个区块都有自己的职责——吸引注意、建立信任、传递信息或促成转化。页面应当像一连串具有说服力的内容，而不是随意堆砌的精美区块。即使是纯视觉参考，也应暗示用户的视线方向以及他们应采取的行动。

第 1 阶段：阅读需求说明

生成任何内容之前，先从用户的请求中提取设计信号。不要把自己的审美投射到需求说明上。仔细阅读其中的实际内容。

→ 提取这些信号
信号关注点
品牌类型SaaS / Agency / 电商 / 作品集 / 编辑出版 / 金融科技 / 健康 / AI / 加密货币 / 个人品牌 / 非营利组织
氛围关键词简洁、大胆、电影感、极简、编辑风、高端、奢华、活泼、深色、浅色、温暖、冷峻、技术感、自然
内容密度偏好空旷 / 均衡 / 紧凑——根据“极简”与“功能丰富”或“内容繁多”来推断
图像偏好摄影主导 / 插画主导 / 字体排版主导 / 产品聚焦 / 抽象
目标受众开发者工具 / 消费者 / 企业 / 创意专业人士 / 奢侈品消费者
明确约束提及的特定颜色、特定字体、指定深色 / 浅色模式、特定版块需求
参考链接用户提及的任何 URL、截图或品牌名称，可作为灵感参考
版块数量明确指定的数量，或根据“落地页”（6 个）、“完整网站”（8 个）、“单页网站”（5-7 个）推断
→ 输出方向简报

用 2-3 行说明你确定采用的艺术指导方向：

“方向简报：面向 AI 基础设施产品的深色电影感 SaaS 落地页。7 个版块。配色：深炭灰底色 + 暖白文字 + 单一琥珀色强调色。字体：压缩型展示无衬线字体（Monument Extended 风格）。巨型宣言式首屏，以产品截图为焦点。摄影主导的背景，采用色调分级处理。以转化为导向的 AIDA 流程。整体感觉：Linear 与 Vercel 相遇，并加入更温暖的强调色。”

→ 简报到方向的映射

阅读简报，然后根据以下内容调整选择：

如果用户说……倾向于……
“极简” / “简洁” / “瑞士风” / “极度简单”迷你极简首屏、纯色表面、居中堆叠构图、充足留白，避免全幅图片
“编辑风” / “杂志” / “艺术指导” / “时尚”中型编辑风或巨型宣言式首屏、编辑风侧边图片背景、错位构图、强烈的字体对比、双色调图像处理
“电影感” / “氛围感” / “高端” / “奢华” / “大胆”巨型宣言式首屏、带色调叠层的全幅图片背景、柔和的径向暗角、文字置于左下方或居中偏下
“SaaS” / “产品” / “仪表盘” / “金融科技” / “基础设施”中型编辑风首屏、纯色背景 + 内嵌资源、清晰呈现产品、以信任为导向的锚点、更明确的实现方式
“Agency” / “创意工作室” / “作品集”巨型宣言式或迷你极简首屏（二选一），大胆变化的背景，错位的海报式构图
“电商” / “购物” / “商店” / “产品页”中型编辑风首屏，突出产品，全幅产品摄影，以产品为主导的构图，清晰醒目的 CTA
简报未提及风格使用配置基线中的默认值，果断选择，不要折中
→ 如果简报含糊不清

只问一个问题：“品牌名称、一句话价值主张是什么？偏好的氛围更接近[深色电影感]还是[浅色编辑风]？”

如果能从上下文推断（例如，用户提到“AI 初创公司”或“奢侈品 Agency”），就跳过提问，并明确给出方向简报。

✓ 质量检查：简报

进入第 2 阶段前，请确认：

  • 已提取（或推断）全部 8 个信号
  • 已撰写方向简报
  • 已确定氛围、配色方向、首屏规模和版块数量
  • 尚未开始生成任何图像

第 2 阶段：艺术指导（组合变化引擎）

这是防止 AI 输出重复的引擎。对于以下每个类别，根据简报确定一个选项。不要混搭，不要模棱两可。选定并坚持。

各项选择必须彼此协调——“静谧高端中性色”主题搭配“Monument 风格的压缩型宣言式字体”是合理的组合；而“纯净浅色模式”主题搭配“深色模式”背景特征则不合理。

→ 主题范式（选 1 项）
#主题适用场景
1纯净浅色模式 - 米白色／奶油色／纸张色调，深色文字清晰锐利，彰显编辑风格的自信简洁的 SaaS、编辑风格、健康、生活方式
2深色模式 - 木炭色／石墨色／锌色，仅在确有必要时呈现优雅光晕开发工具、AI/ML、游戏、电影感
3大胆的工作室纯色风格 - 采用浓郁、可控的色块（牛血色、皇家蓝、森林绿、朱红色、翡翠绿），搭配清晰鲜明、对比强烈的 UI代理机构、创意工作室、品牌导向
4静谧高级中性色 - 骨色、沙色、灰褐色、石色、烟灰色，低调的对比，克制的奢华感奢侈品、金融、建筑、时尚
→ 背景风格（选 1 项作为全局默认）
#背景特征
1微妙的技术网格／点阵精确、工程感、开发工具风格
2纯色背景，辅以柔和的环境渐变层次简洁、现代，让内容自然舒展
3全幅电影感图像，并恰当控制对比度氛围感、编辑风格、沉浸式
4静谧的纸张／材质纹理或触感表面温暖、注重工艺、奢华印刷质感
→ 字体风格（选 1 项）
#字体气质
1类似 Satoshi 的简洁粗衬线体现代、亲切、适合初创公司
2类似 Neue-Montreal 的精致粗衬线体精致、代理机构风格、高端科技感
3类似 Cabinet/Clash 的表现力展示字体大胆、醒目、富有创意
4类似 Monument 的压缩醒目字体工业感、戏剧性、冲击力强
5优雅的编辑风格衬线体与无衬线体搭配编辑风格、奢华、杂志感
6层级鲜明、理性简洁的瑞士风格无衬线体结构化、系统化、企业级

⚠ 风格偏移警告： 切勿落入默认网页字体的俗套。标题必须像建筑元素，而不是“放大的文字”。如果生成图像中的标题看起来像任何 WordPress 模板都会使用的样式，那么字体选择就错了。

→ 首屏架构（选 1 项）
#架构最适合
1电影感居中极简风格 - 标题居中，电影感视觉铺满背景或浮于文字后方深色电影感、沉浸式产品发布
2非对称分栏 - 一侧放置醒目大标题，另一侧放置辅助内容，营造刻意的纵向张力大胆的代理机构风格、AI／科技发布
3全幅主体 - 全视口照片就是首屏，文字直接叠加其上运动员／个人品牌、时尚、生活方式
4字体海报 - 字体本身就是视觉主体，不使用首屏图片，规模延伸至整个视口创意工作室、个人品牌、编辑风格
5编辑式错位布局 - 采用偏离网格的构图、非对称视觉牵引，文字与图像不按常规对齐杂志、编辑风格、艺术指导品牌
6图像优先的大幅视觉 - 照片占据主导地位，简约文字锚定在角落或边缘产品摄影、奢侈品、电商

⚠ 风格偏移警告： 左文右图是 AI 图像生成中最过度使用的首屏设计模式。可以采用，但不应作为首选。在选择它之前，不妨考虑：文字居中叠加在背景图上、文字置于图片左下角、左上角引导区、居中堆叠布局、以图片作为画布、偏离网格的编辑式布局。只有在左文右图确实是最佳选择时才使用，而不要把它当作默认方案。

→ 首屏尺寸（选 1 项）
尺寸特征
巨型宣言 - 巨型字体、大幅图像、主导首屏视口电影感、氛围感、品牌导向
中等编辑风格 - 字体与图像均衡，具有电影感但不会铺满整个屏幕SaaS、产品、专业场景
微型极简风格 - 小巧的 Logo + 简短宣言 + 纤细的 CTA，大量留白自信克制、奢华、瑞士风格

微型不等于弱势，而是自信克制。

→ 分区系统（选择 1 种主导结构）
#系统特点
1严格的模块化便当盒节奏密集、有序、信息丰富
2交替式编辑区块叙事性强、以故事驱动
3海报式层叠叙事电影感、按章节展开
4以画廊为主导的视觉节奏以图像为主、作品集风格
5瑞士网格规范理性、结构化、系统化
6不对称的高端营销流程动感、代理商风格、以转化为导向
→ 构图锚点（每个分区指定 1 个）

每个分区选择 1 个锚点。整个网站中，至少要出现 3 种不同的锚点。 相邻分区不得使用相同锚点。

锚点描述
居中陈述所有内容居中、对称，呈现权威感
左上方主内容，右下方辅助内容按阅读顺序呈对角线流动
左下方文字叠加在背景图上电影感、编辑式叠加
右下方 CTA 组合以转化为导向的末端锚点
左侧三分之一文字说明 + 右侧三分之二视觉内容经典分栏——谨慎使用，不得连续使用
右侧三分之一文字说明 + 左侧三分之二视觉内容经典反转——遵循同样规则
低位居中文字位于主视觉图下方 40% 的区域，上方留出戏剧性的负空间
偏离网格的编辑式错位不对称的视觉牵引，文字与图像刻意错位
居中堆叠标签／标题／副标题／CTA 全部居中，极简风格
以图像为画布，文字置于安全区域图像就是整个分区，文字位于清晰区域内
→ 背景模式（每个分区指定 1 种）

每个分区选择 1 种。整页中应有所变化，不要全部使用同一种模式。背景是主要的设计工具，而非风险。

模式描述
纯色表面 + 内嵌素材简洁、安全、以产品为主
微妙纹理／纸张／网格不使用图像也能营造触感层次
全幅图像 + 色调叠加电影感、氛围感，文字必须保持清晰可读
编辑式侧边图像（50/50、60/40）分栏构图，可反转
以图像为画布 + 文字叠加图像就是背景，文字位于安全区域
纯色块 + 产品裁切点缀现代主义风格、以产品为主
电影感色调渐变与配色相匹配、低彩度、专业
经调色处理的氛围照片采用单色调色，营造品牌氛围
双色调处理图像双色照片处理，严格遵循配色
柔和的径向暗角 + 产品裁切图营造奢华／编辑式质感
纯色上的微噪点渐变增添高级的触感层次，微妙而不浮夸
色块拼接双联画两块纯色区域相接，呈现现代主义风格
→ CTA 变化（每个分区指定 1 种）

为每个分区选择合适的 CTA 样式。不要每次都默认使用胶囊按钮。整个网站中，CTA 样式至少要变化一次。主要操作必须一目了然。

CTA 样式适用场景
经典主按钮胶囊主视觉区、定价区、最终 CTA
描边／幽灵按钮次要操作、低调的分区
带箭头的行内下划线链接编辑内容、内容分区
横幅式全宽 CTA转化分区、营造紧迫感
超大标题 + 极小 CTA 提示陈述式分区、彰显自信
作为强视觉元素下方说明文字的 CTA以图像为主的分区、画廊
→ 标志性组件（恰好选 4 项）
组件特征
对角错落方块拼贴动感十足，以画廊展示为主
3D 层叠卡片组深度、透视、展示效果
悬停手风琴切片布局互动性强、内容密集
无缝隙简洁 Bento 网格有序、数据丰富、现代
无限品牌滚动条社会认同、信任、动感
翻转式拍立得弧线活泼、作品集、错落
垂直韵律线条编辑风格、结构化、瑞士风格
非网格编辑式布局杂志风格、艺术指导感
产品 UI 面板堆叠SaaS、产品演示、功能展示
分栏式用户评价墙社会认同、长篇内容
超大指标条权威感、数据驱动
分层图像裁切框深度、编辑风格、电影感
→ 动态暗示语言（恰好选 2 项）

这些不是代码指令，而是视觉方向提示。生成的图像应通过构图、模糊、位置和元素排列，在视觉上暗示这些效果。

动态语言视觉暗示
文本擦除显现感文本元素呈现不同不透明度，有些淡化，有些清晰
固定叙事区块感带有侧边栏固定的感觉，内容围绕固定元素滚动
错落上浮感元素处于略有差异的垂直位置，呈现层叠感
视差图像漂移感背景和前景采用不同尺度，形成深度层次
平滑手风琴展开感水平或垂直切片中，一片展开，其他压缩
电影式渐隐过渡感透明元素相互重叠、彼此消融
→ 叙事／概念主线（选 1 项）

贯穿整个页面视觉语言的概念线索。

主线特征
文物／收藏品以证明、标本和珍贵物件为框架
旅程／朝圣方向性流动、路标区块、路线图感
工具／精密仪器机械加工细节、精准校准的 UI、触感控制
生长系统／花园自然生长、分支布局、悉心培育的氛围
舞台／聚光灯戏剧性对比、表演者与观众的构图
档案／卷宗索引行、说明文字、含蓄的权威感
→ 二次阅读亮点（恰好选 1 项）

在整个页面中有意放置一次不易察觉但清晰可辨的视觉母题。它能让人细看时有所发现，又不会打乱浏览顺序。

亮点描述
不对称溢出某个元素刻意突破网格，但仍遵循层级关系
超大标点／数字单个巨大字符承担结构性作用
意外的材质切换纸张、光泽、金属点缀之间切换——某个区块改变纹理
窄幅垂直侧栏编辑注释风格，呈现一列次要信息
微距裁切局部细节裁切自然呈现品牌色，而非使用完整图像

避免为了噱头而加入噱头。这个亮点必须有助于浏览顺序或品牌记忆。

✓ 质量关卡：艺术指导

进入第 3 阶段前，请确认：

  • 每个类别都只选择一个选项（不混搭、不含糊）
  • 选择之间风格一致（主题、字体和主视觉彼此契合）
  • 不同区块中至少分配 3 种不同的构图锚点
  • 不同区块的背景模式有所变化（不要全部相同）
  • CTA 样式至少有一次变化
  • 恰好选出 4 个标志性组件
  • 恰好选出 2 种动态语言
  • 恰好选出 1 条叙事主线
  • 恰好选出 1 个二次阅读亮点
  • 不要将左侧文本／右侧图像作为默认的主视觉构图

第 3 阶段：提示词工程

根据第 2 阶段的选择，为每个区块编写专属的结构化提示词。在这一阶段，艺术指导将转化为可直接用于生成的指令。

→ 提示词蓝图

每个版块提示词都遵循此结构。填写每个字段——跳过字段会导致输出泛泛而谈。

PROMPT BLUEPRINT - Section [N] of [Total]: [Section Name]
─────────────────────────────────────────────────────────

FRAME:
  Format: horizontal website section, 16:9 aspect ratio
  Viewport: 1440×900 desktop browser frame
  Render style: [photorealistic UI mockup / flat design comp / editorial layout]

COMPOSITION:
  Anchor: [from Phase 2 - e.g., "centered statement" or "bottom-left over background"]
  Visual weight: [where the eye lands first - e.g., "center-left, massive heading"]
  Reading flow: [how the eye moves - e.g., "heading → subtext → CTA → background visual"]

TYPOGRAPHY:
  Heading: [exact description - e.g., "massive compressed sans-serif, all-caps,
            approximately 80pt equivalent, tight letter-spacing, 2 lines max"]
  Subtext: [e.g., "16pt equivalent, regular weight, muted color, max 20 words,
            1.5 line-height"]
  Eyebrow: [e.g., "11pt monospace, uppercase, wide letter-spacing, muted opacity"]
  CTA text: [e.g., "14pt, medium weight, uppercase, inside pill button"]

PALETTE:
  Background: [exact description - e.g., "#0a0a0a deep charcoal with subtle
               radial glow from center"]
  Text primary: [e.g., "#f5f5f5 warm off-white"]
  Text secondary: [e.g., "rgba(255,255,255,0.5) muted"]
  Accent: [e.g., "#E8A04A warm amber - used on CTA only"]

BACKGROUND MODE:
  [from Phase 2 - e.g., "full-bleed cinematic photograph of server rack room,
   cool blue-teal color grade, 40% dark overlay for text readability"]

CTA:
  Style: [from Phase 2 - e.g., "solid pill, amber background, dark text"]
  Placement: [e.g., "centered below subtext, 32px gap"]
  Count: [1 - never more in a hero]

ATMOSPHERE:
  [e.g., "subtle film grain overlay at 3% opacity, soft radial ambient glow
   from top-center, no hard shadows"]

CONTENT (placeholder text):
  Eyebrow: [e.g., "INFRASTRUCTURE"]
  Heading: [e.g., "Build without limits."]
  Subtext: [e.g., "The platform for teams who ship fast."]
  CTA: [e.g., "Get Started →"]

WHAT THIS IS NOT:
  [Explicit anti-patterns - e.g., "NOT a generic dark hero with purple AI glow.
   NOT a dashboard screenshot. NOT centered text over a gradient blob."]

MOTION IMPLIED:
  [from Phase 2 - e.g., "staggered float-up energy: the heading, subtext, and
   CTA appear at slightly different vertical offsets as if mid-cascade"]
→ 提示词反模式（禁止使用的默认模式）

这些是 AI 图像生成容易陷入的模式。每个提示词都必须明确说明图像不应是什么，以对抗模型的默认倾向。

禁止的模式禁止原因应该怎么说
紫色／蓝色 AI 渐变主视觉每张 AI 生成的“科技”图片都会默认使用这种风格。一看就像“生成的”。指定第 2 阶段中的确切配色。加上“不要紫色，不要蓝色渐变背景”。
漂浮的半透明团块AI 对“氛围”的理解——毫无意义、漂浮在空间中的玻璃球指定具体的氛围效果：颗粒、放射光晕、色调渐变或摄影背景
通用仪表板卡片网格AI 喜欢生成 6–8 张相同的卡片，并配上线形图指定第 2 阶段标志性组件集合中的确切组件。描述其独特几何形态
渐变背景上的居中文字安全、通用，无法传达品牌特色指定第 2 阶段中的确切构图锚点。采用不对称或编辑式布局
“奢华”＝米色衬线字体搭配奶油色AI 对奢华的全部理解指定真正体现奢华的细节：克制的间距、触感纹理、经过考量的字重
“创意”＝杂乱且难以辨认混乱 ≠ 创意指定有结构的不对称布局：刻意偏离网格，但保持清晰的阅读顺序
过小且难以辨认的文字AI 会生成无人能读的装饰性文字指定最小字号：“标题必须清晰易读且醒目，至少相当于 60pt”
版块布局完全相同每个版块看起来都一样——分栏方式和比例都相同使用第 2 阶段分配的构图锚点——每个版块都使用不同的锚点
图库照片的感觉通用的商务人士握手照、桌面上的笔记本电脑指定确切的摄影方向：主体、色彩调校、情绪、裁切风格

⚠ 偏离警告： 在任何提示词中，最能产生显著影响的补充内容就是“这不是什么”版块。AI 模型对负向约束和正向约束同样敏感。告诉模型“不是紫色渐变主视觉，不是漂浮团块，不是通用仪表板”，就能消除 80% 的 AI 默认输出。

→ 特定版块的提示词指南

不同版块承担不同的任务。使用这些版块蓝图，确保每个版块都能在转化流程中发挥作用。

版块：主视觉

PURPOSE: Hook - the first thing the user sees. Must create an instant
         emotional response and communicate the brand's energy in < 3 seconds.

MUST HAVE:
  - ONE dominant focal point (massive heading OR cinematic image, not both competing)
  - Brand name or product name visible
  - Single CTA (never two)
  - Breathing room - the hero must NOT feel packed

MUST NOT HAVE:
  - Trust logos / "used by" badges (save for trust bar)
  - Feature lists or bullet points
  - Multiple competing CTAs
  - Scroll indicators / bouncing chevrons
  - Version labels (v2.0, BETA) unless the brief is literally a product launch

PROMPT ADDITION:
  "This is a website hero section - the first viewport a user sees.
   It must feel premium, confident, and immediately communicate the brand.
   One focal point dominates. Generous whitespace. No clutter."

版块：信任栏

PURPOSE: Proof - immediately after the hero, establish credibility.

MUST HAVE:
  - Logo strip OR metric strip OR testimonial quote
  - Muted, understated styling (this section supports, not competes with hero)
  - Visually lighter than surrounding sections

PROMPT ADDITION:
  "This is a trust/social-proof bar. It should be visually quiet and
   supportive - a thin horizontal strip of logos or a single powerful
   metric. Not a full section, more like a divider with authority."

版块：功能／优势

PURPOSE: Interest - show what the product does and why it matters.

MUST HAVE:
  - Clear visual hierarchy (section heading → feature items)
  - Distinct feature blocks (cards, columns, or bento cells)
  - Icons or micro-illustrations per feature (not just text)

MUST NOT HAVE:
  - More than 6 feature items visible (3-4 is stronger)
  - Identical card layouts without visual variation
  - "FEATURE 01", "FEATURE 02" meta-labels

PROMPT ADDITION:
  "This is a features/benefits section. Each feature should be
   visually distinct with an icon or illustration. Cards should
   NOT all look identical. Hierarchy: section heading first, then
   feature grid below."

版块：社会认同／客户评价

PURPOSE: Desire - make the user want what others already have.

MUST HAVE:
  - Real-looking names and avatar-style photos
  - Quote text that feels authentic (not marketing copy)
  - Company/role attribution

PROMPT ADDITION:
  "This is a testimonial section. Show 1-3 quotes with avatar photos,
   names, and company roles. The quotes should feel human and authentic.
   Layout should feel editorial, not like a review aggregator."

版块：行动号召／转化

PURPOSE: Action - the final push. High contrast, unmistakable action.

MUST HAVE:
  - High-contrast background (inverted from the page's dominant mode)
  - Single, dominant CTA button
  - Short, punchy heading (3-7 words)
  - Minimal supporting text

PROMPT ADDITION:
  "This is the final conversion section. It should feel like a
   decisive endpoint - high contrast, bold heading, unmistakable
   CTA button. If the page is light, this section goes dark (or
   uses the accent color as background). Maximum confidence."

版块：页脚

PURPOSE: Navigation + trust - the page's foundation.

MUST HAVE:
  - Logo
  - Link columns (Product, Company, Resources, Legal)
  - Muted, structured, visually quiet
  - Copyright line

PROMPT ADDITION:
  "This is a website footer. Clean, organized link columns with
   a logo. Visually understated - it anchors the page without
   competing for attention. Dark or muted background."
✓ 质量检查：提示词

进入第 4 阶段前，请确认：

  • 每个版块都有遵循蓝图结构的完整提示词
  • 每个提示词都包含“这不是什么”版块
  • 所有版块提示词中的配色保持一致
  • 所有版块提示词中的字体方向保持一致
  • 不同版块的构图锚点有所变化（对照第 2 阶段的分配）
  • 不同版块的背景模式有所变化
  • CTA 样式至少变化一次
  • 没有提示词默认采用左侧文字／右侧图片的布局，除非有明确理由
  • 占位内容使用真实可信的文本（不要使用“Lorem ipsum”或“Company Name”）

第 4 阶段：生成

按顺序执行提示词。每个版块生成一张图片。

→ 生成规则
规则原因
生成前宣布每个版块“第 3 个版块，共 7 个：功能——纯粹无缝的便当盒网格，配以错落上浮的活力”
横向格式，16:9网站版块是横向的，不是纵向的
每张图片对应一个版块硬性输出规则——无一例外
在生成调用中包含完整的提示词蓝图不要概述——模型需要每个字段
每次生成前确认调色板一致第 1 个版块的强调色必须出现在第 5 个版块中
如果生成结果偏离预期，就调整提示词如果第 3 张图片出现紫色渐变，就用更明确的反模式语言重新生成
→ 版块排序

默认落地页（6 个版块）按以下顺序生成：

Section 1: Hero          - [Hook]
Section 2: Trust Bar     - [Proof]
Section 3: Features      - [Interest]
Section 4: How It Works  - [Education]
Section 5: Testimonials  - [Desire]
Section 6: CTA + Footer  - [Action]

完整网站模板（8 个版块）：

Section 1: Hero          - [Hook]
Section 2: Trust Bar     - [Proof]
Section 3: Features      - [Interest]
Section 4: How It Works  - [Education]
Section 5: Showcase/Demo - [Demonstration]
Section 6: Testimonials  - [Desire]
Section 7: Pricing       - [Decision]
Section 8: CTA + Footer  - [Action]

每个版块都对应一个转化阶段。这并非随意安排——顺序遵循 AIDA（注意 → 兴趣 → 欲望 → 行动），并插入证明和教育内容，以增强可信度。

✓ 质量关卡：生成

生成所有图片后，确认：

  • 图片总数与版块数相符（没有遗漏版块）
  • 每张图片都是独立的横向图片（没有合并的画面）
  • 所有图片的调色板在视觉上保持一致（相同的强调色和基调）
  • 相邻版块没有使用相同的构图锚点
  • 所有版块中至少出现 3 种不同的构图锚点
  • 主视觉区不是默认的左侧文字／右侧图片布局（除非经过刻意选择）
  • 没有出现紫色／蓝色的 AI 渐变背景（除非调色板明确要求）
  • 字体排版比例保持一致（各版块的标题粗细和字体风格协调）

阶段 5：视觉差异检查

将生成的图片与阶段 1 的方向简报及阶段 2 的艺术指导选择进行对比。逐项检查。任何一项不通过，都意味着需要用修正后的提示词重新生成相应版块。

构图差异检查
检查项通过／不通过
所有版块中至少出现 3 种不同的构图锚点
相邻版块没有使用相同的锚点
主视觉区采用指定的主视觉架构（而非通用的分栏布局）
没有版块显得“空”或“挤”——留白经过刻意安排
每个版块都有清晰的视觉层级（主要 → 次要 → 再次）
每个版块内部的阅读流畅直观（视线方向明确）
调色板差异检查
检查项通过／不通过
所有版块使用相同的基调色板
所有版块的强调色保持一致（色相相同）
没有出现方向简报中未指定的突兀颜色
没有出现 AI 默认的紫色／蓝色渐变，除非经过明确选择
深色版块使用近黑色（#0a0a0a），而非纯黑色（#000000）
浅色版块使用暖奶油色／米白色，而非纯白色（#FFFFFF）
字体排版差异检查
检查项通过／不通过
所有版块的标题字体风格一致（粗细和字体气质相近）
标题比例在视口中占主导地位（并非只是“大字”，而是具有架构感）
没有版块的标题换行超过 3 行
辅助文字在视觉上处于次要地位（字号更小、颜色柔和、宽度受限）
没有难以辨认的文字（生成分辨率下的所有内容都清晰可读）
在指定位置出现眉题／标签文字，且视觉风格保持一致
版块目的差异检查
检查项通过／不通过
主视觉区吸引用户——立即引发情感共鸣
信任栏提供证明——彰显低调的权威感，不与主视觉区争夺注意力
功能区传递信息——层级清晰，各项内容彼此区分
用户评价具有说服力——真实、可信、富有编辑感
CTA 促成转化——对比鲜明，行动指引一目了然
页脚稳固收尾——结构清晰、低调沉稳、起到锚定作用
页面形成连贯的说服流程，而非随机拼接的版块
AI 默认偏移差异检查
检查项通过/失败
无紫色/蓝色 AI 渐变背景（除非配色方案另有规定）
无漂浮的半透明色块
无泛滥的通用仪表盘卡片
无“奢华 = 米色衬线字体”的陈词滥调
无“创意 = 混乱无序”的陈词滥调
无重复相同的版块布局
无图库照片的俗套感（通用商务图片）
无元标签（“SECTION 01”“FEATURE 03”）
文案中无 em dash
无 AI 文案陈词滥调（“Elevate”“Seamless”“Unleash”“Next-Gen”“Revolutionize”）
实施就绪差异检查
检查项通过/失败
每张图片都能清晰传达布局结构（开发者可以据此搭建网格）
间距清晰可见且可测量（不存在模糊的重叠）
组件边界清晰（卡片有边缘，版块之间有间隔）
CTA 按钮界限分明（不会被误认为是普通文本）
图片区域与背景有明显区分（边界清晰）
图片可以交给像素级还原技能，并据此准确编写代码

当前基线配置

这些是全局默认参数，用于校准引擎输出，使其生成优质、注重转化且便于实施的设计参考。

DESIGN_VARIANCE:        8   (1=rigid/symmetrical, 10=artsy/asymmetric)
VISUAL_DENSITY:         4   (1=airy/gallery-like, 10=packed/intense)
ART_DIRECTION:          8   (1=safe commercial, 10=bold creative statement)
IMPLEMENTATION_CLARITY: 9   (1=loose moodboard, 10=very codeable UI reference)
IMAGE_USAGE_PRIORITY:   9   (1=mostly typographic, 10=strongly image-led)
SPACING_GENEROSITY:     8   (1=compact/tight, 10=very spacious/breathable)
LAYOUT_VARIATION:       8   (1=same anchor repeats, 10=bold composition variety)
CONVERSION_DISCIPLINE:  8   (1=pure art moodboard, 10=clear funnel + design balance)

这些是默认值。请根据需求动态调整：

  • “简洁” → 降低信息密度，增加宽裕的间距
  • “疯狂创意” → 增加变化和艺术指导性
  • “高端 SaaS” → 保持清晰度，控制艺术指导性
  • “编辑风格” → 允许更强烈的字体表现和更不对称的布局
  • 用户的需求始终优先于默认值

核心原则

以下基本原则让优质设计参考区别于通用 AI 图片。无论采用哪些组合选项，这些原则都适用。

每个版块只有一个视觉焦点。 每个版块都有一个占主导地位的视觉元素。统计在相同尺度上争夺注意力的元素数量。如果超过 2 个，就减少元素，直到有一个元素明显占主导地位。

与视口尺度相匹配的字体排印。 标题是构建视觉结构的元素，而不是“放大的文字”。它们应当呈现出统领整个版块的气势。桌面端最小字号相当于 60pt。对于 1-3 个词的标题，字号要非常大，达到 100pt 以上。字距紧凑，行高压缩。

极致留白。 背景不是被浪费的空间，它本身就是设计。内容置于经过审慎安排的区域中，周围留出刻意营造的呼吸空间。如果版块显得拥挤，说明间距不合理。

精简配色，并始终保持一致。 整个页面最多使用 3 种色相。深色页面：近黑色 + 暖白色 + 一种强调色。浅色页面：暖奶油色 + 近黑色 + 一种强调色。强调色用于 CTA 和激活状态。其他所有颜色都属于基础配色。页面中出现一种以上高饱和度强调色，会破坏视觉统一性。

每个版块都有明确作用。 首屏负责吸引注意。信任栏负责建立可信度。功能介绍负责提供信息。用户评价负责说服。CTA 负责促成转化。没有哪个版块只是装饰。每个版块都应推动用户采取行动。

图片就是规格说明。 生成的图片必须足够清晰，让开发者能够查看图片，并使用像素级还原技能编写代码。如果图片中的布局、间距、字体排印或组件边界不明确，它就不合格，不能作为参考。

评论

支持 Markdown