从展览到网站

How This Exhibition Site Was Built in Half a Day

向下滚动

01

缘起

Origin

网站本身就是一种展览。

它是线下展览的数字形式——同样的展品、同样的信息层级、同样的视觉语言,只是载体从物理空间变成了屏幕。区别在于,物理空间有时限,数字空间没有。一场为期两天的 Pop-up Exhibition 结束后,场地恢复原状,家具各自回到藏家手中。但它的线上版本可以持久地存在下去,成为一份随时可访问的数字存档。

过去,为一场短期展览单独制作网站,在成本上很难成立。设计、开发、部署——投入的人力和时间与展览本身的周期不成比例。但 AI 的代码生成能力正在改变这个成本结构。设计师与 AI 协作,半天之内可以完成从设计到上线的完整流程。

当建站成本大幅下降,原本"不值得做"的事变得可行。这不只是效率的提升,而是一类新的应用场景被释放——每一场展览,无论持续多久,都可以拥有自己的数字版本。

但成本下降不等于可以在品质上妥协。数字展览与线下展览应当具有同一种气质。最终,最关键的问题仍然是设计。

查看展览 Pierre Jeanneret: Chandigarh Works →

02

设计

Design

在写第一行代码之前,先确定视觉语言。

这次展览网页的设计目标是"画廊白墙感":克制、沉静、让作品说话。微暖白色背景模拟画廊墙面,Playfair Display 衬线体承载展品名称,EB Garamond 斜体标注设计师署名,Inter 无衬线体处理正文信息。三套字体形成清晰的视觉层级——与线下展览中实体台卡的字体系统完全一致。

与 AI 建立设计共识的过程,类似于向建筑师递交设计 brief:先明确色彩体系、字体规则、间距节奏和整体语气,再进入具体的页面构建。这个过程中用到了 impeccable.style——一个专门用于提升 AI 界面生成质量的提示词工具,帮助 AI 理解什么是克制的、有品质的设计,规避 AI 代码生成中常见的过度装饰倾向。

设计不是一步到位的。从第一版到上线版本经历了多轮迭代:字体大小是否合适,段落间距是否形成稳定节奏,图片呈现是居中还是全宽,移动端的阅读体验是否舒适。每一轮都是人来判断,AI 来执行。

这也是目前人机协作中最核心的分工:审美判断属于人,技术实现交给 AI。


03

搭建

Build

把一个本地文件变成互联网上可访问的站点,需要四块基础设施。

GitHub 代码版本管理
Claude Code AI 编码代理(可替换为其他 coding agent)
Vercel 自动化部署平台
Cloudflare CDN 与访问加速

域名是第一步。中国境内域名需要 ICP 备案,如果时间充裕,优先完成备案更为合规稳定。但展览筹备周期紧张时,国际域名和国际托管方案是务实的选择——注册即可使用,不影响上线节奏。

部署流程非常直接:代码推送到 GitHub 后,Vercel 自动完成构建与上线。修改一行文案,推送,几秒后线上即同步更新。这种即时性在本次项目中尤为关键——站点里的所有图片都来自展览现场拍摄,在布展完成后才能获得。从现场拍照、处理图片到更新上线,整个流程需要在展览开放前完成。快速部署能力,让线上展览可以几乎与线下同步呈现。

中国访问是一个现实问题。国际站点在境内的加载速度受限,使用 Cloudflare 作为 CDN 和 DNS 代理,将静态资源缓存到离用户更近的节点,显著改善加载体验。

在展品信息的撰写阶段,使用了多个 AI Agent 并行工作——分别从不同信源检索家具的型号、生产年代、原始用途和设计背景,交叉比对,减少单一信源的偏差。

但需要说明:互联网上关于 Chandigarh 家具的信息质量参差不齐,不同出版物和交易记录之间常有出入。因此,所有展品信息最终经过了人工逐条核实。在准确性这件事上,人的判断仍然是最后一道防线。


这不只是一个项目,而是一种可复用的能力。

这次实践验证了一条路径:线下展览可以在极短的时间内被转化为线上版本。当这条路径被打通,它就不再只适用于这一场展览——任何一次 Pop-up、市集、快闪活动,都可以用同样的方式,快速生成自己的数字存档。

更进一步,线上展览不必是线下的平面复刻。AI 带来的交互式网页能力——滚动叙事、动态排版、响应式布局——可以让数字版本拥有物理空间无法实现的展陈体验。线上与线下,不是替代关系,而是互相增强。

我们把这次实践中积累的完整流程——从展览 Brief、设计定位、内容填充到部署上线——提炼成了一个开源的 AI Skill:exhibit-to-web。它可以被安装到 Claude Code 等 AI 编码工具中,引导任何人通过四个阶段(Brief → Design → Build → Deploy)将一场线下展览快速转化为线上站点。设计方向的确立、内容的结构化采集、多 Agent 信息校对、部署与访问优化——这些在本次项目中逐步摸索出的方法,现在被固化为一套可直接调用的标准化流程。

转瞬即逝的现场,从此有了持久的去处。

开源项目 exhibit-to-web on GitHub →

顺便一提:这篇指南和 exhibit-to-web Skill,是在去展览场地的路上完成的——汽车开着 Autopilot 自动驾驶,我用 Typeless 语音输入工具对着 Claude Code 说话,边聊边写。

Tesla Autopilot 自动驾驶中,MacBook 上运行着 Claude Code

Autopilot + Typeless + Claude Code,时速 77km/h