LLM Arena 2026年9月
案例说明- 模型
- GPT 6 Sol
- 设计任务
- 创建一次穿越想象中宋代汴京的多语言互动夜游。
- 输出结果
- 网站
适用对象
- 文化叙事网站把历史诠释做成有氛围、可自由浏览的数字旅程。
- 数字展览体验以大字号叙事排版串联场景、章节与局部交互状态。
- 互动编辑专题探索一个固定的 Three.js 世界如何承载长篇故事。
主要亮点
- 贯穿始终的河城同一座动态城市贯穿五个章节的切换。
- 多语言导览中文、英文和日文控件始终保持可见。
- 从诗歌到河灯读者选中的一句中文诗，从阅读延续到终章。
汴京夜游网站预览
1 / 6
汴京夜游网站如何构建其世界
汴京夜游网站设计通过五个相互连接的章节，呈现想象中的宋代汴京之夜。它的当代文化诠释从《清明上河图》的城市气质与古典诗歌的夜间场景中汲取灵感。它不是真实游览、预订服务，也不是经过历史验证的复原。
首页立即确立核心装置：“Follow a river of lamplight into one night in Bianjing.” 一座贯穿始终的 Three.js 河城位于编辑层之后，而章节指示器、Day / Night 控件和语言切换器让整个体验读起来像一段完整旅程，而不是五个互不相关的页面。
截图可见深蓝城市、暖色窗光与大号米白字体之间的强烈对比。这种尺度赋予每个章节鲜明的情绪特征，但也压缩了密集控件可用的空间。因此，设计将交互组放在主要陈述的下方或侧边，而不是与其争夺注意力。
当代诠释
来源说明了公版绘画素材、公版古典诗句以及 AI 创作的宋代风格插画。这些元素共同构成对地点的设计化诠释，而不是证明画面中的街道、建筑或旅程曾以所示方式存在。
对于文化团队而言，这一边界很有价值：体验可以借用视觉与诗意氛围，同时明确自身的叙事框架。结尾注释再次强调这一差异，将其描述为当代想象，而不是代表任何真实地点。
这种文化叙事模式适用于何处
本案例适合文化机构、编辑团队和体验设计师，用于从视觉档案出发开发引导式数字叙事。它展示了如何通过序列、氛围与诠释语境探索一个地点，而不是采用传统地图或目的地页面。
五个章节构成了有用的节奏模型。访客先在水门遇见城市，穿过虹桥，进入市集，在水畔与诗歌停留，最后以回返的灯笼收束。每一站都会改变主题，而底层城市保持连续性。
档案驱动的诠释
以一幅公版绘画作为视觉参考，同时用全新的氛围场景将其包围。在夜市章节中，来源图片通过“View full artwork”路径出现在实时场景下方，使档案素材支持诠释，而不是取代诠释。
基于章节的展览
将长篇故事转化为五个清晰、可导航的时刻。持续存在的 01–05 导航提供定位，而“Tea · Silk · The Sound Of The Street”等章节标签则建立不断变化的感官焦点。
互动诗歌阅读
让读者选择诗句，而不是把诗歌当作静态装饰。河灯结尾将经过测试的诗句“海上明月共潮生。”带入更大的释放时刻，把阅读与最终场景连接起来。
五个章节如何共享一座动态城市
页面使用一张固定的动态画布，以六个全屏画面代表首页主视觉和五个章节。轻量导航条从这一连续场景中派生，而原始画廊上传内容保持不变。这种结构让城市在编辑层推进时持续存在。
控件经过有意保持稳定。中文、EN 和 日本語始终位于顶部导航中，与 Day / Night 和章节编号并列。语言控件传达出多语言设计系统，但所提供的证据并未证明每种翻译都完整，也未证明其运行时行为。
稳定层
河城与章节导航在访客改变关注点时维持方向感。
变化层
市集选择与灯笼选择提供局部响应，无需进入新页面。
编辑层
大标题和简短场景描述控制每个状态的情绪节奏。
| 观察要素 | 读者影响 | 取舍 |
|---|---|---|
| 贯穿始终的河流场景 | 维持章节之间的空间连续性 | 可能与文字和控件争夺注意力 |
| 四个市集控件 | 增加局部因果反馈 | 提高交互密度 |
| 选中的中文诗句 | 将阅读与终章连接起来 | 需要仔细处理语言与状态的可读性 |
从水门到虹桥
第一章将访客置于水门：雾气、层叠的屋檐，以及一艘从黑暗中驶出的船。第二章将同一条河重新诠释为一道通行路径：虹桥上的灯笼、桥下的船只和甲板上的剪影。重复使用水面使转场易于理解，而从门槛到通行的转变则推动叙事前进。
夜市状态与局部反馈
夜市章节引入四个控件：Tea Seller、Silk Shop、Iron Flowers 和 Fireworks。经过测试的 Fireworks 状态会改变局部消息，说明小型交互如何改变稳定场景的含义。代价在于密度：四个控件、说明文字和视觉场景都在与超大章节标题争夺空间。
诗歌导航与回返
诗歌章节将节奏从街市活动转向近距离阅读。它以《枫桥夜泊》（Mooring by Maple Bridge at Night）开篇，标明张继与唐，并提供上一首和下一首诗歌控件，同时显示 1 / 4 位置。随后导航继续前往《暮江吟》（Chant of the Evening River），使诗歌成为一个序列，而不是单独的一段引文。
汴京夜游网站展示了什么
所提供的作品是一种以设计为主导的数字体验，通过固定 Three.js 场景的全屏画面来呈现。这些画面证明了可见构图、标签、章节顺序以及 Fireworks 和选中的河灯诗句等经过测试的状态。但它们本身并不能证明存在后端服务、预订功能、持久化用户数据或生产平台行为。
主要设计挑战在于平衡氛围与可读性。超大编辑式字体让章节令人难忘，并支持缓慢的阅读节奏，但夜市控件和诗歌卡片等密集区域需要足够的对比度、间距与响应式适配，才能保持易读。Day/night 切换和多语言控件应作为界面状态进行评估，而不能仅凭其视觉存在就作出假设。
灯笼探索面板同样体现了负责任的诠释。它明确指出，一首引用的杭州诗歌并非描写汴京，而是因为其中的江边枫树、渔火和舟上夜色氛围而提供这段诗句。该注释保留了诗意关联，同时没有将其呈现为地理证据。
如何在 OpenDesign 中创建汴京夜游网站设计
建立连续场景
构建一张河城市景画布，支持五个章节构图：水门、虹桥、夜市、水畔诗章和河灯终章。让章节指示器与语言控件持续存在。检查每个构图是否拥有明确主体，同时让河流、灯光与城市纵深持续连接整个序列。
建议提示词创建一个关于想象中历史城市的多语言夜间故事网站。在五个全屏章节背后使用一个持续存在的 Three.js 风格河流场景：水门、虹桥、夜市、水畔诗章和河灯终章。加入中文、英文和日文控件、Day / Night 控件、章节编号、超大编辑式标题以及紧凑的本地交互区域。添加四个市集选项——Tea Seller、Silk Shop、Iron Flowers 和 Fireworks，并为 Fireworks 添加变化后的本地消息。加入一个包含四个位置的诗歌阅读器，然后将一行选中的中文诗句带入最终的河灯状态。将所有历史内容视为当代诠释，而不是真实游览、预订流程或经过验证的复原。确保可见文字在减少动效模式下仍然易读，并避免假定存在后端存储。
调整交互密度
利用夜市章节测试氛围与操作之间的平衡。让四个控件在大标题旁清晰易懂，并使经过测试的 Fireworks 响应明确局部变化，而不是改变整个旅程。在诗歌章节中，展示标题、署名、1 / 4 位置以及上一首/下一首关系，同时避免装饰性缩放遮挡诗句。
端到端检查旅程
在桌面端和窄屏宽度下检查每个章节构图。确认切换语言会保留当前章节，减少动效后的呈现仍使场景上下文和控件清晰可读，并确认选中的诗句在抵达河灯终章时仍可被识别。确认杭州诗歌注释始终附着于其引文，并明确将档案艺术作品呈现为来源素材。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
