LLM Arena 2026年9月
案例说明- 模型
- GPT 5.6 Sol
- 设计任务
- 带预订功能的本地火锅餐厅落地页
- 输出结果
- 网站
适用方向
- 餐厅网站连接食物、氛围和实用的到店信息。
- 预订界面设计预订入口，同时不隐藏餐厅背景信息。
- 餐饮品牌塑造通过标题和图像传递地域饮食特色。
主要亮点
- 两个首屏入口可以立即预订，也可以先探索菜单再做决定。
- 三道招牌菜编号条目介绍锅底、牛肉和蔬菜选择。
- 实用的到店信息区块营业时间、最后入座时间和地点信息与预订入口并列。
- 保留页面背景的预订弹窗无需跳转到其他页面即可收集到店请求。
探索餐厅网站
1 / 4
让预订与看菜单各有入口
Ember & Pepper 以火锅照片和 Heat with a heartbeat 开场。这句话营造氛围；较小的 Chongqing Born · New York Fired 标签说明菜系与城市定位。将这两项职责分开后，页面既能保留令人难忘的标题，也不会让首次到访者猜测餐厅供应什么。
首屏中并列放置两个操作：Reserve your table 和 Explore the menu。它们对应不同的准备程度。回访顾客可以立即打开预订对话框，而正在选择餐厅的人可以先查看食物。同一个 Reserve 操作也出现在导航中，Book dinner 则在到店信息附近再次出现。
用招牌菜介绍菜单，明确展示范围
Born for the broth 展示三道编号招牌菜，而不是完整的点餐菜单。每个条目都说明其在用餐中的作用：锅底、肉类部位，或用于平衡口味的菌菇与绿叶菜。该区块可以帮助顾客了解餐厅，但不足以计算一顿晚餐的账单。
| 菜单条目 | 具体信息 | 仍未回答的问题 |
|---|---|---|
| 01 · Nine-Spice Red Broth | 牛油、烘烤辣椒和青花椒；标注为 House signature。 | 页面没有说明可选择的辣度或份量价格。 |
| 02 · Hand-Cut Marbled Beef | 薄切肉片和八秒涮煮建议；标注为 Market cut。 | 顾客仍需了解实际份量和价格。 |
| 03 · Mountain Mushroom Basket | 菌菇、莲藕和绿叶菜；标注为 From the market。 | 仅凭菜品描述无法确定其是否适合特定饮食需求或过敏人群。 |
将到店信息放在预订入口附近
Meet us downtown 将页面从品牌表达转向实际安排。到店信息区块提供两个营业时间段，以及单独的最后入座规则。关店前 45 分钟停止入座很重要，因为营业时间并不等同于可预订时间。将这一差异放在 Book dinner 附近，有助于顾客提出更有依据的问题。
当读者获得新背景信息时重复提供操作
首屏预订操作出现在菜单之前。Book dinner 则在食物和氛围区块之后出现，此时读者已经掌握了更多信息。这种重复是有用的：操作在决策节点再次出现，无需长距离滚回首屏。
使用对话框处理边界明确的请求
预订界面在保留餐厅页面作为背景的同时，询问到店和联系信息。日期输入框、时间选择器和用餐人数选择器分别为不同类型的信息提供了合适的控件。正式上线的设计还需要说明可用性、验证方式，以及请求发送后会发生什么。
让氛围说明与实际图片相匹配
The Room 区块使用非对称照片网格，配以关于暖光、围桌聚餐和红汤的说明。几张照片是食物特写，而非真实的用餐空间视图。这样的布局营造了变化，但真实场所应使用能够回答每条说明所提出问题的图片。想了解空间的顾客需要看到空间，而不是另一道吸引人的菜。
预订界面原型，尚未接入真实餐厅服务
Ember & Pepper 是一个虚构的餐厅品牌。页面本身已说明，其地址、电话号码和营业信息均为示例内容。预订对话框是本地前端演示，不会创建预订、检查实时余位或发送确认邮件。GPT 5.6 Sol 是所提供测评作品的模型标签，并非经过验证的性能评分。
如何在 OpenDesign 中创建餐厅预订网站设计
明确顾客旅程与预订入口
告诉 OpenDesign，首次到访的顾客在预订前需要了解哪些信息，以及回访顾客可以立即采取什么操作。此示例提示词基于可见模式描述了一个新原型。
建议提示词为一家虚构的重庆火锅店创建餐厅预订网站设计。开头使用一张全宽美食照片、简短的菜系与城市标签，以及一个较大的两行衬线标题。将“预订桌位”和“浏览菜单”并排放置，让顾客可以在预订和进一步了解之间进行选择。接着展示三道招牌菜，并分别介绍锅底、牛肉选择和菌菇拼盘。使用与图片说明相匹配的照片，添加一个非对称氛围图库。在另一个预订操作附近集中放置营业时间、最后入座政策、地址和电话信息。点击“预订”应打开一个对话框，其中包含日期输入框、时间选择器、用餐人数选择器和联系信息字段。包含空状态、无效状态和本地提交状态。将店铺信息和提交标记为演示内容；不要暗示真实可用性或已完成的餐厅预订。
明确展示预订状态
要求 OpenDesign 展示空表单、缺少字段错误和清晰标注的演示响应。验证失败时保留已输入的值。指定按 Escape 键关闭的行为，并将焦点返回到打开对话框的按钮。
在执行预订操作前检查信息
检查关店时间和最后入座时间是否与所提供的时间段相矛盾。只有在确认后才替换示例商业信息。使用窄视口，确保对话框可以滚动，并且确认和关闭控件始终可操作。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
