AI 做的页面总一个样？让 CodeX 先出几版不同设计，并排给你挑

为什么 AI 做的页面老是一个样

问题不在 CodeX 手艺差，而在我们给它的话太虚。「高级」「简洁」「大气」这些词，人听了都各有各的理解，AI 听了只能回到它最熟的那套默认模板上。

oil-ui 的作者是一位做前端和设计的开发者，在 X 上叫 oil-oil。他之前专门录过一期视频，讲怎么让 AI 做出不平庸的设计，这次把视频里的方法整理成了一个 Skill，让 Agent 每次都按这套流程走。

它的核心就一句话：把形容词翻译成看得见的决定。 「高级」不算一个决定，「用什么字体、留多少白、颜色占多大面积」才算。

它带着 CodeX 走的几步

先认品类，看同类里做得最好的。 你要做的是课程预约页、美术馆特展页还是记账工具，同类里风格最鲜明的两三家是怎么做的、为什么那样做，先弄明白，再决定哪些沿用、哪些换掉。

再定调性。 从题材、受众和品牌语气推出五个刻度：能量、完成度、密度、分量、严肃度。到这一步，「简洁」才变成了具体的字、留白和颜色。

每个方向从一个具体的东西出发。 一种材质加一个环境、一个场景、一个角色都行，就是不从「简约」「大气」这类形容词出发。

先定首屏骨架，再写文案。 而且同一轮里几个方向的骨架不许一样，左右分栏最多出现一次。它还有一条硬规矩：骨架、字体、色彩、主视觉这四项，任意两个方向最多只能有一项相同。 做完并排眯着眼看首屏的明暗块面，太像就重来。

看下面这张图就明白了。同一个《蒙娜丽莎》特展的页面，同样的导语、展厅和票价，做出来是三张完全不同的脸：

左边那版叫「三十厘米」，像闭馆后站在画前三十厘米看；中间叫「号外 1911」，做成了一张 1911 年画作失窃时的旧报纸；右边叫「晕涂」，整页没有一条线。三个方向都有名字、有来由，这就是「从具体的东西出发」的效果。

最实用的是那个对比页

上面那张图本身，就是这个 Skill 自带的风格对比页。

几份小样并排放在一起，上面能切电脑和手机两种尺寸，能点开看实际大小，用方向键翻着看。看中哪版，点「选择」，它会给你复制出一句话，你把这句话粘贴给 CodeX，它就照着这个方向接着做下去。

这个设计我很认同。作者在方法里写的原话是：

品味由你来定。小样放进同一个对比页，你来挑，再说说具体喜欢和不喜欢哪里。

不懂设计的人，说不出自己想要什么，但一定挑得出自己喜欢哪个。 把「描述」变成「挑选」，这件事对咱们这些非设计出身的人太友好了。

挑定之后，它还会在电脑和手机尺寸下各截图检查一遍，最后做减法：一页只留一个主角，删掉不影响理解的文字和多余的线框。

上面是作者画廊里的一部分作品，题材从学英语 App 到打车、结账流程都有，风格各不相同。