先生图，后生站：用 Images 2.0 + Codex 去掉网站的 AI 味

让最擅长审美的模型管审美，让最擅长写代码的模型管代码。两套模型各司其职，比逼着一个全能选手干所有活，出来的东西好得多。

AI 味从哪来

让 Codex 直接「做一个好看的网站」，它需要同时处理布局、配色、字体、间距、动画、响应式、组件结构、状态管理……模型同时管审美和写代码，必然顾此失彼。每一项都是六十分，没有一项做到九十分。尤其是审美这件事，当它需要和一堆技术细节抢注意力的时候，永远是第一个被牺牲的。

每个版块单独看都没毛病，拼在一起就是正确到无聊，没有一个地方让人「啊哈」一下。这就是 AI 味——不一定是配色丑，而是布局、结构、视觉节奏全都太安全、太可预测。

核心思路：先生图，后生站

六个字背后是一个关键认知：分工。

先用 ChatGPT Images 2.0 生成图片，它只需要关心一件事——这张图好不好看。不用管设计能不能实现，不用管 React 组件怎么拆，不用管响应式怎么做，可以把全部能力都花在视觉上。

设计行业几十年来一直都是这么干的：设计师出稿，开发实现。只不过现在设计师变成了 Images 2.0，开发变成了 GPT 5.5。如果想用国产平替，生图可以换字节的 Seedream，编码用智谱 GLM，一样能跑通这套流程。

第一步：一块一块地生图

注意，不是让 Images 2.0 生成一整张巨长的网页截图。一张大图会让细节丢失，布局决策也会变弱。要一个版块一张图。

网站通常可以拆成这几个版块：首页、关于我们、账号特点、案例展示、客户评价、行动号召、页脚。每张图只管一个版块，这样每个版块都有足够的视觉空间和细节。

生图前，先在 Codex 上安装「Taste Skill」，有网页和 APP 两个版本：

网页设计：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
APP设计：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-mobile/SKILL.md

简单来说，这是一本「反 AI 审美」的设计规则书。它告诉文生图模型禁止左文右图、紫蓝渐变、四卡片对称这些 AI 最爱用的套路，强制每个版块用不同的构图和背景方式，要求大量使用真实图片而非纯文字卡片，同时锁定全站配色和字体的一致性。一句话，把资深设计师的审美判断，变成了模型能读懂的规则。

然后把网站分页设计说明和生图 Prompt 一起丢进 Codex 对话框，让它调用 Images 2.0 干活：

使用 imagegen-frontend-web，为我的网站生成设计图。
这是网站的分页内容：XXXXXX。
设计需要包含六个版块，每个版块一张图，一共六张独立的图片。
网站整体要精致干净，偏极简风格，信息量少一些，但视觉效果要有冲击力，布局要有创意。
主色调要有科技感。所有图片都要是横版的。

然后多抽几次卡，挑最满意的定稿。

第二步：把素材抠出来

Images 2.0 生成的设计图，不能直接甩给代码模型说「照着做」。得先把里面的关键视觉元素提出来，做成素材文件。原因很简单：写代码的 AI 不会画画。3D 物件、插画、实拍图这些东西 CSS 写不出来，只能以图片的形式引用。你不给它，它就只能自己瞎编一个，出来的东西跟设计图完全不是一回事。

不用手动抠图。方法还是用 Codex——把设计图传上去，跟它说「提取这张图里的主体元素，高清，透明背景」。直接让它抠，效果已经很不错。

第三步：一块一块地写代码

前端开发继续用 Codex。这里有个细节：不要把所有设计图全扔进去说「给我全部做完」，那样出来的东西不会想看第二眼。正确的做法是一张一张生成网页。

把每张设计图和提取好的素材一起给 Codex，告诉它：

我们来搭一个网站。我会提供设计图和素材文件，你照着设计图来还原，不要自己生成或替换素材。
这是第 N 个版块，照着做。用 React + Next.js。

第一次出来的结果大概率不完美，这是正常的。Codex 里打开网页会出现在右边的预览栏，右上角的批注按钮可以选中页面里的任何元素直接写要求——比如「机器人太大了，缩小 20%」，它就帮你改。

不用截图，不用画圈标箭头，选中就批注，批注就改。一个页面大概来回两三轮就能调到比较满意，然后下一个版块重复这个过程。

第四步：整体统一

所有版块全做完之后，还得退一步看整体：颜色有没有跑偏？字体是不是一致？版块之间的间距和谐吗？从头滚到尾顺不顺？

然后加动画——这一步反而简单，直接跟 Codex 说「给每个版块加上滚动进入的动画，要流畅干净，不花哨」就行。动画是标准化技术需求，不太依赖审美判断，模型处理得都不错。

最后是响应式。设计图通常按桌面端生成，但读者大概率在手机上看，手机端的显示效果得单独检查，有问题就截图反馈。

完整流程

1、用 Codex 调用 Images 2.0 + image skill 生成网站设计图，每个版块一张
2、多跑几次，挑选每个版块最满意的那张
3、用 Codex 提取设计图中的素材元素，透明底
4、用 Codex 逐个版块实现代码，一次只做一个版块
5、用批注反馈给 Codex 打磨细节
6、加动画、调响应式、检查整体统一性

这个方法的代价

它不是零成本的。一个版块来回调两三轮，五六个版块就是十几轮，加上生图选图、提取素材、去背景，整个流程可能要花几个小时。比起直接一句话「帮我做个网站」三分钟出结果，慢太多了。

但得想清楚要的是什么。如果只是要一个能用的页面，一句 Prompt 搞定完全 OK。如果想要一个让人看了不会第一反应觉得「AI 做的」的东西，就得把审美这个环节还给真正擅长做审美的工具。

你不会让守门员去踢前锋，哪怕他是队里跑得最快的人。