Codex 前端实战：AI 能画出设计稿，也能写代码，但如何让它不再“像 AI 做的”？

上周我用 Codex 把一份 Figma 设计稿丢给它，三分钟生成了一个完整的前端页面。同事们看完说：“这个看起来不太像 AI 做的。”

这句话很有意思。默认情况下，Codex 生成的前端代码确实有一股“AI 味”——卡片网格、蓝紫渐变、毛玻璃效果、整齐得让人失去想象的布局。GPT-5.4 在前端这块确实强了不少，能生成更有野心的 UI，但方向还得你给，提示词有多明确，模型就有多靠谱。

这篇文章我不打算写“如何安装 Codex”“API 怎么调用”那种模板化教程，我想聊聊我在几个实战项目里用 Codex 的实际体感——它到底能做什么、做不好的地方在哪、以及怎么让它产出不“像 AI 做的”前端代码。

一、三种典型的使用姿势，看看哪种适合你

Codex 在前端开发中的使用方式大概可以分为三种，我按“自由度”从高到低排个序：

1. 纯对话式生成（Vibe Coding）

最简单粗暴的方式。打开终端敲 codex，然后像跟同事聊天一样描述你想要什么。有位开发者在 MacBook 上装了 Codex 之后，全程零手写代码，只用对话就搭建了一个漫画网站：先是让它基于图片目录生成类似 xkcd 的浏览页面，接着让它加键盘导航、搜索框、点赞按钮、移动端滑动手势，甚至让它自动配置 GitHub Pages 部署脚本。中间 GitHub Actions 报错，他把报错信息直接贴给 Codex，AI 自己修好了。

这种模式适合快速验证想法、做个人小项目。代价是代码结构可能比较潦草，组件复用性差，维护起来费劲。但如果你就是想“先跑通再说”，这种方式完全够用。

2. 设计稿驱动生成（Figma + Codex）

这是我目前最常用的方式。Figma 的 MCP Server 可以直接把设计文件传给 Codex，让它基于真实设计生成代码，而不是靠你口头描述“我要一个带毛玻璃效果的卡片”。

一个有意思的细节：Codex 生成的 Figma 文件是网页版的，点击后传送到客户端，你可以直接选中元素、进行编辑。这和之前很多“生成设计稿”的方式不一样——生成的元素保留了模块化结构、图层和约束信息，不是一张死图。也就是说，你可以在 AI 生成的 Figma 文件上继续改，然后再让 Codex 基于修改后的设计重新生成代码。这个双向流转的能力，让设计和开发之间的来回迭代成本大幅下降。

3. 技能包（Skills）驱动——像 Lego 一样组装功能

这是我最近才发现的黑科技。Codex Skills 本质上是一个可复用的提示词+工具配置包，你可以把它理解为“给 AI 装上的专业插件”。

最让我震惊的是一个对比实验：有人用完全相同的 prompt 让 Codex 生成一个“虚拟工厂”3DGS 仪表盘，一个用标准 Codex，一个启用了 ui-ux-pro-max-skill。结果差异巨大——标准版是典型的“AI 味”SaaS 演示页：深色主题、玻璃面板、发光点缀，视觉冲击力强但信息架构较弱；技能包版本则更像一个真正的产品，强调信息层级和设计系统，而不是堆砌好看的组件。

有个技能包叫 react-ts-project-init，前端团队新建项目时用它一键生成 React+TypeScript 标准化架构，自动完成 ESLint、Prettier、Git 规范配置，大幅降低初始化耗时。还有全栈部署技能包，能一键把前端部署到 Vercel、后端部署到云服务器，直接输出可访问的在线地址。

二、“AI 味”从哪来的？以及如何压住它

Codex 默认产出的前端页面为什么总长一个样？原因其实很简单：不给具体指引，模型就走它训练时见过最多的路子。卡片网格、蓝紫渐变、居中加按钮——这些都是训练数据里高频出现的模式。

我总结了几条真正管用的方法：

先定设计系统，再写代码。 字体、色板、布局规则——在让 AI 写第一行代码之前全部说清楚。模型有了明确的约束，才不会自动滑向默认审美。

给视觉参考。 截图、情绪板都可以。Codex 的多模态能力能从图片里推断节奏、间距和比例。有篇文章里的案例是把 tdhopper.com 的截图丢给 Codex，让它照着风格生成个人作品集网站，几分钟就得到了 90% 相似的成品。

给真实内容。 别用 Lorem Ipsum。真实的产品文案会迫使 AI 围绕内容来组织布局，而不是用占位文字填充一个空洞的模板。

明确边界。 一位设计师分享的经验很经典：用 Codex 开发 Chrome 插件时，他明确列出了“这是一个 Chrome 扩展 / 主流程是网页→扩展→复制→Figma 粘贴 / 不依赖本地 bridge / 输出必须是可编辑结构”这些边界。如果不写清楚，Codex 会主动帮你“扩成平台”“加上同步系统”。

三、Codex 在真实团队中的表现：理想与现实的差距

我最近看了 Martin Fowler 网站上的一篇分析文章，作者让 Codex 和其他几个 AI 编程智能体完成同一个任务。结论是：Codex 在“理解任务并给出正确方向”上表现出色，但在处理细节和边缘情况时仍然需要人工介入。

这跟我自己的体感一致。Codex 特别适合做两类事：一是从零到一的快速搭建，二是重复性高的模板化工作。一个前端团队的实际数据是：通过 Codex Skills 封装标准化工作流，统一了团队项目架构规范，大幅降低了初始化耗时。还有一个 3-7 人的工程团队，5 个月内交付百万行代码产品，零人工手写代码，效率提升约 10 倍。

但 Codex 在处理复杂业务逻辑、状态管理、性能优化这些需要深度思考的事情上，目前还替代不了人。它更像一个“超级实习生”——能快速产出大量可用代码，但需要你审阅、重构、并做出关键决策。

四、实操建议：怎么把 Codex 真正用起来

如果你刚上手：

1. 从终端版开始。npm install -g @openai/codex，然后 codex 进入交互模式，直接打字描述需求。不需要 API key 也能用基础功能。
2. 用“suggest 模式”。Codex 每次创建文件或执行命令前都会请求确认，让你有完全的控制权。
3. 先做小项目找感觉。作品集网站、个人博客、简单的工具页面，都是不错的练手对象。

如果你已经用了一段时间：

1. 把 Figma 接进来。在 Codex 中配置 Figma MCP Server，实现“设计→代码→设计”的双向流转。
2. 试试 Skills。ui-ux-pro-max-skill 能把 AI 直出页面的“AI 味”压下去，让 UI/UX 设计质量显著提升。
3. 建立自己的提示词模板。把常用的设计系统、代码规范、项目约束沉淀下来，每次直接复用。

Codex 正在从前端开发的“辅助工具”变成“协作伙伴”。它不一定每次都对，但它越来越懂你在想什么。我建议大家亲自上手玩一玩，把自己当成“什么都不会的人”，每个步骤都去找 AI 帮忙，体验一下全流程 AI 在工作流里到底能发挥到什么程度。用的过程中你会慢慢找到感觉，总结出属于自己的那套玩法。