前几天开源了用于提升 AI 界面设计能力的 Oil UI 之后，短短几天仓库已经收获了接近 650 个 Star，在 X 上也看到不少博主自发推荐。围绕配套的实测画廊和付费版 Oil UI Pro，这两天我又做了一轮密集的测试与更新，从视觉模板、动效配图规范到底层的上下文加载机制都梳理了一遍。
补充排版、配色与滚动动效的设计洞察
第一块改动是在 Skill 内部补充了更多关于文字排版、配色层次、风格反差以及页面动画的具体指引，让模型在构思页面时能够把科技感与人文杂志质感结合起来。
例如下面这个用 GPT-6.1 Sol 搭配 Oil UI Pro 生成的钟表主题页面，首屏右侧精密的陀飞轮机芯配图由模型自主调用生图生成，向下滚动页面时会触发视差滚动与模块进场动画。这类新补充进画廊的作品，除了在开头的多方向对比页里选定一次风格方向，后续的多轮实现与打磨全程都没有人工介入。
统一内置风格对比页与画廊的设计语言
用 Oil UI 做设计时，无论是从零新建页面还是改版已有界面，都会先派生几种不同风格供人挑选，选定方向后再深入迭代。因此，Skill 内置的“界面风格探索”对比页在实际工作流里承担着很关键的作用。
之前我已经把线上画廊改过一版，将品牌 Logo 换成了一个戴帽子的艺术家小人，但 Skill 内置的对比页模板还停留在早期偏冷峻的现代风格。这次我把内置模板的视觉样式与画廊、官网彻底同步了：换上了统一的暖白底色与品牌图标，详情视图里删掉了冗余杂乱的参数信息，并在切换不同方向时加上了顺滑的过渡动画。作为一个设计类的 Skill，它自己呈现给用户的中间产物也需要保持一致的审美水准。
内置高完成度卡片的代码模板
很多海外主流 SaaS 产品的落地页之所以看起来成熟耐看，很大程度上归功于页面里那几张精致的功能卡片——比如带有实体卡边缘光泽的展示卡、或者把终端命令与任务进度浓缩在一起的微型交互切片。
但在实测中我发现，设计能力偏弱的模型根本想不到要怎么去组织这类卡片的内部结构。为此，我直接在 Skill 里内置了一批卡片的代码模板，并专门搭了一个卡片测试页，反复测试拟物风格、装饰文案风格以及不同文字排版的组合效果。
光把模板写出来还不够，我还拿不同的真实模型去跑了一轮迁移测试，验证模型能否读懂模板里的设计结构，并把它自然地迁移到全新的业务场景中。验证通过的测试作品也一并同步到了线上画廊里。
渐进式文件分层与子 Agent Review 重新分工
除了肉眼可见的界面变化，这次还在底层做了两项针对 Agent 上下文管理的结构调整。
第一项是细化渐进式加载的文件切分。Skill 的规范文件是按需读取的，如果一开始就把所有场景的长篇规则一股脑塞进上下文，反而会干扰模型的注意力。我对不同设计场景的规范做了更严格的分层，比如当 Agent 正在制作一个产品落地页时，它就不会去加载后台管理系统相关的设计洞察。
第二项是重构了子 Agent Review 的分工机制。在大量实测中我发现一个普遍现象：一旦 Skill 里的规范文件变多，很多主 Agent 在写完基础布局后就会直接收工，把藏在文档后半部分的微动效要求忘得一干二净，做完也不会自己回头检查。
为了解决这个问题，必须引入子 Agent 扮演 Reviewer 的角色，专门去盯主 Agent 容易遗漏的环节并督促迭代。但早期的写法里，主 Agent 在工作时也能提前读到这套 Review 规范——主 Agent 负责的是具体实施，提前看一堆审查标准不仅对它写代码没有多少帮助，还会白白占掉一大块上下文窗口。
因此我把这里的指令改成了彻底隔离：主 Agent 在自己的流程文档里只会看到一句话，告诉它在派发子 Agent 时指定对方去读哪份 Review 规范文件，同时明确要求主 Agent 自己不要打开那份文件。这样既保住了多轮审查的质量，又显著减轻了主 Agent 的上下文负担。
具象化的动画指引与留白配图规范
为了让模型真正把细节做出来，这次还针对动画和配图补了两套非常具体的执行规范。
在动画方面，笼统地要求“加上好看的滚动动效”往往得不到好结果。我在 Skill 里补充了首屏滚动视差、元素随滚动逐个浮现、以及视觉元素随滚动轨迹落入下方卡片等具体动效的实现参考，给足明确的边界后，模型的执行完成度明显变高了。
在配图方面，过去让 AI 自己生成页面插图时，生出来的画面经常和外层的网页排版打架——比如卡片上方需要叠放一行大标题和按钮，结果模型生成了一张画面塞得满满当当的插图，文字放上去根本看不清。
我专门建了一个提示词对照页，反复对比“原始含糊提示词”和“新规范具体提示词”的生图效果，整理出一套面向 UI 排版的生图规范。
如上图所示，经过新规范约束后生成的配图，会主动把发光主体控制在上方、在下方留出干净的暗部区域放标题和按钮，或者把复杂的建筑与棱镜细节收在画面一侧，让左半边的英文标题拥有安静的阅读背景。就是靠这些一点一滴的细节修正，最终叠出了现在的页面完成度。
如何获取更新与版本分工
这次更新的大量内容都已经下放到了开源版 Oil UI 中，包括优化后的生图配图规范、很大一部分动画指引以及部分基础卡片模板；而付费版 Oil UI Pro 则继续保留针对已有项目改版交互与 UI 的深度洞察，以及更复杂的卡片代码模板。
- 开源版用户：直接在对话框里让 AI Agent 去 GitHub 仓库拉取最新版的
oil-ui即可完成更新。 - Pro 版用户：直接跟 AI Agent 说“更新 Oil UI Pro 版本”即可，Skill 内部已经内置了自动升级脚本。