前段时间我分享过一套让 AI 做出高水准网页与软件界面的实操方法：先让 AI 像“抽卡”一样同时探索三个版式、配色和字体截然不同的设计方向；接着拉起没有历史上下文包袱的独立子 Agent，对照真实页面截图做多轮评分与打磨；同时在页面里合理引入生图或视频素材，摆脱纯文字加卡片框的简陋感。

现在，我把这套完整的设计工作流打包成了开源 Skill oil-ui，同时推出了针对深度工程场景的付费增强版 oil-ui-pro。不管是便宜轻量的快模型，还是本身擅长前端的旗舰模型，挂上这套 Skill 后都能稳定交出质感好得多的界面。

三方向同屏探索与一键复制落地方案

装好 oil-ui 后，当你让 Agent 设计一个新页面或新应用时，它不会上来就闷头写死一套代码，而是先生成一套交互式的三方向对比页。

在对比页顶部，你可以随时切换三个设计方向，也可以切到并排视图同屏比对；右上角支持在桌面端（1280px）与移动端（390px）尺寸之间平滑切换，直观检查响应式排版。

GPT-6 Luna 使用 oil-ui 生成的宠物领养平台三方向同屏对比页

展开页面右侧的设计说明面板，还会列出每个方向的“北极星”设计理念、色板色值、字体搭配和核心亮点。当你看中某一个方向后，直接点击面板下方的复制按钮，就能把该方向的完整实现指令复制出来发给 Agent，让它基于你选定的视觉方案继续开发真实业务功能。

拉高轻量模型的下限：GPT-6 Luna 多场景实测

像 GPT-6 Luna 这类价格极低的轻量模型，裸写前端页面时往往审美单一、喜欢乱塞小标签。但配合 oil-ui 的探索与子 Agent 审查机制后，它的下限被明显拉高了。我用 GPT-6 Luna 连续测了三种不同形态的产品界面：

  1. 宠物领养平台落地页（小爪回家）：一次给出了清爽绿色的“城市向阳面”、暖米色配蓝底卡片的“一张见面卡”以及高对比黄绿撞色的“街区寻友墙”三种风格。不仅图文排版克制干净，原本 GPT 爱乱加的无意义说明条也少了很多。
  2. 视频内容工作台后台（编辑部收件台）：针对后台管理系统，生成了暖色调编辑台、蓝色看板视图和深色模式三种布局。哪怕其中深色模式的字体搭配一般，因为同时有三个方向兜底，依然能稳稳挑出一版好看好用的方案。
  3. 初中英语精读移动 App：证明这套工作流不局限于桌面网页。针对手机端屏幕，它给出了衬线体与无衬线体混排、色彩分区答题卡以及夜间深色阅读三种完整的移动端界面。

视频内容工作台后台界面设计及右侧展示的“北极星”设计理念、配色与字体说明

放大强模型的上限：Claude Sonnet 5.5 视觉结合

当把 oil-ui 交给本身前端审美就很出色的 Claude Sonnet 5.5，再配合本地生图工具时，做出来的页面几乎看不出常见的“AI 模板味”。

比如让它为一个植物染服饰品牌“三浸”设计展示页：

  • 方向一在由浅入深的靛蓝渐变背景上，用一根横穿画面的麻绳挂起未染色原布与经过多次浸染的布料，直观对比染色前后的纹理变化。
  • 方向二用带有真实织物肌理的色卡表格展示“蓝靛、茜草、栀子”在一浸、二浸、三浸下的色泽递进，右侧叠放亚麻成衣实拍图。
  • 方向三则用大画幅镜面构图突出服饰质感。

Claude Sonnet 5.5 配合生图模型设计的植物染服饰落地页，用挂绳布料对比染色前后的质感变化

在没有提示词逐句指导画面构图的情况下，oil-ui 引导模型自己想出了“挂绳布料对比”和“浸染色卡递进”这两种非常契合品牌主题的视觉表达。

真实项目实战：为 Mac 搜索工具 Oil Find 设计官网

除了测试案例，我也直接在自己的新项目里用上了这套工具。

Windows 上有一款经典的毫秒级文件搜索软件 Everything，但在 macOS 上一直缺少同样轻快顺手的替代品。我最近用 AI 写了一款 Mac 端本地文件搜索工具 Oil Find，建好索引后按快捷键就能在几毫秒内搜出本机文件。软件写好后，我用 Fable 5.1 配合 oil-ui 为它设计了用于 GitHub Pages 的产品落地页。

模型同样给出了三个方向：

  • 方向一直接把软件真实的搜索框界面复刻进了网页首屏，打开页面就能看到自动演示输入“简历”并在 0.2 ms 内筛出结果的动态过程，用户还可以直接在网页搜索框里打字交互。

使用 oil-ui 为 Mac 文件搜索工具 Oil Find 设计的方向一落地页，在首屏嵌入可交互的实时搜索框演示

  • 方向二采用大胆的蓝底白字设计，在首屏中央放上三个巨大的立体快捷键 ⇧ ⌘ F，配上一句“按下去。不到 10 毫秒，文件就在眼前”，还在右上角参考我个人网站的头像绘制了一个专属小吉祥物。

Oil Find 落地页方向二，以巨幅 ⇧ ⌘ F 快捷键与定制吉祥物突出毫秒级唤醒体验

因为三个方向都已经生成了完整可运行的 HTML 代码，我最后直接把方向二极具冲击力的 ⇧ ⌘ F 首屏和方向一的可交互搜索框演示拼在了一起——首屏用大快捷键抓人眼球，往下滚第二屏就能亲手试用搜索框，几分钟就敲定了最终上线的官网。

开源版 oil-ui 与付费版 oil-ui-pro 的区别

目前 oil-ui 已经在 GitHub 完全开源，包含了三方向风格探索、对比查看器以及拉起无上下文子 Agent 做截图视觉审查的完整核心流程，日常做个人网站、新项目原型或组件设计完全够用。

如果你在复杂工程里对设计细节有更高要求，可以了解同步上线的付费版本 oil-ui-pro。相比开源版，oil-ui-pro 增加了更严苛的多轮子 Agent 评分打磨（默认持续迭代至 9/10 分以上）、完整的交互状态与屏幕尺寸适配走查、针对已有大型老项目的 UI 渐进式改造流程，以及 SVG 与着色器（Shader）动效点缀规范。你可以先从开源版开始体验，按自己的项目复杂度按需选择。