GPT Image 2 + Codex 深度解析：从「vibe art」到高端网站，AI 工作流的最后一公里

当 AI 能生成代码、能生成图片，却始终生成不出「好看」的网站——这个问题，终于被一个不到 100 行的 SKILL.md 解决了一半。

一、问题：AI 画图很强，代码也能写，合在一起却「丑哭了」

GPT Image 2 发布之后，技术社区炸了。OpenAI 用它在 Image Arena 榜单上以 1512 分登顶，领先第二名 242 分——这是 AI 生图领域有史以来最大的代差领先。生成的直播界面、电商海报、游戏资产、UI 设计图，足以以假乱真。

Codex 作为 OpenAI 旗下的编程 Agent，内置了 Image 2 生图接口，不需要单独配置 API Key。理论上，把这两个工具链起来，应该能得到这样的体验：

「给我设计一个高端品牌网站」→「啪，一张完美设计图」→「啪，一套可运行的前端代码」

但现实是：AI 能生成图片，能写代码，但两件事放在一起，输出往往「功能没问题，视觉平庸得像 PPT 模板」。

问题出在哪里？

AI 不擅长审美决策。 颜色搭配、字体选择、布局节奏、动效细节，这些需要「品味」的决策，AI 的生成结果是概率分布，不是审美判断。当 AI 同时负责「设计」和「实现」时，它会默认选择最安全、最通用的解法——结果就是千篇一律的「AI 风」界面。

这个问题的解法，业界已经摸索出了一条被反复验证的工作流：人做审美决策，AI 负责实现。 最近一位设计师 Viktor Oddy 用这套工作流，从零搭建了一个完整的品牌网站，全程没有手动写一行代码。

而让这套流程真正工程化、产品化的关键工具，是一个叫 Taste-Skill 的开源项目。

二、Taste-Skill：给 AI 装上「设计品味」开关

Taste-Skill（GitHub: BND-1/taste-skill，MIT 协议，86 commits）是一个为 AI 编程 Agent（Claude Code、Cursor、Codex、Windsurf 等）设计的 SKILL.md 文件，核心功能只有一个：阻止 AI 生成「千篇一律的泡沫代码」，强制它构建现代、高端的界面。

安装方式

# 方式一：npx 一键安装（推荐）
npx skills add https://github.com/BND-1/taste-skill.git

# 全局安装，所有项目生效
npx skills add https://github.com/BND-1/taste-skill.git -g

# 方式二：手动下载
# 下载 SKILL.md 文件，放到项目文件夹中
# 告诉 AI：「请严格遵循 SKILL.md 中的规则」
# 在 Cursor 中可以直接 @SKILL.md

三个控制旋钮

整个 Taste-Skill 系统只靠 SKILL.md 一个文件运行，顶部的三个参数可以调整：

这三个值可以根据项目类型灵活调整：品牌官网偏向高 DESIGN_VARIANCE（8+）、低 VISUAL_DENSITY；数据仪表盘则反之。

Taste-Skill 的工作原理

Taste-Skill 并不是一个技术框架，而是一套设计约束规则。它告诉 AI：

• 不要用系统默认字体，使用 Google Fonts 或本地字体包
• 不要用 8px 以下的边框圆角，不要用纯黑色按钮
• 动效优先使用 CSS transitions，避免 jQuery 动画
• 背景优先用渐变或微妙的纹理，不接受纯色背景
• 布局优先使用 CSS Grid 和 Flexbox，不要用 table 布局

本质上，Taste-Skill 把「高端设计的隐性规则」显式化了，让 AI 在生成代码时有一个参照系。

三、GPT Image 2 + Codex 完整工作流：从设计图到上线网站

这是 Viktor Oddy 在实测中验证的完整 7 步工作流，适用于任何类型的品牌网站、落地页和展示型页面。

第一步：找视觉灵感（Pinterest）

去 Pinterest 找一张和目标风格接近的参考图。Viktor Oddy 的案例是做一个游戏风格的品牌展示页，他找了一张合适的场景图作为起点。

这一步的关键：给 AI 一个具体的视觉方向，而不是「设计一个好看的网站」这种模糊指令。AI 的审美判断能力有限，但 AI 复现参考图的能力很强。

第二步：AI 拆分前景/背景

用 AI 生图工具（支持图层分离的任意工具）把参考图拆成前景和背景两个图层：

• 前景：保留角色和场景元素
• 背景：换成纯黑色

这样做的目的是为后续视差滚动效果（Parallax Scrolling）做准备。如果不想用付费工具，搜索「在线免费去背景」也能完成这一步。

第三步：生成循环动画（Kling 或同类工具）

把前景图导入视频生成工具（Viktor Oddy 使用的是 Kling），让画面生成一段循环动画——镜头不动，画面内部有细微动态。

这个动画视频将作为网站 Hero 区域的背景。相比静态背景，循环微动画的视觉冲击力显著更强，用户的注意力停留时间明显提升。

第四步：对话描述页面结构（Google AI Studio）

打开 Google AI Studio（也可以是 Claude 或任意支持对话编程的 Agent），用自然语言描述页面结构：

创建一个 hero 区域，用这个视频做背景，写上标题。

AI 会生成包含导航栏和按钮的初始页面。如果对自动生成的按钮样式不满意，就去 Pinterest 截一张游戏风格按钮的参考图，发给 AI，让它参照这个风格重新生成。

这一步的本质：用参考图纠偏。把审美决策留给人，AI 只负责落地。

第五步：下载代码，导入 Antigravity

下载第四步生成的代码，导入到 Antigravity（或任意支持拖拽调整的前端工具）中进行微调。

Antigravity 中，把之前准备好的字体文件直接拖进素材库，用对话指令让 AI 替换字体、调整字号和标题文案。然后，把第二步拆分出的前景图上传，用自然语言描述视差滚动效果：

初始尺寸放大到 300%，视点对齐顶部。
用户滚动时尺寸恢复正常。
前景图层盖住文字，但不会挡住按钮。

第六步：扩展其他页面区域

参考 Landbook（网站设计灵感库，按行业分类）上同类网站的布局，用一段较长的指令同时让 AI 生成：

• 「关于我们」板块
• 数据统计板块
• 视频背景板块
• 页脚

对应位置先用占位图（placeholder）填充，后续再替换。

第七步：替换素材，完成页面

把剩余的视觉素材上传，同样用对话让 AI 把占位图替换成实际图片，整个页面完成。

四、Taste-Skill + GPT Image 2 的深度整合

除了 Viktor Oddy 的手动工作流，Taste-Skill 还和 GPT Image 2 形成了更紧密的自动化整合。

GPT Image 2 Skill（wuyoscar/gpt_image_2_skill）

GitHub: wuyoscar/gpt_image_2_skill（51 commits）是一个集成了以下功能的综合工具包：

• 提示词库（Prompt Gallery）：经过实测验证的 GPT Image 2 提示词模板，覆盖 UI 设计、游戏资产、电商主图等多个场景
• Claude Agent Skill：可直接在 Claude Code 中调用的图片生成技能
• CLI 工具：命令行接口，方便集成到 CI/CD 工作流

安装方式：

npx skills add https://github.com/wuyoscar/gpt_image_2_skill.git

与 Taste-Skill 的组合

两者组合使用时的推荐流程：

1. 用 Taste-Skill 的 DESIGN_VARIANCE=8 参数，确保 AI 生成的前端代码具有足够的设计差异化
2. 用 GPT Image 2 Skill 批量生成各页面板块的参考图
3. 用 Codex 对照参考图实现前端代码，Taste-Skill 约束代码风格
4. Taste-Skill 的 MOTION_INTENSITY 参数与第三步的 Kling 动画生成流程无缝衔接

五、实测案例：独立开发者的一天「vibe art」

游戏美术：106 个素材，一天完成

独立开发者 VibeCreAI 在一次 Game Jam 中，把整个游戏的场景、道具和天空背景全部替换了一遍——106 个素材，用时一天。

之前他因为不喜欢手动处理美术资产，所有视觉都用代码生成的占位符凑合。这次他让 Codex 调用 Image 2 生成这批资产，然后直接在游戏里加载。没有导出文件、没有拖拽素材、没有手动资产管理。

他把这叫做「vibe art」——类似于此前「vibe coding」的概念，只不过换到了美术环节。核心理念是：不追求每个素材的完美，而是追求整个资产库的一致性和生成效率。

完整游戏：图 → 可玩游戏原型

开发者 givros 的流程更进一步：

1. 用 Image 2 生成画面
2. 让 Codex 把画面切割成精灵图并生成动画
3. 由 GPT-5.5 搭建出可玩的浏览器游戏原型

整个过程从一张图到一个可以在网页上操作的游戏，没有离开同一个工具链。

规模实验：1500 张图拼成「巴比伦空中花园」

开发者 Peter Gostev 做了一个更激进的实验：让 GPT-5.5 在 Codex 里规划并生成了 1500 张 2:1 比例的图像，拼合成一个可以在各个方向环顾的「巴比伦空中花园」体验，效果类似 Google 街景的行走体验。

他在复盘时提到，移动时画面衔接还有跳跃，如果能更精细地规划图像序列，效果应该会更好——这也为后续的多 Agent 协作优化指明了方向。

六、技术限制与注意事项

Codex 中 Image 2 的分辨率上限

开发者 Tz_2022 测试了不同宽高比的生图指令，结果显示无论选择 1:1、16:9、3:1 还是 1:3，总像素数都被控制在约 157 万。

对于屏幕显示来说已经够用，但如果需要更高分辨率的印刷输出，这个限制目前还绕不过去。

Codex 与 Claude Code 的 API 差异

Codex 内置的 Image 2 接口和 OpenAI 的独立 Image Generation API 在生图质量上有差异。实测发现：

• Codex 的生图速度更快（因为共享上下文，不需要额外 API 调用）
• 但在复杂构图（多物体、非拉丁文字）场景下，OpenAI 官方 API 的效果更稳定
• Taste-Skill 建议优先在 Codex 环境下使用，配合 npx skills add 安装后直接生效

AI 的审美天花板

Taste-Skill 解决的是「AI 生成的代码风格」问题，但不能解决 AI 的审美决策能力。在以下场景中，AI 的表现仍然受限：

• 颜色搭配的微妙层次（需要人眼判断）
• 品牌视觉的一致性（需要设计规范文档）
• 复杂动效的物理合理性

最佳实践仍然是：人在 Pinterest 上做决策，AI 负责执行和复现。

七、工具链全景图

八、总结：AI 工作流的分工原则

这篇文章的核心洞察不是哪个工具多厉害，而是人和 AI 的分工原则：

AI 不擅长审美判断，但 AI 非常擅长复现参考图的风格。

最佳工作流：人做审美决策 → AI 生成和实现 → 人对照参考图验收。

这和 Taste-Skill 的设计理念完全一致：它并不让 AI 自己判断什么是「好看」，而是把「好看的代码长什么样」翻译成一套显式规则，让 AI 在生成时有据可依。

美术资产的制作和 UI 的实现门槛被拉得很低，个人开发者可以把更多时间花在方向和创意上，而不是被实现细节卡住。工具负责做出来，人负责判断好不好看——这是目前 AI 工具链最能发挥效率的协作模式。

原文链接：https://mp.weixin.qq.com/s/ULYI_maFBCpcWrXkE4DD8Q
公众号：AI煮代码汤