用 AI 设计产品官网与 SaaS 落地页：首屏叙事、多方向对比与响应式走查
让 AI 写产品官网或 SaaS 落地页时，最常见的毛病是所有产品长成同一张脸：上方一颗胶囊标签、中间一行渐变口号、下面三张带图标的功能卡片。要做出让人记住的官网，关键在于把产品独特的业务差异直接变成首屏可感知的画面或交互，并在选定方案前先并排比较几个截然不同的视觉方向。
核心要点
- 首屏三秒内要回答三个问题：这是什么产品、解决什么具体问题、访客下一步点哪里（或直接在首屏试玩什么）。
- 同一份产品简报可以长出完全不同的气质：画廊里 Orvo 建站工具的 9 个落地页版本展示了从编辑杂志感到开放工作室的完整光谱。
- 没有实拍产品图时，不要塞廉价图库照片；像《Atelier Volders》与《Fonderie Mercier》那样用参数切换器、声音谱线和制程时间线撑起质感。
- 桌面端按 1440×900 铺开叙事节奏，同时必须切到 390px 手机视口检查长标题折行、表格横滚与主按钮位置。
npx skills add oil-oil/oil-ui浏览画廊 /inspiration/web-design/ 合集可直接查看 40+ 个真实网页与落地页案例。
为什么默认生成的 AI 落地页总是千篇一律
当你只给模型一句“帮我的 AI 工具做一个落地页”时，模型手里没有任何可用于排版的具体锚点，只能搬出最安全的套路：深蓝或紫黑背景、发光胶囊 badge、三列“更快 / 更智能 / 更安全”的空话卡片，以及底部一排虚构的客户徽标。
对比画廊里的真实案例就会发现，耐看的官网都把“核心差异点”直接做成了页面主体。例如字体铸造厂《Fieldwork Type》首屏就是一个能直接打字、拉动字重和字宽并实时算授权费的试排台；青铜铸钟坊《Fonderie Mercier》让访客在首屏敲击不同直径的钟，边听泛音衰减边看频谱；AI 建站工具《Orvo》则把“有上线经验的专家全程陪跑”和“固定月付不按 token 扣费”两个差异点放在了叙事核心。
| 页面区块 | 默认 AI 模板套路 | Oil UI 官网做法（结合画廊案例） |
|---|---|---|
| 首屏 (Hero) | 胶囊小标签 + 抽象口号 + 两个并排按钮 + 空洞装饰图 | 一句话讲清产品 + 真实工作界面或可直接操作的试玩控件 |
| 产品能力区 | 三张等宽圆角卡片，配通用线性小图标与形容词 | 按真实使用流程展开（如对话建站演示、六周木工制程、铸钟调音表） |
| 定价与预订 | 塞满勾号的功能对比长表，主次不清 | 写明真实档位（如 $0 / $24.99 / $34.99 月付年付切换）或当月批次余量 |
| 无实拍图处理 | 乱引不搭调的免费图库照片或生硬 AI 插画 | 用考究的字体排印、矢量剖面图、参数切换器与材质色板建立可信度 |
同一份简报的多种可能：以 Orvo 与手工坊系列为例
在画廊里，我们特意保留了同一份任务简报下的多方向成品。以 AI 建站工具 Orvo 为例，所有版本的业务事实完全一致：通过对话生成网站与 App、专家全程指导、固定月付（Starter $0 / Pro $24.99 / Unlimited $34.99，年付省 20%）、提供 100+ 模板。
但在不同视觉方向下，《Orvo · 创作花园》采用生机盎然的浅绿画布与模块化生长叙事；《Orvo · 同路同行》突出专家与创作者并肩打磨的编辑感；《Orvo · 海岸工坊》与《Orvo · 开放工作室》则呈现出完全不同的空间节奏。你在自己的项目里用 Oil UI 时，同样可以先在同屏对比页里挑出最契合品牌调性的一版，再往下细化。
能直接产出好官网的提示词结构
写官网提示词时，把精力花在交代“产品怎么工作、和同类比有什么不同、价格怎么算、没有哪些素材”上，少写“高端大气”之类的空词：
用 Oil UI 设计并实现 [产品名称] 的官方落地页（桌面主视口 1440×900，响应式兼容至 390 宽手机端）。
- 产品是什么：[用一两句话说明用户怎么用它完成什么事]
- 与同类的两个真实差异：[例如：1) 按固定月付而非按次扣费；2) 内置某项独特的实时工具或人工服务]
- 必含内容与真实数字：
1. 首屏：清楚交代定位，并放置一个可交互的 [核心功能预览或试算器]；
2. 能力拆解：展示 [3 个具体使用场景或模版分类]；
3. 定价区：[列出真实档位与价格，支持月付/年付切换并实时更新金额]；
4. 收尾行动号召。
- 素材约束：[说明是否有实拍图；若无，请靠版式、字体与自绘图形构建视觉重心]。
请先给出 3 个拉开差距的设计方向供同屏对比。适用于 SaaS、开发者工具、硬件产品与独立品牌官网。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
Fieldwork Type
字体铸造厂官网
一家独立字体铸造厂的官网（1440×900 起，响应式到 390 宽）：首屏展示一款主打字体，访客可以直接输入自己的文字试排，调字号、字重和字宽；往下是字体家族的字重表、字符集、使用案例，以及按使用场景（桌面、网页、App）选授权并加入购物车。 试字和授权选择是这件作品的核心：输入时排版当场变化，授权价格随选项更新。设计首屏、试字面板展开、授权选择三个状态。
查看作品与提示词 →
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）及三种包浆（车床原色青铜、烟熏深褐、盐霜铜绿）。访客可以试听三个音高、切换尺寸与包浆，查看五道浇铸调音工序、冠部冷钢印记录与周五开放时间，并填写下一炉的预留单。不提供现成照片。
查看作品与提示词 →
择路
AI API 平台官网
一个类似 OpenRouter 的 AI 模型 API 中转平台官网（1440×900 起，响应式到 390 宽），界面用中文，面向国内开发者：一个 API Key 接入几十家厂商的几百个模型，统一计费、自动容灾、按价格或延迟路由。厂商和模型名虚构，但要写得像真的。 有创意是第一要求，不要做成又一个“深色渐变加代码块”的 AI 官网。核心是把路由讲得看得见：一个请求从你的代码出发，被路由到某家厂商；那家出故障时自动切到备用，价格和延迟当场可见。模型市场能按厂商、上下文长度、价格筛选和比较。 设计三个状态：首屏、模型市场的筛选与比较、一次请求的路由与容灾过程。
查看作品与提示词 →用 Oil UI Pro 打磨官网动效、卡片容器与移动端适配
当你的官网需要精细的 SVG 光轨/点阵/流动渐变背景、19 种带空间展开逻辑的卡片原型，或者需要对首屏与定价表做 200% 放大级别的字距和留白盲审时，可以升级到 Oil UI Pro。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
手里没有产品实拍图或好看的截图时，怎么让官网不显空？
把产品自身的参数或工具属性做成可交互的页面主体。可以参考画廊里的《Atelier Volders》（切换三脚凳高度与木蜡油表面）或《Fonderie Mercier》（在线敲击试听不同青铜钟的泛音曲线），完全不用外部照片也很有分量。
官网应该用深色背景还是浅色背景？
取决于产品品类和阅读场景。开发者底层内核（如《Archon》）、天文制表（《Chronos》）或夜间硬件适合深色；多数需要长时间阅读说明、核对价格与条款的 SaaS、工作室与电商官网，用有温度的浅色或纸张色底往往更耐看。
怎么检查官网在手机上的表现？
不要只看桌面端缩窄后的大概样子。在浏览器或作品查看器里切到 390×844 手机视口，重点检查：大标题有没有断成孤字、首屏试玩控件能不能用手指点按、三列定价表在窄屏下是否清晰易读。
画廊里的网页案例可以直接在浏览器里切换手机视图吗？
可以。打开画廊里任意网页类作品（如 /works/foundry/ 或 /works/orvo-garden/），底部工具栏都支持一键在电脑与手机视口之间切换，并可直接点击页面里的控件。