多方向同屏对比法：为什么先并排看 3 个方案，胜过反复改一句提示词
让 AI 一次只生成一个界面，就像让设计师只交一张草图——你没法知道换一种版式结构、换一套字体配比会不会好得多，不满意时只能靠“再改大气一点”反复碰运气。Oil UI 的核心工作流之一，是在写完整业务页面前，先用真实内容把 3 到 4 个拉开差距的设计方向放进同一个 HTML 对比页里，让你在同一块屏幕上直观挑出最对味的一版。
核心要点
- 没有对比就没有审美判断：把 3 个不同方向并排放在 1440px 或 390px 视口下，优缺点一眼就能看清。
- 真正的方向差异不是“换个按钮颜色”，而是构图重心、字号节奏、背景明度与主交互呈现方式同时拉开差距。
- 选定胜出方向后，坚持只沿着这一条方向深入打磨，切忌把 A 方向的标题、B 方向的卡片和 C 方向的配色硬拼成四不像。
- 画廊中收录了多组“同一任务简报、不同设计方向”的完整作品集（如 Orvo 九方向、Atelier Volders 三方向、Fonderie Mercier 三方向）。
npx skills add oil-oil/oil-ui开源版已内置同屏风格对比网页生成能力，支持桌面与手机视口切换。
为什么“一次只出一版”容易陷入局部死胡同
在普通对话里，模型第一轮给出的往往是最四平八稳的平均方案。如果你顺着这一版继续说“把字调大一点”“换个深色背景”，模型只会在原有的平庸骨架上修修补补，越改越乱。
先生成多方向同屏对比页的好处在于：在投入精力写复杂状态之前，花几分钟把版式可能性打开。而且每个方向都必须填入你产品的真实标题、真实价格和真实操作控件，绝不用 Lorem Ipsum 假文充数。
| 产品与统一简报 | 方向 A | 方向 B | 方向 C / 更多方向 |
|---|---|---|---|
| Orvo（AI 对话建站工具，$0 / $24.99 / $34.99 月付，专家陪跑） | 创作花园 (orvo-garden)：明亮青柠绿画布与模块化生长感 | 同路同行 (orvo-tandem)：温暖纸张底色与专家结对叙事 | 海岸工坊 (orvo-coast)、开放工作室 (orvo-studio)、发布接力 (orvo-launch) 等共 9 个方向 |
| Atelier Volders（根特双人木工坊，仅售一款三脚橡木凳） | 器物年轮 (volders-grain)：围绕三年自然风干与年轮纹理展开 | 河岸原木 (volders-hearth)：突出 Korenlei 河岸工坊温度与居家尺度 | 楔木工坊 (volders-wedge)：聚焦无胶楔卯结构与工艺剖面图 |
| Fonderie Mercier（家族青铜铸钟坊，每月一炉 18 口钟） | 青铜之声 (mercier-voice)：以声音频谱与泛音试听为核心 | 每月一炉 (mercier-pour)：突出炉次排期、熔铸温度与铭文定制 | 钟室回响 (mercier-bell)：如调音手稿般的克制技术图表风格 |
怎样才算真正拉开差距的三个方向
有时候模型偷懒，给出的“三个方案”只是同一套三栏布局换了蓝、绿、紫三种主题色。Oil UI 要求各个方向必须在以下四个维度上真正拉开距离（Oil UI Pro 还提供方向重合度量化检查）：
- 首屏构图与视觉入口不同
- 比如方向一以超大字排印配紧凑试算器开场；方向二直接把工作台画布铺满首屏；方向三采用左文右器的杂志分栏。
- 字体气质与字重对比不同
- 一个方向可以用人文衬线体传递工坊与编辑质感，另一个方向用几何无衬线配等宽数字强调精密工具属性。
- 画布明度与色彩克制度不同
- 在合理符合品类的前提下，对比温暖纸张浅底、冷峻高对比纯白底或克制的深色工作台，看看真实内容在哪种底色下最耐读。
- 选定之后绝不东拼西凑
- 对比页的任务是帮你做单选题。一旦选中方向二，后续所有内页、弹窗和状态都严格沿用方向二的秩序，不要把方向一的装饰元素硬塞进来。
触发同屏多方向对比的提示词模板
无论你是新建官网、设计 App 还是改版核心页面，都可以用下面这段话让 Agent 先交出对比页：
用 Oil UI 为 [产品名称与类型] 探索设计方向。
- 真实业务内容：[填入核心标题、3 个主要能力点、真实定价或核心操作字段]
- 目标视口：[1440×900 桌面端 / 390×844 手机端]
请先不要直接写最终全量代码，先生成包含 3 个截然不同设计方向的同屏对比页。要求三个方向在首屏构图、字体搭配和色调明度上真正拉开差距，且全部使用上面的真实业务内容。等我选定一个方向后，再深入实现完整状态。在开源版与 Pro 版中均可直接使用。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Atelier Volders · 器物年轮
手作家具工坊官网
比利时根特 Korenlei 14 号的一家双人木工坊官网（1440×900 起，响应式到 390 宽），界面用英文。工坊只做一件器物：手工车削、楔入榫卯的实心橡木三脚凳 De Drievoet。木料在河岸棚下自然风干三年，每月只开窑做一批、固定 24 张。 提供三种高度（32 cm 炉边矮凳 €240、45 cm 餐桌与书桌凳 €270、62 cm 带白蜡木脚圈的高脚凳 €310）和三种表面处理（白亚麻籽皂洗原木、氨熏深褐橡木、熟亚麻籽油蜂蜡）。访客可以实时切换高度与木料表面查看变化，了解六周制作工序、凳底热烙批次印记与周六工坊开放时间，并预留当月批次。不提供现成产品照片。
查看作品与提示词 →
Atelier Volders · 河岸原木
手作家具工坊官网
比利时根特 Korenlei 14 号的一家双人木工坊官网（1440×900 起，响应式到 390 宽），界面用英文。工坊只做一件器物：手工车削、楔入榫卯的实心橡木三脚凳 De Drievoet。木料在河岸棚下自然风干三年，每月只开窑做一批、固定 24 张。 提供三种高度（32 cm 炉边矮凳 €240、45 cm 餐桌与书桌凳 €270、62 cm 带白蜡木脚圈的高脚凳 €310）和三种表面处理（白亚麻籽皂洗原木、氨熏深褐橡木、熟亚麻籽油蜂蜡）。访客可以实时切换高度与木料表面查看变化，了解六周制作工序、凳底热烙批次印记与周六工坊开放时间，并预留当月批次。不提供现成产品照片。
查看作品与提示词 →
Atelier Volders · 楔木工坊
手作家具工坊官网
比利时根特 Korenlei 14 号的一家双人木工坊官网（1440×900 起，响应式到 390 宽），界面用英文。工坊只做一件器物：手工车削、楔入榫卯的实心橡木三脚凳 De Drievoet。木料在河岸棚下自然风干三年，每月只开窑做一批、固定 24 张。 提供三种高度（32 cm 炉边矮凳 €240、45 cm 餐桌与书桌凳 €270、62 cm 带白蜡木脚圈的高脚凳 €310）和三种表面处理（白亚麻籽皂洗原木、氨熏深褐橡木、熟亚麻籽油蜂蜡）。访客可以实时切换高度与木料表面查看变化，了解六周制作工序、凳底热烙批次印记与周六工坊开放时间，并预留当月批次。不提供现成产品照片。
查看作品与提示词 →
Fonderie Mercier · 青铜之声
家族青铜铸钟坊官网
法国里昂索恩河畔 Quai Saint-Vincent 28 号的一家三代家族铸钟坊官网（1440×900 起，响应式到 390 宽），界面用英文。工坊用 78% 铜、22% 锡的钟铜在河沙模中浇铸案头与建筑青铜钟 Le Bourdon de Table，冷却后上车床旋削内壁调准音高，每月只开炉浇铸一次、固定 18 只。 提供三种尺寸与音高（Ø 72 mm 案头钟 A4 440Hz €180、Ø 96 mm 庭院钟 F#4 370Hz €240、Ø 124 mm 附锻铁壁架与生皮拉绳的门廊钟 D4 293.7Hz €340）及三种包浆（车床原色青铜、烟熏深褐、盐霜铜绿）。访客可以试听三个音高、切换尺寸与包浆，查看五道浇铸调音工序、冠部冷钢印记录与周五开放时间，并填写下一炉的预留单。不提供现成照片。
查看作品与提示词 →Oil UI Pro：方向重合度检查与多视角盲审选优
Oil UI Pro 进一步提供了“多方向重合度检查”（防止模型交出换皮同构方案）以及子 Agent 多视角评审，帮你从候选方向中挑出结构最稳、最耐看的一版继续深入。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
开源版也有同屏对比页功能吗？
有的。Oil UI 开源版就已经内置了多风格同屏对比网页（支持桌面和手机视口），安装 npx skills add oil-oil/oil-ui 后直接让 Agent 提出几个设计方向即可触发。
一次对比几个方向最合适？
3 到 4 个最合适。少于 3 个容易变成非黑即白，超过 4 个则会分散单方案的打磨精力。先把 3 个方向的骨架做扎实，选定 1 个后再把精力花在交互状态和细节走查上。
如果我看中了 A 方向的配色，但更喜欢 B 方向的布局结构，可以合在一起吗？
可以调换完整的色彩系统，但不要拼凑零散组件。你可以告诉 Agent：“以 B 方向的布局和字号层级为唯一基底，将色板替换为 A 方向的暖纸色系”，然后重新截取整页画面检查对比度是否和谐。
在画廊里怎么快速找到同一个产品的不同方向作品？
你可以在画廊里搜索或点开 Orvo（共 9 个方向）、Atelier Volders（3 个方向）、Fonderie Mercier（3 个方向）、Vesper（2 个方向）、Sonar（2 个方向）、Archon（2 个方向）或 Tempo（2 个方向），它们的提示词相同，非常适合并排打开浏览器标签页对照学习。