AI前端设计实测：Opus 4.5靠一个Markdown技能文件逆袭登顶

AI前端设计能力之争：谁才是最佳选择？

Gemini 3 Pro、Opus 4.5、GPT 5.2——这三大前沿AI模型在编程能力上都已相当出色，但在前端设计领域，它们的表现却参差不齐。知名开发者Theo（t3.gg）通过一次系统性的对比测试，揭示了一个出人意料的结论：被认为设计能力最差的Opus 4.5，配合一个Markdown格式的"前端设计技能文件"，反而成为了最佳的AI前端设计工具。

这个发现颠覆了许多开发者的直觉认知。下面我们来完整还原这次测试的过程和关键发现。

测试方法：同一提示词，六个Agent并行

Theo设计了一个统一的测试场景：为一个名为"T4 Canvas"的AI图像生成工作室构建营销首页。他同时运行了六个Agent——两个Gemini、两个Claude Code（Opus 4.5）、两个GPT 5.2（Codex），分别测试有无"前端设计技能文件"时的效果差异。

这里所说的Agent（智能体），是指能够自主执行多步骤任务的AI系统，区别于简单的聊天对话模式。在前端开发场景中，Agent可以自主读取项目文件、编写代码、运行构建命令、修复错误，形成完整的开发闭环。Theo测试中使用的Claude Code、Codex、Gemini CLI分别是Anthropic、OpenAI和Google推出的命令行Agent工具，它们都能直接在终端中操作本地项目。并行运行六个Agent意味着同时启动六个独立的开发环境，确保测试条件的一致性和可比性。

关键提示词技巧：一次生成五个设计方案

测试中有一个非常实用的提示词技巧：要求模型一次创建五个不同的设计方案，分别托管在 /one 到 /five 的路由上。

这个技巧的价值远不止"多次抽卡提高命中率"。当模型在同一上下文中创建多个设计时，它知道其他四个方案的存在，会刻意让每个方案与众不同。这比简单地重新生成五次能获得更高的设计多样性。

这个方法还能帮你摸清模型的"模板库"深度——Theo估计GPT-5系列大约有10个内置模板，Opus有20个左右，而Gemini只有1-2个。AI模型在训练过程中会从海量网页数据中学习到常见的设计模式和布局结构，这些被内化的设计模式可以理解为模型的"隐式模板库"。当模型被要求生成前端页面时，它倾向于从这些高频出现的模式中采样，这就导致了所谓的"AI审美"问题——紫蓝渐变、圆角卡片、Inter/Roboto字体、深色背景配霓虹色调等元素反复出现。这种现象在机器学习中被称为"模式坍缩"（mode collapse）的一种表现形式：模型过度集中在训练数据的高密度区域，缺乏向低密度但同样有效的设计空间探索的能力。不同模型的模板库深度差异，本质上反映的是各模型训练数据中前端设计样本的多样性和质量差异。

裸跑对比：三大模型的原始前端设计能力

Opus 4.5：默认状态下设计最差

不使用任何技能文件时，Opus 4.5的前端设计输出令人失望。五个方案中充斥着紫蓝渐变、噪点纹理背景、文字可读性差等问题。Theo直言："这些甚至都不是好的起点，我认为全部都很糟糕。"

GPT 5.2：中规中矩但模板化严重

GPT 5.2的表现稍好，但有一个值得注意的发现：即使Theo明确要求不使用技能文件，Codex的系统优先级仍然强制调用了前端设计技能。这意味着GPT的"裸跑"结果可能已经受到了技能文件的加持。

即便如此，五个设计方案的结构高度相似——每个版本都有几乎相同的模型展示区块，布局变化极为有限。

Gemini 3 Pro：默认状态下设计直觉最好

Gemini 3 Pro在不使用技能文件时展现了最好的设计直觉。它生成了一些视觉上相当吸引人的方案，包括酷炫的霓虹风格和流畅的有机设计。

但Gemini的问题在别处：它的CLI工具极其不稳定。Theo在测试过程中多次遭遇CLI卡死、指令不被执行、构建失败等问题。他甚至吐槽道："每次使用Gemini模型，我都在质疑怎么会有人用它来做基础聊天和数据解析以外的任何事情。"

Gemini CLI是Google在2025年推出的命令行AI编程工具，旨在与Anthropic的Claude Code和OpenAI的Codex竞争。CLI（Command Line Interface，命令行界面）工具的稳定性取决于多个因素：API调用的可靠性、流式输出的处理、工具调用（tool use）的解析准确性、以及本地文件系统操作的错误处理。Theo遇到的卡死和指令不执行问题，很可能与Gemini在函数调用（function calling）和多轮工具使用链路上的工程成熟度有关。相比之下，Claude Code经过多个版本迭代，在Agent工作流的稳定性上已经建立了较强的工程优势。这也解释了为什么即使Gemini的模型能力在某些维度上表现出色，实际开发体验仍然不尽如人意。

前端设计技能文件：一个Markdown改变一切

技能文件到底是什么？

技能文件（Skill）本质上就是一个Markdown文档，描述了你希望AI模型遵循的行为方式——可以理解为一段可复用的上下文指令。Claude Code的GitHub仓库上已经开源了这些技能文件。

从技术原理上看，技能文件的工作机制基于大语言模型的上下文窗口。当模型接收到用户提示词时，技能文件的内容会作为系统级指令被注入到上下文的前端位置，优先级高于用户的普通对话内容。这类似于传统软件开发中的配置文件——它不改变模型本身的参数权重，而是通过精心设计的自然语言指令来约束和引导模型的输出行为。在Claude Code中，技能文件存储在项目根目录的 .claude/skills/ 目录下；在Cursor中则通过 .cursorrules 文件实现类似功能。这种方法属于提示工程（Prompt Engineering）的高级应用，其核心思想是：与其期望模型自动理解你的审美偏好，不如显式地告诉它什么该做、什么不该做。

前端设计技能文件的核心内容包括三个方面：

• 明确的设计方向指引："选择一个清晰的概念方向并精确执行。大胆的极繁主义和精致的极简主义都可以，关键是意图性，而非强度。"
• 反AI审美的明确禁令：禁止使用Roboto、Inter等过度使用的字体；禁止紫色渐变配白色背景的陈词滥调配色；禁止千篇一律的布局模式。
• 多样性要求：在明暗主题、不同字体、不同美学风格之间切换，永远不要趋同于常见选择。

Opus 4.5 + 技能文件：从最差到最佳的质变

当Opus 4.5配合前端设计技能文件后，效果堪称惊艳。

第一个设计就展现了极简风格配合模糊动画背景的高级感，Theo评价"这比我们之前看到的几乎所有东西都好得多"。模型甚至自动在底部添加了设计方案切换器——这说明技能文件不仅提升了视觉审美，还增强了UX交互意识。

第二个设计更是让Theo和直播观众惊叹不已。对比同一模型在有无技能文件下的输出，差距可以用"天壤之别"来形容：

• 无技能文件：紫蓝渐变、噪点背景、文字难以辨认
• 有技能文件：精致的排版、有意图的色彩选择、专业级的布局

迭代能力对比：Opus的真正护城河

Gemini的迭代困境

当Theo选出Gemini最好的两个设计，要求它基于这些偏好再生成五个迭代版本时，结果令人失望。新生成的方案几乎没有参考原始设计的任何元素，看起来像是从完全不同的模板库中随机抽取的。

Theo的判断是：Gemini本质上是在将训练数据中的模板套用到你的需求上，而非真正在"设计"。 它无法理解你喜欢某个设计的哪些方面，也无法基于这些偏好进行有意义的迭代。

Opus的迭代优势

相比之下，Opus在迭代环节表现出色。当被告知用户偏好的两个设计后，它生成的新方案明显继承了原始设计的精髓——保留了受欢迎的布局理念和视觉风格，同时在细节上做出了有意义的变化。

Gemini和Opus在迭代能力上的差异，反映了两种根本不同的模型行为模式。Gemini的行为更接近"检索增强生成"——它从内部表征中检索最匹配的设计模板，然后填充用户的具体内容。这种方式在初始生成时可能产出视觉效果不错的结果，但在迭代时缺乏对用户偏好的细粒度理解。Opus则展现出更强的"指令跟随"（instruction following）能力，能够解析用户反馈中的隐含偏好（如布局风格、色彩倾向、排版密度等），并将这些偏好作为约束条件融入下一轮生成。这种差异可能源于Anthropic在RLHF（基于人类反馈的强化学习）训练阶段对指令精确执行的特别强调，使得Claude系列模型在需要精确遵循复杂、多层次指令的场景中表现更为突出。

直播观众的投票也印证了这一点：Opus 4.5配合前端设计技能文件被压倒性地选为最佳方案。正如一位观众精辟总结的："Gemini偶尔能随机产出好设计，但Opus真正能按你说的去做。"

开源模型Kimi K2.5的前端设计表现

Theo还测试了开源模型Kimi K2.5。虽然它在视觉审美上有一些亮点，但在工程能力上严重不足——把package.json放错位置、构建完全失败等问题频出。Theo不得不手动修复代码才能看到设计输出。

最终评价是："对于开源模型来说确实令人惊喜，但没有任何一个方案是我会实际使用的。"

前端设计技能文件配置教程

配置过程非常简单，五步即可完成：

1. 访问 skills.sh（Vercel的Agent技能目录）
2. 搜索"front end"或在排行榜中找到前端设计技能（目前排名第5）
3. 点击复制，在终端中粘贴执行
4. 选择要配置的工具（Cursor、Claude Code等）
5. 选择项目级或全局配置

skills.sh是Vercel推出的开源Agent技能目录平台，开发者可以在上面分享和发现各种预制的技能文件。这个平台的出现标志着AI辅助开发正在从"单纯的模型能力比拼"转向"模型+配置的生态竞争"。技能文件的共享和复用降低了提示工程的门槛——开发者不需要自己从零摸索如何引导AI生成高质量前端设计，只需安装社区验证过的技能文件即可。这种模式类似于传统开发中的ESLint配置共享或VS Code插件生态，本质上是将专家经验编码为可复用的配置。

Theo建议将其设为全局配置，并通过符号链接（symlink）在不同工具间共享。符号链接是Unix/Linux系统中的一种文件引用机制，通过创建文件的软链接，可以让多个项目目录和多个工具共享同一份技能文件，修改一处即可全局生效，这样所有项目都能自动受益。

结论：AI前端设计模型怎么选？

经过这次全面测试，Theo给出的前端设计模型排名如下：

1. Opus 4.5 + 前端设计技能文件（最佳整体方案）
2. Gemini 3 Pro（默认状态下初始设计最好，但迭代能力差）
3. GPT 5.2（中规中矩，模板化严重）
4. Opus 4.5 裸跑（最差）

一个值得尝试的工作流是：先用Gemini生成初始设计灵感，再用Opus配合技能文件进行迭代和精细化调整。

这次测试最值得关注的发现是：一个简单的Markdown文件竟然能如此显著地改变AI模型的前端设计输出质量。这说明当前AI模型的设计能力并非不存在，而是需要正确的引导才能被"解锁"。对于前端开发者来说，提示工程在AI辅助设计领域仍然有着巨大的价值空间——掌握好技能文件的配置，可能比选择哪个模型更重要。

核心要点

• Opus 4.5配合前端设计技能文件（Markdown格式）后，设计质量实现质的飞跃，从最差逆袭为最佳
• Gemini 3 Pro默认状态下设计直觉最好，但迭代能力极差，本质上是套用训练数据中的模板
• 一次要求模型生成五个不同设计方案的提示词技巧，能显著提升输出多样性和质量
• 前端设计技能文件的核心是明确禁止AI审美陈词滥调（紫色渐变、通用字体等），并要求设计意图性
• 推荐工作流：用Gemini获取初始灵感，再用Opus+技能文件进行迭代精细化