当前位置：首页 > news >正文

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

news 2026/4/16 3:18:14

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 自己修好了。

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