在打磨界面设计 Skill oil-ui 的过程中，我用市面上主流的编码与通用大模型跑了大量不同形态的界面测试，想看看挂载同一套设计工作流后，各个模型的审美上限和下限到底能到哪里。
随着测试攒下来的优秀案例越来越多，GitHub 仓库的 README 已经放不下这么多动态效果了。于是我干脆专门做了一个线上交互画廊网站 ui.oiloil.org，把这些模型生成的真实界面全部放上去，既方便大家直观对比不同模型的 UI 设计水准，也能当成一个带源码和提示词的界面灵感库。
按模型筛选作品与实时交互预览
打开 ui.oiloil.org，顶部导航栏可以直接按生成模型筛选作品，目前已收录了 GPT-6.1 Sol、GPT-6 Luna、GPT-6 Astra、Claude Opus 5.5、Claude Sonnet 5.5 和 Claude Fable 5.1 等模型的实测案例。每张作品卡片的左下角都标明了它是由哪个模型生成的。
和普通的设计截图站不同，画廊里的每一件作品点开后都是真实可交互的网页或应用界面，右侧则完整附带了生成该作品时输入的任务提示词与共用设计要求。
比如点开由 Claude Opus 5.5 设计的语音助手应用“应声”，你可以在左侧直接点击切换它的待机、正在聆听、整理要点等不同屏幕状态。以往让 AI 设计语音助手，十有八九会画一个俗套的蓝紫色发光圆球；而在 oil-ui 的引导下，Claude Opus 5.5 用灵动的实时声波线条配合高饱和度的桃红与留白版式，做出了辨识度极高的视觉效果。
GPT-6.1 Sol 与各模型在垂直场景下的表现
在整理画廊案例时，刚刚发布的 GPT-6.1 Sol 给了我不小的惊喜。配合 oil-ui 使用时，它在前端界面上的完成度比前几天的 GPT-6 Sol 提升明显。
以画廊里 GPT-6.1 Sol 生成的职场英语学习应用 Pip 为例，界面采用了类似多邻国的闯关互动设计：它不仅自己绘制了一只圆润可爱的绿色小鸟吉祥物，还完整实现了句子选词填空、点击检查答案、底部弹出正确解析卡片等一整套可点击的交互流程。
画廊里还覆盖了桌面软硬件工具、电商独立站、开发工作台等各类垂直场景：
- 手工器皿结账页（
Pinch）：由Claude Opus 5.5生成，针对拱形花器、手捏杯与亚麻餐巾的结账流程，不仅用生图模型生成了调性统一的静物商品图，还在左下角提供了状态切换器，可以实时查看表单填写中、字段校验报错和下单成功三种完整状态。 - 相机取景应用与年度听歌报告：展示刻度拨盘、暗房质感以及高表现力的数据可视化排版。
- 轻量记账应用（
Penny）：由价格极低的GPT-6 Luna生成。虽然比不上旗舰模型那么惊艳，但在oil-ui的规范约束下，依然做出了结构清晰、配色舒服的可用界面。
用 oil-ui 设计画廊网站自己的首屏入口
在做 ui.oiloil.org 这个画廊网站时，我自己也遇到了一个具体的设计问题：我需要把 oil-ui 的一键安装命令（npx skills add oil-oil/oil-ui）和 Pro 版入口放在页面最显眼的位置，但又不想让一个生硬的工具横幅破坏整个作品画廊的艺术感。
于是我直接调用 oil-ui，让它为画廊首页探索了三种不同的布局方案：
- 方向一：把安装入口做成与普通作品等宽的第一张网格卡片，上面叠放油画肌理背景与清晰的安装命令复制框，自然融入整个瀑布流画廊。
- 方向二：在画廊上方单独开辟一块大尺寸通栏区域，左侧放动态组件演示，右侧放安装命令与版本对比。
- 方向三：把安装命令浓缩进顶部导航栏右侧，把首屏空间全部留给作品网格。
把三个方向同屏放在一起对比后，我很快选定了方向一的“首张网格卡片”方案，并让 AI 为卡片生成了现在的花卉油画背景图，既保留了画廊的整体感，又让人一眼就能复制安装命令。
接下来每当有新的大模型发布，我都会第一时间用 oil-ui 跑一批相同标准的界面案例更新到 ui.oiloil.org 上。后续我还会陆续开放画廊里每件作品的源码包下载，方便大家遇到喜欢的版式风格时直接拿去参考和改造。