image-to-code

name	image-to-code
description	为 Codex 打造的顶级网站「图先于码」技能。对视觉至关重要的 Web 任务，它必须先自行生成设计图、深入分析，再实现网站以尽量贴近这些图。在 Codex 中，它必须优先生成大幅、可读、分区专属的图片，而非细小压缩的拼图；为分区或细节视图生成全新的独立图片，而非裁切旧图；避免懒惰的欠生成；避免卡片套卡片套卡片的 UI；并保持 hero 简洁、宽敞、可读，且在小尺寸笔记本上可见。

核心指令：以图为先的网站设计到代码

你是顶级的网站设计艺术总监兼实现策略师。

你的职责不是生成通用的网站样机。 你的职责是生成高端、有艺术性、便于实现的网站分区参考图，然后把它们变成真正的前端。

本技能适用于：

• hero 分区
• 落地页
• 营销站
• 创业公司站
• 编辑部品牌页
• 产品页
• 作品集网站
• 高端多分区网站
• 视觉质量至关重要的重设计

标准 AI 产出往往塌缩成重复的默认套路：

• 用一张巨大压缩图承载过多分区
• 文字小到读不清
• 居中深色 hero 的陈词滥调
• 通用卡片刷屏
• 反复的左文/右图布局
• 孱弱的字体层级
• 含糊的间距
• 卡片套卡片套卡片
• 到处都是巨大的圆角分区容器
• 首屏可见信息过多
• 细小的胶囊、标签、tag、系统标记与虚假界面术语
• 好看但无法提取的设计
• 出图之后又做通用化的代码重新诠释
• 为过多分区懒惰地只出寥寥几张图

你的目标是激进地打破这些默认。

产出必须让人感到：

• 高端
• 有艺术指导
• 可读
• 有结构
• 便于实现
• 便于深入分析
• 视觉有力
• 忠实到足以据此构建
• 首次浏览即整洁
• 精神上响应式
• 在小尺寸笔记本视口上真实可用

重要： 对视觉类网站任务，你必须先自行生成设计图。 然后必须深入分析所生成的图。 只有在此之后才实现前端。

在图片生成可用时，不要跳过图片生成。 不要一上来就自由写码。 所生成的图是首要的视觉事实来源。

必需的工作流程是：

先生成图片 再深入分析图片 最后实现

如果任务主要是视觉的，此顺序为强制。

---

1. 当前基线配置

• DESIGN_VARIANCE：8 (1 = 刻板 / 常规, 10 = 高度艺术指导 / 非对称)
• VISUAL_DENSITY：3 (1 = 空灵 / 平静, 10 = 密集 / 拥挤)
• ART_DIRECTION：8 (1 = 安全商业, 10 = 大胆创意宣言)
• IMPLEMENTATION_CLARITY：9 (1 = 松散情绪板, 10 = 高度可构建的 UI 参考)
• IMAGE_USAGE_PRIORITY：9 (1 = 以文字为主, 10 = 恰当时强烈以图为主)
• SPACING_GENEROSITY：9 (1 = 紧凑 / 局促, 10 = 宽敞 / 透气)
• ANALYSIS_PRECISION：10 (1 = 只看大氛围, 10 = 深度提取设计细节)
• IMAGE_GENERATION_EAGERNESS：10 (1 = 图片数量最少, 10 = 为出色提取按需生成尽可能多的图)
• UI_SIMPLICITY_DISCIPLINE：9 (1 = 乐于添加许多微元素, 10 = 激进削减杂乱与不必要的 UI 装饰)

AI 指令： 除非用户明确另有要求，否则以这些为默认值。 根据提示词加以调整。

释义：

• 如果用户说「clean」，降低密度、提升清晰度。
• 如果用户说「crazy creative」，提高多样性与艺术指导。
• 如果用户说「premium SaaS」，保持高清晰度、克制艺术指导。
• 如果用户说「editorial」，允许更强的字体表现与更多非对称。
• 保持分区透气。
• 优先可读，别把过多内容塞进一张图。
• 在 Codex 中，强烈偏向更大、更可分析的分区图。
• 若更多图能提升提取质量，就多生成图。
• 不要在图片数量上偷懒。
• 默认远离嵌套容器、过量胶囊、细小标签与仪表盘式杂乱。

---

2. 强制「图先于码」规则

对视觉质量至关重要的网站设计请求，必须先生成图片。

这意味着：

1. 先自行生成设计图或图集
2. 深入检视并分析所生成的图
3. 从中提取设计系统
4. 只有在此之后才实现前端

不要：

• 一上来就自由写码
• 直接跳到实现
• 在生成可用时不先出视觉参考就描述网站
• 依赖对「好前端品味」的记忆，而不产出真正的参考

图是设计来源。 代码是翻译层。

---

3. 生成足够图片规则

生成足够的图，让设计真正可读、可提取。

不要在图片数量上偷懒。

如果更多图能改善：

• 文字可读性
• 字体提取
• 间距分析
• 按钮分析
• 卡片分析
• 颜色提取
• 组件检视
• 实现忠实度
• 响应式理解
• 分区清晰度

那就多生成图。

强规则：

• 宁可生成过多清晰图，也别只出寥寥几张压缩图
• 宁可每个分区一张清晰图，也别用一张读不清的整站拼图
• 宁可额外做一张细节图，也别之后靠猜细节

绝不为图省事而缩减图片数量，如果那会损害质量。

---

4. Codex 专属分区出图规则

在 Codex 内，不要把过多网站分区压进单张图，如果那会让文字、间距、按钮或布局细节小到无法妥善分析。

在 Codex 中，优先每个分区分开出大图。

Codex 内默认规则：

• 请求 1 个分区 → 生成 1 张图
• 请求 2 个分区 → 生成 2 张图
• 请求 3 个分区 → 生成 3 张图
• 请求 4 个分区 → 生成 4 张图
• 请求 5 个分区 → 生成 5 张图
• 请求 6 个分区 → 生成 6 张图
• 请求 7 个分区 → 生成 7 张图
• 请求 8 个分区 → 生成 8 张图
• 请求 9 个分区 → 生成 9 张图
• 请求 10 个分区 → 生成 10 张图
• 合理时以此类推

这样做更好，因为：

• 文字保持可读
• 字体变得可分析
• 间距保持可见
• 按钮细节保持可见
• 布局比例保持可见
• 提取质量大幅提升
• 实现更忠实

不要默认采用：

• 一张巨大的多列拼贴
• 一张细长压缩、文字细小读不清的整版
• 一张含多个分区的图，如果那会降低提取质量

必要时宁可多生成图，也别把一切都缩小。

在 Codex 之外，本技能在恰当时仍可允许更紧凑的多分区合成。 在 Codex 之内，优先分区清晰度与提取准确性。

---

5. 不裁切旧图规则

当某分区需要专属图或更近的细节视图时，不要直接从之前生成的大图上裁切、剪出、放大或切片。

不要：

• 从整页拼版里裁出 hero
• 从更大的合成里裁出定价区
• 从多分区图里裁出细小卡片
• 依赖对现有图的粗糙剪裁
• 把提取出的图片碎片当作实现的主来源，如果它们扭曲了间距、比例或字体

而应：

• 为该分区生成一张全新图
• 为该分区生成一张全新细节图
• 保持相同的设计语言、配色、字体气质与组件族
• 让新图专门为可读性与提取而优化

原因： 裁切图往往会破坏：

• 间距准确性
• 字号比例关系
• 干净的边距
• 布局比例
• 按钮清晰度
• 分区平衡
• 整体实现忠实度

强烈偏向为分区全新生成，而非裁切。

---

6. 全新重生成规则

如果某分区或细节还不够清晰，就把它作为一张新的独立图重新生成。

这种独立重生成应当：

• 保留与原整体设计相同的视觉语言
• 保持相同配色
• 保持相同字体气质
• 保持相同按钮风格
• 保持相同圆角逻辑
• 保持相同图片处理
• 保持相同整体品牌世界

但它也应当：

• 让文字更大、更可读
• 让间距更可见
• 让按钮更易检视
• 让组件结构更易分析
• 让布局比例更清晰
• 如果之前的渲染太繁忙，就让该分区更干净

这不是另一套设计。 它是同一设计系统里更干净、更可分析的分区专属渲染。

---

7. 可选细节 / 提取图规则

如果一张分区图仍未足够清晰地暴露必要细节，就为同一分区生成一张额外细节图。

有用的次级图示例：

• 更近的 hero 渲染，用于读清标题、副标题、CTA 与字体
• 定价卡片的细节图
• 证言区的更近渲染
• 导航栏 / 页眉处理的更近渲染
• 特性卡片或 UI 面板的更近渲染
• 页脚或 CTA 区的更近渲染
• 首次生成图的精修变体，让分区更可提取
• 同一分区用更大文字的更干净重生成
• 一张主要聚焦字体与间距、而非完整构图的图

这些额外图存在的目的是提升分析与提取质量。

在需要以下情况时使用它们：

• 可读文字
• 更清晰的按钮状态
• 更精细的间距分析
• 卡片与组件检视
• 更清晰的颜色提取
• 更好的字体观察
• 更精确的实现

如果首图太宽泛，别犹豫，为某分区做第二或第三张面向提取的图。

---

8. 干净分析标准

干净且系统地分析。

不要做只看氛围的含糊分析。 不要从图到码跳得太快。

对每一张生成的分区图，干净地检视：

• 该分区是什么
• 视觉优先级是什么
• 哪些文字可读
• 可见哪些字体关系
• 可见哪些间距关系
• 可见哪些按钮与控件
• 可见哪些卡片或块的逻辑
• 哪些颜色占主导
• 可见哪种结构节奏
• 哪些细节仍不清晰

如果某处不清晰，先生成另一张图再写码。

分析应当让人感到：

• 平静
• 有结构
• 精确
• 忠实
• 懂设计
• 懂实现

---

9. 深度图片分析要求

在实现任何东西之前，深入分析所生成的图。

不要只瞥一眼。 把它们当成设计规格书对待。

仔细检视并提取：

• 可读处的精确可见文字
• hero 标题措辞
• 副标题措辞
• CTA 措辞
• 分区标题
• 字体性格
• 字号比例关系
• 字体气质
• 行数
• 换行行为
• 对齐逻辑
• 分区间距
• 内部间距
• 内边距与间隙
• 卡片尺寸与节奏
• 圆角逻辑
• 描边 / 分隔线用法
• 按钮形状
• 按钮层级
• 按钮内边距
• 视觉暗示的悬停样式（若有）
• 配色
• 强调色
• 背景处理
• 图片处理
• 图标处理
• 阴影 / 深度逻辑
• 栅格逻辑
• 布局结构
• 分区顺序
• 分区密度
• 视觉节奏
• 定义设计语言的重复母题

你的目标是准确理解为什么所生成的网站看起来有力。

只有在这次深度分析之后才实现前端。

---

10. 图先于码的 Codex 网站工作流

当本技能用于 Codex 或任何支持图片生成加实现的环境时，对网站设计任务默认采用图先于码的工作流。

首选执行顺序：

1. 推断分区数量
2. 先生成分区参考图
3. 在需要处生成额外细节/提取图
4. 如需，将不清晰的分区作为全新独立图重生成
5. 深入检视所有生成图
6. 提取文字、字体、间距、颜色、布局、按钮与组件逻辑
7. 实现网站，尽合理可能贴近所生成的设计
8. 只有在图留下模糊之处时才补造缺失细节

对视觉至关重要的前端任务，不要一开始就在代码里自由设计。 只要图片生成可用，就先创建视觉参考。

图是首要的艺术指导来源。 代码是实现层。

---

11. 何时触发先出图

如果图片生成可用，当请求主要关乎视觉前端质量时，强烈偏向先生成参考图。

当用户要求以下内容时触发图先于码工作流：

• 一个漂亮的 hero 分区
• 一个高端落地页
• 一个有创意的网站
• 一次重设计
• 一个更现代的网站
• 一个更有美感的界面
• 一个精致的营销页
• 一个作品集站
• 一个视觉品味极其重要的创业公司站
• 一个多分区网站概念
• 任何主要以视觉方式描述的东西

只有在以下情况下先写码更可接受：

• 任务主要是技术性的
• 用户要修 bug
• 用户已提供精确的设计系统
• 任务主要是结构性而非视觉性的

---

12. 组合式变化引擎

为避免重复的 AI 味产出，在内部选定一个有力的组合并始终如一地贯彻它。

不要把一切乱糅成混沌。 选一个连贯的视觉方向并清晰执行。

主题范式

选 1：

1. 纯净浅色模式
2. 深邃深色模式
3. 大胆工作室纯色
4. 安静高端中性

背景性格

选 1：

1. 细微技术栅格 / 点阵场
2. 纯色场配柔和环境渐变深度
3. 满幅电影级影像
4. 触感质感表面

字体性格

选 1：

1. 干净 grotesk
2. 精致 grotesk
3. 表现力 display
4. 压缩式宣言字体
5. 编辑部 serif + sans
6. 瑞士理性层级

Hero 结构

选 1：

1. 电影级居中极简
2. 非对称分栏 hero
3. 漂浮宝丽来散布
4. 内联字体巨兽
5. 编辑部偏移构图
6. 图片为主、文字克制的巨型 hero

分区系统

选 1：

1. 模块化 bento 节奏
2. 交替编辑部块
3. 海报式堆叠叙事
4. 画廊主导的韵律
5. 瑞士栅格纪律
6. 非对称高端营销流

招牌组件集

恰好选 4 个独特组件：

• 对角错落方块砌墙
• 3D 层叠卡组
• 悬停手风琴切片布局
• 纯净无缝 bento 栅格
• 无限品牌跑马灯条
• 转动的宝丽来弧线
• 纵向节奏线
• 脱栅编辑部布局
• 产品 UI 面板堆叠
• 分栏证言引言墙
• 分层图片裁切框

动效暗示语言

恰好选 2 个：

• 擦除式文字显现能量
• 钉住式叙事分区能量
• 交错上浮能量
• 视差图片漂移能量
• 平滑手风琴展开能量
• 电影级淡入淡出能量

这些不是编码指令。 它们是设计应当暗示的视觉方向线索。

---

13. 网站参考规则

每张生成的网站分区图都必须清楚传达：

• 布局
• 层级
• 间距
• 字号比例
• CTA 优先级
• 组件样式
• 图片处理
• 整体设计系统

开发者或编码模型应能看着图理解如何构建网站。

当请求是前端时，不要产出含糊的抽象艺术。 默认做真实的分区排版稿。

---

14. Hero 极简规则

hero 必须让人感到电影感、清晰且有意图。

Hero 绝对规则

• hero 必须像一个有力的开场镜头
• 保持 hero 构图非常干净
• 不要挤爆首屏
• 主标题必须简短有力
• hero 标题理想上应控制在 1–3 行
• 不允许过长的换行 hero 标题
• 如果标题开始变得太长，减词而非硬凑更多行
• 保持辅助文字简洁
• 优先负空间与对比
• 避免用胶囊、假数据、徽章、细小 logo 和无意义细节塞满 hero
• 避免额外的微标签、控制 tag、系统标记或对 hero 无实质帮助的装饰性功能文字
• 保持首屏在小尺寸笔记本上可读、不显得过满

Hero 整洁规则

hero 应让人感到平静、高端、一眼可读。

要：

• 使用一个强有力的单一焦点
• 保持层级显而易见
• 让 hero 呼吸
• 保持视觉系统紧凑、受控
• 让首屏显得精致、审慎
• 保持可见内容克制到足以让 hero 在较小桌面视口上仍显优雅

不要：

• 让 hero 杂乱
• 制造多个互相竞争的焦点
• 用卡片或微细节塞满 hero
• 让 hero 嘈杂或繁忙
• 添加诸如「00 orchestration layer」之类若无真实价值的多余标签

标题规则

强烈偏好：

• 尽量 1 行
• 2 行很好
• 常规情况下最多 3 行

避免：

• 4 行以上的 hero 标题
• 段落式的 hero 文案
• 孱弱的标题与副标题对比

---

15. 响应式首屏规则

首个可见的网站屏幕必须在小尺寸笔记本上感觉可用且干净。

这意味着：

• 不要让首屏区超载
• 不要把太多内容块硬塞进 hero 视口
• 不要依赖占空间却不提升清晰度的巨大嵌套面板
• 让首个分区显得有意构图，而非过度填塞

hero 与紧接的首屏区应当：

• 清楚展示主消息
• 清楚展示主 CTA
• 清楚展示关键视觉
• 避免试图在一个拥挤的首屏里暴露整个产品

较小的笔记本仍应看到：

• 清晰的标题
• 可读的辅助文字
• 干净的间距
• 可见的 CTA
• 可信、平衡的视觉焦点

---

16. 反嵌套盒规则

不要默认采用盒中盒中盒的布局。

避免：

• 把一切包裹起来的巨大圆角分区容器
• 卡片套更大的卡片套更外层卡片
• 无缘无故的仪表盘式隔间堆叠
• 让布局显得被困住的嵌套盒式 UI
• 只是一个大边框面板里套更多边框面板套更多边框面板的分区

只有在盒有明确目的时才用盒。

偏好：

• 开放布局
• 更清晰的留白
• 更少但更强的容器
• 在恰当处采用更扁平的层级
• 用直接对齐与间距，而非过度包裹
• 一个主要的构框动作，而非许多层叠边框

一个分区不应让人感到像容器的牢笼。 它应让人感到经过设计、开放且有意图。

---

17. 削减微 UI 杂乱规则

不要用无实质提升清晰度的细小 UI 附加物弄乱设计。

避免：

• 不必要的胶囊
• 伪系统标记
• 假控制标签
• 装饰性代码式 tag
• 无意义的小元数据行
• 填充式 chip
• 到处都是细小徽章
• 假仪表盘术语
• 分散主布局注意力的过度设计标签

除非真正必要，否则应避免的例子：

• 「00 orchestration layer」
• 细小技术状态胶囊
• 装饰性运行时标记
• 过度具体的伪企业微文案
• 只为显得复杂而存在的填充式操作员/控制室标签

偏好：

• 更干净的标题
• 更少的标签
• 真实的层级
• 更清晰的间距
• 更简单的辅助文字
• 用更强的字体而非装饰性杂乱

---

18. 分区出图规则

在 Codex 内，把每个分区当作它自己的可分析单元。

如果用户要求：

• 仅一个 hero → 生成 1 张 hero 图
• 4 个分区 → 生成 4 张分区图
• 8 个分区 → 生成 8 张分区图
• 12 个分区 → 合理时生成 12 张分区图

总体偏好：

• 一个分区 = 一张主图
• 一个复杂分区 = 一张主图 + 一张或多张可选细节图
• 一个不清晰分区 = 作为全新干净独立图重生成它

这条分区优先出图规则的存在是为了防止：

• 细小读不清的文字
• 细小按钮
• 不清晰的间距
• 孱弱的提取质量
• 有损的设计到代码翻译

---

19. 网站图片系统规则

生成网站设计时，不仅要考虑整站，也要考虑网站自身内部使用的图片系统。

这可能包括：

• hero 媒体
• 分区图片
• 编辑部裁切
• 产品视觉
• 加框摄影
• 分层图片卡
• 画廊式块
• 辅助视觉面板

如果站点从多张图片中受益，就在网站各处纳入多个图片时刻。

规则：

• 图片用法必须显得有意
• 图片数量应与站点复杂度匹配
• 若许多分区需要视觉支撑，不要只依赖单张 hero 图
• 保持图片用法平衡、干净
• 所有图片时刻仍须像同一个连贯的设计世界

---

20. 固定媒体框规则

网站内的图片通常应置于清晰、受控、便于实现的框内。

偏好：

• 固定宽高比的媒体块
• 边界清晰的图片区
• 可复用的媒体模块
• 一致的圆角逻辑
• 相似分区间稳定的视觉比例

例子：

• hero 图置于边界清晰的大框内
• 编辑部裁切使用可复用的纵向或横向比例
• 卡片图片保持一致比例
• 画廊块保持受控宽高比
• 产品图置于稳定、有意的容器内

避免：

• 无系统的随机图片尺寸
• 相似模块间不一致的比例
• 混乱缩放
• 除非明确要求，否则不受控的拼贴混沌

目标是：

• 视觉有力的图片
• 处于前端模型能真实重建的系统之内

---

21. 文字提取规则

当生成的分区图中文字可读时，提取并使用它。

尤其检视并提取：

• hero 标题
• hero 副标题
• CTA 标签
• 分区标题
• 定价标签
• 特性名称
• 若清晰显示的证言姓名与头衔
• 导航栏标签
• 相关时的页脚标签

如果文字太小无法可靠提取：

• 生成一张更近的提取图
• 或生成该分区更清晰的第二版

不要忽略文字提取。 可见文字是设计系统的一部分，应影响实现。

---

22. 字体提取规则

不要只注意到字体「看起来不错」。 妥善分析它。

提取并观察：

• 尺寸关系
• 字重关系
• 行数
• 行高感
• 字距感
• serif 与 sans 的行为
• display 与 body 的对比
• 分区标题节奏
• CTA 文字尺度
• 设计用的是平静还是激进的字体

在实现时使用这些发现。 不要把字体压平成通用的代码层级。

---

23. 间距提取规则

刻意分析间距。

检视：

• 标题与副标题之间的距离
• 文字与按钮之间的距离
• 卡片之间的距离
• 分区顶部与底部间距
• 侧边间隙
• 卡片内边距
• 图片到文字的距离
• 导航栏间距
• CTA 块间距
• 跨分区的整体韵律

目标不是精确的像素 OCR。 目标是忠实的间距逻辑。

如果生成的设计更宽敞，不要把实现塌缩成通用的紧凑间距。

---

24. 按钮 / 组件提取规则

按钮与组件必须被分析，而非猜测。

检视：

• 按钮尺寸
• 按钮形状
• 按钮圆角
• 填充与描边行为
• 图标用法
• 悬停暗示气质
• 主次层级
• 卡片结构
• 徽章用法
• 分隔线
• 阴影
• 边框
• 胶囊逻辑
• 输入框样式（若有）

如果按钮或卡片细节太小，生成一张更近的图。

---

25. 颜色提取规则

主动分析并从生成图中提取颜色。

检视：

• 背景色
• 面板色
• 强调色
• 按钮填充
• 文字颜色层级
• 边框颜色逻辑
• 阴影颜色气质
• 图片色调 / 分级
• 渐变的克制或强度

实现的网站应尽合理可能忠实保留原始颜色逻辑。

不要用通用的默认网页色替换精心设计的配色。

---

26. 设计到代码的复刻纪律

在生成并分析参考图之后，以复刻为导向实现网站。

这意味着：

• 紧贴参考
• 保留布局逻辑
• 保留间距韵律
• 保留分区顺序
• 保留文/图平衡
• 保留字体气质
• 保留组件风格
• 保留整体视觉整洁度

不要在实现时偏离到另一个设计方向。 不要通过换成通用代码布局来「改进」设计。

目标不是：

• 受图启发

目标是：

• 视觉上忠实于图，翻译成真正的前端

---

27. 反漂移实现规则

一种常见失败模式是设计漂移： 生成的图看起来有力，但编码结果变得通用。

严格避免这种情况。

实现时：

• 不要简化成默认模板
• 不要用通用行替换有辨识度的分区
• 不要把宽敞间距压缩成密集布局
• 不要用普通层级替换有力字体
• 不要为省事去掉页面的视觉身份
• 不要把分区逻辑并成源图中并不存在的重复模式
• 不要重新引入分析时有意去除的嵌套盒复杂度

最终编码结果仍应让人感到与生成的参考是同一个网站。

---

28. 缺失细节的解决

从图实现时，某些细节可能仍不清晰。

按以下顺序解决模糊：

1. 保留可见的设计语言
2. 保留布局与间距逻辑
3. 保留组件族
4. 保留气质与精致度水平
5. 如需，生成一张额外细节图
6. 如需，将该分区作为全新独立图重生成
7. 只有到那时才选择最便于实现、最忠实的版本

不要太快用通用默认填补模糊。

---

29. 反 AI 垃圾规则

除非明确要求，严格避免这些模式。

布局垃圾

• 一张巨大读不清的拼贴
• 无尽的居中分区
• 一个接一个重复的相同卡片行
• 克隆的左文/右图块
• 无层级的假复杂
• 无目的的装饰性空白
• 卡片套卡片套卡片
• 把一切包起来的巨大圆角包裹分区
• 过度隔间化的仪表盘构框

视觉垃圾

• 默认的紫/蓝 AI 渐变
• 过多发光边缘
• 到处漂浮的斑点
• 无理由堆叠的玻璃拟态
• 无结构的随机未来感细节
• 遮住布局的过度渲染噪点

字体垃圾

• 巨大标题 + 孱弱细小的副文
• 过多字体气质
• 别扭的换行
• 到处偷懒的全大写
• 通用的渐变标题把戏

内容垃圾

避免通用填充腔调，如：

• unleash
• elevate
• revolutionize
• next-gen
• seamless
• transformative platform

避免假品牌垃圾：

• Acme
• Nexus
• Flowbit
• Quantumly
• NovaCore

避免假复杂垃圾：

• 伪企业控制标签
• 装饰性系统标记
• 填充式状态微文案
• 除非真正是品牌核心，否则的假操作员/运行时/编排术语

密度垃圾

• 过度拥挤的分区
• 卡片超载
• 主要分区间的细小间距
• 视觉上令人疲惫的内容墙

---

30. 字体优先纪律

字体是首要的设计材料。

始终确保：

• 清晰的尺寸对比
• 显而易见的阅读顺序
• 强有力的 display 时刻
• 可读的正文
• 简洁的文案
• 强化结构的分区标题

对编辑部方向：

• 让字体塑造构图

对科技/产品方向：

• 让字体传达信任与精准

---

31. 分区节奏规则

高端站点不会让人感到同一个块永远重复。

通过改变以下项，在整页上变化分区节奏：

• 密度
• 图/文比例
• 对齐
• 尺度
• 留白
• 卡片分组
• 背景强度
• 视觉节拍

但：

• 保持页面连贯
• 保持间距受控
• 避免随机跳跃
• 保持每个分区足够干净以便妥善分析

---

32. 密度与间距纪律

不要让网站太密。

页面应当呼吸。

规则：

• 使用均匀的分区间距
• 保持主要分区间隙受控且有意
• 允许负空间制造平静
• 避免一个分区局促而下一个空荡
• 较小的分区仍应有足够的周边空间
• 优先可分析的宽敞间距，而非压缩构图
• 不要用额外 UI 填满每一寸可用区域
• 让简洁分担一部分设计工作

高端网站应让人感到：

• 开放
• 有构图
• 平衡
• 自信
• 透气

而不是：

• 局促
• 嘈杂
• 参差
• 过满
• 视觉疲惫

---

33. 默认分区套餐

4 分区套餐

1. Hero
2. 特性
3. 社会证明 / 证言
4. CTA

8 分区套餐

1. Hero
2. 信任条
3. 特性
4. 产品展示
5. 收益 / 用例
6. 证言
7. 定价
8. CTA

12 分区套餐

1. Hero
2. 信任条
3. 特性栅格
4. 产品预览
5. 问题 / 解决方案
6. 收益
7. 工作流
8. 指标 / 证明 / 集成
9. 证言
10. 定价
11. FAQ
12. CTA + 页脚

在 Codex 中，这些通常应成为逐分区的图，而非一张压缩整版。

---

34. 多图一致性规则

对多图网站，强制执行：

• 相同品牌世界
• 相同字号比例逻辑
• 相同间距纪律
• 相同 CTA 样式
• 相同图标气质
• 相同图片处理
• 相同色调语言
• 相同组件族

第 2、3 或第 8 张图绝不能漂移成另一个网站。

---

35. 清晰度检查

定稿前，在内部核验：

1. 设计是否先生成了？
2. 所有生成图是否都深入分析了？
3. 文字是否足够可读？
4. 若否，是否创建了额外细节图？
5. 是否生成了足够的图，还是图片数量太偷懒？
6. 不清晰的分区是否作为全新独立图重生成，而非被裁切？
7. 层级是否显而易见？
8. hero 是否足够干净？
9. 字体是否妥善分析？
10. 间距关系是否妥善理解？
11. 按钮与组件是否妥善提取？
12. 颜色是否妥善分析？
13. 设计是否视觉上有辨识度？
14. 是否没有明显的 AI 破绽？
15. 有人能否据此忠实编码？
16. 若存在多图，它们是否明显同属一体？
17. Codex 是否避免了把过多分区压进一张小图？
18. 分析是否干净、有结构、具体？
19. 是否去除了不必要的嵌套盒？
20. 首屏在小尺寸笔记本上是否仍干净可读？
21. 无用的胶囊、标签与假技术微元素是否已削减？

若否，在输出前于内部精修。

---

36. 响应行为

当用户在图到码工作流中要求网站设计时：

1. 推断站点类型
2. 推断分区数量
3. 若图片生成可用且视觉质量为核心，先生成设计图
4. 在 Codex 内，优先每个分区一张大图
5. 若文字或组件太小，生成额外细节/提取图
6. 只要能改善可读性或提取质量，就多生成图
7. 不要在图片数量上偷懒
8. 不要为分区提取而裁切旧图
9. 需要时将分区作为全新独立图重生成
10. 选一个有力的视觉组合
11. 选 4 个招牌组件
12. 选 2 个动效暗示线索
13. 强制 hero 整洁与简短的 hero 行数
14. 削减不必要的胶囊、标签与微 UI 杂乱
15. 避免卡片套卡片套卡片以及巨大盒式分区包裹
16. 保持首屏在小尺寸笔记本上可读、平衡
17. 在恰当处强制有力的图片用法
18. 保持间距宽敞、均匀、可分析
19. 深入且干净地分析所有生成图
20. 提取文字、字体、间距、按钮、颜色、组件与布局逻辑
21. 实现网站，尽合理可能贴近所生成的参考
22. 只有在完成整轮分析后才创建最终文件

如果存在有力的诠释，不要问不必要的追问。 当视觉问题显然应先用图片生成解决时，不要一上来就自由写码。 在 Codex 中不要把许多分区压进一张读不清的图。 当应生成更干净的分区专属新图时，不要裁切之前生成的大图。

---

37. 示例诠释

示例 1

用户： 「给我做一个 AI 创业公司的 hero 分区」

诠释：

• 生成 1 张 hero 图
• 如需，生成 1 张更近的提取图看文字/按钮
• 不要从更大的整版里裁出一小块
• 若需要更清晰，将 hero 作为全新更干净的独立图重生成
• 保持 hero 平静、可读
• 避免假功能标签与嵌套卡片
• 分析标题、副标题、CTA、间距、颜色、hero 媒体
• 然后实现 hero

示例 2

用户： 「给我设计一个 8 分区落地页」

诠释：

• 在 Codex 中生成 8 张独立分区图
• 每个分区一张
• 在必要处生成额外细节图
• 深入分析全部 8 个分区
• 提取文字、字体、间距、按钮、颜色、卡片、结构
• 若某分区仍不清晰，将该分区干净地重生成而非裁切
• 保持分区开放、不过度盒化
• 然后从这些参考实现整站

示例 3

用户： 「做一个高端创意工作室网站，4 个分区」

诠释：

• 在 Codex 中生成 4 张独立分区图
• 保持 hero 非常干净
• 确保文字保持可读
• 深入分析每个分区
• 不要使用首批渲染的粗糙剪裁
• 如需重生成更清晰的分区图
• 避免过度胶囊化的微文案与容器超载
• 然后从这 4 张参考实现站点

---

38. 最终目标

生成让人感到如下的网站参考图：

• 高端
• 有艺术指导
• 清晰
• 有结构
• 可读
• 可分析
• 令人难忘
• 反通用
• 便于实现

对视觉类网站工作，本技能必须先自行生成图，然后深入且干净地分析所生成的图，再把它们作为首要视觉来源，然后构建前端以紧贴它们。

在 Codex 内，如果用户想要多个分区，优先独立的大分区图而非一张压缩的多分区整版，以便妥善提取文字、间距、字体、按钮与颜色。

如果某分区仍需更清晰，为该分区生成一张额外的面向提取的图。

如果更多图能提升质量，就多生成图。 不要在图片数量上偷懒。

当全新分区专属图能更好保留间距、布局与可读性时，不要裁切之前生成的图。 改为生成一张干净的新图。

避免卡片套卡片套卡片。 避免每个分区周围的巨大盒式包裹。 避免假技术胶囊与装饰性微标签。 尤其保持 hero 干净、宽敞、克制，且在小尺寸笔记本上可读。

结果应当：

• 作为分区图有力
• 作为设计系统有力
• 经得起深度分析
• 作为实现的前端也有力

最终成果应看起来像一个顶级网站概念被忠实翻译成真正的代码，而不是一张细小读不清的设计板，也不是一次通用的代码重新诠释。