OpenAI Codex Frontend Skill 实测：当大模型进入 UI 生成，排版与设计系统成为新瓶颈

随着大模型从“代码生成”走向“应用生成”，前端开发正成为 AI 工具链竞争的关键战场。

近期，推出的 Codex Frontend Skill 开始面向开发者提供 UI 生成能力。从实际体验来看，其已经能够直接生成完整落地页（landing page）结构，包括组件划分、样式框架甚至基础交互逻辑。

但在“可用”与“可上线”之间，仍然存在一个明显断层：视觉排版与设计一致性。

从代码生成到 UI 生成：能力边界正在上移

传统代码模型（如早期 Codex）主要解决的是：

• 函数级别代码补全
• API 调用生成
• 简单逻辑拼接

而 Frontend Skill 的目标明显更高一层：

• 生成完整页面结构（HTML / JSX / CSS）
• 自动布局（Grid / Flexbox）
• 基础视觉设计（颜色、间距、组件层级）

这意味着模型需要同时具备三类能力：

1. 编程语义理解（组件结构）
2. 设计语义理解（视觉层级）
3. 用户体验理解（信息组织）

问题恰恰出现在第二层——设计语义。

实测问题：不是“不会写 UI”，而是“不会做设计系统”

在实际生成的落地页中，可以观察到几个典型问题：

1. 字体与间距缺乏比例体系

虽然模型能够生成不同层级的文本（标题、副标题、正文），但：

• 字号之间缺乏明确 scale（如 1.125 / 1.25 / 1.5 的 typographic scale）
• 行高（line-height）与字号不匹配
• 字体大小与整体布局比例失衡

这导致页面“看起来像 UI”，但缺乏设计节奏。

2. 对齐与栅格系统失效

常见问题包括：

• 文本与按钮未对齐
• 多列布局未遵循统一 grid
• padding / margin 不一致

本质上是缺乏对“栅格系统（grid system）”的内化理解。

3. 局部正确，全局失衡

单个组件（如按钮、卡片）往往设计尚可，但组合后：

• 信息密度不均
• 视觉重心偏移
• 层级关系混乱

这说明模型更擅长“局部生成”，而非“全局设计”。

与 的 Claude Code 对比：差距在哪？

相比之下，Claude Code 在前端生成体验上更接近“设计可用”状态，其差异主要体现在：

1. 更强的结构一致性

Claude Code 更倾向于：

• 使用统一 spacing scale（如 4 / 8 / 16 体系）
• 保持组件间一致的 padding / margin
• 维持整体布局节奏

2. 更稳定的 typography 层级

其生成的文本层级通常：

• 标题层级清晰（H1 / H2 / H3）
• 字号与行高匹配
• 信息层级更符合阅读习惯

3. 更接近真实设计系统

Claude Code 更像是在“隐式调用一个设计系统”，而非逐段生成样式。

技术本质：缺少“设计 token”与“全局约束”

从 AI 工程角度看，这类问题并不是简单的模型能力不足，而是输入与约束机制的问题。

当前 Frontend Skill 的生成逻辑，很可能类似：

• 基于 prompt 直接生成 UI 代码
• 缺乏明确 design token（如 spacing、font scale、color system）
• 缺少全局 layout constraint

而一个成熟的设计系统通常包含：

• Typography scale（字体比例体系）
• Spacing scale（间距体系）
• Grid system（栅格系统）
• Component token（组件级规范）

如果模型没有显式或隐式接入这些结构，就容易出现“看似合理但整体失衡”的结果。

下一步演进方向：从生成 UI 到生成设计系统

要解决当前问题，大模型前端能力可能需要从“页面生成”升级为“系统生成”：

1. 引入 Design Token 层

模型输出不只是 CSS，而是：

• font-size: var(--text-xl)
• spacing: var(--space-4)

从而保证全局一致性。

2. 增加全局约束机制

类似 constraint-based layout：

• 自动校验对齐
• 自动统一间距
• 动态调整比例

3. 与设计工具打通

未来可能出现：

• Figma → LLM → Code 的闭环
• 或 LLM 直接生成可导入设计工具的结构

对 AI 前端工程的启示：生成能力不等于可交付能力

Codex Frontend Skill 的表现说明，大模型在前端领域已经迈过一个关键门槛：

• 能生成完整 UI
• 能快速构建原型
• 能替代部分初级开发工作

但距离“生产级交付”仍有关键差距：

• 设计一致性
• 视觉规范
• 可维护性

这也意味着，短期内 AI 更适合：

• 快速原型（prototype）
• Demo 页面
• 内部工具界面

而非直接用于高质量产品页面。

写在最后：前端 AI 的真正难点，不在代码，而在“设计抽象”

的 Codex Frontend Skill 已经证明，大模型可以“写出页面”。但问题在于：

写页面 ≠ 做设计

前端开发的复杂性，很大一部分来自隐性的设计规则与经验，而不是显性的代码逻辑。

当 AI 试图进入这一领域时，真正的挑战不再是语法或组件，而是：

• 如何理解视觉层级
• 如何维持全局一致性
• 如何抽象设计系统

谁先解决这些问题，谁就可能在下一轮 AI 开发工具竞争中，占据真正的优势。